@multiplatform.one/rich-text 6.3.0 → 6.4.1

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,26 +27,6 @@ __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_typography = __toESM(require("@tiptap/extension-typography"));
-var import_extension_character_count = __toESM(require("@tiptap/extension-character-count"));
-var import_extension_details = require("@tiptap/extension-details");
-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_tamagui = require("tamagui");
 var import_constants = require("@tamagui/constants");
 var import_theme = require("@multiplatform.one/theme");
@@ -66,13 +35,9 @@ 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_media = require("./media.cjs");
+var import_extensions = require("./extensions.cjs");
+var import_capabilities = require("./capabilities.cjs");
 var import_mentions = require("./mentions.cjs");
-var import_emoji = require("./emoji.cjs");
-var import_mathematics = require("./mathematics.cjs");
 var import_codeBlockPreview = require("./codeBlockPreview.cjs");
 var import_markdown = require("./markdown.cjs");
 var import_pasteCleanup = require("./pasteCleanup.cjs");
@@ -85,132 +50,7 @@ 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 MOTION_MS = 120;
-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 EditorContainer = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "TiptapEditorContainer",
   flex: 1,
@@ -218,6 +58,7 @@ 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: placeholderProp,
@@ -265,69 +106,15 @@ const TiptapEditor = (0, import_react.memo)((0, import_react.forwardRef)(({
     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_codeBlockPreview.CodeBlockWithPreview.configure({
-      lowlight,
-      exitOnTripleEnter: true,
-      exitOnArrowDown: false
-    }), ParagraphEnterKeys, CodeBlockTabIndent, ListItemKeys,
-    // superscriptTwo/Three would mangle typed TeX (`$E=mc^2$` became
-    // `E=mc²` before the math input rule ran) — off, rest stays.
-    import_extension_typography.default.configure({
-      superscriptTwo: false,
-      superscriptThree: false
-    }), import_extension_character_count.default, import_SlashCommands.SlashCommands, import_MarkdownPaste.MarkdownPaste, import_media.MediaUpload, import_suggestionPopup.SuggestionChromeStore, import_codeBlockPreview.PreviewChromeStore, import_emoji.EmojiSuggestion, import_mathematics.InlineMath,
-    // Collapsible sections (GitLab <details> parity). persist: true
-    // is the extension's supported mode: its node view re-syncs the
-    // open state from node.attrs on every update, so ephemeral
-    // (persist: false) toggles get reverted by the next transaction.
-    // The open state therefore lives in the doc and serializes as
-    // `<details open>` — valid GitLab markdown.
-    import_extension_details.Details.configure({
-      persist: true
-    }), import_extension_details.DetailsSummary, import_extension_details.DetailsContent, ...(mentionExtension ? [mentionExtension] : []), 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
@@ -351,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: ({
@@ -414,10 +201,11 @@ const TiptapEditor = (0, import_react.memo)((0, import_react.forwardRef)(({
   const handleMarkdownChange = (0, import_react.useCallback)(e => {
     const md = e.target.value;
     setMarkdownSource(md);
-    onChangeRef.current?.((0, import_markdown.markdownToHtml)(md), 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":
@@ -603,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]);
@@ -660,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, {
@@ -668,9 +463,10 @@ 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
       })]
-    }), editable && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_MathBubble.MathBubble, {
+    }), editable && capabilities !== "markdown" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_MathBubble.MathBubble, {
       editor
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.EditorContent, {
       editor,