@multiplatform.one/rich-text 6.0.0

package/dist/cjs/editor/SlashCommands.cjs

@@ -0,0 +1,369 @@
+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 SlashCommands_exports = {};
+__export(SlashCommands_exports, {
+  SlashCommands: () => SlashCommands
+});
+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_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;
+      }
+      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((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 SlashCommands = import_core.Extension.create({
+  name: "slashCommands",
+  addOptions() {
+    return {
+      suggestion: {
+        char: "/",
+        startOfLine: false,
+        items: ({
+          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;
+            }
+          };
+        },
+        command: ({
+          editor,
+          range,
+          props
+        }) => {
+          props.command({
+            editor,
+            range
+          });
+        }
+      }
+    };
+  },
+  addProseMirrorPlugins() {
+    return [(0, import_suggestion.default)({
+      editor: this.editor,
+      ...this.options.suggestion
+    })];
+  }
+});