@multiplatform.one/rich-text 6.1.0 → 6.3.0

package/dist/cjs/editor/SlashCommands.native.js

@@ -40,295 +40,302 @@ __export(SlashCommands_exports, {
 module.exports = __toCommonJS(SlashCommands_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_core = require("@tiptap/core");
-var import_react = require("@tiptap/react");
 var import_suggestion = __toESM(require("@tiptap/suggestion"));
-var import_react2 = require("react");
-var SLASH_ITEMS = [{
-  title: "Heading 1",
-  description: "Large section heading",
-  icon: "H1",
-  command: function command(param) {
-    var {
-      editor,
-      range
-    } = param;
-    return editor.chain().focus().deleteRange(range).setHeading({
-      level: 1
-    }).run();
-  }
-}, {
-  title: "Heading 2",
-  description: "Medium section heading",
-  icon: "H2",
-  command: function command2(param) {
-    var {
-      editor,
-      range
-    } = param;
-    return editor.chain().focus().deleteRange(range).setHeading({
-      level: 2
-    }).run();
-  }
-}, {
-  title: "Heading 3",
-  description: "Small section heading",
-  icon: "H3",
-  command: function command3(param) {
-    var {
-      editor,
-      range
-    } = param;
-    return editor.chain().focus().deleteRange(range).setHeading({
-      level: 3
-    }).run();
-  }
-}, {
-  title: "Bullet List",
-  description: "Unordered list with bullets",
-  icon: "\u2022",
-  command: function command4(param) {
-    var {
-      editor,
-      range
-    } = param;
-    return editor.chain().focus().deleteRange(range).toggleBulletList().run();
-  }
-}, {
-  title: "Numbered List",
-  description: "Ordered list with numbers",
-  icon: "1.",
-  command: function command5(param) {
-    var {
-      editor,
-      range
-    } = param;
-    return editor.chain().focus().deleteRange(range).toggleOrderedList().run();
-  }
-}, {
-  title: "Task List",
-  description: "List with checkboxes",
-  icon: "\u2611",
-  command: function command6(param) {
-    var {
-      editor,
-      range
-    } = param;
-    return editor.chain().focus().deleteRange(range).toggleTaskList().run();
-  }
-}, {
-  title: "Code Block",
-  description: "Fenced code with syntax highlighting",
-  icon: "<>",
-  command: function command7(param) {
-    var {
-      editor,
-      range
-    } = param;
-    return editor.chain().focus().deleteRange(range).toggleCodeBlock().run();
-  }
-}, {
-  title: "Blockquote",
-  description: "Quoted text block",
-  icon: "\u275D",
-  command: function command8(param) {
-    var {
-      editor,
-      range
-    } = param;
-    return editor.chain().focus().deleteRange(range).toggleBlockquote().run();
-  }
-}, {
-  title: "Horizontal Rule",
-  description: "Visual divider line",
-  icon: "\u2014",
-  command: function command9(param) {
-    var {
-      editor,
-      range
-    } = param;
-    return editor.chain().focus().deleteRange(range).setHorizontalRule().run();
+var import_react = require("@phosphor-icons/react");
+var import_t = require("../shared/t.native.js");
+var import_suggestionPopup = require("./suggestionPopup.native.js");
+function insertImageFromSlash(editor, range) {
+  var _ref;
+  var _editor_storage_mediaUpload;
+  var handlers = (_ref = (_editor_storage_mediaUpload = editor.storage.mediaUpload) === null || _editor_storage_mediaUpload === void 0 ? void 0 : _editor_storage_mediaUpload.handlers) !== null && _ref !== void 0 ? _ref : {};
+  if (handlers.onImageUpload && typeof document !== "undefined") {
+    var input = document.createElement("input");
+    input.type = "file";
+    input.accept = "image/*";
+    input.onchange = async function () {
+      var _input_files;
+      var file = (_input_files = input.files) === null || _input_files === void 0 ? void 0 : _input_files[0];
+      if (!file) return;
+      try {
+        var src = await handlers.onImageUpload(file);
+        editor.chain().focus().deleteRange(range).setImage({
+          src,
+          alt: file.name.replace(/\.[a-z0-9]+$/i, "")
+        }).run();
+      } catch (err) {
+        console.warn("[rich-text] image upload failed:", err);
+      }
+    };
+    input.click();
+    return;
   }
-}, {
-  title: "Table",
-  description: "Insert a 3\xD73 table",
-  icon: "\u229E",
-  command: function command10(param) {
-    var {
-      editor,
-      range
-    } = param;
-    return editor.chain().focus().deleteRange(range).insertTable({
-      rows: 3,
-      cols: 3,
-      withHeaderRow: true
+  var url = window.prompt((0, import_t.t)("Image URL:"));
+  if (url) {
+    editor.chain().focus().deleteRange(range).setImage({
+      src: url
     }).run();
   }
-}, {
-  title: "Image",
-  description: "Insert image from URL",
-  icon: "\u{1F5BC}",
-  command: function command11(param) {
-    var {
-      editor,
-      range
-    } = param;
-    var url = window.prompt("Image URL:");
-    if (url) {
-      editor.chain().focus().deleteRange(range).setImage({
-        src: url
+}
+var ICON_SIZE = 16;
+function getSlashItems() {
+  return [{
+    id: "text",
+    title: (0, import_t.t)("Text"),
+    description: (0, import_t.t)("Plain paragraph text"),
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.TextTIcon, {
+      size: ICON_SIZE
+    }),
+    command: function command(param) {
+      var {
+        editor,
+        range
+      } = param;
+      return editor.chain().focus().deleteRange(range).setParagraph().run();
+    }
+  }, {
+    id: "heading1",
+    title: (0, import_t.t)("Heading 1"),
+    description: (0, import_t.t)("Large section heading"),
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.TextHOneIcon, {
+      size: ICON_SIZE
+    }),
+    command: function command(param) {
+      var {
+        editor,
+        range
+      } = param;
+      return editor.chain().focus().deleteRange(range).setHeading({
+        level: 1
       }).run();
     }
-  }
-}];
-var SlashCommandsList = /* @__PURE__ */(0, import_react2.forwardRef)(function (param, ref) {
-  var {
-    items,
-    command: command12
-  } = param;
-  var [selectedIndex, setSelectedIndex] = (0, import_react2.useState)(0);
-  var listRef = (0, import_react2.useRef)(null);
-  (0, import_react2.useEffect)(function () {
-    setSelectedIndex(0);
-  }, [items]);
-  (0, import_react2.useEffect)(function () {
-    var _listRef_current;
-    var el = (_listRef_current = listRef.current) === null || _listRef_current === void 0 ? void 0 : _listRef_current.children[selectedIndex];
-    el === null || el === void 0 ? void 0 : el.scrollIntoView({
-      block: "nearest"
-    });
-  }, [selectedIndex]);
-  var selectItem = (0, import_react2.useCallback)(function (index) {
-    var item = items[index];
-    if (item) command12(item);
-  }, [items, command12]);
-  (0, import_react2.useImperativeHandle)(ref, function () {
-    return {
-      onKeyDown: function onKeyDown(param2) {
-        var {
-          event
-        } = param2;
-        if (event.key === "ArrowUp") {
-          setSelectedIndex(function (i) {
-            return (i + items.length - 1) % items.length;
-          });
-          return true;
-        }
-        if (event.key === "ArrowDown") {
-          setSelectedIndex(function (i) {
-            return (i + 1) % items.length;
-          });
-          return true;
-        }
-        if (event.key === "Enter") {
-          selectItem(selectedIndex);
-          return true;
-        }
-        return false;
-      }
-    };
-  });
-  if (items.length === 0) {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
-      style: styles.container,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
-        style: styles.empty,
-        children: "No results"
-      })
-    });
-  }
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
-    style: styles.container,
-    ref: listRef,
-    children: items.map(function (item, index) {
-      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("button", {
-        style: {
-          ...styles.item,
-          ...(index === selectedIndex ? styles.itemSelected : {})
-        },
-        onClick: function onClick() {
-          return selectItem(index);
-        },
-        onMouseEnter: function onMouseEnter() {
-          return setSelectedIndex(index);
-        },
-        type: "button",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
-          style: styles.icon,
-          children: item.icon
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)("span", {
-          style: styles.textGroup,
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
-            style: styles.title,
-            children: item.title
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
-            style: styles.description,
-            children: item.description
-          })]
-        })]
-      }, item.title);
-    })
-  });
-});
-SlashCommandsList.displayName = "SlashCommandsList";
-var styles = {
-  container: {
-    background: "var(--background, #fff)",
-    border: "1px solid var(--borderColor, #e0e0e0)",
-    borderRadius: "8px",
-    boxShadow: "0 4px 16px rgba(0,0,0,0.12)",
-    padding: "4px",
-    maxHeight: "320px",
-    overflowY: "auto",
-    minWidth: "220px"
-  },
-  item: {
-    display: "flex",
-    alignItems: "center",
-    gap: "10px",
-    padding: "8px 10px",
-    border: "none",
-    background: "none",
-    width: "100%",
-    textAlign: "left",
-    cursor: "pointer",
-    borderRadius: "6px",
-    fontSize: "13px",
-    lineHeight: "1.3"
-  },
-  itemSelected: {
-    background: "var(--color4, #f0f0f0)"
-  },
-  icon: {
-    width: "28px",
-    height: "28px",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: "4px",
-    background: "var(--color3, #f5f5f5)",
-    fontWeight: "700",
-    fontSize: "12px",
-    flexShrink: 0
-  },
-  textGroup: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "1px"
-  },
-  title: {
-    fontWeight: "600",
-    color: "var(--color12, #333)"
-  },
-  description: {
-    fontSize: "11px",
-    color: "var(--color9, #888)"
-  },
-  empty: {
-    padding: "8px 12px",
-    color: "var(--color9, #888)",
-    fontSize: "13px"
-  }
-};
+  }, {
+    id: "heading2",
+    title: (0, import_t.t)("Heading 2"),
+    description: (0, import_t.t)("Medium section heading"),
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.TextHTwoIcon, {
+      size: ICON_SIZE
+    }),
+    command: function command(param) {
+      var {
+        editor,
+        range
+      } = param;
+      return editor.chain().focus().deleteRange(range).setHeading({
+        level: 2
+      }).run();
+    }
+  }, {
+    id: "heading3",
+    title: (0, import_t.t)("Heading 3"),
+    description: (0, import_t.t)("Small section heading"),
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.TextHThreeIcon, {
+      size: ICON_SIZE
+    }),
+    command: function command(param) {
+      var {
+        editor,
+        range
+      } = param;
+      return editor.chain().focus().deleteRange(range).setHeading({
+        level: 3
+      }).run();
+    }
+  }, {
+    id: "bulletList",
+    title: (0, import_t.t)("Bullet List"),
+    description: (0, import_t.t)("Unordered list with bullets"),
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ListBulletsIcon, {
+      size: ICON_SIZE
+    }),
+    command: function command(param) {
+      var {
+        editor,
+        range
+      } = param;
+      return editor.chain().focus().deleteRange(range).toggleBulletList().run();
+    }
+  }, {
+    id: "orderedList",
+    title: (0, import_t.t)("Numbered List"),
+    description: (0, import_t.t)("Ordered list with numbers"),
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ListNumbersIcon, {
+      size: ICON_SIZE
+    }),
+    command: function command(param) {
+      var {
+        editor,
+        range
+      } = param;
+      return editor.chain().focus().deleteRange(range).toggleOrderedList().run();
+    }
+  }, {
+    id: "taskList",
+    title: (0, import_t.t)("Task List"),
+    description: (0, import_t.t)("List with checkboxes"),
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ListChecksIcon, {
+      size: ICON_SIZE
+    }),
+    command: function command(param) {
+      var {
+        editor,
+        range
+      } = param;
+      return editor.chain().focus().deleteRange(range).toggleTaskList().run();
+    }
+  }, {
+    id: "codeBlock",
+    title: (0, import_t.t)("Code Block"),
+    description: (0, import_t.t)("Fenced code with syntax highlighting"),
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CodeIcon, {
+      size: ICON_SIZE
+    }),
+    command: function command(param) {
+      var {
+        editor,
+        range
+      } = param;
+      return editor.chain().focus().deleteRange(range).toggleCodeBlock().run();
+    }
+  }, {
+    id: "blockquote",
+    title: (0, import_t.t)("Blockquote"),
+    description: (0, import_t.t)("Quoted text block"),
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.QuotesIcon, {
+      size: ICON_SIZE
+    }),
+    command: function command(param) {
+      var {
+        editor,
+        range
+      } = param;
+      return editor.chain().focus().deleteRange(range).toggleBlockquote().run();
+    }
+  }, {
+    id: "horizontalRule",
+    title: (0, import_t.t)("Horizontal Rule"),
+    description: (0, import_t.t)("Visual divider line"),
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.MinusIcon, {
+      size: ICON_SIZE
+    }),
+    command: function command(param) {
+      var {
+        editor,
+        range
+      } = param;
+      return editor.chain().focus().deleteRange(range).setHorizontalRule().run();
+    }
+  }, {
+    id: "table",
+    title: (0, import_t.t)("Table"),
+    description: (0, import_t.t)("Insert a 3\xD73 table"),
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.TableIcon, {
+      size: ICON_SIZE
+    }),
+    command: function command(param) {
+      var {
+        editor,
+        range
+      } = param;
+      return editor.chain().focus().deleteRange(range).insertTable({
+        rows: 3,
+        cols: 3,
+        withHeaderRow: true
+      }).run();
+    }
+  }, {
+    id: "image",
+    title: (0, import_t.t)("Image"),
+    description: (0, import_t.t)("Upload or embed an image"),
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ImageIcon, {
+      size: ICON_SIZE
+    }),
+    command: function command(param) {
+      var {
+        editor,
+        range
+      } = param;
+      return insertImageFromSlash(editor, range);
+    }
+  }, {
+    id: "mermaid",
+    title: (0, import_t.t)("Mermaid Diagram"),
+    description: (0, import_t.t)("Diagram code with live preview"),
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.TreeStructureIcon, {
+      size: ICON_SIZE
+    }),
+    command: function command(param) {
+      var {
+        editor,
+        range
+      } = param;
+      return editor.chain().focus().deleteRange(range).setCodeBlock({
+        language: "mermaid"
+      }).run();
+    }
+  }, {
+    id: "mathBlock",
+    title: (0, import_t.t)("Math Block"),
+    description: (0, import_t.t)("Display TeX math with live preview"),
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.MathOperationsIcon, {
+      size: ICON_SIZE
+    }),
+    command: function command(param) {
+      var {
+        editor,
+        range
+      } = param;
+      return editor.chain().focus().deleteRange(range).setCodeBlock({
+        language: "math"
+      }).run();
+    }
+  }, {
+    id: "inlineMath",
+    title: (0, import_t.t)("Inline Math"),
+    description: (0, import_t.t)("TeX formula in the text flow"),
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.FunctionIcon, {
+      size: ICON_SIZE
+    }),
+    command: function command(param) {
+      var {
+        editor,
+        range
+      } = param;
+      return editor.chain().focus().deleteRange(range).insertInlineMath().run();
+    }
+  }, {
+    id: "details",
+    title: (0, import_t.t)("Collapsible Section"),
+    description: (0, import_t.t)("Expandable details with a summary"),
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretCircleDownIcon, {
+      size: ICON_SIZE
+    }),
+    // open: true so the freshly inserted section is expanded for typing
+    command: function command(param) {
+      var {
+        editor,
+        range
+      } = param;
+      return editor.chain().focus().deleteRange(range).setDetails().updateAttributes("details", {
+        open: true
+      }).run();
+    }
+  }, {
+    id: "emoji",
+    title: (0, import_t.t)("Emoji"),
+    description: (0, import_t.t)("Search emoji by name"),
+    icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.SmileyIcon, {
+      size: ICON_SIZE
+    }),
+    // inserting ":" hands off to the emoji suggestion popup
+    command: function command(param) {
+      var {
+        editor,
+        range
+      } = param;
+      return editor.chain().focus().deleteRange(range).insertContent(":").run();
+    }
+  }];
+}
 var SlashCommands = import_core.Extension.create({
   name: "slashCommands",
   addOptions() {
@@ -341,66 +348,25 @@ var SlashCommands = import_core.Extension.create({
             query
           } = param;
           var q = query.toLowerCase();
-          return SLASH_ITEMS.filter(function (item) {
+          return getSlashItems().filter(function (item) {
             return item.title.toLowerCase().includes(q) || item.description.toLowerCase().includes(q);
           });
         },
-        render: function render() {
-          var component = null;
-          var popup = null;
-          return {
-            onStart: function onStart(props) {
-              component = new import_react.ReactRenderer(SlashCommandsList, {
-                props,
-                editor: props.editor
-              });
-              popup = document.createElement("div");
-              popup.style.position = "absolute";
-              popup.style.zIndex = "50";
-              document.body.appendChild(popup);
-              popup.appendChild(component.element);
-              var {
-                clientRect
-              } = props;
-              if (clientRect) {
-                var rect = clientRect();
-                if (rect) {
-                  popup.style.left = `${rect.left}px`;
-                  popup.style.top = `${rect.bottom + 4}px`;
-                }
-              }
-            },
-            onUpdate: function onUpdate(props) {
-              component === null || component === void 0 ? void 0 : component.updateProps(props);
-              if (popup && props.clientRect) {
-                var rect = props.clientRect();
-                if (rect) {
-                  popup.style.left = `${rect.left}px`;
-                  popup.style.top = `${rect.bottom + 4}px`;
-                }
-              }
-            },
-            onKeyDown: function onKeyDown(props) {
-              var _ref;
-              var _component_ref;
-              if (props.event.key === "Escape") {
-                popup === null || popup === void 0 ? void 0 : popup.remove();
-                component === null || component === void 0 ? void 0 : component.destroy();
-                popup = null;
-                component = null;
-                return true;
-              }
-              return (_ref = component === null || component === void 0 ? void 0 : (_component_ref = component.ref) === null || _component_ref === void 0 ? void 0 : _component_ref.onKeyDown(props)) !== null && _ref !== void 0 ? _ref : false;
-            },
-            onExit: function onExit() {
-              popup === null || popup === void 0 ? void 0 : popup.remove();
-              component === null || component === void 0 ? void 0 : component.destroy();
-              popup = null;
-              component = null;
-            }
-          };
-        },
-        command: function command12(param) {
+        render: (0, import_suggestionPopup.createSuggestionRenderer)({
+          toRow: function toRow(item) {
+            return {
+              key: item.id,
+              title: item.title,
+              description: item.description,
+              icon: item.icon
+            };
+          },
+          getChrome: import_suggestionPopup.getSuggestionChrome,
+          getEmptyLabel: function getEmptyLabel() {
+            return (0, import_t.t)("No results");
+          }
+        }),
+        command: function command(param) {
           var {
             editor,
             range,