@multiplatform.one/rich-text 6.0.0

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

@@ -0,0 +1,661 @@
+"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, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  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);
+var TiptapEditor_exports = {};
+__export(TiptapEditor_exports, {
+  TiptapEditor: () => TiptapEditor
+});
+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_types = require("../types.native.js");
+var import_context = require("../context.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_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 EditorContainer = (0, import_tamagui.styled)(import_tamagui.View, {
+  name: "TiptapEditorContainer",
+  flex: 1,
+  minHeight: 150,
+  overflow: "hidden"
+});
+var TiptapEditor = /* @__PURE__ */(0, import_react.memo)(/* @__PURE__ */(0, import_react.forwardRef)(function (param, ref) {
+  var {
+    initialContent = "",
+    initialJSON,
+    placeholder = "Start writing...",
+    editable = true,
+    autoFocus = false,
+    onChange,
+    onStateChange,
+    onFocus,
+    onBlur,
+    minHeight = 150,
+    maxHeight,
+    hasError: _hasError,
+    showBubbleToolbar = false,
+    bodyFontFamily,
+    headingFontFamily,
+    editorMode = "richtext"
+  } = param;
+  var _ctx = import_context.RichEditorContext.useStyledContext();
+  var internalRef = (0, import_react.useRef)(null);
+  var stateRafRef = (0, import_react.useRef)(0);
+  var changeRafRef = (0, import_react.useRef)(0);
+  var onStateChangeRef = (0, import_react.useRef)(onStateChange);
+  var onChangeRef = (0, import_react.useRef)(onChange);
+  var [markdownSource, setMarkdownSource] = (0, import_react.useState)("");
+  var prevModeRef = (0, import_react.useRef)(editorMode);
+  (0, import_react.useEffect)(function () {
+    onStateChangeRef.current = onStateChange;
+    onChangeRef.current = onChange;
+  });
+  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,
+    editable,
+    autofocus: autoFocus,
+    injectCSS: false,
+    immediatelyRender: false,
+    shouldRerenderOnTransaction: false,
+    onUpdate: function onUpdate(param2) {
+      var {
+        editor: editor2
+      } = param2;
+      cancelAnimationFrame(changeRafRef.current);
+      changeRafRef.current = requestAnimationFrame(function () {
+        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);
+      });
+    },
+    onTransaction: function onTransaction(param2) {
+      var {
+        editor: editor2
+      } = param2;
+      cancelAnimationFrame(stateRafRef.current);
+      stateRafRef.current = requestAnimationFrame(function () {
+        var _onStateChangeRef_current;
+        (_onStateChangeRef_current = onStateChangeRef.current) === null || _onStateChangeRef_current === void 0 ? void 0 : _onStateChangeRef_current.call(onStateChangeRef, (0, import_useEditorState.getEditorStateFromTiptap)(editor2));
+      });
+    },
+    onFocus: function onFocus1() {
+      return onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    },
+    onBlur: function onBlur1() {
+      return onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    }
+  });
+  (0, import_react.useEffect)(function () {
+    if (!editor) return;
+    if (prevModeRef.current === editorMode) return;
+    prevModeRef.current = editorMode;
+    if (editorMode === "markdown") {
+      setMarkdownSource(turndownService.turndown(editor.getHTML()));
+    } else {
+      var html = import_marked.marked.parse(markdownSource, {
+        async: false
+      });
+      editor.commands.setContent(html);
+    }
+  }, [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);
+  }, []);
+  var executeCommand = (0, import_react.useCallback)(function (command, payload) {
+    if (!editor) return;
+    var chain = editor.chain().focus();
+    switch (command) {
+      case "bold":
+        chain.toggleBold().run();
+        break;
+      case "italic":
+        chain.toggleItalic().run();
+        break;
+      case "underline":
+        chain.toggleUnderline().run();
+        break;
+      case "strike":
+        chain.toggleStrike().run();
+        break;
+      case "code":
+        chain.toggleCode().run();
+        break;
+      case "subscript":
+        chain.toggleSubscript().run();
+        break;
+      case "superscript":
+        chain.toggleSuperscript().run();
+        break;
+      case "heading1":
+        chain.toggleHeading({
+          level: 1
+        }).run();
+        break;
+      case "heading2":
+        chain.toggleHeading({
+          level: 2
+        }).run();
+        break;
+      case "heading3":
+        chain.toggleHeading({
+          level: 3
+        }).run();
+        break;
+      case "heading4":
+        chain.toggleHeading({
+          level: 4
+        }).run();
+        break;
+      case "heading5":
+        chain.toggleHeading({
+          level: 5
+        }).run();
+        break;
+      case "heading6":
+        chain.toggleHeading({
+          level: 6
+        }).run();
+        break;
+      case "paragraph":
+        chain.setParagraph().run();
+        break;
+      case "bulletList":
+        chain.toggleBulletList().run();
+        break;
+      case "orderedList":
+        chain.toggleOrderedList().run();
+        break;
+      case "taskList":
+        chain.toggleTaskList().run();
+        break;
+      case "image":
+        if (payload === null || payload === void 0 ? void 0 : payload.src) {
+          chain.setImage({
+            src: payload.src,
+            alt: payload.alt || ""
+          }).run();
+        }
+        break;
+      case "blockquote":
+        chain.toggleBlockquote().run();
+        break;
+      case "codeBlock":
+        chain.toggleCodeBlock().run();
+        break;
+      case "link":
+        if (payload === null || payload === void 0 ? void 0 : payload.href) {
+          chain.setLink({
+            href: payload.href
+          }).run();
+        } else {
+          chain.unsetLink().run();
+        }
+        break;
+      case "undo":
+        chain.undo().run();
+        break;
+      case "redo":
+        chain.redo().run();
+        break;
+      case "alignLeft":
+        chain.setTextAlign("left").run();
+        break;
+      case "alignCenter":
+        chain.setTextAlign("center").run();
+        break;
+      case "alignRight":
+        chain.setTextAlign("right").run();
+        break;
+      case "alignJustify":
+        chain.setTextAlign("justify").run();
+        break;
+      case "textColor":
+        if (payload === null || payload === void 0 ? void 0 : payload.color) {
+          chain.setColor(payload.color).run();
+        } else {
+          chain.unsetColor().run();
+        }
+        break;
+      case "highlight":
+        if (payload === null || payload === void 0 ? void 0 : payload.color) {
+          chain.setHighlight({
+            color: payload.color
+          }).run();
+        } else {
+          chain.unsetHighlight().run();
+        }
+        break;
+      case "horizontalRule":
+        chain.setHorizontalRule().run();
+        break;
+      case "clearFormatting":
+        chain.unsetAllMarks().clearNodes().run();
+        break;
+      case "insertTable":
+        var _ref, _ref1, _ref2;
+        chain.insertTable({
+          rows: (_ref = payload === null || payload === void 0 ? void 0 : payload.rows) !== null && _ref !== void 0 ? _ref : 3,
+          cols: (_ref1 = payload === null || payload === void 0 ? void 0 : payload.cols) !== null && _ref1 !== void 0 ? _ref1 : 3,
+          withHeaderRow: (_ref2 = payload === null || payload === void 0 ? void 0 : payload.withHeaderRow) !== null && _ref2 !== void 0 ? _ref2 : true
+        }).run();
+        break;
+      case "addColumnBefore":
+        chain.addColumnBefore().run();
+        break;
+      case "addColumnAfter":
+        chain.addColumnAfter().run();
+        break;
+      case "deleteColumn":
+        chain.deleteColumn().run();
+        break;
+      case "addRowBefore":
+        chain.addRowBefore().run();
+        break;
+      case "addRowAfter":
+        chain.addRowAfter().run();
+        break;
+      case "deleteRow":
+        chain.deleteRow().run();
+        break;
+      case "deleteTable":
+        chain.deleteTable().run();
+        break;
+      case "mergeCells":
+        chain.mergeCells().run();
+        break;
+      case "splitCell":
+        chain.splitCell().run();
+        break;
+      case "toggleHeaderRow":
+        chain.toggleHeaderRow().run();
+        break;
+    }
+  }, [editor]);
+  var refMethods = (0, import_react.useMemo)(function () {
+    return {
+      executeCommand,
+      getState: function getState() {
+        return (0, import_useEditorState.getEditorStateFromTiptap)(editor);
+      },
+      getHTML: function getHTML() {
+        return (editor === null || editor === void 0 ? void 0 : editor.getHTML()) || "";
+      },
+      getJSON: function getJSON() {
+        return (editor === null || editor === void 0 ? void 0 : editor.getJSON()) || null;
+      },
+      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);
+      },
+      focus: function focus() {
+        return editor === null || editor === void 0 ? void 0 : editor.commands.focus();
+      },
+      blur: function blur() {
+        return editor === null || editor === void 0 ? void 0 : editor.commands.blur();
+      }
+    };
+  }, [editor, executeCommand]);
+  (0, import_react.useImperativeHandle)(ref, function () {
+    return refMethods;
+  }, [refMethods]);
+  internalRef.current = refMethods;
+  var editorCSS = (0, import_react.useMemo)(function () {
+    return (0, import_editorStyles.getEditorCSS)({
+      minHeight,
+      maxHeight,
+      bodyFontFamily,
+      headingFontFamily
+    });
+  }, [minHeight, maxHeight, bodyFontFamily, headingFontFamily]);
+  if (editorMode === "markdown") {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(EditorContainer, {
+      minHeight,
+      maxHeight,
+      overflow: "hidden",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)("textarea", {
+        value: markdownSource,
+        onChange: handleMarkdownChange,
+        style: {
+          width: "100%",
+          minHeight,
+          maxHeight: maxHeight || void 0,
+          padding: "12px 12px 12px 16px",
+          border: "none",
+          outline: "none",
+          resize: "none",
+          background: "transparent",
+          color: "inherit",
+          fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+          fontSize: "0.875em",
+          lineHeight: "1.6",
+          overflow: "auto",
+          boxSizing: "border-box"
+        },
+        spellCheck: false
+      })
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(EditorContainer, {
+    minHeight,
+    maxHeight,
+    overflow: "hidden",
+    children: [import_constants.isWeb && /* @__PURE__ */(0, import_jsx_runtime.jsx)("style", {
+      children: editorCSS
+    }), showBubbleToolbar && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_BubbleToolbar.BubbleToolbar, {
+        editor,
+        editorRef: internalRef,
+        state: import_types.defaultEditorState
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_LinkBubble.LinkBubble, {
+        editor
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_CodeBlockBubble.CodeBlockBubble, {
+        editor
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ImageBubble.ImageBubble, {
+        editor
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TableBubble.TableBubble, {
+        editor
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.EditorContent, {
+      editor
+    })]
+  });
+}));
+TiptapEditor.displayName = "TiptapEditor";
+//# sourceMappingURL=TiptapEditor.native.js.map