@haklex/rich-plugin-mention 0.0.65 → 0.0.66

package/README.md

@@ -0,0 +1,82 @@
+# @haklex/rich-plugin-mention
+
+Mention typeahead plugin with platform selection for @-mentioning users across platforms (GitHub, Twitter, etc.).
+
+## Installation
+
+```bash
+pnpm add @haklex/rich-plugin-mention
+```
+
+## Peer Dependencies
+
+| Package | Version |
+| --- | --- |
+| `@lexical/react` | `^0.41.0` |
+| `lexical` | `^0.41.0` |
+| `react` | `>= 19` |
+| `react-dom` | `>= 19` |
+
+## Usage
+
+```tsx
+import { MentionMenuPlugin } from '@haklex/rich-plugin-mention'
+import '@haklex/rich-plugin-mention/style.css'
+
+function Editor() {
+  return (
+    <RichEditor>
+      <MentionMenuPlugin />
+    </RichEditor>
+  )
+}
+```
+
+Typing `@` triggers a typeahead menu where users can select a platform and enter a username. The plugin ships with builtin platform definitions for common services.
+
+```tsx
+import {
+  builtinPlatforms,
+  getAllPlatforms,
+  MentionMenuItem,
+} from '@haklex/rich-plugin-mention'
+import type {
+  MentionPlatformDef,
+  MentionMenuPluginProps,
+} from '@haklex/rich-plugin-mention'
+
+// Access builtin platforms
+const platforms = builtinPlatforms
+const allPlatforms = getAllPlatforms()
+
+// Define a custom platform
+const customPlatform: MentionPlatformDef = {
+  // ...
+}
+```
+
+## Exports
+
+| Export | Type | Description |
+| --- | --- | --- |
+| `MentionMenuPlugin` | Component | Main plugin component to render inside `RichEditor` |
+| `MentionMenuItem` | Component | Individual menu item component |
+| `builtinPlatforms` | Constant | Array of builtin platform definitions |
+| `getAllPlatforms` | Function | Returns all registered platforms |
+| `MentionPlatformDef` | TypeScript type | Platform definition interface |
+| `MentionMenuPluginProps` | TypeScript type | Props type for `MentionMenuPlugin` |
+
+## Sub-path Exports
+
+| Path | Description |
+| --- | --- |
+| `@haklex/rich-plugin-mention` | Plugin component, menu items, platform utilities, and types |
+| `@haklex/rich-plugin-mention/style.css` | Stylesheet |
+
+## Part of Haklex
+
+This package is part of the [Haklex](../../README.md) rich editor ecosystem.
+
+## License
+
+MIT

package/dist/MentionMenuList.d.ts

@@ -1,10 +1,10 @@
 import { MentionMenuItem } from './MentionMenuItem';
 interface MentionMenuListProps {
     options: MentionMenuItem[];
+    phase: 1 | 2;
     selectedIndex: number | null;
     selectOptionAndCleanUp: (option: MentionMenuItem) => void;
     setHighlightedIndex: (index: number) => void;
-    phase: 1 | 2;
 }
 export declare function MentionMenuList({ options, selectedIndex, selectOptionAndCleanUp, setHighlightedIndex, phase, }: MentionMenuListProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/MentionMenuList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MentionMenuList.d.ts","sourceRoot":"","sources":["../src/MentionMenuList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAGxD,UAAU,oBAAoB;IAC5B,OAAO,EAAE,eAAe,EAAE,CAAA;IAC1B,aAAa,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,sBAAsB,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAA;IACzD,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5C,KAAK,EAAE,CAAC,GAAG,CAAC,CAAA;CACb;AAED,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,aAAa,EACb,sBAAsB,EACtB,mBAAmB,EACnB,KAAK,GACN,EAAE,oBAAoB,kDA+EtB"}
+{"version":3,"file":"MentionMenuList.d.ts","sourceRoot":"","sources":["../src/MentionMenuList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGzD,UAAU,oBAAoB;IAC5B,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,KAAK,EAAE,CAAC,GAAG,CAAC,CAAC;IACb,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,sBAAsB,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IAC1D,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AAED,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,aAAa,EACb,sBAAsB,EACtB,mBAAmB,EACnB,KAAK,GACN,EAAE,oBAAoB,kDAoEtB"}

package/dist/MentionMenuPlugin.d.ts

@@ -2,5 +2,5 @@ import { MentionPlatformDef } from './MentionPlatformRegistry';
 export interface MentionMenuPluginProps {
     extraPlatforms?: MentionPlatformDef[];
 }
-export declare function MentionMenuPlugin({ extraPlatforms, }?: MentionMenuPluginProps): import("react/jsx-runtime").JSX.Element;
+export declare function MentionMenuPlugin({ extraPlatforms }?: MentionMenuPluginProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=MentionMenuPlugin.d.ts.map

package/dist/MentionMenuPlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MentionMenuPlugin.d.ts","sourceRoot":"","sources":["../src/MentionMenuPlugin.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAA;AAGnE,MAAM,WAAW,sBAAsB;IACrC,cAAc,CAAC,EAAE,kBAAkB,EAAE,CAAA;CACtC;AAqDD,wBAAgB,iBAAiB,CAAC,EAChC,cAAc,GACf,GAAE,sBAA2B,2CAgF7B"}
+{"version":3,"file":"MentionMenuPlugin.d.ts","sourceRoot":"","sources":["../src/MentionMenuPlugin.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAGpE,MAAM,WAAW,sBAAsB;IACrC,cAAc,CAAC,EAAE,kBAAkB,EAAE,CAAC;CACvC;AAiDD,wBAAgB,iBAAiB,CAAC,EAAE,cAAc,EAAE,GAAE,sBAA2B,2CAyEhF"}

package/dist/MentionPlatformRegistry.d.ts

@@ -1,9 +1,9 @@
 import { ReactNode } from 'react';
 export interface MentionPlatformDef {
+    getUrl: (handle: string) => string;
+    icon: ReactNode;
     key: string;
     label: string;
-    icon: ReactNode;
-    getUrl: (handle: string) => string;
 }
 export declare const builtinPlatforms: MentionPlatformDef[];
 export declare function getAllPlatforms(extra?: MentionPlatformDef[]): MentionPlatformDef[];

package/dist/MentionPlatformRegistry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MentionPlatformRegistry.d.ts","sourceRoot":"","sources":["../src/MentionPlatformRegistry.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,WAAW,kBAAkB;IACjC,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,SAAS,CAAA;IACf,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAA;CACnC;AAED,eAAO,MAAM,gBAAgB,EAAE,kBAAkB,EAO9C,CAAA;AAEH,wBAAgB,eAAe,CAC7B,KAAK,CAAC,EAAE,kBAAkB,EAAE,GAC3B,kBAAkB,EAAE,CAOtB"}
+{"version":3,"file":"MentionPlatformRegistry.d.ts","sourceRoot":"","sources":["../src/MentionPlatformRegistry.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IACnC,IAAI,EAAE,SAAS,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,gBAAgB,EAAE,kBAAkB,EAOhD,CAAC;AAEF,wBAAgB,eAAe,CAAC,KAAK,CAAC,EAAE,kBAAkB,EAAE,GAAG,kBAAkB,EAAE,CAMlF"}

package/dist/index.mjs

@@ -3,7 +3,7 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { MenuOption, useBasicTypeaheadTriggerMatch, LexicalTypeaheadMenuPlugin } from "@lexical/react/LexicalTypeaheadMenuPlugin";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { $createMentionNode } from "@haklex/rich-editor";
+import { $createMentionNode } from "@haklex/rich-editor/nodes";
 import { PortalThemeWrapper } from "@haklex/rich-style-token";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { $createTextNode } from "lexical";
@@ -53,33 +53,26 @@ function MentionMenuList({
         /* @__PURE__ */ jsx("span", { className: platformTagIcon, children: item.icon }),
         item.description.split(" — ")[0]
       ] }),
-      item.handleText ? /* @__PURE__ */ jsx(
-        "ul",
+      item.handleText ? /* @__PURE__ */ jsx("ul", { role: "listbox", style: { listStyle: "none", margin: 0, padding: 0 }, children: /* @__PURE__ */ jsx(
+        "li",
         {
-          style: { listStyle: "none", margin: 0, padding: 0 },
-          role: "listbox",
-          children: /* @__PURE__ */ jsx(
-            "li",
-            {
-              className: mentionMenuItem,
-              role: "option",
-              "aria-selected": selectedIndex === 0,
-              onClick: () => selectOptionAndCleanUp(item),
-              onMouseEnter: () => setHighlightedIndex(0),
-              ref: item.setRefElement,
-              tabIndex: -1,
-              style: { margin: 0 },
-              children: /* @__PURE__ */ jsxs("span", { className: mentionMenuItemText, children: [
-                /* @__PURE__ */ jsxs("span", { className: mentionMenuItemTitle, children: [
-                  "@",
-                  item.handleText
-                ] }),
-                /* @__PURE__ */ jsx("span", { className: mentionMenuItemDescription, children: "Enter to confirm" })
-              ] })
-            }
-          )
+          "aria-selected": selectedIndex === 0,
+          className: mentionMenuItem,
+          ref: item.setRefElement,
+          role: "option",
+          style: { margin: 0 },
+          tabIndex: -1,
+          onClick: () => selectOptionAndCleanUp(item),
+          onMouseEnter: () => setHighlightedIndex(0),
+          children: /* @__PURE__ */ jsxs("span", { className: mentionMenuItemText, children: [
+            /* @__PURE__ */ jsxs("span", { className: mentionMenuItemTitle, children: [
+              "@",
+              item.handleText
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: mentionMenuItemDescription, children: "Enter to confirm" })
+          ] })
         }
-      ) : /* @__PURE__ */ jsx("div", { className: phase2Hint, children: "Type username, Enter to confirm" })
+      ) }) : /* @__PURE__ */ jsx("div", { className: phase2Hint, children: "Type username, Enter to confirm" })
     ] }) });
   }
   if (options.length === 0) {
@@ -88,13 +81,13 @@ function MentionMenuList({
   return /* @__PURE__ */ jsx("ul", { className: mentionMenu, role: "listbox", children: options.map((item, index) => /* @__PURE__ */ jsxs(
     "li",
     {
+      "aria-selected": index === selectedIndex,
       className: mentionMenuItem,
+      ref: item.setRefElement,
       role: "option",
-      "aria-selected": index === selectedIndex,
+      tabIndex: -1,
       onClick: () => selectOptionAndCleanUp(item),
       onMouseEnter: () => setHighlightedIndex(index),
-      ref: item.setRefElement,
-      tabIndex: -1,
       children: [
         /* @__PURE__ */ jsx("span", { className: mentionMenuItemIcon, children: item.icon }),
         /* @__PURE__ */ jsxs("span", { className: mentionMenuItemText, children: [
@@ -106,20 +99,19 @@ function MentionMenuList({
     item.key
   )) });
 }
-const builtinPlatforms = Object.entries(
-  platformMetaMap
-).map(([key, meta]) => ({
-  key,
-  label: meta.label,
-  icon: meta.icon,
-  getUrl: meta.getUrl
-}));
+const builtinPlatforms = Object.entries(platformMetaMap).map(
+  ([key, meta]) => ({
+    key,
+    label: meta.label,
+    icon: meta.icon,
+    getUrl: meta.getUrl
+  })
+);
 function getAllPlatforms(extra) {
   if (!extra) return builtinPlatforms;
   const map = /* @__PURE__ */ new Map();
   for (const p of builtinPlatforms) map.set(p.key.toUpperCase(), p);
-  for (const p of extra)
-    map.set(p.key.toUpperCase(), { ...p, key: p.key.toUpperCase() });
+  for (const p of extra) map.set(p.key.toUpperCase(), { ...p, key: p.key.toUpperCase() });
   return [...map.values()];
 }
 const MENTION_PUNCTUATION = `\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%'"~=<>_;`;
@@ -155,15 +147,10 @@ function parseQueryPhase(query, platforms) {
   );
   return { phase: 1, options: filtered };
 }
-function MentionMenuPlugin({
-  extraPlatforms
-} = {}) {
+function MentionMenuPlugin({ extraPlatforms } = {}) {
   const [editor] = useLexicalComposerContext();
   const [queryString, setQueryString] = useState(null);
-  const platforms = useMemo(
-    () => getAllPlatforms(extraPlatforms),
-    [extraPlatforms]
-  );
+  const platforms = useMemo(() => getAllPlatforms(extraPlatforms), [extraPlatforms]);
   const { phase, options } = useMemo(
     () => parseQueryPhase(queryString ?? "", platforms),
     [queryString, platforms]
@@ -199,10 +186,8 @@ function MentionMenuPlugin({
   return /* @__PURE__ */ jsx(
     LexicalTypeaheadMenuPlugin,
     {
-      onQueryChange: setQueryString,
-      onSelectOption,
-      triggerFn: checkForTriggerMatch,
       options,
+      triggerFn: checkForTriggerMatch,
       menuRenderFn: (anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => {
         if (!anchorElementRef.current) return null;
         if (phase === 1 && options.length === 0) return null;
@@ -211,15 +196,17 @@ function MentionMenuPlugin({
             MentionMenuList,
             {
               options,
-              selectedIndex,
+              phase,
               selectOptionAndCleanUp,
-              setHighlightedIndex,
-              phase
+              selectedIndex,
+              setHighlightedIndex
             }
           ) }),
           anchorElementRef.current
         );
-      }
+      },
+      onQueryChange: setQueryString,
+      onSelectOption
     }
   );
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@haklex/rich-plugin-mention",
   "type": "module",
-  "version": "0.0.65",
+  "version": "0.0.66",
   "description": "Mention typeahead plugin with platform selection",
   "license": "MIT",
   "exports": {
@@ -22,9 +22,9 @@
     "react-dom": ">=19"
   },
   "dependencies": {
-    "@haklex/rich-renderer-mention": "0.0.65",
-    "@haklex/rich-editor": "0.0.65",
-    "@haklex/rich-style-token": "0.0.65"
+    "@haklex/rich-editor": "0.0.66",
+    "@haklex/rich-renderer-mention": "0.0.66",
+    "@haklex/rich-style-token": "0.0.66"
   },
   "devDependencies": {
     "@lexical/react": "^0.41.0",
@@ -42,6 +42,11 @@
   "publishConfig": {
     "access": "public"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Innei/haklex.git",
+    "directory": "packages/rich-plugin-mention"
+  },
   "scripts": {
     "build": "vite build",
     "dev:build": "vite build --watch"