@haklex/rich-plugin-floating-toolbar 0.0.65 → 0.0.67

package/README.md

@@ -1,30 +1,59 @@
 # @haklex/rich-plugin-floating-toolbar
 
-浮动工具栏插件，选中文本时显示。
+Floating toolbar plugin that appears on text selection for inline formatting.
 
-## 安装
+## Installation
 
 ```bash
-pnpm add @haklex/rich-plugin-floating-toolbar @haklex/rich-editor
+pnpm add @haklex/rich-plugin-floating-toolbar
 ```
 
-## 导出
+## Peer Dependencies
 
-```ts
-export { FloatingToolbarPlugin } from './FloatingToolbarPlugin'
-```
+| Package | Version |
+| --- | --- |
+| `@lexical/link` | `^0.41.0` |
+| `@lexical/react` | `^0.41.0` |
+| `@lexical/selection` | `^0.41.0` |
+| `lexical` | `^0.41.0` |
+| `lucide-react` | `^0.574.0` |
+| `react` | `>= 19` |
+| `react-dom` | `>= 19` |
 
-## 使用
+## Usage
 
 ```tsx
 import { FloatingToolbarPlugin } from '@haklex/rich-plugin-floating-toolbar'
-import { RichEditor } from '@haklex/rich-editor'
-
-<RichEditor>
-  <FloatingToolbarPlugin />
-</RichEditor>
+import '@haklex/rich-plugin-floating-toolbar/style.css'
+
+function Editor() {
+  return (
+    <RichEditor>
+      <FloatingToolbarPlugin />
+    </RichEditor>
+  )
+}
 ```
 
+When the user selects text, a floating toolbar appears near the selection with inline formatting controls such as bold, italic, underline, strikethrough, code, and link insertion.
+
+## Exports
+
+| Export | Type | Description |
+| --- | --- | --- |
+| `FloatingToolbarPlugin` | Component | Main plugin component to render inside `RichEditor` |
+
+## Sub-path Exports
+
+| Path | Description |
+| --- | --- |
+| `@haklex/rich-plugin-floating-toolbar` | Plugin component |
+| `@haklex/rich-plugin-floating-toolbar/style.css` | Stylesheet |
+
+## Part of Haklex
+
+This package is part of the [Haklex](../../README.md) rich editor ecosystem.
+
 ## License
 
 MIT

package/dist/FloatingToolbarPlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingToolbarPlugin.d.ts","sourceRoot":"","sources":["../src/FloatingToolbarPlugin.tsx"],"names":[],"mappings":"AA2CA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AA0MzC,wBAAgB,qBAAqB,IAAI,YAAY,GAAG,IAAI,CA0hB3D"}
+{"version":3,"file":"FloatingToolbarPlugin.d.ts","sourceRoot":"","sources":["../src/FloatingToolbarPlugin.tsx"],"names":[],"mappings":"AAgCA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AA6L1C,wBAAgB,qBAAqB,IAAI,YAAY,GAAG,IAAI,CA6f3D"}

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { $createRubyNode, $isRubyNode } from "@haklex/rich-editor";
+import { $createRubyNode, $isRubyNode } from "@haklex/rich-editor/nodes";
 import { ColorPicker } from "@haklex/rich-editor-ui";
 import { usePortalTheme, usePortalContainer, vars } from "@haklex/rich-style-token";
 import { TOGGLE_LINK_COMMAND, $isLinkNode, $isAutoLinkNode } from "@lexical/link";
@@ -108,32 +108,24 @@ function computePosition(nativeSelection, toolbar2, container) {
   const offsetY = containerRect?.top ?? 0;
   const availableWidth = containerRect?.width ?? window.innerWidth;
   const rawLeft = rect.left - offsetX + rect.width / 2 - toolbarWidth / 2;
-  const clampedLeft = Math.max(
-    8,
-    Math.min(rawLeft, availableWidth - toolbarWidth - 8)
-  );
+  const clampedLeft = Math.max(8, Math.min(rawLeft, availableWidth - toolbarWidth - 8));
   return {
     top: rect.top - offsetY - toolbarHeight - 10,
     left: clampedLeft
   };
 }
-function ToolbarButton({
-  active,
-  onClick,
-  ariaLabel,
-  children
-}) {
+function ToolbarButton({ active, onClick, ariaLabel, children }) {
   return /* @__PURE__ */ jsxs(
     "button",
     {
-      type: "button",
+      "aria-label": ariaLabel,
+      "aria-pressed": active,
       className: `${btn}${active ? ` ${btnActive}` : ""}`,
+      type: "button",
       onMouseDown: (e) => {
         e.preventDefault();
         onClick();
       },
-      "aria-label": ariaLabel,
-      "aria-pressed": active,
       children: [
         children,
         active && /* @__PURE__ */ jsx("span", { className: btnIndicator })
@@ -144,7 +136,7 @@ function ToolbarButton({
 const ICON_SIZE = 15;
 const ICON_STROKE = 2;
 function extractCssVarName(value) {
-  const match = value.match(/^var\((--[^),\s]+)(?:,[^)]+)?\)$/);
+  const match = value.match(/^var\((--[^\s),]+)(?:,[^)]+)?\)$/);
   return match?.[1] ?? null;
 }
 function collectThemeVarNames(contract, output) {
@@ -205,13 +197,11 @@ function FloatingToolbarPlugin() {
       },
       COMMAND_PRIORITY_LOW
     );
-    const unregisterUpdate = editor.registerUpdateListener(
-      ({ editorState }) => {
-        editorState.read(() => {
-          updateToolbar();
-        });
-      }
-    );
+    const unregisterUpdate = editor.registerUpdateListener(({ editorState }) => {
+      editorState.read(() => {
+        updateToolbar();
+      });
+    });
     return () => {
       unregisterCommand();
       unregisterUpdate();
@@ -269,9 +259,7 @@ function FloatingToolbarPlugin() {
         return isEffectiveLinkNode(parent) || isEffectiveLinkNode(node);
       });
       if (hasLink) {
-        for (const autoLinkNode of collectSelectedActiveAutoLinkNodes(
-          selection
-        )) {
+        for (const autoLinkNode of collectSelectedActiveAutoLinkNodes(selection)) {
           autoLinkNode.setIsUnlinked(true);
           autoLinkNode.markDirty();
         }
@@ -430,10 +418,7 @@ function FloatingToolbarPlugin() {
       const availW = containerRect?.width ?? window.innerWidth;
       const editorWidth = editorEl.offsetWidth;
       const rawLeft = rect.left - oX + rect.width / 2 - editorWidth / 2;
-      const clampedLeft = Math.max(
-        8,
-        Math.min(rawLeft, availW - editorWidth - 8)
-      );
+      const clampedLeft = Math.max(8, Math.min(rawLeft, availW - editorWidth - 8));
       editorEl.style.top = `${rect.bottom - oY + 8}px`;
       editorEl.style.left = `${clampedLeft}px`;
     };
@@ -450,18 +435,18 @@ function FloatingToolbarPlugin() {
       /* @__PURE__ */ jsxs(
         "div",
         {
-          ref: toolbarRef,
+          "aria-label": "Text formatting",
           className: toolbarClassName,
+          ref: toolbarRef,
           role: "toolbar",
-          "aria-label": "Text formatting",
           style: { position: "fixed", zIndex: 50 },
           children: [
             /* @__PURE__ */ jsx(
               ToolbarButton,
               {
                 active: state.isBold,
-                onClick: () => handleFormat("bold"),
                 ariaLabel: "Bold",
+                onClick: () => handleFormat("bold"),
                 children: /* @__PURE__ */ jsx(Bold, { size: ICON_SIZE, strokeWidth: ICON_STROKE })
               }
             ),
@@ -469,8 +454,8 @@ function FloatingToolbarPlugin() {
               ToolbarButton,
               {
                 active: state.isItalic,
-                onClick: () => handleFormat("italic"),
                 ariaLabel: "Italic",
+                onClick: () => handleFormat("italic"),
                 children: /* @__PURE__ */ jsx(Italic, { size: ICON_SIZE, strokeWidth: ICON_STROKE })
               }
             ),
@@ -478,8 +463,8 @@ function FloatingToolbarPlugin() {
               ToolbarButton,
               {
                 active: state.isUnderline,
-                onClick: () => handleFormat("underline"),
                 ariaLabel: "Underline",
+                onClick: () => handleFormat("underline"),
                 children: /* @__PURE__ */ jsx(Underline, { size: ICON_SIZE, strokeWidth: ICON_STROKE })
               }
             ),
@@ -487,8 +472,8 @@ function FloatingToolbarPlugin() {
               ToolbarButton,
               {
                 active: state.isStrikethrough,
-                onClick: () => handleFormat("strikethrough"),
                 ariaLabel: "Strikethrough",
+                onClick: () => handleFormat("strikethrough"),
                 children: /* @__PURE__ */ jsx(Strikethrough, { size: ICON_SIZE, strokeWidth: ICON_STROKE })
               }
             ),
@@ -496,8 +481,8 @@ function FloatingToolbarPlugin() {
               ToolbarButton,
               {
                 active: state.isSuperscript,
-                onClick: () => handleFormat("superscript"),
                 ariaLabel: "Superscript",
+                onClick: () => handleFormat("superscript"),
                 children: /* @__PURE__ */ jsx(Superscript, { size: ICON_SIZE, strokeWidth: ICON_STROKE })
               }
             ),
@@ -505,8 +490,8 @@ function FloatingToolbarPlugin() {
               ToolbarButton,
               {
                 active: state.isSubscript,
-                onClick: () => handleFormat("subscript"),
                 ariaLabel: "Subscript",
+                onClick: () => handleFormat("subscript"),
                 children: /* @__PURE__ */ jsx(Subscript, { size: ICON_SIZE, strokeWidth: ICON_STROKE })
               }
             ),
@@ -515,8 +500,8 @@ function FloatingToolbarPlugin() {
               ToolbarButton,
               {
                 active: state.isCode,
-                onClick: () => handleFormat("code"),
                 ariaLabel: "Code",
+                onClick: () => handleFormat("code"),
                 children: /* @__PURE__ */ jsx(Code, { size: ICON_SIZE, strokeWidth: ICON_STROKE })
               }
             ),
@@ -524,37 +509,15 @@ function FloatingToolbarPlugin() {
               ToolbarButton,
               {
                 active: state.isHighlight,
-                onClick: () => handleFormat("highlight"),
                 ariaLabel: "Highlight",
+                onClick: () => handleFormat("highlight"),
                 children: /* @__PURE__ */ jsx(Highlighter, { size: ICON_SIZE, strokeWidth: ICON_STROKE })
               }
             ),
-            /* @__PURE__ */ jsx(
-              ToolbarButton,
-              {
-                active: state.isLink,
-                onClick: handleLink,
-                ariaLabel: "Link",
-                children: /* @__PURE__ */ jsx(Link, { size: ICON_SIZE, strokeWidth: ICON_STROKE })
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              ToolbarButton,
-              {
-                active: state.isRuby,
-                onClick: handleRuby,
-                ariaLabel: "Ruby annotation",
-                children: /* @__PURE__ */ jsx(Languages, { size: ICON_SIZE, strokeWidth: ICON_STROKE })
-              }
-            ),
+            /* @__PURE__ */ jsx(ToolbarButton, { active: state.isLink, ariaLabel: "Link", onClick: handleLink, children: /* @__PURE__ */ jsx(Link, { size: ICON_SIZE, strokeWidth: ICON_STROKE }) }),
+            /* @__PURE__ */ jsx(ToolbarButton, { active: state.isRuby, ariaLabel: "Ruby annotation", onClick: handleRuby, children: /* @__PURE__ */ jsx(Languages, { size: ICON_SIZE, strokeWidth: ICON_STROKE }) }),
             /* @__PURE__ */ jsx("span", { className: separator }),
-            /* @__PURE__ */ jsx(
-              ColorPicker,
-              {
-                currentColor: state.fontColor || "inherit",
-                onSelect: handleColor
-              }
-            )
+            /* @__PURE__ */ jsx(ColorPicker, { currentColor: state.fontColor || "inherit", onSelect: handleColor })
           ]
         }
       ),
@@ -564,8 +527,8 @@ function FloatingToolbarPlugin() {
       /* @__PURE__ */ jsxs(
         "div",
         {
-          ref: rubyEditorRef,
           className: rubyEditorClassName,
+          ref: rubyEditorRef,
           style: { position: "fixed", zIndex: 51 },
           children: [
             /* @__PURE__ */ jsxs("div", { className: rubyPreview, children: [
@@ -576,12 +539,11 @@ function FloatingToolbarPlugin() {
               /* @__PURE__ */ jsx(
                 "input",
                 {
-                  ref: rubyInputRef,
                   className: rubyInput,
+                  placeholder: "读音",
+                  ref: rubyInputRef,
                   value: rubyEdit.reading,
-                  onChange: (e) => setRubyEdit(
-                    (prev) => prev ? { ...prev, reading: e.target.value } : null
-                  ),
+                  onChange: (e) => setRubyEdit((prev) => prev ? { ...prev, reading: e.target.value } : null),
                   onKeyDown: (e) => {
                     if (e.key === "Enter") {
                       e.preventDefault();
@@ -591,34 +553,33 @@ function FloatingToolbarPlugin() {
                       e.preventDefault();
                       handleRubyCancel();
                     }
-                  },
-                  placeholder: "读音"
+                  }
                 }
               ),
               /* @__PURE__ */ jsx(
                 "button",
                 {
-                  type: "button",
+                  "aria-label": "Confirm",
                   className: rubyActionBtn,
+                  style: { color: "#22c55e" },
+                  type: "button",
                   onMouseDown: (e) => {
                     e.preventDefault();
                     handleRubyConfirm();
                   },
-                  style: { color: "#22c55e" },
-                  "aria-label": "Confirm",
                   children: /* @__PURE__ */ jsx(Check, { size: 14, strokeWidth: ICON_STROKE })
                 }
               ),
               /* @__PURE__ */ jsx(
                 "button",
                 {
-                  type: "button",
+                  "aria-label": "Cancel",
                   className: rubyActionBtn,
+                  type: "button",
                   onMouseDown: (e) => {
                     e.preventDefault();
                     handleRubyCancel();
                   },
-                  "aria-label": "Cancel",
                   children: /* @__PURE__ */ jsx(X, { size: 14, strokeWidth: ICON_STROKE })
                 }
               ),
@@ -626,14 +587,14 @@ function FloatingToolbarPlugin() {
               /* @__PURE__ */ jsx(
                 "button",
                 {
-                  type: "button",
+                  "aria-label": "Delete ruby",
                   className: rubyActionBtn,
+                  style: { color: "#ef4444" },
+                  type: "button",
                   onMouseDown: (e) => {
                     e.preventDefault();
                     handleRubyDelete();
                   },
-                  style: { color: "#ef4444" },
-                  "aria-label": "Delete ruby",
                   children: /* @__PURE__ */ jsx(Trash2, { size: 14, strokeWidth: ICON_STROKE })
                 }
               )

package/package.json

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