@sex-editor/slash 0.0.1 → 0.0.3-dev.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 sexandviolence
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,26 @@
+# @sex-editor/slash
+
+Hello World usage:
+
+```ts
+import { createSexEditor } from "@sex-editor/core";
+import { registerSlashPlugin } from "@sex-editor/slash";
+
+const editor = createSexEditor("editor", {
+  language: "en",
+});
+
+registerSlashPlugin(editor);
+```
+
+Install:
+
+```bash
+npm i @sex-editor/slash
+```
+
+```bash
+pnpm add @sex-editor/slash
+```
+
+License: MIT

package/dist/index.d.ts

@@ -8,8 +8,8 @@ declare class SlashMenuPlugin {
     private filteredItems;
     private active;
     private items;
+    private commandRange;
     constructor(editor: SexEditor);
-    private getMenuItems;
     register(): void;
     private filterItems;
     private showMenu;
@@ -18,6 +18,27 @@ declare class SlashMenuPlugin {
     private updateMenuUI;
     private executeSelection;
 }
-declare function registerSlashPlugin(editor: SexEditor): SlashMenuPlugin;
 
-export { SlashMenuPlugin, registerSlashPlugin };
+declare const registerSlashPlugin: (editor: SexEditor) => SlashMenuPlugin;
+
+type SlashMenuGroup = "transform" | "insertInline" | "insertBlock";
+interface SlashMenuItem {
+    key: string;
+    label: string;
+    icon: string;
+    keywords: string[];
+    group: SlashMenuGroup;
+    execute: (editor: SexEditor) => void;
+}
+type SlashCommandRange = {
+    startKey: string;
+    startOffset: number;
+    endKey: string;
+    endOffset: number;
+};
+type SlashMatch = {
+    query: string;
+    range: SlashCommandRange;
+};
+
+export { type SlashCommandRange, type SlashMatch, type SlashMenuGroup, type SlashMenuItem, SlashMenuPlugin, registerSlashPlugin };

package/dist/index.js

@@ -1,32 +1,36 @@
-// src/index.ts
+// src/plugin/SlashMenuPlugin.ts
 import {
-  $createParagraphNode,
-  $getSelection,
-  $isRangeSelection,
+  $createRangeSelection,
+  $getNodeByKey,
+  $getSelection as $getSelection2,
+  $isRangeSelection as $isRangeSelection2,
+  $isTextNode as $isTextNode2,
+  $setSelection,
   COMMAND_PRIORITY_LOW,
   KEY_ARROW_DOWN_COMMAND,
   KEY_ARROW_UP_COMMAND,
   KEY_ENTER_COMMAND,
-  KEY_ESCAPE_COMMAND,
-  TextNode,
-  $insertNodes
+  KEY_ESCAPE_COMMAND
 } from "lexical";
+
+// src/constants/menuItems.ts
 import {
-  $createHeadingNode,
-  $createQuoteNode
-} from "@lexical/rich-text";
-import {
-  INSERT_ORDERED_LIST_COMMAND,
-  INSERT_UNORDERED_LIST_COMMAND
-} from "@lexical/list";
+  $createParagraphNode,
+  $getRoot,
+  $getSelection,
+  $isRangeSelection,
+  $insertNodes
+} from "lexical";
+import { $createHeadingNode, $createQuoteNode } from "@lexical/rich-text";
+import { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND } from "@lexical/list";
 import { $createCodeNode } from "@lexical/code";
 import {
+  $createAnchorNode,
   $createHorizontalRuleNode,
-  $createPageBreakNode,
-  $createTableNode,
   $createImageNode,
   $createInlineImageNode,
-  $createAnchorNode
+  $createPageBreakNode,
+  $createTableNode
 } from "@sex-editor/core";
 
 // ../ui/dist/index.js
@@ -731,408 +735,371 @@ ensureStyle(
 `
 );
 
-// src/index.ts
-var ensureStyle2 = (id, cssText) => {
-  if (typeof document === "undefined") return;
-  if (document.getElementById(id)) return;
-  const style = document.createElement("style");
-  style.id = id;
-  style.textContent = cssText;
-  (document.head ?? document.documentElement).appendChild(style);
+// src/constants/menuItems.ts
+var transformCurrentBlock = (createNode) => (editor) => {
+  editor.update(() => {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection)) return;
+    const anchor = selection.anchor.getNode();
+    const topLevel = anchor.getTopLevelElement();
+    const newNode = createNode();
+    if (!topLevel) {
+      $getRoot().append(newNode);
+    } else {
+      topLevel.replace(newNode);
+      newNode.append(...topLevel.getChildren());
+    }
+    newNode.select();
+  });
 };
-ensureStyle2(
-  "sex-slash-styles",
-  `.sex-slash-menu {
-  position: absolute;
-  z-index: 100;
-  background: white;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  width: 280px;
-  max-height: 300px;
-  overflow-y: auto;
-  padding: 4px;
-}
-
-.sex-slash-menu-item {
-  display: flex;
-  align-items: center;
-  padding: 8px 12px;
-  cursor: pointer;
-  border-radius: 4px;
-  font-size: 14px;
-  color: #374151;
-  transition: background-color 0.2s;
-}
-
-.sex-slash-menu-item:hover,
-.sex-slash-menu-item.selected {
-  background-color: #f3f4f6;
-}
-
-.sex-slash-menu-icon {
-  margin-right: 12px;
-  width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #6b7280;
-}
-
-.sex-slash-menu-label {
-  flex: 1;
-}
-
-.sex-slash-menu-hidden {
-  display: none;
-}
-`
-);
-var SlashMenuPlugin = class {
-  constructor(editor) {
-    this.menuElement = null;
-    this.selectedIndex = 0;
-    this.queryString = null;
-    this.filteredItems = [];
-    this.active = false;
-    this.editor = editor;
-    this.items = this.getMenuItems();
-  }
-  getMenuItems() {
-    const t = this.editor.t;
-    return [
-      {
-        key: "paragraph",
-        label: t("toolbar.block.paragraph") || "Paragraph",
-        icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M14 17H4v2h10v-2zm0-8H4v2h10V9zM4 15h16v-2H4v2zM4 5v2h16V5H4z"/></svg>`,
-        keywords: ["p", "paragraph", "text"],
-        execute: (editor) => {
-          editor.update(() => {
-            const selection = $getSelection();
-            if ($isRangeSelection(selection)) {
-              const paragraph = $createParagraphNode();
-              $insertNodes([paragraph]);
-            }
-          });
-        }
-      },
-      {
-        key: "anchor",
-        label: t("toolbar.anchor") || "Anchor",
-        icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"/></svg>`,
-        keywords: ["anchor", "bookmark", "id"],
-        execute: (editor) => {
-          const dialog = new AnchorInsertDialog({
-            t: (key) => editor.t ? editor.t(key) : key,
-            onSubmit: (data) => {
-              editor.update(() => {
-                const node = $createAnchorNode(data.id);
-                $insertNodes([node]);
-              });
-            }
-          });
-          dialog.show();
-        }
-      },
-      {
-        key: "h1",
-        label: t("toolbar.block.h1") || "Heading 1",
-        icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M5 4v3h5.5v12h3V7H19V4z"/></svg>`,
-        keywords: ["h1", "heading1", "title"],
-        execute: (editor) => {
-          editor.update(() => {
-            const selection = $getSelection();
-            if ($isRangeSelection(selection)) {
-              $insertNodes([$createHeadingNode("h1")]);
-            }
-          });
-        }
-      },
-      {
-        key: "h2",
-        label: t("toolbar.block.h2") || "Heading 2",
-        icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M5 4v3h5.5v12h3V7H19V4z"/></svg>`,
-        keywords: ["h2", "heading2", "subtitle"],
-        execute: (editor) => {
-          editor.update(() => {
-            const selection = $getSelection();
-            if ($isRangeSelection(selection)) {
-              $insertNodes([$createHeadingNode("h2")]);
-            }
-          });
-        }
-      },
-      {
-        key: "h3",
-        label: t("toolbar.block.h3") || "Heading 3",
-        icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M5 4v3h5.5v12h3V7H19V4z"/></svg>`,
-        keywords: ["h3", "heading3"],
-        execute: (editor) => {
-          editor.update(() => {
-            const selection = $getSelection();
-            if ($isRangeSelection(selection)) {
-              $insertNodes([$createHeadingNode("h3")]);
-            }
-          });
-        }
-      },
-      {
-        key: "h4",
-        label: t("toolbar.block.h4") || "Heading 4",
-        icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M5 4v3h5.5v12h3V7H19V4z"/></svg>`,
-        keywords: ["h4", "heading4"],
-        execute: (editor) => {
-          editor.update(() => {
-            const selection = $getSelection();
-            if ($isRangeSelection(selection)) {
-              $insertNodes([$createHeadingNode("h4")]);
-            }
-          });
-        }
-      },
-      {
-        key: "h5",
-        label: t("toolbar.block.h5") || "Heading 5",
-        icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M5 4v3h5.5v12h3V7H19V4z"/></svg>`,
-        keywords: ["h5", "heading5"],
-        execute: (editor) => {
-          editor.update(() => {
-            const selection = $getSelection();
-            if ($isRangeSelection(selection)) {
-              $insertNodes([$createHeadingNode("h5")]);
-            }
-          });
-        }
-      },
-      {
-        key: "h6",
-        label: t("toolbar.block.h6") || "Heading 6",
-        icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M5 4v3h5.5v12h3V7H19V4z"/></svg>`,
-        keywords: ["h6", "heading6"],
-        execute: (editor) => {
-          editor.update(() => {
-            const selection = $getSelection();
-            if ($isRangeSelection(selection)) {
-              $insertNodes([$createHeadingNode("h6")]);
-            }
-          });
-        }
-      },
-      {
-        key: "ul",
-        label: t("toolbar.block.bullet") || "Bullet List",
-        icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z"/></svg>`,
-        keywords: ["ul", "list", "bullet"],
-        execute: (editor) => {
-          editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, void 0);
-        }
-      },
-      {
-        key: "ol",
-        label: t("toolbar.block.number") || "Numbered List",
-        icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z"/></svg>`,
-        keywords: ["ol", "list", "number", "ordered"],
-        execute: (editor) => {
-          editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, void 0);
-        }
-      },
-      {
-        key: "code",
-        label: t("toolbar.block.code") || "Code Block",
-        icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg>`,
-        keywords: ["code", "block", "javascript", "ts"],
-        execute: (editor) => {
-          editor.update(() => {
-            const selection = $getSelection();
-            if ($isRangeSelection(selection)) {
-              $insertNodes([$createCodeNode()]);
-            }
-          });
-        }
-      },
-      {
-        key: "quote",
-        label: t("toolbar.block.quote") || "Quote",
-        icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"/></svg>`,
-        keywords: ["quote", "blockquote"],
-        execute: (editor) => {
-          editor.update(() => {
-            const selection = $getSelection();
-            if ($isRangeSelection(selection)) {
-              $insertNodes([$createQuoteNode()]);
-            }
-          });
-        }
-      },
-      {
-        key: "image",
-        label: t("toolbar.image") || "Image",
-        icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>`,
-        keywords: ["image", "photo", "picture"],
-        execute: (editor) => {
-          const dialog = new ImageInsertDialog({
-            t: editor.t,
-            onSubmit: async (data) => {
-              try {
-                let src = data.src || "";
-                const meta = data.type === "file" && data.file ? await Promise.resolve(editor._imageMetaResolver?.(data.file)).catch(() => void 0) : void 0;
-                if (data.type === "file" && data.file) {
-                  const file = data.file;
-                  const strategy = editor._imageStorageStrategy ?? "auto";
-                  const shouldBase64 = strategy === "base64" || strategy === "auto" && !editor._imageUploadHandler;
-                  if (!shouldBase64) {
-                    if (!editor._imageUploadHandler) {
-                      throw new Error("imageUploadHandler is required when imageStorage is 'upload'");
-                    }
-                    src = await editor._imageUploadHandler(file);
-                  } else {
-                    src = await new Promise((resolve) => {
-                      const reader = new FileReader();
-                      reader.onload = () => resolve(reader.result);
-                      reader.readAsDataURL(file);
-                    });
+var createSlashMenuItems = (editor) => {
+  const t = editor.t;
+  return [
+    {
+      key: "paragraph",
+      label: t("toolbar.block.paragraph") || "Paragraph",
+      icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M14 17H4v2h10v-2zm0-8H4v2h10V9zM4 15h16v-2H4v2zM4 5v2h16V5H4z"/></svg>`,
+      keywords: ["p", "paragraph", "text"],
+      group: "transform",
+      execute: transformCurrentBlock(() => $createParagraphNode())
+    },
+    {
+      key: "anchor",
+      label: t("toolbar.anchor") || "Anchor",
+      icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"/></svg>`,
+      keywords: ["anchor", "bookmark", "id"],
+      group: "insertInline",
+      execute: (editor2) => {
+        const dialog = new AnchorInsertDialog({
+          t: (key) => editor2.t ? editor2.t(key) : key,
+          onSubmit: (data) => {
+            editor2.update(() => {
+              const node = $createAnchorNode(data.id);
+              $insertNodes([node]);
+            });
+          }
+        });
+        dialog.show();
+      }
+    },
+    {
+      key: "h1",
+      label: t("toolbar.block.h1") || "Heading 1",
+      icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M5 4v3h5.5v12h3V7H19V4z"/></svg>`,
+      keywords: ["h1", "heading1", "title"],
+      group: "transform",
+      execute: transformCurrentBlock(() => $createHeadingNode("h1"))
+    },
+    {
+      key: "h2",
+      label: t("toolbar.block.h2") || "Heading 2",
+      icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M5 4v3h5.5v12h3V7H19V4z"/></svg>`,
+      keywords: ["h2", "heading2", "subtitle"],
+      group: "transform",
+      execute: transformCurrentBlock(() => $createHeadingNode("h2"))
+    },
+    {
+      key: "h3",
+      label: t("toolbar.block.h3") || "Heading 3",
+      icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M5 4v3h5.5v12h3V7H19V4z"/></svg>`,
+      keywords: ["h3", "heading3"],
+      group: "transform",
+      execute: transformCurrentBlock(() => $createHeadingNode("h3"))
+    },
+    {
+      key: "h4",
+      label: t("toolbar.block.h4") || "Heading 4",
+      icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M5 4v3h5.5v12h3V7H19V4z"/></svg>`,
+      keywords: ["h4", "heading4"],
+      group: "transform",
+      execute: transformCurrentBlock(() => $createHeadingNode("h4"))
+    },
+    {
+      key: "h5",
+      label: t("toolbar.block.h5") || "Heading 5",
+      icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M5 4v3h5.5v12h3V7H19V4z"/></svg>`,
+      keywords: ["h5", "heading5"],
+      group: "transform",
+      execute: transformCurrentBlock(() => $createHeadingNode("h5"))
+    },
+    {
+      key: "h6",
+      label: t("toolbar.block.h6") || "Heading 6",
+      icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M5 4v3h5.5v12h3V7H19V4z"/></svg>`,
+      keywords: ["h6", "heading6"],
+      group: "transform",
+      execute: transformCurrentBlock(() => $createHeadingNode("h6"))
+    },
+    {
+      key: "ul",
+      label: t("toolbar.block.bullet") || "Bullet List",
+      icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z"/></svg>`,
+      keywords: ["ul", "list", "bullet"],
+      group: "transform",
+      execute: (editor2) => editor2.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, void 0)
+    },
+    {
+      key: "ol",
+      label: t("toolbar.block.number") || "Numbered List",
+      icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z"/></svg>`,
+      keywords: ["ol", "list", "number", "ordered"],
+      group: "transform",
+      execute: (editor2) => editor2.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, void 0)
+    },
+    {
+      key: "code",
+      label: t("toolbar.block.code") || "Code Block",
+      icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg>`,
+      keywords: ["code", "block", "javascript", "ts"],
+      group: "transform",
+      execute: transformCurrentBlock(() => $createCodeNode())
+    },
+    {
+      key: "quote",
+      label: t("toolbar.block.quote") || "Quote",
+      icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"/></svg>`,
+      keywords: ["quote", "blockquote"],
+      group: "transform",
+      execute: transformCurrentBlock(() => $createQuoteNode())
+    },
+    {
+      key: "image",
+      label: t("toolbar.image") || "Image",
+      icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>`,
+      keywords: ["image", "photo", "picture"],
+      group: "insertBlock",
+      execute: (editor2) => {
+        const dialog = new ImageInsertDialog({
+          t: editor2.t,
+          onSubmit: async (data) => {
+            try {
+              let src = data.src || "";
+              const meta = data.type === "file" && data.file ? await Promise.resolve(editor2._imageMetaResolver?.(data.file)).catch(() => void 0) : void 0;
+              if (data.type === "file" && data.file) {
+                const file = data.file;
+                const strategy = editor2._imageStorageStrategy ?? "auto";
+                const shouldBase64 = strategy === "base64" || strategy === "auto" && !editor2._imageUploadHandler;
+                if (!shouldBase64) {
+                  if (!editor2._imageUploadHandler) {
+                    throw new Error("imageUploadHandler is required when imageStorage is 'upload'");
                   }
-                }
-                if (src) {
-                  editor.update(() => {
-                    const node = $createImageNode({
-                      src,
-                      altText: data.alt,
-                      maxWidth: 500,
-                      meta: meta || void 0
-                    });
-                    $insertNodes([node]);
+                  src = await editor2._imageUploadHandler(file);
+                } else {
+                  src = await new Promise((resolve) => {
+                    const reader = new FileReader();
+                    reader.onload = () => resolve(reader.result);
+                    reader.readAsDataURL(file);
                   });
                 }
-              } catch (e) {
-                console.error("Image insert failed", e);
               }
+              if (src) {
+                editor2.update(() => {
+                  const node = $createImageNode({
+                    src,
+                    altText: data.alt,
+                    maxWidth: 500,
+                    meta: meta || void 0
+                  });
+                  $insertNodes([node]);
+                });
+              }
+            } catch (e) {
+              console.error("Image insert failed", e);
             }
-          });
-          dialog.show();
-        }
-      },
-      {
-        key: "inline-image",
-        label: t("toolbar.inlineImage") || "Inline Image",
-        icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>`,
-        keywords: ["inline-image", "inline", "image", "img"],
-        execute: (editor) => {
-          const dialog = new ImageInsertDialog({
-            t: editor.t,
-            onSubmit: async (data) => {
-              try {
-                let src = data.src || "";
-                const meta = data.type === "file" && data.file ? await Promise.resolve(editor._imageMetaResolver?.(data.file)).catch(() => void 0) : void 0;
-                if (data.type === "file" && data.file) {
-                  const file = data.file;
-                  const strategy = editor._imageStorageStrategy ?? "auto";
-                  const shouldBase64 = strategy === "base64" || strategy === "auto" && !editor._imageUploadHandler;
-                  if (!shouldBase64) {
-                    if (!editor._imageUploadHandler) {
-                      throw new Error("imageUploadHandler is required when imageStorage is 'upload'");
-                    }
-                    src = await editor._imageUploadHandler(file);
-                  } else {
-                    src = await new Promise((resolve) => {
-                      const reader = new FileReader();
-                      reader.onload = () => resolve(reader.result);
-                      reader.readAsDataURL(file);
-                    });
+          }
+        });
+        dialog.show();
+      }
+    },
+    {
+      key: "inline-image",
+      label: t("toolbar.inlineImage") || "Inline Image",
+      icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>`,
+      keywords: ["inline-image", "inline", "image", "img"],
+      group: "insertInline",
+      execute: (editor2) => {
+        const dialog = new ImageInsertDialog({
+          t: editor2.t,
+          onSubmit: async (data) => {
+            try {
+              let src = data.src || "";
+              const meta = data.type === "file" && data.file ? await Promise.resolve(editor2._imageMetaResolver?.(data.file)).catch(() => void 0) : void 0;
+              if (data.type === "file" && data.file) {
+                const file = data.file;
+                const strategy = editor2._imageStorageStrategy ?? "auto";
+                const shouldBase64 = strategy === "base64" || strategy === "auto" && !editor2._imageUploadHandler;
+                if (!shouldBase64) {
+                  if (!editor2._imageUploadHandler) {
+                    throw new Error("imageUploadHandler is required when imageStorage is 'upload'");
                   }
-                }
-                if (src) {
-                  editor.update(() => {
-                    const node = $createInlineImageNode({
-                      src,
-                      altText: data.alt,
-                      maxWidth: 500,
-                      width: 100,
-                      meta: meta || void 0
-                    });
-                    $insertNodes([node]);
+                  src = await editor2._imageUploadHandler(file);
+                } else {
+                  src = await new Promise((resolve) => {
+                    const reader = new FileReader();
+                    reader.onload = () => resolve(reader.result);
+                    reader.readAsDataURL(file);
                   });
                 }
-              } catch (e) {
-                console.error("Inline image insert failed", e);
               }
+              if (src) {
+                editor2.update(() => {
+                  const node = $createInlineImageNode({
+                    src,
+                    altText: data.alt,
+                    maxWidth: 500,
+                    width: 100,
+                    meta: meta || void 0
+                  });
+                  $insertNodes([node]);
+                });
+              }
+            } catch (e) {
+              console.error("Inline image insert failed", e);
             }
-          });
-          dialog.show();
-        }
-      },
-      {
-        key: "table",
-        label: t("toolbar.insertTable") || "Table",
-        icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM8 20H4v-4h4v4zm0-6H4v-4h4v4zm0-6H4V4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4z"/></svg>`,
-        keywords: ["table", "grid"],
-        execute: (editor) => {
-          const dialog = new TableInsertDialog({
-            t,
-            onSubmit: (rows, cols) => {
-              editor.update(() => {
-                const node = $createTableNode(rows, cols);
-                $insertNodes([node]);
-              });
-            }
-          });
-          dialog.show();
-        }
-      },
-      {
-        key: "hr",
-        label: t("toolbar.horizontalRule") || "Horizontal Rule",
-        icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M4 11h16v2H4z"/></svg>`,
-        keywords: ["hr", "line", "separator"],
-        execute: (editor) => {
-          editor.update(() => {
-            const selection = $getSelection();
-            if ($isRangeSelection(selection)) {
-              $insertNodes([$createHorizontalRuleNode()]);
-            }
-          });
-        }
-      },
-      {
-        key: "page-break",
-        label: t("toolbar.pageBreak") || "Page Break",
-        icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M9 13h6v-2h-6v2zm-2 2H5v-2h2v2zm-2-4H3v2h2v-2zm0 8h2v-2H5v2zm14-2v-2h-2v2h2zm-2 4h2v-2h-2v2zM6 7H4v2h2V7zm14 0v2h-2V7h2zm-8-2h6v2h-6V5zM8 7H6v2h2V7zm8 2v2h2V9h-2zm-4 4h2v-2h-2v2zm-4 0h2v-2H8v2zm4 4h2v-2h-2v2z"/></svg>`,
-        keywords: ["page", "break", "split"],
-        execute: (editor) => {
-          editor.update(() => {
-            const selection = $getSelection();
-            if ($isRangeSelection(selection)) {
-              $insertNodes([$createPageBreakNode()]);
-            }
-          });
-        }
+          }
+        });
+        dialog.show();
+      }
+    },
+    {
+      key: "table",
+      label: t("toolbar.insertTable") || "Table",
+      icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM8 20H4v-4h4v4zm0-6H4v-4h4v4zm0-6H4V4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4z"/></svg>`,
+      keywords: ["table", "grid"],
+      group: "insertBlock",
+      execute: (editor2) => {
+        const dialog = new TableInsertDialog({
+          t,
+          onSubmit: (rows, cols) => {
+            editor2.update(() => {
+              const node = $createTableNode(rows, cols);
+              $insertNodes([node]);
+            });
+          }
+        });
+        dialog.show();
+      }
+    },
+    {
+      key: "hr",
+      label: t("toolbar.horizontalRule") || "Horizontal Rule",
+      icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M4 11h16v2H4z"/></svg>`,
+      keywords: ["hr", "line", "separator"],
+      group: "insertBlock",
+      execute: (editor2) => {
+        editor2.update(() => {
+          const selection = $getSelection();
+          if ($isRangeSelection(selection)) $insertNodes([$createHorizontalRuleNode()]);
+        });
       }
-    ];
+    },
+    {
+      key: "page-break",
+      label: t("toolbar.pageBreak") || "Page Break",
+      icon: `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M9 13h6v-2h-6v2zm-2 2H5v-2h2v2zm-2-4H3v2h2v-2zm0 8h2v-2H5v2zm14-2v-2h-2v2h2zm-2 4h2v-2h-2v2zM6 7H4v2h2V7zm14 0v2h-2V7h2zm-8-2h6v2h-6V5zM8 7H6v2h2V7zm8 2v2h2V9h-2zm-4 4h2v-2h-2v2zm-4 0h2v-2H8v2zm4 4h2v-2h-2v2z"/></svg>`,
+      keywords: ["page", "break", "split"],
+      group: "insertBlock",
+      execute: (editor2) => {
+        editor2.update(() => {
+          const selection = $getSelection();
+          if ($isRangeSelection(selection)) $insertNodes([$createPageBreakNode()]);
+        });
+      }
+    }
+  ];
+};
+
+// src/utils/getSlashMatch.ts
+import {
+  $isElementNode,
+  $isTextNode
+} from "lexical";
+var collectTextNodes = (node, out) => {
+  if ($isTextNode(node)) {
+    out.push(node);
+    return;
+  }
+  if ($isElementNode(node)) {
+    const children = node.getChildren();
+    for (const child of children) collectTextNodes(child, out);
+  }
+};
+var getSlashMatch = (selection) => {
+  const anchorNode = selection.anchor.getNode();
+  if (!$isTextNode(anchorNode)) return null;
+  const block = anchorNode.getTopLevelElement();
+  if (!block) return null;
+  const textNodes = [];
+  collectTextNodes(block, textNodes);
+  if (textNodes.length === 0) return null;
+  let cursorIndex = null;
+  let running = 0;
+  for (const n of textNodes) {
+    if (n.getKey() === anchorNode.getKey()) {
+      cursorIndex = running + selection.anchor.offset;
+      break;
+    }
+    running += n.getTextContentSize();
+  }
+  if (cursorIndex === null) return null;
+  const blockText = block.getTextContent();
+  const beforeCursor = blockText.slice(0, cursorIndex);
+  const slashIndex = beforeCursor.lastIndexOf("/");
+  if (slashIndex === -1) return null;
+  const query = beforeCursor.slice(slashIndex + 1);
+  if (/\s/.test(query)) return null;
+  const indexToPoint = (index) => {
+    let remaining = index;
+    for (const n of textNodes) {
+      const size = n.getTextContentSize();
+      if (remaining <= size) return { key: n.getKey(), offset: remaining };
+      remaining -= size;
+    }
+    const last = textNodes[textNodes.length - 1];
+    return { key: last.getKey(), offset: last.getTextContentSize() };
+  };
+  const start = indexToPoint(slashIndex);
+  const end = indexToPoint(cursorIndex);
+  if (!start || !end) return null;
+  return {
+    query,
+    range: {
+      startKey: start.key,
+      startOffset: start.offset,
+      endKey: end.key,
+      endOffset: end.offset
+    }
+  };
+};
+
+// src/plugin/SlashMenuPlugin.ts
+var SlashMenuPlugin = class {
+  constructor(editor) {
+    this.menuElement = null;
+    this.selectedIndex = 0;
+    this.queryString = null;
+    this.filteredItems = [];
+    this.active = false;
+    this.commandRange = null;
+    this.editor = editor;
+    this.items = createSlashMenuItems(editor);
   }
   register() {
     this.editor.registerUpdateListener(({ editorState }) => {
       editorState.read(() => {
-        const selection = $getSelection();
-        if (!$isRangeSelection(selection) || !selection.isCollapsed()) {
+        const selection = $getSelection2();
+        if (!$isRangeSelection2(selection) || !selection.isCollapsed()) {
           this.hideMenu();
           return;
         }
-        const anchor = selection.anchor;
-        const node = anchor.getNode();
-        if (node instanceof TextNode) {
-          const textContent = node.getTextContent();
-          const block = node.getTopLevelElementOrThrow();
-          const blockText = block.getTextContent();
-          if (blockText.startsWith("/") && selection.anchor.offset <= blockText.length) {
-            const query = blockText.substring(1);
-            this.queryString = query;
-            this.showMenu(selection);
-            return;
-          }
+        const match = getSlashMatch(selection);
+        if (!match) {
+          this.hideMenu();
+          return;
         }
-        this.hideMenu();
+        this.queryString = match.query;
+        this.commandRange = match.range;
+        this.showMenu(selection);
       });
     });
     this.editor.registerCommand(
@@ -1193,6 +1160,16 @@ var SlashMenuPlugin = class {
     this.filteredItems = this.items.filter(
       (item) => item.label.toLowerCase().includes(q) || item.keywords.some((k) => k.toLowerCase().includes(q))
     );
+    const groupOrder = ["transform", "insertInline", "insertBlock"];
+    const groupIndex = (g) => groupOrder.indexOf(g);
+    const keyOrder = /* @__PURE__ */ new Map();
+    this.items.forEach((it, idx) => keyOrder.set(it.key, idx));
+    this.filteredItems.sort((a, b) => {
+      const ga = groupIndex(a.group);
+      const gb = groupIndex(b.group);
+      if (ga !== gb) return ga - gb;
+      return (keyOrder.get(a.key) ?? 0) - (keyOrder.get(b.key) ?? 0);
+    });
   }
   showMenu(selection) {
     this.active = true;
@@ -1201,6 +1178,9 @@ var SlashMenuPlugin = class {
       this.hideMenu();
       return;
     }
+    if (this.selectedIndex >= this.filteredItems.length) {
+      this.selectedIndex = 0;
+    }
     if (!this.menuElement) {
       this.menuElement = document.createElement("div");
       this.menuElement.className = "sex-slash-menu";
@@ -1208,7 +1188,21 @@ var SlashMenuPlugin = class {
     }
     this.menuElement.innerHTML = "";
     this.menuElement.style.display = "block";
+    const translate = (key) => this.editor.t?.(key) ?? key;
+    const groupLabels = {
+      transform: translate("slash.group.transform"),
+      insertInline: translate("slash.group.insertInline"),
+      insertBlock: translate("slash.group.insertBlock")
+    };
+    let lastGroup = null;
     this.filteredItems.forEach((item, index) => {
+      if (item.group !== lastGroup) {
+        lastGroup = item.group;
+        const groupEl = document.createElement("div");
+        groupEl.className = "sex-slash-menu-group";
+        groupEl.textContent = groupLabels[item.group];
+        this.menuElement?.appendChild(groupEl);
+      }
       const el = document.createElement("div");
       el.className = `sex-slash-menu-item ${index === this.selectedIndex ? "selected" : ""}`;
       el.innerHTML = `
@@ -1235,9 +1229,8 @@ var SlashMenuPlugin = class {
     this.active = false;
     this.queryString = null;
     this.selectedIndex = 0;
-    if (this.menuElement) {
-      this.menuElement.style.display = "none";
-    }
+    this.commandRange = null;
+    if (this.menuElement) this.menuElement.style.display = "none";
   }
   moveSelection(delta) {
     this.selectedIndex += delta;
@@ -1262,31 +1255,108 @@ var SlashMenuPlugin = class {
   }
   executeSelection() {
     const item = this.filteredItems[this.selectedIndex];
-    if (item) {
-      const deleteCount = (this.queryString?.length || 0) + 1;
-      this.hideMenu();
-      this.editor.update(() => {
-        const selection = $getSelection();
-        if ($isRangeSelection(selection)) {
-          const anchor = selection.anchor;
-          const node = anchor.getNode();
-          if (node instanceof TextNode) {
-            node.spliceText(0, deleteCount, "", true);
-          }
-        }
-      }, {
+    if (!item) return;
+    const commandRange = this.commandRange;
+    this.hideMenu();
+    this.editor.update(
+      () => {
+        if (!commandRange) return;
+        const startNode = $getNodeByKey(commandRange.startKey);
+        const endNode = $getNodeByKey(commandRange.endKey);
+        if (!startNode || !endNode) return;
+        if (!$isTextNode2(startNode) || !$isTextNode2(endNode)) return;
+        const rangeSelection = $createRangeSelection();
+        rangeSelection.setTextNodeRange(
+          startNode,
+          commandRange.startOffset,
+          endNode,
+          commandRange.endOffset
+        );
+        $setSelection(rangeSelection);
+        rangeSelection.removeText();
+      },
+      {
         onUpdate: () => {
           item.execute(this.editor);
         }
-      });
-    }
+      }
+    );
   }
 };
-function registerSlashPlugin(editor) {
+
+// src/plugin/registerSlashPlugin.ts
+var registerSlashPlugin = (editor) => {
   const plugin = new SlashMenuPlugin(editor);
   plugin.register();
   return plugin;
+};
+
+// src/index.ts
+var ensureStyle2 = (id, cssText) => {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(id)) return;
+  const style = document.createElement("style");
+  style.id = id;
+  style.textContent = cssText;
+  (document.head ?? document.documentElement).appendChild(style);
+};
+ensureStyle2(
+  "sex-slash-styles",
+  `.sex-slash-menu {
+  position: absolute;
+  z-index: 100;
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  width: 280px;
+  max-height: 300px;
+  overflow-y: auto;
+  padding: 4px;
+}
+
+.sex-slash-menu-item {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  cursor: pointer;
+  border-radius: 4px;
+  font-size: 14px;
+  color: #374151;
+  transition: background-color 0.2s;
+}
+
+.sex-slash-menu-item:hover,
+.sex-slash-menu-item.selected {
+  background-color: #f3f4f6;
 }
+
+.sex-slash-menu-icon {
+  margin-right: 12px;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #6b7280;
+}
+
+.sex-slash-menu-label {
+  flex: 1;
+}
+
+.sex-slash-menu-group {
+  padding: 6px 12px;
+  font-size: 12px;
+  color: #6b7280;
+  user-select: none;
+}
+
+.sex-slash-menu-hidden {
+  display: none;
+}
+`
+);
 export {
   SlashMenuPlugin,
   registerSlashPlugin

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sex-editor/slash",
-  "version": "0.0.1",
+  "version": "0.0.3-dev.0",
   "description": "",
   "type": "module",
   "main": "./dist/index.js",
@@ -15,8 +15,8 @@
   "devDependencies": {
     "tsup": "8.3.5",
     "typescript": "^5.6.3",
-    "@sex-editor/core": "0.0.2",
-    "@sex-editor/ui": "0.0.1"
+    "@sex-editor/ui": "0.0.1",
+    "@sex-editor/core": "0.0.3-dev.0"
   },
   "peerDependencies": {
     "@sex-editor/core": ">=0.0.2 <0.0.3",
@@ -35,7 +35,7 @@
   ],
   "keywords": [],
   "author": "",
-  "license": "ISC",
+  "license": "MIT",
   "scripts": {
     "dev": "tsup --watch",
     "build": "tsup"