@multiplatform.one/rich-text 6.1.0 → 6.4.0

package/dist/jsx/editor/TiptapEditor.native.js

@@ -1,10 +1,8 @@
 "use strict";
 
-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, {
@@ -21,15 +19,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);
@@ -41,220 +30,29 @@ module.exports = __toCommonJS(TiptapEditor_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 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.native.js");
 var import_context = require("../context.native.js");
+var import_t = require("../shared/t.native.js");
 var import_editorStyles = require("./editorStyles.native.js");
-var import_SlashCommands = require("./SlashCommands.native.js");
-var import_MarkdownPaste = require("./MarkdownPaste.native.js");
-var import_BlockDragHandle = require("./BlockDragHandle.native.js");
+var import_extensions = require("./extensions.native.js");
+var import_capabilities = require("./capabilities.native.js");
+var import_mentions = require("./mentions.native.js");
+var import_codeBlockPreview = require("./codeBlockPreview.native.js");
+var import_markdown = require("./markdown.native.js");
+var import_pasteCleanup = require("./pasteCleanup.native.js");
+var import_suggestionPopup = require("./suggestionPopup.native.js");
 var import_useEditorState = require("./useEditorState.native.js");
 var import_BubbleToolbar = require("../toolbar/BubbleToolbar.native.js");
 var import_LinkBubble = require("../toolbar/LinkBubble.native.js");
 var import_CodeBlockBubble = require("../toolbar/CodeBlockBubble.native.js");
 var import_ImageBubble = require("../toolbar/ImageBubble.native.js");
 var import_TableBubble = require("../toolbar/TableBubble.native.js");
-var lowlight = (0, import_lowlight.createLowlight)(import_lowlight.common);
-var turndownService = new import_turndown.default({
-  headingStyle: "atx",
-  codeBlockStyle: "fenced"
-});
-var CodeBlockTabIndent = import_core.Extension.create({
-  name: "codeBlockTabIndent",
-  addKeyboardShortcuts() {
-    return {
-      Tab: function Tab(param) {
-        var {
-          editor
-        } = param;
-        if (!editor.isActive("codeBlock")) return false;
-        var {
-          state,
-          dispatch
-        } = editor.view;
-        var {
-          from,
-          to
-        } = state.selection;
-        if (from === to) {
-          dispatch(state.tr.insertText("  ", from, to));
-          return true;
-        }
-        var doc = state.doc;
-        var lines = [];
-        doc.nodesBetween(from, to, function (node, pos) {
-          if (node.isTextblock) {
-            lines.push({
-              start: pos + 1
-            });
-          }
-        });
-        if (lines.length === 0) {
-          dispatch(state.tr.insertText("  ", from, to));
-          return true;
-        }
-        var tr = state.tr;
-        var offset = 0;
-        var _iteratorNormalCompletion = true,
-          _didIteratorError = false,
-          _iteratorError = void 0;
-        try {
-          for (var _iterator = lines[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-            var line = _step.value;
-            var lineStart = line.start + offset;
-            tr = tr.insertText("  ", lineStart);
-            offset += 2;
-          }
-        } catch (err) {
-          _didIteratorError = true;
-          _iteratorError = err;
-        } finally {
-          try {
-            if (!_iteratorNormalCompletion && _iterator.return != null) {
-              _iterator.return();
-            }
-          } finally {
-            if (_didIteratorError) {
-              throw _iteratorError;
-            }
-          }
-        }
-        dispatch(tr);
-        return true;
-      },
-      "Shift-Tab": function (param) {
-        var {
-          editor
-        } = param;
-        if (!editor.isActive("codeBlock")) return false;
-        var {
-          state,
-          dispatch
-        } = editor.view;
-        var {
-          from,
-          to,
-          $from
-        } = state.selection;
-        if (from === to) {
-          var _text_match;
-          var lineStart = from - $from.parentOffset;
-          var text = state.doc.textBetween(lineStart, from);
-          var leadingSpaces = (_text_match = text.match(/^ {1,2}/)) === null || _text_match === void 0 ? void 0 : _text_match[0];
-          if (leadingSpaces) {
-            dispatch(state.tr.delete(lineStart, lineStart + leadingSpaces.length));
-          }
-          return true;
-        }
-        var doc = state.doc;
-        var tr = state.tr;
-        var offset = 0;
-        doc.nodesBetween(from, to, function (node, pos) {
-          if (node.isTextblock) {
-            var _text_match2;
-            var lineStart2 = pos + 1 + offset;
-            var text2 = tr.doc.textBetween(lineStart2, Math.min(lineStart2 + node.content.size, tr.doc.content.size));
-            var leadingSpaces2 = (_text_match2 = text2.match(/^ {1,2}/)) === null || _text_match2 === void 0 ? void 0 : _text_match2[0];
-            if (leadingSpaces2) {
-              tr = tr.delete(lineStart2, lineStart2 + leadingSpaces2.length);
-              offset -= leadingSpaces2.length;
-            }
-          }
-        });
-        dispatch(tr);
-        return true;
-      }
-    };
-  }
-});
-var ParagraphEnterKeys = import_core.Extension.create({
-  name: "paragraphEnterKeys",
-  priority: 1e3,
-  addKeyboardShortcuts() {
-    return {
-      "Shift-Enter": function (param) {
-        var {
-          editor
-        } = param;
-        return editor.commands.first([function () {
-          return editor.commands.newlineInCode();
-        }, function () {
-          return editor.commands.splitListItem("listItem");
-        }, function () {
-          return editor.commands.createParagraphNear();
-        }, function () {
-          return editor.commands.liftEmptyBlock();
-        }, function () {
-          return editor.commands.splitBlock();
-        }]);
-      },
-      "Mod-Enter": function (param) {
-        var {
-          editor
-        } = param;
-        return editor.commands.first([function () {
-          return editor.commands.newlineInCode();
-        }, function () {
-          return editor.commands.createParagraphNear();
-        }, function () {
-          return editor.commands.liftEmptyBlock();
-        }, function () {
-          return editor.commands.splitBlock();
-        }]);
-      }
-    };
-  }
-});
-var ListItemKeys = import_core.Extension.create({
-  name: "listItemKeys",
-  addKeyboardShortcuts() {
-    return {
-      Tab: function Tab(param) {
-        var {
-          editor
-        } = param;
-        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": function (param) {
-        var {
-          editor
-        } = param;
-        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;
-      }
-    };
-  }
-});
+var import_MathBubble = require("../toolbar/MathBubble.native.js");
+var MOTION_MS = 120;
 var EditorContainer = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "TiptapEditorContainer",
   flex: 1,
@@ -263,9 +61,10 @@ var EditorContainer = (0, import_tamagui.styled)(import_tamagui.View, {
 });
 var TiptapEditor = /* @__PURE__ */(0, import_react.memo)(/* @__PURE__ */(0, import_react.forwardRef)(function (param, ref) {
   var {
+    capabilities = "full",
     initialContent = "",
     initialJSON,
-    placeholder = "Start writing...",
+    placeholder: placeholderProp,
     editable = true,
     autoFocus = false,
     onChange,
@@ -278,9 +77,14 @@ var TiptapEditor = /* @__PURE__ */(0, import_react.memo)(/* @__PURE__ */(0, impo
     showBubbleToolbar = false,
     bodyFontFamily,
     headingFontFamily,
-    editorMode = "richtext"
+    editorMode = "richtext",
+    fullscreen = false,
+    onImageUpload,
+    onFileUpload,
+    mentions
   } = param;
   var _ctx = import_context.RichEditorContext.useStyledContext();
+  var placeholder = placeholderProp !== null && placeholderProp !== void 0 ? placeholderProp : (0, import_t.t)("Start writing...");
   var internalRef = (0, import_react.useRef)(null);
   var stateRafRef = (0, import_react.useRef)(0);
   var changeRafRef = (0, import_react.useRef)(0);
@@ -288,60 +92,53 @@ var TiptapEditor = /* @__PURE__ */(0, import_react.memo)(/* @__PURE__ */(0, impo
   var onChangeRef = (0, import_react.useRef)(onChange);
   var [markdownSource, setMarkdownSource] = (0, import_react.useState)("");
   var prevModeRef = (0, import_react.useRef)(editorMode);
+  var theme = (0, import_tamagui.useTheme)();
+  var themeName = (0, import_tamagui.useThemeName)();
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  var motionMs = knobProps.transition !== void 0 ? MOTION_MS : 0;
+  var scopeClass = `rt-scope-${(0, import_react.useId)().replace(/[^a-zA-Z0-9-]/g, "")}`;
+  var mentionsRef = (0, import_react.useRef)(mentions);
+  mentionsRef.current = mentions;
+  var [mentionExtension] = (0, import_react.useState)(function () {
+    return mentions ? (0, import_mentions.createMentionExtension)({
+      trigger: mentions.trigger,
+      items: function items(query) {
+        var _ref;
+        var _mentionsRef_current;
+        return (_ref = (_mentionsRef_current = mentionsRef.current) === null || _mentionsRef_current === void 0 ? void 0 : _mentionsRef_current.items(query)) !== null && _ref !== void 0 ? _ref : [];
+      }
+    }) : null;
+  });
   (0, import_react.useEffect)(function () {
     onStateChangeRef.current = onStateChange;
     onChangeRef.current = onChange;
   });
+  var [extensions] = (0, import_react.useState)(function () {
+    return (0, import_extensions.buildEditorExtensions)({
+      capabilities,
+      placeholder,
+      mentionExtension
+    });
+  });
   var 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,
@@ -354,7 +151,7 @@ var TiptapEditor = /* @__PURE__ */(0, import_react.memo)(/* @__PURE__ */(0, impo
         var _onChangeRef_current;
         var html = editor2.getHTML();
         var json = editor2.getJSON();
-        (_onChangeRef_current = onChangeRef.current) === null || _onChangeRef_current === void 0 ? void 0 : _onChangeRef_current.call(onChangeRef, html, json);
+        (_onChangeRef_current = onChangeRef.current) === null || _onChangeRef_current === void 0 ? void 0 : _onChangeRef_current.call(onChangeRef, capabilities === "markdown" ? (0, import_markdown.htmlToMarkdown)(html) : html, json);
       });
     },
     onTransaction: function onTransaction(param2) {
@@ -374,30 +171,63 @@ var TiptapEditor = /* @__PURE__ */(0, import_react.memo)(/* @__PURE__ */(0, impo
       return onBlur === null || onBlur === void 0 ? void 0 : onBlur();
     }
   });
+  (0, import_react.useEffect)(function () {
+    if (!editor) return;
+    editor.storage.mediaUpload.handlers = {
+      onImageUpload,
+      onFileUpload
+    };
+  }, [editor, onImageUpload, onFileUpload]);
+  (0, import_react.useEffect)(function () {
+    var _ref, _ref1, _ref2, _ref3, _ref4, _ref5, _ref6, _ref7;
+    var _getTokens_radius_radiusToken, _getTokens_radius, _getTokens_space_rowPadToken, _getTokens_space, _theme_shadow2, _theme_shadow1, _theme_background, _theme_borderColor, _theme_color4, _theme_color3, _theme_color12, _theme_color11;
+    if (!editor) return;
+    var radiusToken = (0, import_forms.clampRadiusForLargeComponent)(knobProps.borderRadius.borderRadius, 4);
+    var radiusValue = typeof radiusToken === "number" ? radiusToken : (_ref = (_getTokens_radius = (0, import_tamagui.getTokens)().radius) === null || _getTokens_radius === void 0 ? void 0 : (_getTokens_radius_radiusToken = _getTokens_radius[radiusToken]) === null || _getTokens_radius_radiusToken === void 0 ? void 0 : _getTokens_radius_radiusToken.val) !== null && _ref !== void 0 ? _ref : import_suggestionPopup.fallbackSuggestionChrome.radius;
+    var rowPadToken = import_theme.menuRowFrame.paddingHorizontal;
+    var rowPaddingX = (_ref1 = (_getTokens_space = (0, import_tamagui.getTokens)().space) === null || _getTokens_space === void 0 ? void 0 : (_getTokens_space_rowPadToken = _getTokens_space[rowPadToken]) === null || _getTokens_space_rowPadToken === void 0 ? void 0 : _getTokens_space_rowPadToken.val) !== null && _ref1 !== void 0 ? _ref1 : import_suggestionPopup.fallbackSuggestionChrome.rowPaddingX;
+    var shadowMain = (_theme_shadow2 = theme.shadow2) === null || _theme_shadow2 === void 0 ? void 0 : _theme_shadow2.val;
+    var shadowSoft = (_theme_shadow1 = theme.shadow1) === null || _theme_shadow1 === void 0 ? void 0 : _theme_shadow1.val;
+    var chrome = {
+      background: (_ref2 = (_theme_background = theme.background) === null || _theme_background === void 0 ? void 0 : _theme_background.val) !== null && _ref2 !== void 0 ? _ref2 : import_suggestionPopup.fallbackSuggestionChrome.background,
+      borderColor: (_ref3 = (_theme_borderColor = theme.borderColor) === null || _theme_borderColor === void 0 ? void 0 : _theme_borderColor.val) !== null && _ref3 !== void 0 ? _ref3 : import_suggestionPopup.fallbackSuggestionChrome.borderColor,
+      activeBackground: (_ref4 = (_theme_color4 = theme.color4) === null || _theme_color4 === void 0 ? void 0 : _theme_color4.val) !== null && _ref4 !== void 0 ? _ref4 : import_suggestionPopup.fallbackSuggestionChrome.activeBackground,
+      iconTileBackground: (_ref5 = (_theme_color3 = theme.color3) === null || _theme_color3 === void 0 ? void 0 : _theme_color3.val) !== null && _ref5 !== void 0 ? _ref5 : import_suggestionPopup.fallbackSuggestionChrome.iconTileBackground,
+      titleColor: (_ref6 = (_theme_color12 = theme.color12) === null || _theme_color12 === void 0 ? void 0 : _theme_color12.val) !== null && _ref6 !== void 0 ? _ref6 : import_suggestionPopup.fallbackSuggestionChrome.titleColor,
+      descriptionColor: (_ref7 = (_theme_color11 = theme.color11) === null || _theme_color11 === void 0 ? void 0 : _theme_color11.val) !== null && _ref7 !== void 0 ? _ref7 : 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)(function () {
+    if (!editor) return;
+    (0, import_codeBlockPreview.setPreviewChrome)(editor, {
+      scheme: String(themeName).startsWith("dark") ? "dark" : "light",
+      fontFamily: bodyFontFamily
+    });
+  }, [editor, themeName, bodyFontFamily]);
   (0, import_react.useEffect)(function () {
     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 {
-      var html = import_marked.marked.parse(markdownSource, {
-        async: false
-      });
-      editor.commands.setContent(html);
+      editor.commands.setContent((0, import_markdown.markdownToHtml)(markdownSource));
     }
   }, [editorMode, editor, markdownSource]);
   var handleMarkdownChange = (0, import_react.useCallback)(function (e) {
     var _onChangeRef_current;
     var md = e.target.value;
     setMarkdownSource(md);
-    var html = import_marked.marked.parse(md, {
-      async: false
-    });
-    (_onChangeRef_current = onChangeRef.current) === null || _onChangeRef_current === void 0 ? void 0 : _onChangeRef_current.call(onChangeRef, html, null);
-  }, []);
+    (_onChangeRef_current = onChangeRef.current) === null || _onChangeRef_current === void 0 ? void 0 : _onChangeRef_current.call(onChangeRef, capabilities === "markdown" ? md : (0, import_markdown.markdownToHtml)(md), null);
+  }, [capabilities]);
   var executeCommand = (0, import_react.useCallback)(function (command, payload) {
     if (!editor) return;
+    if (!(0, import_capabilities.isCommandInCapabilities)(command, capabilities)) return;
     var chain = editor.chain().focus();
     switch (command) {
       case "bold":
@@ -479,11 +309,25 @@ var TiptapEditor = /* @__PURE__ */(0, import_react.memo)(/* @__PURE__ */(0, impo
         break;
       case "link":
         if (payload === null || payload === void 0 ? void 0 : payload.href) {
-          chain.setLink({
-            href: payload.href
-          }).run();
+          if (editor.state.selection.empty && !editor.isActive("link")) {
+            var _payload_text;
+            chain.insertContent({
+              type: "text",
+              text: (_payload_text = payload.text) !== null && _payload_text !== void 0 ? _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":
@@ -578,12 +422,22 @@ var TiptapEditor = /* @__PURE__ */(0, import_react.memo)(/* @__PURE__ */(0, impo
       getJSON: function getJSON() {
         return (editor === null || editor === void 0 ? void 0 : editor.getJSON()) || null;
       },
+      getMarkdown: function getMarkdown() {
+        return (0, import_markdown.htmlToMarkdown)((editor === null || editor === void 0 ? void 0 : editor.getHTML()) || "");
+      },
       setHTML: function setHTML(html) {
         return editor === null || editor === void 0 ? void 0 : editor.commands.setContent(html);
       },
       setJSON: function setJSON(json) {
         return editor === null || editor === void 0 ? void 0 : 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: function setMarkdown(markdown) {
+        return editor === null || editor === void 0 ? void 0 : editor.commands.setContent((0, import_markdown.markdownToHtml)(markdown), {
+          emitUpdate: false
+        });
+      },
       focus: function focus() {
         return editor === null || editor === void 0 ? void 0 : editor.commands.focus();
       },
@@ -601,21 +455,26 @@ var TiptapEditor = /* @__PURE__ */(0, import_react.memo)(/* @__PURE__ */(0, impo
       minHeight,
       maxHeight,
       bodyFontFamily,
-      headingFontFamily
+      headingFontFamily,
+      fullscreen,
+      motionMs,
+      scopeClass
     });
-  }, [minHeight, maxHeight, bodyFontFamily, headingFontFamily]);
+  }, [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",
@@ -633,8 +492,9 @@ var TiptapEditor = /* @__PURE__ */(0, import_react.memo)(/* @__PURE__ */(0, impo
     });
   }
   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
@@ -642,7 +502,8 @@ var TiptapEditor = /* @__PURE__ */(0, import_react.memo)(/* @__PURE__ */(0, impo
       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, {
@@ -650,10 +511,23 @@ var TiptapEditor = /* @__PURE__ */(0, import_react.memo)(/* @__PURE__ */(0, impo
       }), /* @__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, {
+    }),
+    /* Always mounted (unlike the optional bubbles): it is the ONLY
+      edit path for inline math atoms — without it a typed `$x$`
+      node would be a dead end. Markdown capabilities have no inline
+      math node, so the bubble has nothing to edit and stays out. */
+    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
     })]
   });
 }));