@multiplatform.one/rich-text 6.1.0 → 6.4.0

package/dist/cjs/editor/TiptapEditor.cjs

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all) __defProp(target, name, {
@@ -19,15 +17,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-// If the importer is in node compatibility mode or this is not an ESM
-// file that has been converted to a CommonJS file using a Babel-
-// compatible transform (i.e. "__esModule" has not been set), then set
-// "default" to the CommonJS "module.exports" for node compatibility.
-isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-  value: mod,
-  enumerable: true
-}) : target, mod));
 var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
   value: true
 }), mod);
@@ -38,172 +27,30 @@ __export(TiptapEditor_exports, {
 module.exports = __toCommonJS(TiptapEditor_exports);
 var import_react = require("react");
 var import_react2 = require("@tiptap/react");
-var import_core = require("@tiptap/core");
-var import_starter_kit = __toESM(require("@tiptap/starter-kit"));
-var import_extension_placeholder = __toESM(require("@tiptap/extension-placeholder"));
-var import_extension_text_align = __toESM(require("@tiptap/extension-text-align"));
-var import_extension_color = require("@tiptap/extension-color");
-var import_extension_text_style = require("@tiptap/extension-text-style");
-var import_extension_highlight = require("@tiptap/extension-highlight");
-var import_extension_subscript = require("@tiptap/extension-subscript");
-var import_extension_superscript = require("@tiptap/extension-superscript");
-var import_extension_task_list = __toESM(require("@tiptap/extension-task-list"));
-var import_extension_task_item = __toESM(require("@tiptap/extension-task-item"));
-var import_extension_image = __toESM(require("@tiptap/extension-image"));
-var import_extension_code_block_lowlight = __toESM(require("@tiptap/extension-code-block-lowlight"));
-var import_extension_typography = __toESM(require("@tiptap/extension-typography"));
-var import_extension_character_count = __toESM(require("@tiptap/extension-character-count"));
-var import_extension_table = require("@tiptap/extension-table");
-var import_extension_table_row = require("@tiptap/extension-table-row");
-var import_extension_table_header = require("@tiptap/extension-table-header");
-var import_extension_table_cell = require("@tiptap/extension-table-cell");
-var import_lowlight = require("lowlight");
-var import_turndown = __toESM(require("turndown"));
-var import_marked = require("marked");
 var import_tamagui = require("tamagui");
 var import_constants = require("@tamagui/constants");
+var import_theme = require("@multiplatform.one/theme");
+var import_forms = require("@multiplatform.one/forms");
 var import_types = require("../types.cjs");
 var import_context = require("../context.cjs");
+var import_t = require("../shared/t.cjs");
 var import_editorStyles = require("./editorStyles.cjs");
-var import_SlashCommands = require("./SlashCommands.cjs");
-var import_MarkdownPaste = require("./MarkdownPaste.cjs");
-var import_BlockDragHandle = require("./BlockDragHandle.cjs");
+var import_extensions = require("./extensions.cjs");
+var import_capabilities = require("./capabilities.cjs");
+var import_mentions = require("./mentions.cjs");
+var import_codeBlockPreview = require("./codeBlockPreview.cjs");
+var import_markdown = require("./markdown.cjs");
+var import_pasteCleanup = require("./pasteCleanup.cjs");
+var import_suggestionPopup = require("./suggestionPopup.cjs");
 var import_useEditorState = require("./useEditorState.cjs");
 var import_BubbleToolbar = require("../toolbar/BubbleToolbar.cjs");
 var import_LinkBubble = require("../toolbar/LinkBubble.cjs");
 var import_CodeBlockBubble = require("../toolbar/CodeBlockBubble.cjs");
 var import_ImageBubble = require("../toolbar/ImageBubble.cjs");
 var import_TableBubble = require("../toolbar/TableBubble.cjs");
+var import_MathBubble = require("../toolbar/MathBubble.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
-const lowlight = (0, import_lowlight.createLowlight)(import_lowlight.common);
-const turndownService = new import_turndown.default({
-  headingStyle: "atx",
-  codeBlockStyle: "fenced"
-});
-const CodeBlockTabIndent = import_core.Extension.create({
-  name: "codeBlockTabIndent",
-  addKeyboardShortcuts() {
-    return {
-      Tab: ({
-        editor
-      }) => {
-        if (!editor.isActive("codeBlock")) return false;
-        const {
-          state,
-          dispatch
-        } = editor.view;
-        const {
-          from,
-          to
-        } = state.selection;
-        if (from === to) {
-          dispatch(state.tr.insertText("  ", from, to));
-          return true;
-        }
-        const doc = state.doc;
-        const lines = [];
-        doc.nodesBetween(from, to, (node, pos) => {
-          if (node.isTextblock) {
-            lines.push({
-              start: pos + 1
-            });
-          }
-        });
-        if (lines.length === 0) {
-          dispatch(state.tr.insertText("  ", from, to));
-          return true;
-        }
-        let tr = state.tr;
-        let offset = 0;
-        for (const line of lines) {
-          const lineStart = line.start + offset;
-          tr = tr.insertText("  ", lineStart);
-          offset += 2;
-        }
-        dispatch(tr);
-        return true;
-      },
-      "Shift-Tab": ({
-        editor
-      }) => {
-        if (!editor.isActive("codeBlock")) return false;
-        const {
-          state,
-          dispatch
-        } = editor.view;
-        const {
-          from,
-          to,
-          $from
-        } = state.selection;
-        if (from === to) {
-          const lineStart = from - $from.parentOffset;
-          const text = state.doc.textBetween(lineStart, from);
-          const leadingSpaces = text.match(/^ {1,2}/)?.[0];
-          if (leadingSpaces) {
-            dispatch(state.tr.delete(lineStart, lineStart + leadingSpaces.length));
-          }
-          return true;
-        }
-        const doc = state.doc;
-        let tr = state.tr;
-        let offset = 0;
-        doc.nodesBetween(from, to, (node, pos) => {
-          if (node.isTextblock) {
-            const lineStart = pos + 1 + offset;
-            const text = tr.doc.textBetween(lineStart, Math.min(lineStart + node.content.size, tr.doc.content.size));
-            const leadingSpaces = text.match(/^ {1,2}/)?.[0];
-            if (leadingSpaces) {
-              tr = tr.delete(lineStart, lineStart + leadingSpaces.length);
-              offset -= leadingSpaces.length;
-            }
-          }
-        });
-        dispatch(tr);
-        return true;
-      }
-    };
-  }
-});
-const ParagraphEnterKeys = import_core.Extension.create({
-  name: "paragraphEnterKeys",
-  priority: 1e3,
-  addKeyboardShortcuts() {
-    return {
-      "Shift-Enter": ({
-        editor
-      }) => editor.commands.first([() => editor.commands.newlineInCode(), () => editor.commands.splitListItem("listItem"), () => editor.commands.createParagraphNear(), () => editor.commands.liftEmptyBlock(), () => editor.commands.splitBlock()]),
-      "Mod-Enter": ({
-        editor
-      }) => editor.commands.first([() => editor.commands.newlineInCode(), () => editor.commands.createParagraphNear(), () => editor.commands.liftEmptyBlock(), () => editor.commands.splitBlock()])
-    };
-  }
-});
-const ListItemKeys = import_core.Extension.create({
-  name: "listItemKeys",
-  addKeyboardShortcuts() {
-    return {
-      Tab: ({
-        editor
-      }) => {
-        if (editor.isActive("codeBlock")) return false;
-        if (editor.isActive("bulletList") || editor.isActive("orderedList") || editor.isActive("taskList")) {
-          return editor.commands.sinkListItem("listItem") || editor.commands.sinkListItem("taskItem");
-        }
-        return false;
-      },
-      "Shift-Tab": ({
-        editor
-      }) => {
-        if (editor.isActive("codeBlock")) return false;
-        if (editor.isActive("bulletList") || editor.isActive("orderedList") || editor.isActive("taskList")) {
-          return editor.commands.liftListItem("listItem") || editor.commands.liftListItem("taskItem");
-        }
-        return false;
-      }
-    };
-  }
-});
+const MOTION_MS = 120;
 const EditorContainer = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "TiptapEditorContainer",
   flex: 1,
@@ -211,9 +58,10 @@ const EditorContainer = (0, import_tamagui.styled)(import_tamagui.View, {
   overflow: "hidden"
 });
 const TiptapEditor = (0, import_react.memo)((0, import_react.forwardRef)(({
+  capabilities = "full",
   initialContent = "",
   initialJSON,
-  placeholder = "Start writing...",
+  placeholder: placeholderProp,
   editable = true,
   autoFocus = false,
   onChange,
@@ -226,9 +74,14 @@ const TiptapEditor = (0, import_react.memo)((0, import_react.forwardRef)(({
   showBubbleToolbar = false,
   bodyFontFamily,
   headingFontFamily,
-  editorMode = "richtext"
+  editorMode = "richtext",
+  fullscreen = false,
+  onImageUpload,
+  onFileUpload,
+  mentions
 }, ref) => {
   const _ctx = import_context.RichEditorContext.useStyledContext();
+  const placeholder = placeholderProp ?? (0, import_t.t)("Start writing...");
   const internalRef = (0, import_react.useRef)(null);
   const stateRafRef = (0, import_react.useRef)(0);
   const changeRafRef = (0, import_react.useRef)(0);
@@ -236,60 +89,45 @@ const TiptapEditor = (0, import_react.memo)((0, import_react.forwardRef)(({
   const onChangeRef = (0, import_react.useRef)(onChange);
   const [markdownSource, setMarkdownSource] = (0, import_react.useState)("");
   const prevModeRef = (0, import_react.useRef)(editorMode);
+  const theme = (0, import_tamagui.useTheme)();
+  const themeName = (0, import_tamagui.useThemeName)();
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const motionMs = knobProps.transition !== void 0 ? MOTION_MS : 0;
+  const scopeClass = `rt-scope-${(0, import_react.useId)().replace(/[^a-zA-Z0-9-]/g, "")}`;
+  const mentionsRef = (0, import_react.useRef)(mentions);
+  mentionsRef.current = mentions;
+  const [mentionExtension] = (0, import_react.useState)(() => mentions ? (0, import_mentions.createMentionExtension)({
+    trigger: mentions.trigger,
+    items: query => mentionsRef.current?.items(query) ?? []
+  }) : null);
   (0, import_react.useEffect)(() => {
     onStateChangeRef.current = onStateChange;
     onChangeRef.current = onChange;
   });
+  const [extensions] = (0, import_react.useState)(() => (0, import_extensions.buildEditorExtensions)({
+    capabilities,
+    placeholder,
+    mentionExtension
+  }));
   const editor = (0, import_react2.useEditor)({
-    extensions: [import_starter_kit.default.configure({
-      heading: {
-        levels: [1, 2, 3, 4, 5, 6],
-        HTMLAttributes: {
-          dir: "auto"
-        }
-      },
-      paragraph: {
-        HTMLAttributes: {
-          dir: "auto"
-        }
-      },
-      link: {
-        openOnClick: false,
-        HTMLAttributes: {
-          rel: "noopener noreferrer",
-          target: "_blank"
-        }
-      },
-      bulletList: {
-        keepMarks: true
-      },
-      orderedList: {
-        keepMarks: true
-      },
-      codeBlock: false,
-      hardBreak: false
-    }), import_extension_code_block_lowlight.default.configure({
-      lowlight,
-      exitOnTripleEnter: true,
-      exitOnArrowDown: false
-    }), ParagraphEnterKeys, CodeBlockTabIndent, ListItemKeys, import_extension_typography.default, import_extension_character_count.default, import_SlashCommands.SlashCommands, import_MarkdownPaste.MarkdownPaste, import_BlockDragHandle.BlockDragHandle, import_extension_table.Table.configure({
-      resizable: true
-    }), import_extension_table_row.TableRow, import_extension_table_header.TableHeader, import_extension_table_cell.TableCell, import_extension_placeholder.default.configure({
-      placeholder
-    }), import_extension_text_align.default.configure({
-      types: ["heading", "paragraph"],
-      defaultAlignment: "left"
-    }), import_extension_text_style.TextStyle, import_extension_color.Color, import_extension_highlight.Highlight.configure({
-      multicolor: true
-    }), import_extension_subscript.Subscript, import_extension_superscript.Superscript, import_extension_task_list.default, import_extension_task_item.default.configure({
-      nested: true
-    }), import_extension_image.default.configure({
-      inline: true,
-      allowBase64: true
-    })],
-    content: initialJSON || initialContent,
+    extensions,
+    // In markdown capabilities the incoming string IS markdown
+    content: initialJSON || (capabilities === "markdown" ? (0, import_markdown.markdownToHtml)(initialContent) : initialContent),
     editable,
     autofocus: autoFocus,
+    // No htmlFor target exists for the contenteditable — name it directly
+    // (axe aria-input-field-name); placeholder doubles as the name.
+    editorProps: {
+      attributes: {
+        role: "textbox",
+        "aria-multiline": "true",
+        "aria-label": placeholder || (0, import_t.t)("Rich text editor")
+      },
+      // Strip Google Docs / Word clipboard junk before ProseMirror parses
+      transformPastedHTML: import_pasteCleanup.cleanPastedHtml
+    },
     injectCSS: false,
     immediatelyRender: false,
     shouldRerenderOnTransaction: false,
@@ -300,7 +138,7 @@ const TiptapEditor = (0, import_react.memo)((0, import_react.forwardRef)(({
       changeRafRef.current = requestAnimationFrame(() => {
         const html = editor2.getHTML();
         const json = editor2.getJSON();
-        onChangeRef.current?.(html, json);
+        onChangeRef.current?.(capabilities === "markdown" ? (0, import_markdown.htmlToMarkdown)(html) : html, json);
       });
     },
     onTransaction: ({
@@ -314,29 +152,60 @@ const TiptapEditor = (0, import_react.memo)((0, import_react.forwardRef)(({
     onFocus: () => onFocus?.(),
     onBlur: () => onBlur?.()
   });
+  (0, import_react.useEffect)(() => {
+    if (!editor) return;
+    editor.storage.mediaUpload.handlers = {
+      onImageUpload,
+      onFileUpload
+    };
+  }, [editor, onImageUpload, onFileUpload]);
+  (0, import_react.useEffect)(() => {
+    if (!editor) return;
+    const radiusToken = (0, import_forms.clampRadiusForLargeComponent)(knobProps.borderRadius.borderRadius, 4);
+    const radiusValue = typeof radiusToken === "number" ? radiusToken : (0, import_tamagui.getTokens)().radius?.[radiusToken]?.val ?? import_suggestionPopup.fallbackSuggestionChrome.radius;
+    const rowPadToken = import_theme.menuRowFrame.paddingHorizontal;
+    const rowPaddingX = (0, import_tamagui.getTokens)().space?.[rowPadToken]?.val ?? import_suggestionPopup.fallbackSuggestionChrome.rowPaddingX;
+    const shadowMain = theme.shadow2?.val;
+    const shadowSoft = theme.shadow1?.val;
+    const chrome = {
+      background: theme.background?.val ?? import_suggestionPopup.fallbackSuggestionChrome.background,
+      borderColor: theme.borderColor?.val ?? import_suggestionPopup.fallbackSuggestionChrome.borderColor,
+      activeBackground: theme.color4?.val ?? import_suggestionPopup.fallbackSuggestionChrome.activeBackground,
+      iconTileBackground: theme.color3?.val ?? import_suggestionPopup.fallbackSuggestionChrome.iconTileBackground,
+      titleColor: theme.color12?.val ?? import_suggestionPopup.fallbackSuggestionChrome.titleColor,
+      descriptionColor: theme.color11?.val ?? import_suggestionPopup.fallbackSuggestionChrome.descriptionColor,
+      radius: typeof radiusValue === "number" ? radiusValue : import_suggestionPopup.fallbackSuggestionChrome.radius,
+      shadow: shadowMain && shadowSoft ? `0px 8px 28px ${shadowMain}, 0px 2px 6px ${shadowSoft}` : import_suggestionPopup.fallbackSuggestionChrome.shadow,
+      motionMs,
+      rowPaddingX: typeof rowPaddingX === "number" ? rowPaddingX : import_suggestionPopup.fallbackSuggestionChrome.rowPaddingX
+    };
+    editor.storage.suggestionChrome.value = chrome;
+  }, [editor, theme, knobProps.borderRadius.borderRadius, motionMs]);
+  (0, import_react.useEffect)(() => {
+    if (!editor) return;
+    (0, import_codeBlockPreview.setPreviewChrome)(editor, {
+      scheme: String(themeName).startsWith("dark") ? "dark" : "light",
+      fontFamily: bodyFontFamily
+    });
+  }, [editor, themeName, bodyFontFamily]);
   (0, import_react.useEffect)(() => {
     if (!editor) return;
     if (prevModeRef.current === editorMode) return;
     prevModeRef.current = editorMode;
     if (editorMode === "markdown") {
-      setMarkdownSource(turndownService.turndown(editor.getHTML()));
+      setMarkdownSource((0, import_markdown.htmlToMarkdown)(editor.getHTML()));
     } else {
-      const html = import_marked.marked.parse(markdownSource, {
-        async: false
-      });
-      editor.commands.setContent(html);
+      editor.commands.setContent((0, import_markdown.markdownToHtml)(markdownSource));
     }
   }, [editorMode, editor, markdownSource]);
   const handleMarkdownChange = (0, import_react.useCallback)(e => {
     const md = e.target.value;
     setMarkdownSource(md);
-    const html = import_marked.marked.parse(md, {
-      async: false
-    });
-    onChangeRef.current?.(html, null);
-  }, []);
+    onChangeRef.current?.(capabilities === "markdown" ? md : (0, import_markdown.markdownToHtml)(md), null);
+  }, [capabilities]);
   const executeCommand = (0, import_react.useCallback)((command, payload) => {
     if (!editor) return;
+    if (!(0, import_capabilities.isCommandInCapabilities)(command, capabilities)) return;
     const chain = editor.chain().focus();
     switch (command) {
       case "bold":
@@ -418,11 +287,24 @@ const TiptapEditor = (0, import_react.memo)((0, import_react.forwardRef)(({
         break;
       case "link":
         if (payload?.href) {
-          chain.setLink({
-            href: payload.href
-          }).run();
+          if (editor.state.selection.empty && !editor.isActive("link")) {
+            chain.insertContent({
+              type: "text",
+              text: payload.text ?? payload.href,
+              marks: [{
+                type: "link",
+                attrs: {
+                  href: payload.href
+                }
+              }]
+            }).run();
+          } else {
+            chain.extendMarkRange("link").setLink({
+              href: payload.href
+            }).run();
+          }
         } else {
-          chain.unsetLink().run();
+          chain.extendMarkRange("link").unsetLink().run();
         }
         break;
       case "undo":
@@ -509,8 +391,14 @@ const TiptapEditor = (0, import_react.memo)((0, import_react.forwardRef)(({
     getState: () => (0, import_useEditorState.getEditorStateFromTiptap)(editor),
     getHTML: () => editor?.getHTML() || "",
     getJSON: () => editor?.getJSON() || null,
+    getMarkdown: () => (0, import_markdown.htmlToMarkdown)(editor?.getHTML() || ""),
     setHTML: html => editor?.commands.setContent(html),
     setJSON: json => editor?.commands.setContent(json),
+    // External value sync (not a user edit): emitUpdate false so the
+    // host's own set does not echo back through onChange.
+    setMarkdown: markdown => editor?.commands.setContent((0, import_markdown.markdownToHtml)(markdown), {
+      emitUpdate: false
+    }),
     focus: () => editor?.commands.focus(),
     blur: () => editor?.commands.blur()
   }), [editor, executeCommand]);
@@ -520,20 +408,25 @@ const TiptapEditor = (0, import_react.memo)((0, import_react.forwardRef)(({
     minHeight,
     maxHeight,
     bodyFontFamily,
-    headingFontFamily
-  }), [minHeight, maxHeight, bodyFontFamily, headingFontFamily]);
+    headingFontFamily,
+    fullscreen,
+    motionMs,
+    scopeClass
+  }), [minHeight, maxHeight, bodyFontFamily, headingFontFamily, fullscreen, motionMs, scopeClass]);
   if (editorMode === "markdown") {
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(EditorContainer, {
-      minHeight,
-      maxHeight,
+      minHeight: fullscreen ? 0 : minHeight,
+      maxHeight: fullscreen ? void 0 : maxHeight,
       overflow: "hidden",
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)("textarea", {
         value: markdownSource,
         onChange: handleMarkdownChange,
+        "aria-label": (0, import_t.t)("Markdown source"),
         style: {
           width: "100%",
-          minHeight,
-          maxHeight: maxHeight || void 0,
+          minHeight: fullscreen ? 0 : minHeight,
+          maxHeight: fullscreen ? void 0 : maxHeight || void 0,
+          flex: fullscreen ? "1 1 0%" : void 0,
           padding: "12px 12px 12px 16px",
           border: "none",
           outline: "none",
@@ -551,8 +444,9 @@ const TiptapEditor = (0, import_react.memo)((0, import_react.forwardRef)(({
     });
   }
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(EditorContainer, {
-    minHeight,
-    maxHeight,
+    className: scopeClass,
+    minHeight: fullscreen ? 0 : minHeight,
+    maxHeight: fullscreen ? void 0 : maxHeight,
     overflow: "hidden",
     children: [import_constants.isWeb && /* @__PURE__ */(0, import_jsx_runtime.jsx)("style", {
       children: editorCSS
@@ -560,7 +454,8 @@ const TiptapEditor = (0, import_react.memo)((0, import_react.forwardRef)(({
       children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_BubbleToolbar.BubbleToolbar, {
         editor,
         editorRef: internalRef,
-        state: import_types.defaultEditorState
+        state: import_types.defaultEditorState,
+        capabilities
       }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_LinkBubble.LinkBubble, {
         editor
       }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_CodeBlockBubble.CodeBlockBubble, {
@@ -568,10 +463,18 @@ const TiptapEditor = (0, import_react.memo)((0, import_react.forwardRef)(({
       }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ImageBubble.ImageBubble, {
         editor
       }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TableBubble.TableBubble, {
-        editor
+        editor,
+        capabilities
       })]
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.EditorContent, {
+    }), editable && capabilities !== "markdown" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_MathBubble.MathBubble, {
       editor
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.EditorContent, {
+      editor,
+      style: fullscreen ? {
+        flex: "1 1 0%",
+        minHeight: 0,
+        overflowY: "auto"
+      } : void 0
     })]
   });
 }));