@frontlit/text-editor 0.1.0-alpha.1 → 0.1.0-alpha.3

package/dist/index.js

@@ -1,11 +1,11 @@
 "use client";
 import React5, { createContext, useState, useRef, useMemo, useEffect, useCallback, useContext } from 'react';
-import { Node, generateText } from '@tiptap/core';
+import { Node, getSchema, generateText } from '@tiptap/core';
 import { useEditor, EditorContent } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
 import Placeholder from '@tiptap/extension-placeholder';
 import Link from '@tiptap/extension-link';
-import { TableRow, TableHeader, TableCell, Table } from '@tiptap/extension-table';
+import { TableRow, Table, TableCell, TableHeader } from '@tiptap/extension-table';
 import Image from '@tiptap/extension-image';
 import Dropcursor from '@tiptap/extension-dropcursor';
 import Gapcursor from '@tiptap/extension-gapcursor';
@@ -190,7 +190,8 @@ var LinkEditorPopover = ({
             "input",
             {
               ref: inputRef,
-              type: "url",
+              type: "text",
+              inputMode: "url",
               placeholder: "https://example.com",
               value: linkValue,
               onChange: (event) => setLinkValue(event.target.value),
@@ -243,7 +244,8 @@ var LinkEditorPopover = ({
           "input",
           {
             ref: inputRef,
-            type: "url",
+            type: "text",
+            inputMode: "url",
             placeholder: "https://example.com",
             value: linkValue,
             onChange: (event) => setLinkValue(event.target.value),
@@ -327,7 +329,8 @@ function Divider() {
 var Toolbar = ({
   editor,
   onRequestImageUpload,
-  isUploadingImage
+  isUploadingImage,
+  profile = "default"
 }) => {
   const [activePopover, setActivePopover] = useState(null);
   const [wordCount, setWordCount] = useState(0);
@@ -362,7 +365,13 @@ var Toolbar = ({
     };
   }, [editor]);
   if (!editor) return null;
-  const activeHeading = headingOptions.find(
+  const availableHeadingOptions = profile === "documentation" ? [
+    ...headingOptions,
+    { label: "Heading 4", value: "h4", level: 4 },
+    { label: "Heading 5", value: "h5", level: 5 },
+    { label: "Heading 6", value: "h6", level: 6 }
+  ] : headingOptions;
+  const activeHeading = availableHeadingOptions.find(
     (option) => option.level ? editor.isActive("heading", { level: option.level }) : editor.isActive("paragraph")
   ) ?? headingOptions[0];
   const readTime = wordCount === 0 ? 0 : Math.max(1, Math.ceil(wordCount / 200));
@@ -419,7 +428,7 @@ var Toolbar = ({
                 ]
               }
             ),
-            activePopover === "heading" && /* @__PURE__ */ jsx("div", { className: "te-popover absolute left-0 top-full z-30 mt-1 w-40 rounded-md p-1 shadow-lg", children: headingOptions.map((option) => /* @__PURE__ */ jsx(
+            activePopover === "heading" && /* @__PURE__ */ jsx("div", { className: "te-popover absolute left-0 top-full z-30 mt-1 w-40 rounded-md p-1 shadow-lg", children: availableHeadingOptions.map((option) => /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
@@ -452,7 +461,7 @@ var Toolbar = ({
           onClick: () => editor.chain().focus().toggleItalic().run()
         }
       ),
-      /* @__PURE__ */ jsx(
+      profile !== "documentation" && /* @__PURE__ */ jsx(
         IconButton,
         {
           icon: Underline,
@@ -476,9 +485,7 @@ var Toolbar = ({
           icon: Link$1,
           label: "Insert link",
           active: editor.isActive("link"),
-          onClick: () => setActivePopover(
-            (current) => current === "link" ? null : "link"
-          )
+          onClick: () => setActivePopover((current) => current === "link" ? null : "link")
         }
       ),
       /* @__PURE__ */ jsx(Divider, {}),
@@ -523,9 +530,7 @@ var Toolbar = ({
                 className: "flex h-8 items-center gap-1.5 rounded border border-primary px-2.5 text-sm font-semibold text-primary hover:bg-[var(--primary-soft)]",
                 "aria-haspopup": "menu",
                 "aria-expanded": activePopover === "insert",
-                onClick: () => setActivePopover(
-                  (current) => current === "insert" ? null : "insert"
-                ),
+                onClick: () => setActivePopover((current) => current === "insert" ? null : "insert"),
                 children: [
                   /* @__PURE__ */ jsx(Plus, { className: "size-4" }),
                   "Insert"
@@ -706,15 +711,7 @@ var TipTapBubbleMenu = ({
     getReferencedVirtualElement,
     options
   ]);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: menuRef,
-      className,
-      style: { visibility: "hidden" },
-      children
-    }
-  );
+  return /* @__PURE__ */ jsx("div", { ref: menuRef, className, style: { visibility: "hidden" }, children });
 };
 function InlineButton({
   icon: Icon,
@@ -735,7 +732,8 @@ function InlineButton({
   );
 }
 var InlineBubbleMenu = ({
-  editor
+  editor,
+  profile = "default"
 }) => {
   const [isLinkEditing, setIsLinkEditing] = useState(false);
   const openLinkEditor = useCallback(() => {
@@ -778,7 +776,7 @@ var InlineBubbleMenu = ({
               onClick: () => editor.chain().focus().toggleItalic().run()
             }
           ),
-          /* @__PURE__ */ jsx(
+          profile !== "documentation" && /* @__PURE__ */ jsx(
             InlineButton,
             {
               icon: Underline,
@@ -831,7 +829,9 @@ var bubble_menu_default = InlineBubbleMenu;
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-var ImagePickerContext = createContext(null);
+var ImagePickerContext = createContext(
+  null
+);
 function ImagePickerContextProvider({
   pickImage,
   children
@@ -841,10 +841,74 @@ function ImagePickerContextProvider({
 function useImagePicker() {
   return useContext(ImagePickerContext);
 }
+
+// src/docs/urls.ts
+function isSafeDocsUrl(value, image = false) {
+  if (typeof value !== "string" || !value || value !== value.trim()) return false;
+  if (
+    // biome-ignore lint/suspicious/noControlCharactersInRegex: Browsers ignore controls in dangerous protocols.
+    /[\u0000-\u0020\u007f\\]/.test(value) || /%(?:0[0-9a-f]|1[0-9a-f]|7f|5c)/i.test(value)
+  )
+    return false;
+  if (value.startsWith("//")) return false;
+  const privatePath = /\/(?:attachments|private|ticket-attachments|conversation-attachments)(?:\/|$)/i;
+  const signedKey = /^(?:x-amz-.+|x-goog-.+|signature|sig|token|access_token|expires)$/i;
+  if (/^(?:https?:|mailto:)/i.test(value)) {
+    try {
+      const url = new URL(value);
+      if (image && url.protocol !== "https:") return false;
+      if (url.username || url.password) return false;
+      if (url.protocol === "mailto:") return !image && Boolean(url.pathname);
+      if (privatePath.test(decodeURIComponent(url.pathname))) return false;
+      for (const key of url.searchParams.keys()) {
+        if (signedKey.test(key)) return false;
+      }
+      return Boolean(url.hostname);
+    } catch {
+      return false;
+    }
+  }
+  if (image) return false;
+  if (/^[^/?#]*:/.test(value) || /%(?:2f|3a)/i.test(value)) return false;
+  try {
+    const url = new URL(value, "https://docs.invalid/");
+    return !privatePath.test(decodeURIComponent(url.pathname)) && ![...url.searchParams.keys()].some((key) => signedKey.test(key));
+  } catch {
+    return false;
+  }
+}
+
+// src/docs/extensions.ts
+function createDocsExtensions() {
+  return [
+    StarterKit.configure({
+      document: false,
+      underline: false,
+      link: false,
+      dropcursor: false,
+      gapcursor: false,
+      trailingNode: false
+    }),
+    Node.create({ name: "doc", topNode: true, content: "block*" }),
+    Link.extend({
+      addAttributes() {
+        return { ...this.parent?.(), title: { default: null } };
+      }
+    }).configure({ openOnClick: false, isAllowedUri: (url) => isSafeDocsUrl(url) }),
+    Image.configure({ allowBase64: false, resize: false }),
+    Table.configure({ resizable: false }),
+    TableRow,
+    TableCell.extend({ content: "paragraph" }),
+    TableHeader.extend({ content: "paragraph" })
+  ];
+}
+getSchema(createDocsExtensions());
 var Editor = Object.assign(
   ({
     initialContent,
     onChange,
+    onFlushChangeReady,
+    debounceMs = 1e3,
     placeholder,
     children,
     showToolbar = true,
@@ -857,23 +921,28 @@ var Editor = Object.assign(
     className,
     editorClassName,
     contentClassName,
-    beforeContent
+    beforeContent,
+    profile = "default"
   }) => {
     const [isUploading, setIsUploading] = useState(false);
     const fileInputRef = useRef(null);
     const pickImage = useImagePicker();
     const hasInteractedRef = useRef(false);
-    const lastSerializedContentRef = useRef(
-      JSON.stringify(initialContent ?? empty_doc_default)
-    );
+    const lastSerializedContentRef = useRef(JSON.stringify(initialContent ?? empty_doc_default));
     const refreshRef = useRef(refresh);
     const extensions = useMemo(
-      () => createExtensions({ placeholder }),
-      [placeholder]
-    );
-    const changeTimeoutRef = useRef(
-      null
+      () => profile === "documentation" ? [
+        ...createDocsExtensions(),
+        Placeholder.configure({ placeholder: placeholder || "Write something\u2026" })
+      ] : createExtensions({ placeholder }),
+      [placeholder, profile]
     );
+    const changeTimeoutRef = useRef(null);
+    const pendingJsonRef = useRef(null);
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    const debounceMsRef = useRef(debounceMs);
+    debounceMsRef.current = debounceMs;
     const editor = useEditor(
       {
         immediatelyRender: false,
@@ -894,10 +963,13 @@ var Editor = Object.assign(
           if (changeTimeoutRef.current) {
             clearTimeout(changeTimeoutRef.current);
           }
+          pendingJsonRef.current = instance.getJSON();
           changeTimeoutRef.current = setTimeout(() => {
-            onChange(instance.getJSON());
             changeTimeoutRef.current = null;
-          }, 1e3);
+            const json2 = pendingJsonRef.current;
+            pendingJsonRef.current = null;
+            if (json2) onChangeRef.current(json2);
+          }, debounceMsRef.current);
         },
         onSelectionUpdate: ({ editor: instance }) => {
           hasInteractedRef.current = true;
@@ -905,11 +977,26 @@ var Editor = Object.assign(
       },
       [extensions]
     );
+    useEffect(() => {
+      onFlushChangeReady?.(() => {
+        if (!editor || !changeTimeoutRef.current) return;
+        clearTimeout(changeTimeoutRef.current);
+        changeTimeoutRef.current = null;
+        pendingJsonRef.current = null;
+        onChangeRef.current(editor.getJSON());
+      });
+      return () => onFlushChangeReady?.(() => {
+      });
+    }, [editor, onFlushChangeReady]);
     useEffect(() => {
       return () => {
         if (changeTimeoutRef.current) {
           clearTimeout(changeTimeoutRef.current);
+          changeTimeoutRef.current = null;
         }
+        const json2 = pendingJsonRef.current;
+        pendingJsonRef.current = null;
+        if (json2) onChangeRef.current(json2);
       };
     }, []);
     useEffect(() => {
@@ -947,6 +1034,12 @@ var Editor = Object.assign(
     }, [editor, initialContent, refresh]);
     const handleImageUpload = useCallback(
       async (file) => {
+        if (profile === "documentation") {
+          onError?.(
+            "Upload a public image using the media library before inserting it."
+          );
+          return;
+        }
         const sizeLimit = imageSizeLimit ?? 2097152;
         if (file.size > sizeLimit) {
           onError?.("File is larger than the allowed size");
@@ -954,14 +1047,12 @@ var Editor = Object.assign(
         }
         try {
           setIsUploading(true);
-          const dataUrl = await new Promise(
-            (resolve, reject) => {
-              const reader = new FileReader();
-              reader.onload = () => resolve(reader.result);
-              reader.onerror = reject;
-              reader.readAsDataURL(file);
-            }
-          );
+          const dataUrl = await new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = () => resolve(reader.result);
+            reader.onerror = reject;
+            reader.readAsDataURL(file);
+          });
           editor?.chain().focus().setImage({
             src: dataUrl,
             alt: file.name,
@@ -973,7 +1064,7 @@ var Editor = Object.assign(
           setIsUploading(false);
         }
       },
-      [editor]
+      [editor, profile, onError, imageSizeLimit]
     );
     const handleSelectFile = useCallback(
       (event) => {
@@ -989,13 +1080,17 @@ var Editor = Object.assign(
     );
     const insertPickedImage = useCallback(
       (image) => {
+        if (profile === "documentation" && !isSafeDocsUrl(image.src, true)) {
+          onError?.("Documentation images require a stable public HTTPS URL.");
+          return;
+        }
         editor?.chain().focus().setImage({
           src: image.src,
           alt: image.alt,
           title: image.alt
         }).run();
       },
-      [editor]
+      [editor, profile, onError]
     );
     const openFileDialog = useCallback(() => {
       if (pickImage) {
@@ -1012,10 +1107,13 @@ var Editor = Object.assign(
     return /* @__PURE__ */ jsxs(
       "div",
       {
-        className: cn(
-          "tiptap-editor flex flex-col gap-4 border",
-          className
-        ),
+        className: cn("tiptap-editor flex flex-col gap-4 border", className),
+        onPointerDownCapture: () => {
+          hasInteractedRef.current = true;
+        },
+        onKeyDownCapture: () => {
+          hasInteractedRef.current = true;
+        },
         children: [
           editable && showToolbar && /* @__PURE__ */ jsx(
             "div",
@@ -1029,42 +1127,34 @@ var Editor = Object.assign(
                 {
                   editor,
                   onRequestImageUpload: openFileDialog,
-                  isUploadingImage: isUploading
+                  isUploadingImage: isUploading,
+                  profile
                 }
               )
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: "flex w-full justify-center", children: /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: cn(
-                "flex w-full max-w-3xl flex-col",
-                contentClassName
-              ),
-              children: [
-                beforeContent,
-                /* @__PURE__ */ jsx(
-                  EditorContent,
-                  {
-                    editor,
-                    className: `${editorClassName ?? ""} ${editorClassName?.includes("min-h-") ? "" : "min-h-[200px]"}`
-                  }
-                ),
-                pickImage ? null : /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    ref: fileInputRef,
-                    type: "file",
-                    accept: "image/*",
-                    className: "hidden",
-                    onChange: handleSelectFile
-                  }
-                ),
-                children,
-                editor && /* @__PURE__ */ jsx(bubble_menu_default, { editor })
-              ]
-            }
-          ) })
+          /* @__PURE__ */ jsx("div", { className: "flex w-full justify-center", children: /* @__PURE__ */ jsxs("div", { className: cn("flex w-full max-w-3xl flex-col", contentClassName), children: [
+            beforeContent,
+            /* @__PURE__ */ jsx(
+              EditorContent,
+              {
+                editor,
+                className: `${editorClassName ?? ""} ${editorClassName?.includes("min-h-") ? "" : "min-h-[200px]"}`
+              }
+            ),
+            pickImage ? null : /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: fileInputRef,
+                type: "file",
+                accept: "image/*",
+                className: "hidden",
+                onChange: handleSelectFile
+              }
+            ),
+            children,
+            editor && /* @__PURE__ */ jsx(bubble_menu_default, { editor, profile })
+          ] }) })
         ]
       }
     );
@@ -1140,17 +1230,6 @@ function extractTextFromNode(node) {
   }
   return "";
 }
-function textFromChildren(node) {
-  if (node == null || typeof node === "boolean") return "";
-  if (typeof node === "string" || typeof node === "number") {
-    return String(node);
-  }
-  if (Array.isArray(node)) return node.map(textFromChildren).join("");
-  if (React5.isValidElement(node)) {
-    return textFromChildren(node.props.children);
-  }
-  return "";
-}
 async function writeClipboard(text) {
   if (navigator.clipboard?.writeText) {
     await navigator.clipboard.writeText(text);
@@ -1166,13 +1245,8 @@ async function writeClipboard(text) {
   document.execCommand("copy");
   area.remove();
 }
-function RenderedCodeBlock({
-  node,
-  children,
-  language
-}) {
+function CopyCodeButton({ source }) {
   const [copied, setCopied] = useState(false);
-  const source = extractTextFromNode(node) || textFromChildren(children);
   useEffect(() => {
     if (!copied) return;
     const timer = window.setTimeout(() => setCopied(false), 1500);
@@ -1187,23 +1261,73 @@ function RenderedCodeBlock({
       setCopied(false);
     }
   }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: "te-code-copy",
+      "aria-label": copied ? "Copied" : "Copy code",
+      title: copied ? "Copied" : "Copy",
+      onClick: () => {
+        void handleCopy();
+      },
+      children: copied ? /* @__PURE__ */ jsx(Check, { className: "te-code-copy__icon", "aria-hidden": true }) : /* @__PURE__ */ jsx(Copy, { className: "te-code-copy__icon", "aria-hidden": true })
+    }
+  );
+}
+function textFromChildren(node) {
+  if (node == null || typeof node === "boolean") return "";
+  if (typeof node === "string" || typeof node === "number") {
+    return String(node);
+  }
+  if (Array.isArray(node)) return node.map(textFromChildren).join("");
+  if (React5.isValidElement(node)) {
+    return textFromChildren(node.props.children);
+  }
+  return "";
+}
+function RenderedCodeBlock({
+  node,
+  children,
+  language
+}) {
+  const source = extractTextFromNode(node) || textFromChildren(children);
   return /* @__PURE__ */ jsxs("div", { className: "te-code-block", children: [
     /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { className: language ? `language-${language}` : void 0, children }) }),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: "te-code-copy",
-        "aria-label": copied ? "Copied" : "Copy code",
-        title: copied ? "Copied" : "Copy",
-        onClick: () => {
-          void handleCopy();
-        },
-        children: copied ? /* @__PURE__ */ jsx(Check, { className: "te-code-copy__icon", "aria-hidden": true }) : /* @__PURE__ */ jsx(Copy, { className: "te-code-copy__icon", "aria-hidden": true })
-      }
-    )
+    /* @__PURE__ */ jsx(CopyCodeButton, { source })
   ] });
 }
+
+// src/docs/headings.ts
+function docsNodeText(node) {
+  if (typeof node.text === "string") return node.text;
+  if (node.type === "hardBreak") return "\n";
+  return (node.content ?? []).map(docsNodeText).join("");
+}
+function createHeadingIdGenerator() {
+  const used = /* @__PURE__ */ new Set();
+  return (text) => {
+    const base = text.normalize("NFKC").toLowerCase().trim().replace(/[^\p{L}\p{N}\s_-]/gu, "").replace(/\s+/g, "-") || "section";
+    let id = base;
+    let suffix = 2;
+    while (used.has(id)) id = `${base}-${suffix++}`;
+    used.add(id);
+    return id;
+  };
+}
+function extractDocsHeadings(json2) {
+  const nextId = createHeadingIdGenerator();
+  const headings = [];
+  function walk(node) {
+    if (node.type === "heading") {
+      const text = docsNodeText(node);
+      headings.push({ level: Number(node.attrs?.level ?? 1), text, id: nextId(text) });
+    }
+    for (const child of node.content ?? []) walk(child);
+  }
+  if (json2) walk(json2);
+  return headings;
+}
 var typographyClasses = (typography) => [
   typography?.fontFamily,
   typography?.fontSize,
@@ -1230,14 +1354,30 @@ function removeEmptyTextNodes(node) {
     content
   };
 }
-function TextRenderer({ json: json2, className, theme }) {
+function TextRenderer({
+  json: json2,
+  className,
+  theme,
+  profile = "default"
+}) {
   const extensions = createExtensions();
   const content = removeEmptyTextNodes(
     json2 ?? empty_doc_default
   );
+  const docsHeadings = profile === "documentation" ? extractDocsHeadings(content) : [];
+  const renderContent = profile === "documentation" ? getSchema(extensions).nodeFromJSON(content) : content;
+  const headingIds = /* @__PURE__ */ new WeakMap();
+  if (profile === "documentation") {
+    let headingIndex = 0;
+    renderContent.descendants((node) => {
+      if (node.type.name === "heading") {
+        headingIds.set(node, docsHeadings[headingIndex++].id);
+      }
+    });
+  }
   const rendered = renderToReactElement({
     extensions,
-    content,
+    content: renderContent,
     options: {
       nodeMapping: {
         paragraph: ({ children }) => {
@@ -1251,10 +1391,10 @@ function TextRenderer({ json: json2, className, theme }) {
         heading: ({ node, children }) => {
           const level = node?.attrs?.level ?? 1;
           const textContent = extractTextFromNode(node);
-          const id = createId(textContent);
+          const id = profile === "documentation" ? headingIds.get(node) : createId(textContent);
           if (!theme) {
-            const Tag = `h${level}`;
-            return /* @__PURE__ */ jsx(Tag, { id, children });
+            const Tag2 = `h${level}`;
+            return /* @__PURE__ */ jsx(Tag2, { id, children });
           }
           if (level === 1) {
             const classes2 = cn(
@@ -1272,18 +1412,14 @@ function TextRenderer({ json: json2, className, theme }) {
           }
           const classes = cn(
             "scroll-m-20 text-2xl font-semibold tracking-normal",
-            ...typographyClasses(theme?.typography?.header3)
+            ...typographyClasses(
+              profile === "documentation" && level >= 4 ? theme?.typography?.header4 ?? theme?.typography?.header3 : theme?.typography?.header3
+            )
           );
-          return /* @__PURE__ */ jsx("h3", { id, className: classes, children });
+          const Tag = profile === "documentation" ? `h${level}` : "h3";
+          return /* @__PURE__ */ jsx(Tag, { id, className: classes, children });
         },
-        codeBlock: ({ node, children }) => /* @__PURE__ */ jsx(
-          RenderedCodeBlock,
-          {
-            node,
-            language: node?.attrs?.language,
-            children
-          }
-        ),
+        codeBlock: ({ node, children }) => /* @__PURE__ */ jsx(RenderedCodeBlock, { node, language: node?.attrs?.language, children }),
         codeMirror: ({ node, children }) => /* @__PURE__ */ jsx(RenderedCodeBlock, { node, children })
       },
       markMapping: {