feat: add link extension support and styling to editor components

apps/web/components/Objects/Activities/DynamicCanva/DynamicCanva.tsx

@@ -32,6 +32,7 @@ import TableHeader from '@tiptap/extension-table-header'
 import TableRow from '@tiptap/extension-table-row'
 import TableCell from '@tiptap/extension-table-cell'
 import UserBlock from '@components/Objects/Editor/Extensions/Users/UserBlock'
+import { getLinkExtension } from '@components/Objects/Editor/EditorConf'
 
 interface Editor {
   content: string
@@ -112,6 +113,7 @@ function Canva(props: Editor) {
       Table.configure({
         resizable: true,
       }),
+      getLinkExtension(),
       TableRow,
       TableHeader,
       TableCell,
@@ -194,6 +196,19 @@ const CanvaWrapper = styled.div`
       margin-bottom: 10px;
     }
 
+    // Link styling
+    a {
+      color: #2563eb;
+      text-decoration: underline;
+      cursor: pointer;
+      transition: color 0.2s ease;
+
+      &:hover {
+        color: #1d4ed8;
+        text-decoration: none;
+      }
+    }
+
     ul,
     ol {
       padding: 0 1rem;

apps/web/components/Objects/Editor/Editor.tsx

@@ -32,6 +32,8 @@ import TableRow from '@tiptap/extension-table-row'
 import ToolTip from '@components/Objects/StyledElements/Tooltip/Tooltip'
 import Link from 'next/link'
 import { getCourseThumbnailMediaDirectory } from '@services/media/media'
+import { getLinkExtension } from './EditorConf'
+import { Link as LinkExtension } from '@tiptap/extension-link'
 
 
 // Lowlight
@@ -151,6 +153,7 @@ function Editor(props: Editor) {
       TableRow,
       TableHeader,
       TableCell,
+      getLinkExtension(),
     ],
     content: props.content,
     immediatelyRender: false,
@@ -204,7 +207,7 @@ function Editor(props: Editor) {
                       props.org?.org_uuid,
                       props.course.course_uuid,
                       props.course.thumbnail_image
-                    ) : getUriWithOrg(props.org?.slug,'/empty_thumbnail.png')}`}
+                    ) : getUriWithOrg(props.org?.slug, '/empty_thumbnail.png')}`}
                     alt=""
                   ></EditorInfoThumbnail>
                 </Link>
@@ -459,6 +462,19 @@ export const EditorContentWrapper = styled.div`
       margin-bottom: 10px;
     }
 
+    // Link styling
+    a {
+      color: #2563eb;
+      text-decoration: underline;
+      cursor: pointer;
+      transition: color 0.2s ease;
+
+      &:hover {
+        color: #1d4ed8;
+        text-decoration: none;
+      }
+    }
+
     padding-left: 20px;
     padding-right: 20px;
     padding-bottom: 20px;

apps/web/components/Objects/Editor/EditorConf.ts

@@ -0,0 +1,59 @@
+import { Link as LinkExtension } from '@tiptap/extension-link'
+
+export const getLinkExtension = () => {
+  return LinkExtension.configure({
+    openOnClick: true,
+    HTMLAttributes: {
+      target: '_blank',
+      rel: 'noopener noreferrer',
+    },
+    autolink: true,
+    defaultProtocol: 'https',
+    protocols: ['http', 'https'],
+    isAllowedUri: (url: string, ctx: any) => {
+      try {
+        // construct URL
+        const parsedUrl = url.includes(':') ? new URL(url) : new URL(`${ctx.defaultProtocol}://${url}`)
+
+        // use default validation
+        if (!ctx.defaultValidate(parsedUrl.href)) {
+          return false
+        }
+
+        // disallowed protocols
+        const disallowedProtocols = ['ftp', 'file', 'mailto']
+        const protocol = parsedUrl.protocol.replace(':', '')
+
+        if (disallowedProtocols.includes(protocol)) {
+          return false
+        }
+
+        // only allow protocols specified in ctx.protocols
+        const allowedProtocols = ctx.protocols.map((p: any) => (typeof p === 'string' ? p : p.scheme))
+
+        if (!allowedProtocols.includes(protocol)) {
+          return false
+        }
+
+        // all checks have passed
+        return true
+      } catch {
+        return false
+      }
+    },
+    shouldAutoLink: (url: string) => {
+      try {
+        // construct URL
+        const parsedUrl = url.includes(':') ? new URL(url) : new URL(`https://${url}`)
+
+        // only auto-link if the domain is not in the disallowed list
+        const disallowedDomains = ['example-no-autolink.com', 'another-no-autolink.com']
+        const domain = parsedUrl.hostname
+
+        return !disallowedDomains.includes(domain)
+      } catch {
+        return false
+      }
+    },
+  })
+} 

apps/web/components/Objects/Editor/Toolbar/LinkInputTooltip.tsx

@@ -0,0 +1,118 @@
+import React, { useState, useEffect } from 'react'
+import styled from 'styled-components'
+import { CheckIcon, Cross2Icon } from '@radix-ui/react-icons'
+
+interface LinkInputTooltipProps {
+  onSave: (url: string) => void
+  onCancel: () => void
+  currentUrl?: string
+}
+
+const LinkInputTooltip: React.FC<LinkInputTooltipProps> = ({ onSave, onCancel, currentUrl }) => {
+  const [url, setUrl] = useState(currentUrl || '')
+
+  useEffect(() => {
+    setUrl(currentUrl || '')
+  }, [currentUrl])
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (url) {
+      // Ensure the URL has a protocol
+      const formattedUrl = url.startsWith('http://') || url.startsWith('https://') 
+        ? url 
+        : `https://${url}`
+      onSave(formattedUrl)
+    }
+  }
+
+  return (
+    <TooltipContainer>
+      <Form onSubmit={handleSubmit}>
+        <Input
+          type="text"
+          placeholder="Enter URL"
+          value={url}
+          onChange={(e) => setUrl(e.target.value)}
+          autoFocus
+        />
+        <ButtonGroup>
+          <SaveButton type="submit" disabled={!url}>
+            <CheckIcon />
+          </SaveButton>
+          <CancelButton type="button" onClick={onCancel}>
+            <Cross2Icon />
+          </CancelButton>
+        </ButtonGroup>
+      </Form>
+    </TooltipContainer>
+  )
+}
+
+const TooltipContainer = styled.div`
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background: white;
+  border: 1px solid rgba(217, 217, 217, 0.5);
+  border-radius: 6px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  padding: 8px;
+  margin-top: 4px;
+`
+
+const Form = styled.form`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`
+
+const Input = styled.input`
+  padding: 4px 8px;
+  border: 1px solid rgba(217, 217, 217, 0.5);
+  border-radius: 4px;
+  font-size: 12px;
+  width: 200px;
+
+  &:focus {
+    outline: none;
+    border-color: rgba(217, 217, 217, 0.8);
+  }
+`
+
+const ButtonGroup = styled.div`
+  display: flex;
+  gap: 2px;
+`
+
+const Button = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  background: rgba(217, 217, 217, 0.24);
+  transition: background 0.2s;
+
+  &:hover {
+    background: rgba(217, 217, 217, 0.48);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`
+
+const SaveButton = styled(Button)`
+  color: #4CAF50;
+`
+
+const CancelButton = styled(Button)`
+  color: #F44336;
+`
+
+export default LinkInputTooltip 

apps/web/components/Objects/Editor/Toolbar/ToolbarButtons.tsx

@@ -23,6 +23,7 @@ import {
   FileText,
   ImagePlus,
   Lightbulb,
+  Link2,
   MousePointerClick,
   Sigma,
   Table,
@@ -34,9 +35,12 @@ import {
 import { SiYoutube } from '@icons-pack/react-simple-icons'
 import ToolTip from '@components/Objects/StyledElements/Tooltip/Tooltip'
 import React from 'react'
+import LinkInputTooltip from './LinkInputTooltip'
 
 export const ToolbarButtons = ({ editor, props }: any) => {
   const [showTableMenu, setShowTableMenu] = React.useState(false)
+  const [showLinkInput, setShowLinkInput] = React.useState(false)
+  const linkButtonRef = React.useRef<HTMLDivElement>(null)
 
   if (!editor) {
     return null
@@ -83,6 +87,47 @@ export const ToolbarButtons = ({ editor, props }: any) => {
     }
   ]
 
+  const handleLinkClick = () => {
+    // Store the current selection
+    const { from, to } = editor.state.selection
+    
+    if (editor.isActive('link')) {
+      const currentLink = editor.getAttributes('link')
+      setShowLinkInput(true)
+    } else {
+      setShowLinkInput(true)
+    }
+
+    // Restore the selection after a small delay to ensure the tooltip is rendered
+    setTimeout(() => {
+      editor.commands.setTextSelection({ from, to })
+    }, 0)
+  }
+
+  const getCurrentLinkUrl = () => {
+    if (editor.isActive('link')) {
+      return editor.getAttributes('link').href
+    }
+    return ''
+  }
+
+  const handleLinkSave = (url: string) => {
+    editor
+      .chain()
+      .focus()
+      .setLink({ 
+        href: url,
+        target: '_blank',
+        rel: 'noopener noreferrer'
+      })
+      .run()
+    setShowLinkInput(false)
+  }
+
+  const handleLinkCancel = () => {
+    setShowLinkInput(false)
+  }
+
   return (
     <ToolButtonsWrapper>
       <ToolBtn onClick={() => editor.chain().focus().undo().run()}>
@@ -185,6 +230,24 @@ export const ToolbarButtons = ({ editor, props }: any) => {
           <AlertTriangle size={15} />
         </ToolBtn>
       </ToolTip>
+      <ToolTip content={'Link'}>
+        <div style={{ position: 'relative' }}>
+          <ToolBtn
+            ref={linkButtonRef}
+            onClick={handleLinkClick}
+            className={editor.isActive('link') ? 'is-active' : ''}
+          >
+            <Link2 size={15} />
+          </ToolBtn>
+          {showLinkInput && (
+            <LinkInputTooltip
+              onSave={handleLinkSave}
+              onCancel={handleLinkCancel}
+              currentUrl={getCurrentLinkUrl()}
+            />
+          )}
+        </div>
+      </ToolTip>
       <ToolTip content={'Image'}>
         <ToolBtn
           onClick={() =>