@multiplatform.one/rich-text 6.0.4 → 6.3.0

package/dist/cjs/editor/SlashCommands.cjs

@@ -37,250 +37,249 @@ __export(SlashCommands_exports, {
 });
 module.exports = __toCommonJS(SlashCommands_exports);
 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 import_react = require("@phosphor-icons/react");
+var import_t = require("../shared/t.cjs");
+var import_suggestionPopup = require("./suggestionPopup.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
-const SLASH_ITEMS = [{
-  title: "Heading 1",
-  description: "Large section heading",
-  icon: "H1",
-  command: ({
-    editor,
-    range
-  }) => editor.chain().focus().deleteRange(range).setHeading({
-    level: 1
-  }).run()
-}, {
-  title: "Heading 2",
-  description: "Medium section heading",
-  icon: "H2",
-  command: ({
-    editor,
-    range
-  }) => editor.chain().focus().deleteRange(range).setHeading({
-    level: 2
-  }).run()
-}, {
-  title: "Heading 3",
-  description: "Small section heading",
-  icon: "H3",
-  command: ({
-    editor,
-    range
-  }) => editor.chain().focus().deleteRange(range).setHeading({
-    level: 3
-  }).run()
-}, {
-  title: "Bullet List",
-  description: "Unordered list with bullets",
-  icon: "\u2022",
-  command: ({
-    editor,
-    range
-  }) => editor.chain().focus().deleteRange(range).toggleBulletList().run()
-}, {
-  title: "Numbered List",
-  description: "Ordered list with numbers",
-  icon: "1.",
-  command: ({
-    editor,
-    range
-  }) => editor.chain().focus().deleteRange(range).toggleOrderedList().run()
-}, {
-  title: "Task List",
-  description: "List with checkboxes",
-  icon: "\u2611",
-  command: ({
-    editor,
-    range
-  }) => editor.chain().focus().deleteRange(range).toggleTaskList().run()
-}, {
-  title: "Code Block",
-  description: "Fenced code with syntax highlighting",
-  icon: "<>",
-  command: ({
-    editor,
-    range
-  }) => editor.chain().focus().deleteRange(range).toggleCodeBlock().run()
-}, {
-  title: "Blockquote",
-  description: "Quoted text block",
-  icon: "\u275D",
-  command: ({
-    editor,
-    range
-  }) => editor.chain().focus().deleteRange(range).toggleBlockquote().run()
-}, {
-  title: "Horizontal Rule",
-  description: "Visual divider line",
-  icon: "\u2014",
-  command: ({
-    editor,
-    range
-  }) => editor.chain().focus().deleteRange(range).setHorizontalRule().run()
-}, {
-  title: "Table",
-  description: "Insert a 3\xD73 table",
-  icon: "\u229E",
-  command: ({
-    editor,
-    range
-  }) => editor.chain().focus().deleteRange(range).insertTable({
-    rows: 3,
-    cols: 3,
-    withHeaderRow: true
-  }).run()
-}, {
-  title: "Image",
-  description: "Insert image from URL",
-  icon: "\u{1F5BC}",
-  command: ({
-    editor,
-    range
-  }) => {
-    const url = window.prompt("Image URL:");
-    if (url) {
-      editor.chain().focus().deleteRange(range).setImage({
-        src: url
-      }).run();
-    }
-  }
-}];
-const SlashCommandsList = (0, import_react2.forwardRef)(({
-  items,
-  command
-}, ref) => {
-  const [selectedIndex, setSelectedIndex] = (0, import_react2.useState)(0);
-  const listRef = (0, import_react2.useRef)(null);
-  (0, import_react2.useEffect)(() => {
-    setSelectedIndex(0);
-  }, [items]);
-  (0, import_react2.useEffect)(() => {
-    const el = listRef.current?.children[selectedIndex];
-    el?.scrollIntoView({
-      block: "nearest"
-    });
-  }, [selectedIndex]);
-  const selectItem = (0, import_react2.useCallback)(index => {
-    const item = items[index];
-    if (item) command(item);
-  }, [items, command]);
-  (0, import_react2.useImperativeHandle)(ref, () => ({
-    onKeyDown: ({
-      event
-    }) => {
-      if (event.key === "ArrowUp") {
-        setSelectedIndex(i => (i + items.length - 1) % items.length);
-        return true;
-      }
-      if (event.key === "ArrowDown") {
-        setSelectedIndex(i => (i + 1) % items.length);
-        return true;
+function insertImageFromSlash(editor, range) {
+  const handlers = editor.storage.mediaUpload?.handlers ?? {};
+  if (handlers.onImageUpload && typeof document !== "undefined") {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = "image/*";
+    input.onchange = async () => {
+      const file = input.files?.[0];
+      if (!file) return;
+      try {
+        const 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);
       }
-      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"
-      })
-    });
+    };
+    input.click();
+    return;
   }
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
-    style: styles.container,
-    ref: listRef,
-    children: items.map((item, index) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)("button", {
-      style: {
-        ...styles.item,
-        ...(index === selectedIndex ? styles.itemSelected : {})
-      },
-      onClick: () => selectItem(index),
-      onMouseEnter: () => 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";
-const 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"
+  const url = window.prompt((0, import_t.t)("Image URL:"));
+  if (url) {
+    editor.chain().focus().deleteRange(range).setImage({
+      src: url
+    }).run();
   }
-};
+}
+const 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: ({
+      editor,
+      range
+    }) => 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: ({
+      editor,
+      range
+    }) => editor.chain().focus().deleteRange(range).setHeading({
+      level: 1
+    }).run()
+  }, {
+    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: ({
+      editor,
+      range
+    }) => 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: ({
+      editor,
+      range
+    }) => 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: ({
+      editor,
+      range
+    }) => 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: ({
+      editor,
+      range
+    }) => 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: ({
+      editor,
+      range
+    }) => 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: ({
+      editor,
+      range
+    }) => 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: ({
+      editor,
+      range
+    }) => 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: ({
+      editor,
+      range
+    }) => 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: ({
+      editor,
+      range
+    }) => 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: ({
+      editor,
+      range
+    }) => 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: ({
+      editor,
+      range
+    }) => 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: ({
+      editor,
+      range
+    }) => 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: ({
+      editor,
+      range
+    }) => 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: ({
+      editor,
+      range
+    }) => 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: ({
+      editor,
+      range
+    }) => editor.chain().focus().deleteRange(range).insertContent(":").run()
+  }];
+}
 const SlashCommands = import_core.Extension.create({
   name: "slashCommands",
   addOptions() {
@@ -292,61 +291,18 @@ const SlashCommands = import_core.Extension.create({
           query
         }) => {
           const q = query.toLowerCase();
-          return SLASH_ITEMS.filter(item => item.title.toLowerCase().includes(q) || item.description.toLowerCase().includes(q));
-        },
-        render: () => {
-          let component = null;
-          let popup = null;
-          return {
-            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);
-              const {
-                clientRect
-              } = props;
-              if (clientRect) {
-                const rect = clientRect();
-                if (rect) {
-                  popup.style.left = `${rect.left}px`;
-                  popup.style.top = `${rect.bottom + 4}px`;
-                }
-              }
-            },
-            onUpdate: props => {
-              component?.updateProps(props);
-              if (popup && props.clientRect) {
-                const rect = props.clientRect();
-                if (rect) {
-                  popup.style.left = `${rect.left}px`;
-                  popup.style.top = `${rect.bottom + 4}px`;
-                }
-              }
-            },
-            onKeyDown: props => {
-              if (props.event.key === "Escape") {
-                popup?.remove();
-                component?.destroy();
-                popup = null;
-                component = null;
-                return true;
-              }
-              return component?.ref?.onKeyDown(props) ?? false;
-            },
-            onExit: () => {
-              popup?.remove();
-              component?.destroy();
-              popup = null;
-              component = null;
-            }
-          };
+          return getSlashItems().filter(item => item.title.toLowerCase().includes(q) || item.description.toLowerCase().includes(q));
         },
+        render: (0, import_suggestionPopup.createSuggestionRenderer)({
+          toRow: item => ({
+            key: item.id,
+            title: item.title,
+            description: item.description,
+            icon: item.icon
+          }),
+          getChrome: import_suggestionPopup.getSuggestionChrome,
+          getEmptyLabel: () => (0, import_t.t)("No results")
+        }),
         command: ({
           editor,
           range,