@haklex/rich-plugin-slash-menu 0.0.65 → 0.0.67

package/README.md

@@ -1,44 +1,83 @@
 # @haklex/rich-plugin-slash-menu
 
-斜杠命令菜单插件。
+Slash command menu plugin for inserting blocks via `/` trigger.
 
-## 安装
+## Installation
 
 ```bash
-pnpm add @haklex/rich-plugin-slash-menu @haklex/rich-editor
+pnpm add @haklex/rich-plugin-slash-menu
 ```
 
-## 导出
+## Peer Dependencies
 
-```ts
-export { SlashMenuPlugin } from './SlashMenuPlugin'
-export type { SlashMenuPluginProps } from './SlashMenuPlugin'
-export { SlashMenuItem } from './SlashMenuItem'
-export { SlashMenuList } from './SlashMenuList'
-export { getBuiltinItems } from './builtinItems'
-```
+| Package | Version |
+| --- | --- |
+| `@lexical/list` | `^0.41.0` |
+| `@lexical/react` | `^0.41.0` |
+| `@lexical/rich-text` | `^0.41.0` |
+| `@lexical/selection` | `^0.41.0` |
+| `@lexical/table` | `^0.41.0` |
+| `lexical` | `^0.41.0` |
+| `lucide-react` | `^0.574.0` |
+| `react` | `>= 19` |
+| `react-dom` | `>= 19` |
 
-## 使用
+## Usage
 
 ```tsx
 import { SlashMenuPlugin } from '@haklex/rich-plugin-slash-menu'
-import { RichEditor } from '@haklex/rich-editor'
+import '@haklex/rich-plugin-slash-menu/style.css'
 
-<RichEditor>
-  <SlashMenuPlugin />
-</RichEditor>
+function Editor() {
+  return (
+    <RichEditor>
+      <SlashMenuPlugin />
+    </RichEditor>
+  )
+}
 ```
 
-## Props
+Typing `/` at the start of a block opens a command menu with filterable block insertion options (headings, lists, code blocks, tables, etc.). The menu supports keyboard navigation and fuzzy matching.
 
-```ts
-interface SlashMenuPluginProps {
-  items?: SlashMenuItem[]      // 自定义项目
-  extraItems?: SlashMenuItem[] // 额外项目
-  triggerChar?: string         // 触发字符，默认 '/'
-}
+```tsx
+import {
+  SlashMenuPlugin,
+  SlashMenuItem,
+  SlashMenuList,
+  getBuiltinItems,
+  collectNodeSlashItems,
+} from '@haklex/rich-plugin-slash-menu'
+import type { SlashMenuPluginProps } from '@haklex/rich-plugin-slash-menu'
+
+// Get builtin slash menu items
+const items = getBuiltinItems()
+
+// Collect slash items registered by nodes
+const nodeItems = collectNodeSlashItems()
 ```
 
+## Exports
+
+| Export | Type | Description |
+| --- | --- | --- |
+| `SlashMenuPlugin` | Component | Main plugin component to render inside `RichEditor` |
+| `SlashMenuItem` | Component | Individual menu item component |
+| `SlashMenuList` | Component | Menu list container component |
+| `getBuiltinItems` | Function | Returns the default set of slash menu items |
+| `collectNodeSlashItems` | Function | Collects slash menu items registered by editor nodes |
+| `SlashMenuPluginProps` | TypeScript type | Props type for `SlashMenuPlugin` |
+
+## Sub-path Exports
+
+| Path | Description |
+| --- | --- |
+| `@haklex/rich-plugin-slash-menu` | Plugin component, menu items, utilities, and types |
+| `@haklex/rich-plugin-slash-menu/style.css` | Stylesheet |
+
+## Part of Haklex
+
+This package is part of the [Haklex](../../README.md) rich editor ecosystem.
+
 ## License
 
 MIT

package/dist/SlashMenuList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SlashMenuList.d.ts","sourceRoot":"","sources":["../src/SlashMenuList.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAGpD,UAAU,kBAAkB;IAC1B,aAAa,EAAE,WAAW,CAAA;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,aAAa,EACb,OAAO,EACP,aAAa,EACb,sBAAsB,EACtB,mBAAmB,GACpB,EAAE,kBAAkB,2CA8EpB"}
+{"version":3,"file":"SlashMenuList.d.ts","sourceRoot":"","sources":["../src/SlashMenuList.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGrD,UAAU,kBAAkB;IAC1B,aAAa,EAAE,WAAW,CAAC;IAC3B,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,sBAAsB,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;IACxD,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AAyBD,wBAAgB,aAAa,CAAC,EAC5B,aAAa,EACb,OAAO,EACP,aAAa,EACb,sBAAsB,EACtB,mBAAmB,GACpB,EAAE,kBAAkB,2CA+DpB"}

package/dist/SlashMenuPlugin.d.ts

@@ -1,10 +1,10 @@
 import { LexicalEditor } from 'lexical';
 import { SlashMenuItem } from './SlashMenuItem';
 export interface SlashMenuPluginProps {
-    items?: SlashMenuItem[];
     extraItems?: SlashMenuItem[];
+    items?: SlashMenuItem[];
     triggerChar?: string;
 }
 export declare function collectNodeSlashItems(editor: LexicalEditor): SlashMenuItem[];
-export declare function SlashMenuPlugin({ items, extraItems, triggerChar, }: SlashMenuPluginProps): import("react/jsx-runtime").JSX.Element;
+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

@@ -1 +1 @@
-{"version":3,"file":"SlashMenuPlugin.d.ts","sourceRoot":"","sources":["../src/SlashMenuPlugin.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,aAAa,EAAY,MAAM,SAAS,CAAA;AAMtD,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;AAED,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,aAAa,GAAG,aAAa,EAAE,CAK5E;AAWD,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,UAAU,EACV,WAAiB,GAClB,EAAE,oBAAoB,2CAuEtB"}
+{"version":3,"file":"SlashMenuPlugin.d.ts","sourceRoot":"","sources":["../src/SlashMenuPlugin.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,aAAa,EAAY,MAAM,SAAS,CAAC;AAMvD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAIrD,MAAM,WAAW,oBAAoB;IACnC,UAAU,CAAC,EAAE,aAAa,EAAE,CAAC;IAC7B,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,aAAa,GAAG,aAAa,EAAE,CAK5E;AAWD,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,WAAiB,EAAE,EAAE,oBAAoB,2CAuE7F"}

package/dist/index.mjs

@@ -12,7 +12,7 @@ import { createElement, useEffect, useMemo, useState, useCallback } from "react"
 import { MenuOption, useBasicTypeaheadTriggerMatch, LexicalTypeaheadMenuPlugin } from "@lexical/react/LexicalTypeaheadMenuPlugin";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useFloating, autoUpdate, offset, flip, shift } from "@floating-ui/react-dom";
-import { collectCommandItems } from "@haklex/rich-editor";
+import { collectCommandItems } from "@haklex/rich-editor/commands";
 import { PortalThemeWrapper } from "@haklex/rich-style-token";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { createPortal } from "react-dom";
@@ -218,57 +218,32 @@ function SlashMenuList({
   }, [anchorElement, refs]);
   const sections = useMemo(() => groupBySection(options), [options]);
   if (options.length === 0) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: refs.setFloating,
-        style: floatingStyles,
-        className: slashMenu,
-        children: /* @__PURE__ */ jsx("div", { className: slashMenuEmpty, children: "No matching commands" })
-      }
-    );
+    return /* @__PURE__ */ jsx("div", { className: slashMenu, ref: refs.setFloating, style: floatingStyles, children: /* @__PURE__ */ jsx("div", { className: slashMenuEmpty, children: "No matching commands" }) });
   }
-  return /* @__PURE__ */ jsx(
-    "ul",
-    {
-      ref: refs.setFloating,
-      style: floatingStyles,
-      className: slashMenu,
-      role: "listbox",
-      children: sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs(
-        "li",
-        {
-          role: "presentation",
-          className: slashMenuSectionWrapper,
-          children: [
-            sectionIndex > 0 && /* @__PURE__ */ jsx("div", { className: slashMenuSectionDivider }),
-            /* @__PURE__ */ jsx("div", { className: slashMenuSection, children: section.label }),
-            /* @__PURE__ */ jsx("ul", { className: slashMenuItems, 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
-      ))
-    }
-  );
+  return /* @__PURE__ */ jsx("ul", { className: slashMenu, ref: refs.setFloating, role: "listbox", style: floatingStyles, children: sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs("li", { className: slashMenuSectionWrapper, role: "presentation", children: [
+    sectionIndex > 0 && /* @__PURE__ */ jsx("div", { className: slashMenuSectionDivider }),
+    /* @__PURE__ */ jsx("div", { className: slashMenuSection, children: section.label }),
+    /* @__PURE__ */ jsx("ul", { className: slashMenuItems, role: "group", children: section.items.map(({ item, globalIndex }) => /* @__PURE__ */ jsxs(
+      "li",
+      {
+        "aria-selected": globalIndex === selectedIndex,
+        className: slashMenuItem,
+        ref: item.setRefElement,
+        role: "option",
+        tabIndex: -1,
+        onClick: () => selectOptionAndCleanUp(item),
+        onMouseEnter: () => setHighlightedIndex(globalIndex),
+        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)) });
 }
 function collectNodeSlashItems(editor) {
   const configs = collectCommandItems(editor);
@@ -282,11 +257,7 @@ function filterItems(query, items) {
     return item.keywords.some((kw) => kw.toLowerCase().includes(lower));
   });
 }
-function SlashMenuPlugin({
-  items,
-  extraItems,
-  triggerChar = "/"
-}) {
+function SlashMenuPlugin({ items, extraItems, triggerChar = "/" }) {
   const [editor] = useLexicalComposerContext();
   const [queryString, setQueryString] = useState(null);
   const allItems = useMemo(() => {
@@ -321,10 +292,8 @@ function SlashMenuPlugin({
   return /* @__PURE__ */ jsx(
     LexicalTypeaheadMenuPlugin,
     {
-      onQueryChange: setQueryString,
-      onSelectOption,
-      triggerFn: checkForTriggerMatch,
       options: filteredItems,
+      triggerFn: checkForTriggerMatch,
       menuRenderFn: (anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => {
         const anchorElement = anchorElementRef.current;
         if (!anchorElement || filteredItems.length === 0) {
@@ -336,14 +305,16 @@ function SlashMenuPlugin({
             {
               anchorElement,
               options: filteredItems,
-              selectedIndex,
               selectOptionAndCleanUp,
+              selectedIndex,
               setHighlightedIndex
             }
           ) }),
           anchorElement
         );
-      }
+      },
+      onQueryChange: setQueryString,
+      onSelectOption
     }
   );
 }

package/package.json

@@ -1,9 +1,14 @@
 {
   "name": "@haklex/rich-plugin-slash-menu",
-  "type": "module",
-  "version": "0.0.65",
+  "version": "0.0.67",
   "description": "Slash command menu plugin",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Innei/haklex.git",
+    "directory": "packages/rich-plugin-slash-menu"
+  },
   "license": "MIT",
+  "type": "module",
   "exports": {
     ".": {
       "import": "./dist/index.mjs",
@@ -15,21 +20,10 @@
   "files": [
     "dist"
   ],
-  "peerDependencies": {
-    "@lexical/list": "^0.41.0",
-    "@lexical/react": "^0.41.0",
-    "@lexical/rich-text": "^0.41.0",
-    "@lexical/selection": "^0.41.0",
-    "@lexical/table": "^0.41.0",
-    "lexical": "^0.41.0",
-    "lucide-react": "^0.574.0",
-    "react": ">=19",
-    "react-dom": ">=19"
-  },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.8",
-    "@haklex/rich-editor": "0.0.65",
-    "@haklex/rich-style-token": "0.0.65"
+    "@haklex/rich-editor": "0.0.67",
+    "@haklex/rich-style-token": "0.0.67"
   },
   "devDependencies": {
     "@lexical/list": "^0.41.0",
@@ -49,6 +43,17 @@
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4"
   },
+  "peerDependencies": {
+    "@lexical/list": "^0.41.0",
+    "@lexical/react": "^0.41.0",
+    "@lexical/rich-text": "^0.41.0",
+    "@lexical/selection": "^0.41.0",
+    "@lexical/table": "^0.41.0",
+    "lexical": "^0.41.0",
+    "lucide-react": "^0.574.0",
+    "react": ">=19",
+    "react-dom": ">=19"
+  },
   "publishConfig": {
     "access": "public"
   },