@haklex/rich-plugin-slash-menu 0.0.1

package/LICENSE

@@ -0,0 +1,28 @@
+MIT License
+
+Copyright (c) 2024 Innei
+
+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.
+
+
+Additional Terms and Conditions
+
+----------------
+
+Use of this software is governed by the terms of MIT and, in addition, by the terms and conditions described in the additional file (ADDITIONAL_TERMS.md). By using this software, you agree to abide by these additional terms and conditions.

package/README.md

@@ -0,0 +1,44 @@
+# @haklex/rich-plugin-slash-menu
+
+斜杠命令菜单插件。
+
+## 安装
+
+```bash
+pnpm add @haklex/rich-plugin-slash-menu @haklex/rich-editor
+```
+
+## 导出
+
+```ts
+export { SlashMenuPlugin } from './SlashMenuPlugin'
+export type { SlashMenuPluginProps } from './SlashMenuPlugin'
+export { SlashMenuItem } from './SlashMenuItem'
+export { SlashMenuList } from './SlashMenuList'
+export { getBuiltinItems } from './builtinItems'
+```
+
+## 使用
+
+```tsx
+import { SlashMenuPlugin } from '@haklex/rich-plugin-slash-menu'
+import { RichEditor } from '@haklex/rich-editor'
+
+<RichEditor>
+  <SlashMenuPlugin />
+</RichEditor>
+```
+
+## Props
+
+```ts
+interface SlashMenuPluginProps {
+  items?: SlashMenuItem[]      // 自定义项目
+  extraItems?: SlashMenuItem[] // 额外项目
+  triggerChar?: string         // 触发字符，默认 '/'
+}
+```
+
+## License
+
+MIT

package/dist/SlashMenuItem.d.ts

@@ -0,0 +1,19 @@
+import { MenuOption } from '@lexical/react/LexicalTypeaheadMenuPlugin';
+import { LexicalEditor } from 'lexical';
+import { ReactNode } from 'react';
+export declare class SlashMenuItem extends MenuOption {
+    title: string;
+    icon: ReactNode;
+    description: string;
+    keywords: string[];
+    section: string;
+    onSelect: (editor: LexicalEditor, queryString: string) => void;
+    constructor(title: string, options: {
+        icon?: ReactNode;
+        description?: string;
+        keywords?: string[];
+        section?: string;
+        onSelect: (editor: LexicalEditor, queryString: string) => void;
+    });
+}
+//# sourceMappingURL=SlashMenuItem.d.ts.map

package/dist/SlashMenuItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlashMenuItem.d.ts","sourceRoot":"","sources":["../src/SlashMenuItem.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,2CAA2C,CAAA;AACtE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAC5C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,qBAAa,aAAc,SAAQ,UAAU;IAC3C,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,SAAS,CAAA;IACf,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,EAAE,CAAA;IAClB,OAAO,EAAE,MAAM,CAAA;IACf,QAAQ,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;gBAG5D,KAAK,EAAE,MAAM,EACb,OAAO,EAAE;QACP,IAAI,CAAC,EAAE,SAAS,CAAA;QAChB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAA;QACnB,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,QAAQ,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;KAC/D;CAUJ"}

package/dist/SlashMenuList.d.ts

@@ -0,0 +1,10 @@
+import { SlashMenuItem } from './SlashMenuItem';
+interface SlashMenuListProps {
+    options: SlashMenuItem[];
+    selectedIndex: number | null;
+    selectOptionAndCleanUp: (option: SlashMenuItem) => void;
+    setHighlightedIndex: (index: number) => void;
+}
+export declare function SlashMenuList({ options, selectedIndex, selectOptionAndCleanUp, setHighlightedIndex, }: SlashMenuListProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SlashMenuList.d.ts.map

package/dist/SlashMenuList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlashMenuList.d.ts","sourceRoot":"","sources":["../src/SlashMenuList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAGpD,UAAU,kBAAkB;IAC1B,OAAO,EAAE,aAAa,EAAE,CAAA;IACxB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,sBAAsB,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAA;IACvD,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAC7C;AAyBD,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,aAAa,EACb,sBAAsB,EACtB,mBAAmB,GACpB,EAAE,kBAAkB,2CA4CpB"}

package/dist/SlashMenuPlugin.d.ts

@@ -0,0 +1,10 @@
+import { LexicalEditor } from 'lexical';
+import { SlashMenuItem } from './SlashMenuItem';
+export interface SlashMenuPluginProps {
+    items?: SlashMenuItem[];
+    extraItems?: SlashMenuItem[];
+    triggerChar?: string;
+}
+export declare function collectNodeSlashItems(editor: LexicalEditor): SlashMenuItem[];
+export declare function SlashMenuPlugin({ items, extraItems, triggerChar, }: SlashMenuPluginProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SlashMenuPlugin.d.ts.map

package/dist/SlashMenuPlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlashMenuPlugin.d.ts","sourceRoot":"","sources":["../src/SlashMenuPlugin.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAY,MAAM,SAAS,CAAA;AAOtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAIpD,MAAM,WAAW,oBAAoB;IACnC,KAAK,CAAC,EAAE,aAAa,EAAE,CAAA;IACvB,UAAU,CAAC,EAAE,aAAa,EAAE,CAAA;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAWD,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,aAAa,GAAG,aAAa,EAAE,CAY5E;AAWD,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,UAAU,EACV,WAAiB,GAClB,EAAE,oBAAoB,2CAqEtB"}

package/dist/builtinItems.d.ts

@@ -0,0 +1,3 @@
+import { SlashMenuItem } from './SlashMenuItem';
+export declare function getBuiltinItems(): SlashMenuItem[];
+//# sourceMappingURL=builtinItems.d.ts.map

package/dist/builtinItems.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"builtinItems.d.ts","sourceRoot":"","sources":["../src/builtinItems.ts"],"names":[],"mappings":"AAyBA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAM/C,wBAAgB,eAAe,IAAI,aAAa,EAAE,CA2HjD"}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { getBuiltinItems } from './builtinItems';
+export { SlashMenuItem } from './SlashMenuItem';
+export { SlashMenuList } from './SlashMenuList';
+export type { SlashMenuPluginProps } from './SlashMenuPlugin';
+export { collectNodeSlashItems, SlashMenuPlugin } from './SlashMenuPlugin';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAA;AAC7D,OAAO,EAAE,qBAAqB,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA"}

package/dist/index.mjs

@@ -0,0 +1,317 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, INSERT_CHECK_LIST_COMMAND } from "@lexical/list";
+import { INSERT_HORIZONTAL_RULE_COMMAND } from "@lexical/react/LexicalHorizontalRuleNode";
+import { $createHeadingNode, $createQuoteNode } from "@lexical/rich-text";
+import { $setBlocksType } from "@lexical/selection";
+import { INSERT_TABLE_COMMAND } from "@lexical/table";
+import { $getSelection, $isRangeSelection, $createParagraphNode } from "lexical";
+import { Type, Heading1, Heading2, Heading3, TextQuote, Minus, Table, List, ListOrdered, ListChecks } from "lucide-react";
+import { createElement, useMemo, createContext, use, useState, useCallback } from "react";
+import { MenuOption, useBasicTypeaheadTriggerMatch, LexicalTypeaheadMenuPlugin } from "@lexical/react/LexicalTypeaheadMenuPlugin";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { createPortal } from "react-dom";
+class SlashMenuItem extends MenuOption {
+  constructor(title, options) {
+    super(title);
+    __publicField(this, "title");
+    __publicField(this, "icon");
+    __publicField(this, "description");
+    __publicField(this, "keywords");
+    __publicField(this, "section");
+    __publicField(this, "onSelect");
+    this.title = title;
+    this.icon = options.icon ?? "";
+    this.description = options.description ?? "";
+    this.keywords = options.keywords ?? [];
+    this.section = options.section ?? "BASIC BLOCKS";
+    this.onSelect = options.onSelect;
+  }
+}
+const SECTION_BASIC = "BASIC BLOCKS";
+const SECTION_LIST = "LISTS";
+const ICON_SIZE = 20;
+function getBuiltinItems() {
+  return [
+    new SlashMenuItem("Text", {
+      icon: createElement(Type, { size: ICON_SIZE }),
+      description: "Plain text block",
+      keywords: ["paragraph", "text", "plain"],
+      section: SECTION_BASIC,
+      onSelect: (editor) => {
+        editor.update(() => {
+          const selection = $getSelection();
+          if ($isRangeSelection(selection)) {
+            $setBlocksType(selection, () => $createParagraphNode());
+          }
+        });
+      }
+    }),
+    new SlashMenuItem("Heading 1", {
+      icon: createElement(Heading1, { size: ICON_SIZE }),
+      description: "Large section heading",
+      keywords: ["heading", "h1", "title"],
+      section: SECTION_BASIC,
+      onSelect: (editor) => {
+        editor.update(() => {
+          const selection = $getSelection();
+          if ($isRangeSelection(selection)) {
+            $setBlocksType(selection, () => $createHeadingNode("h1"));
+          }
+        });
+      }
+    }),
+    new SlashMenuItem("Heading 2", {
+      icon: createElement(Heading2, { size: ICON_SIZE }),
+      description: "Medium section heading",
+      keywords: ["heading", "h2", "subtitle"],
+      section: SECTION_BASIC,
+      onSelect: (editor) => {
+        editor.update(() => {
+          const selection = $getSelection();
+          if ($isRangeSelection(selection)) {
+            $setBlocksType(selection, () => $createHeadingNode("h2"));
+          }
+        });
+      }
+    }),
+    new SlashMenuItem("Heading 3", {
+      icon: createElement(Heading3, { size: ICON_SIZE }),
+      description: "Small section heading",
+      keywords: ["heading", "h3"],
+      section: SECTION_BASIC,
+      onSelect: (editor) => {
+        editor.update(() => {
+          const selection = $getSelection();
+          if ($isRangeSelection(selection)) {
+            $setBlocksType(selection, () => $createHeadingNode("h3"));
+          }
+        });
+      }
+    }),
+    new SlashMenuItem("Quote", {
+      icon: createElement(TextQuote, { size: ICON_SIZE }),
+      description: "Capture a quote",
+      keywords: ["quote", "blockquote"],
+      section: SECTION_BASIC,
+      onSelect: (editor) => {
+        editor.update(() => {
+          const selection = $getSelection();
+          if ($isRangeSelection(selection)) {
+            $setBlocksType(selection, () => $createQuoteNode());
+          }
+        });
+      }
+    }),
+    new SlashMenuItem("Divider", {
+      icon: createElement(Minus, { size: ICON_SIZE }),
+      description: "Visual separator",
+      keywords: ["divider", "hr", "rule", "separator"],
+      section: SECTION_BASIC,
+      onSelect: (editor) => {
+        editor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, void 0);
+      }
+    }),
+    new SlashMenuItem("Table", {
+      icon: createElement(Table, { size: ICON_SIZE }),
+      description: "Add a table",
+      keywords: ["table", "grid"],
+      section: SECTION_BASIC,
+      onSelect: (editor) => {
+        editor.dispatchCommand(INSERT_TABLE_COMMAND, {
+          columns: "3",
+          rows: "3",
+          includeHeaders: true
+        });
+      }
+    }),
+    new SlashMenuItem("Bulleted List", {
+      icon: createElement(List, { size: ICON_SIZE }),
+      description: "Unordered list",
+      keywords: ["list", "bullet", "unordered"],
+      section: SECTION_LIST,
+      onSelect: (editor) => {
+        editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, void 0);
+      }
+    }),
+    new SlashMenuItem("Numbered List", {
+      icon: createElement(ListOrdered, { size: ICON_SIZE }),
+      description: "Ordered list with numbers",
+      keywords: ["list", "ordered", "number"],
+      section: SECTION_LIST,
+      onSelect: (editor) => {
+        editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, void 0);
+      }
+    }),
+    new SlashMenuItem("To-do List", {
+      icon: createElement(ListChecks, { size: ICON_SIZE }),
+      description: "Track tasks with checkboxes",
+      keywords: ["task", "todo", "checkbox", "checklist"],
+      section: SECTION_LIST,
+      onSelect: (editor) => {
+        editor.dispatchCommand(INSERT_CHECK_LIST_COMMAND, void 0);
+      }
+    })
+  ];
+}
+var slashMenu = "qolrkf0";
+var slashMenuSection = "qolrkf1";
+var slashMenuItem = "qolrkf2";
+var slashMenuItemIcon = "qolrkf3";
+var slashMenuItemText = "qolrkf4";
+var slashMenuItemTitle = "qolrkf5";
+var slashMenuItemDescription = "qolrkf6";
+var slashMenuEmpty = "qolrkf7";
+function groupBySection(options) {
+  const groups = [];
+  const seen = /* @__PURE__ */ new Map();
+  options.forEach((item, index) => {
+    const label = item.section;
+    let group = seen.get(label);
+    if (!group) {
+      group = { label, items: [] };
+      seen.set(label, group);
+      groups.push(group);
+    }
+    group.items.push({ item, globalIndex: index });
+  });
+  return groups;
+}
+function SlashMenuList({
+  options,
+  selectedIndex,
+  selectOptionAndCleanUp,
+  setHighlightedIndex
+}) {
+  const sections = useMemo(() => groupBySection(options), [options]);
+  if (options.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: slashMenu, children: /* @__PURE__ */ jsx("div", { className: slashMenuEmpty, children: "No matching commands" }) });
+  }
+  return /* @__PURE__ */ jsx("ul", { className: slashMenu, role: "listbox", children: sections.map((section) => /* @__PURE__ */ jsxs("li", { role: "presentation", children: [
+    /* @__PURE__ */ jsx("div", { className: slashMenuSection, children: section.label }),
+    /* @__PURE__ */ jsx("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, role: "group", children: section.items.map(({ item, globalIndex }) => /* @__PURE__ */ jsxs(
+      "li",
+      {
+        className: slashMenuItem,
+        role: "option",
+        "aria-selected": globalIndex === selectedIndex,
+        onClick: () => selectOptionAndCleanUp(item),
+        onMouseEnter: () => setHighlightedIndex(globalIndex),
+        ref: item.setRefElement,
+        tabIndex: -1,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: slashMenuItemIcon, children: item.icon }),
+          /* @__PURE__ */ jsxs("span", { className: slashMenuItemText, children: [
+            /* @__PURE__ */ jsx("span", { className: slashMenuItemTitle, children: item.title }),
+            item.description && /* @__PURE__ */ jsx("span", { className: slashMenuItemDescription, children: item.description })
+          ] })
+        ]
+      },
+      item.key
+    )) })
+  ] }, section.label)) });
+}
+const PortalThemeContext = createContext({
+  className: ""
+});
+function usePortalTheme() {
+  return use(PortalThemeContext);
+}
+function PortalThemeWrapper({ children }) {
+  const { className } = usePortalTheme();
+  if (!className) return children;
+  return /* @__PURE__ */ jsx("div", { style: { display: "contents" }, className, children });
+}
+function collectNodeSlashItems(editor) {
+  const items = [];
+  const nodes = editor._nodes;
+  for (const { klass } of nodes.values()) {
+    const configs = klass.slashMenuItems;
+    if (configs) {
+      for (const config of configs) {
+        items.push(new SlashMenuItem(config.title, config));
+      }
+    }
+  }
+  return items;
+}
+function filterItems(query, items) {
+  if (!query) return items;
+  const lower = query.toLowerCase();
+  return items.filter((item) => {
+    if (item.title.toLowerCase().includes(lower)) return true;
+    return item.keywords.some((kw) => kw.toLowerCase().includes(lower));
+  });
+}
+function SlashMenuPlugin({
+  items,
+  extraItems,
+  triggerChar = "/"
+}) {
+  const [editor] = useLexicalComposerContext();
+  const [queryString, setQueryString] = useState(null);
+  const allItems = useMemo(() => {
+    if (items) return items;
+    const builtins = getBuiltinItems();
+    const nodeItems = collectNodeSlashItems(editor);
+    const combined = [...builtins, ...nodeItems];
+    return extraItems ? [...combined, ...extraItems] : combined;
+  }, [items, extraItems, editor]);
+  const filteredItems = useMemo(
+    () => filterItems(queryString ?? "", allItems),
+    [queryString, allItems]
+  );
+  const checkForTriggerMatch = useBasicTypeaheadTriggerMatch(triggerChar, {
+    minLength: 0
+  });
+  const onSelectOption = useCallback(
+    (option, textNodeContainingQuery, closeMenu, matchingString) => {
+      editor.update(() => {
+        if (textNodeContainingQuery) {
+          const selection = $getSelection();
+          if ($isRangeSelection(selection)) {
+            textNodeContainingQuery.remove();
+          }
+        }
+      });
+      closeMenu();
+      option.onSelect(editor, matchingString);
+    },
+    [editor]
+  );
+  return /* @__PURE__ */ jsx(
+    LexicalTypeaheadMenuPlugin,
+    {
+      onQueryChange: setQueryString,
+      onSelectOption,
+      triggerFn: checkForTriggerMatch,
+      options: filteredItems,
+      menuRenderFn: (anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => {
+        if (!anchorElementRef.current || filteredItems.length === 0) {
+          return null;
+        }
+        return createPortal(
+          /* @__PURE__ */ jsx(PortalThemeWrapper, { children: /* @__PURE__ */ jsx(
+            SlashMenuList,
+            {
+              options: filteredItems,
+              selectedIndex,
+              selectOptionAndCleanUp,
+              setHighlightedIndex
+            }
+          ) }),
+          anchorElementRef.current
+        );
+      }
+    }
+  );
+}
+export {
+  SlashMenuItem,
+  SlashMenuList,
+  SlashMenuPlugin,
+  collectNodeSlashItems,
+  getBuiltinItems
+};

package/dist/rich-plugin-slash-menu.css

@@ -0,0 +1,86 @@
+.qolrkf0 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 320px;
+  max-height: 340px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background: var(--rc-bg);
+  border: 1px solid var(--rc-border);
+  border-radius: 10px;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.08);
+  padding: 6px 0;
+  list-style: none;
+  margin: 0;
+}
+.qolrkf0::-webkit-scrollbar {
+  width: 6px;
+}
+.qolrkf0::-webkit-scrollbar-thumb {
+  background: rgba(0,0,0,0.1);
+  border-radius: 3px;
+}
+.qolrkf1 {
+  padding: 10px 14px 4px;
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--rc-text-secondary);
+  user-select: none;
+}
+.qolrkf2 {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 6px 10px;
+  margin: 0 6px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.1s ease;
+}
+.qolrkf2:hover, .qolrkf2[aria-selected="true"] {
+  background: var(--rc-bg-secondary);
+}
+.qolrkf3 {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  flex-shrink: 0;
+  border-radius: 6px;
+  background: var(--rc-bg-secondary);
+  border: 1px solid var(--rc-border);
+  color: var(--rc-text-secondary);
+  line-height: 1;
+}
+.qolrkf4 {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  gap: 1px;
+}
+.qolrkf5 {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.3;
+  color: var(--rc-text);
+}
+.qolrkf6 {
+  font-size: 12px;
+  line-height: 1.3;
+  color: var(--rc-text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.qolrkf7 {
+  padding: 20px 16px;
+  color: color-mix(in srgb, var(--rc-text-secondary) 70%, transparent);
+  font-size: 13px;
+  text-align: center;
+}

package/dist/styles.css.d.ts

@@ -0,0 +1,9 @@
+export declare const slashMenu: string;
+export declare const slashMenuSection: string;
+export declare const slashMenuItem: string;
+export declare const slashMenuItemIcon: string;
+export declare const slashMenuItemText: string;
+export declare const slashMenuItemTitle: string;
+export declare const slashMenuItemDescription: string;
+export declare const slashMenuEmpty: string;
+//# sourceMappingURL=styles.css.d.ts.map

package/dist/styles.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../src/styles.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,SAAS,QAiBpB,CAAA;AAYF,eAAO,MAAM,gBAAgB,QAQ3B,CAAA;AAGF,eAAO,MAAM,aAAa,QASxB,CAAA;AAOF,eAAO,MAAM,iBAAiB,QAa5B,CAAA;AAGF,eAAO,MAAM,iBAAiB,QAK5B,CAAA;AAEF,eAAO,MAAM,kBAAkB,QAK7B,CAAA;AAEF,eAAO,MAAM,wBAAwB,QAOnC,CAAA;AAGF,eAAO,MAAM,cAAc,QAKzB,CAAA"}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@haklex/rich-plugin-slash-menu",
+  "version": "0.0.1",
+  "description": "Slash command menu plugin",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./style.css": "./dist/rich-plugin-slash-menu.css"
+  },
+  "main": "./dist/index.mjs",
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "@lexical/list": "^0.39.0",
+    "@lexical/react": "^0.39.0",
+    "@lexical/rich-text": "^0.39.0",
+    "@lexical/selection": "^0.39.0",
+    "@lexical/table": "^0.39.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vanilla-extract/css": "^1.17.1",
+    "@vanilla-extract/vite-plugin": "^4.0.20",
+    "lexical": "^0.39.0",
+    "lucide-react": "^0.574.0",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "typescript": "^5.9.0",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.0",
+    "@haklex/rich-style-token": "0.0.1"
+  },
+  "peerDependencies": {
+    "@lexical/list": "^0.39.0",
+    "@lexical/react": "^0.39.0",
+    "@lexical/rich-text": "^0.39.0",
+    "@lexical/selection": "^0.39.0",
+    "@lexical/table": "^0.39.0",
+    "lexical": "^0.39.0",
+    "lucide-react": "^0.574.0",
+    "react": ">=19",
+    "react-dom": ">=19",
+    "@haklex/rich-style-token": "0.0.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev:build": "vite build --watch"
+  },
+  "types": "./dist/index.d.ts"
+}