feat: enhance editor functionality with linkification and configurable extensions

- Updated `defaultExtensions` to accept options for placeholder text and link click behavior.
- Implemented `linkifyContent` utility to automatically convert plain URLs into clickable links in read-only mode.
- Refactored editor content validation to incorporate linkification, improving user experience when viewing content.

Author: Marfuen

packages/ui/src/components/editor/extensions.ts

@@ -15,7 +15,15 @@ import Typography from '@tiptap/extension-typography';
 import Underline from '@tiptap/extension-underline';
 import StarterKit from '@tiptap/starter-kit';
 
-export const defaultExtensions = (placeholder: string = 'Start writing...') => [
+type DefaultExtensionsOptions = {
+  placeholder?: string;
+  openLinksOnClick?: boolean;
+};
+
+export const defaultExtensions = ({
+  placeholder = 'Start writing...',
+  openLinksOnClick = false,
+}: DefaultExtensionsOptions = {}) => [
   StarterKit.configure({
     bulletList: {
       HTMLAttributes: {
@@ -69,10 +77,15 @@ export const defaultExtensions = (placeholder: string = 'Start writing...') => [
   }),
   // Links and images
   Link.configure({
-    openOnClick: false,
+    // Make links clickable when viewing (readOnly). When editing, keep disabled.
+    openOnClick: openLinksOnClick,
+    autolink: true,
+    linkOnPaste: true,
     HTMLAttributes: {
       class:
         'text-muted-foreground underline underline-offset-[3px] hover:text-primary transition-colors cursor-pointer',
+      target: '_blank',
+      rel: 'noopener noreferrer',
     },
   }),
   Image.configure({

packages/ui/src/components/editor/index.tsx

@@ -9,6 +9,7 @@ import { defaultExtensions } from './extensions';
 import { LinkSelector } from './selectors/link-selector';
 import { NodeSelector } from './selectors/node-selector';
 import { TextButtons } from './selectors/text-buttons';
+import { linkifyContent } from './utils/linkify-content';
 import { validateAndFixTipTapContent } from './utils/validate-content';
 
 export interface EditorProps {
@@ -46,11 +47,12 @@ export const Editor = ({
   const [openNode, setOpenNode] = useState(false);
   const [openLink, setOpenLink] = useState(false);
 
-  // Ensure content is properly structured with a doc type and fix any schema issues
-  const formattedContent = initialContent ? validateAndFixTipTapContent(initialContent) : null;
+  // Ensure content is properly structured and add link marks for plain URLs in read-only mode
+  const validated = initialContent ? validateAndFixTipTapContent(initialContent) : null;
+  const formattedContent = readOnly && validated ? linkifyContent(validated) : validated;
 
   const editor = useEditor({
-    extensions: defaultExtensions(placeholder),
+    extensions: defaultExtensions({ placeholder, openLinksOnClick: readOnly }),
     content: formattedContent || '',
     editable: !readOnly,
     immediatelyRender: false,

packages/ui/src/components/editor/utils/linkify-content.ts

@@ -0,0 +1,77 @@
+import type { JSONContent } from '@tiptap/react';
+
+const URL_REGEX = /\b(https?:\/\/[^\s)]+|www\.[^\s)]+)\b/gi;
+
+function createLinkMark(href: string) {
+  const normalized = href.startsWith('http') ? href : `https://${href}`;
+  return {
+    type: 'link',
+    attrs: {
+      href: normalized,
+      target: '_blank',
+      rel: 'noopener noreferrer',
+    },
+  };
+}
+
+function linkifyText(text: string): JSONContent[] {
+  const parts: JSONContent[] = [];
+  let lastIndex = 0;
+  let match: RegExpExecArray | null;
+
+  while ((match = URL_REGEX.exec(text)) !== null) {
+    const [raw] = match;
+    const start = match.index;
+    const end = start + raw.length;
+
+    if (start > lastIndex) {
+      parts.push({ type: 'text', text: text.slice(lastIndex, start) });
+    }
+    parts.push({ type: 'text', text: raw, marks: [createLinkMark(raw) as any] });
+    lastIndex = end;
+  }
+
+  if (lastIndex < text.length) {
+    parts.push({ type: 'text', text: text.slice(lastIndex) });
+  }
+
+  return parts;
+}
+
+export function linkifyContent(doc: JSONContent): JSONContent {
+  if (!doc || typeof doc !== 'object') return doc;
+
+  const recurse = (node: JSONContent): JSONContent => {
+    if (!node) return node;
+
+    if (node.type === 'text' && typeof node.text === 'string') {
+      // If it already has a link mark, leave as-is
+      const hasLink = Array.isArray(node.marks) && node.marks.some((m) => m.type === 'link');
+      if (hasLink) return node;
+      const segments = linkifyText(node.text);
+      // If no links detected, return original
+      if (segments.length === 1 && segments[0].text === node.text && !segments[0].marks) {
+        return node;
+      }
+      return { type: 'text', text: '', content: segments } as any; // handled by parent rewrite below
+    }
+
+    if (Array.isArray(node.content)) {
+      const newChildren: JSONContent[] = [];
+      for (const child of node.content) {
+        const next = recurse(child);
+        // If a text node returned a wrapper with inline content, flatten it
+        if (next && (next as any).content && next.type === 'text' && next.text === '') {
+          newChildren.push(...(((next as any).content as JSONContent[]) || []));
+        } else {
+          newChildren.push(next);
+        }
+      }
+      return { ...node, content: newChildren };
+    }
+
+    return node;
+  };
+
+  return recurse(doc);
+}