@haklex/rich-plugin-floating-toolbar 0.0.7 → 0.0.9

package/dist/FloatingToolbarPlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingToolbarPlugin.d.ts","sourceRoot":"","sources":["../src/FloatingToolbarPlugin.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAuGzC,wBAAgB,qBAAqB,IAAI,YAAY,GAAG,IAAI,CA4L3D"}
+{"version":3,"file":"FloatingToolbarPlugin.d.ts","sourceRoot":"","sources":["../src/FloatingToolbarPlugin.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAmIzC,wBAAgB,qBAAqB,IAAI,YAAY,GAAG,IAAI,CAoN3D"}

package/dist/index.mjs

@@ -1,5 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { ColorPicker } from "@haklex/rich-editor-ui";
+import { usePortalTheme, vars } from "@haklex/rich-style-token";
 import { $isLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { $patchStyleText, $getSelectionStyleValueForProperty } from "@lexical/selection";
@@ -81,8 +82,27 @@ function ToolbarButton({
 }
 const ICON_SIZE = 15;
 const ICON_STROKE = 2;
+function extractCssVarName(value) {
+  const match = value.match(/^var\((--[^),\s]+)(?:,[^)]+)?\)$/);
+  return match?.[1] ?? null;
+}
+function collectThemeVarNames(contract, output) {
+  if (typeof contract === "string") {
+    const cssVarName = extractCssVarName(contract);
+    if (cssVarName) output.add(cssVarName);
+    return output;
+  }
+  if (contract && typeof contract === "object") {
+    for (const value of Object.values(contract)) {
+      collectThemeVarNames(value, output);
+    }
+  }
+  return output;
+}
+const THEME_VAR_NAMES = Array.from(collectThemeVarNames(vars, /* @__PURE__ */ new Set()));
 function FloatingToolbarPlugin() {
   const [editor] = useLexicalComposerContext();
+  const { className: portalClassName } = usePortalTheme();
   const toolbarRef = useRef(null);
   const [visible, setVisible] = useState(false);
   const [state, setState] = useState(INITIAL_STATE);
@@ -95,6 +115,20 @@ function FloatingToolbarPlugin() {
     setState(getSelectionState(selection));
     setVisible(true);
   }, []);
+  const applyThemeVars = useCallback(
+    (toolbar2) => {
+      const rootElement = editor.getRootElement();
+      if (!rootElement) return;
+      const computed = window.getComputedStyle(rootElement);
+      for (const name of THEME_VAR_NAMES) {
+        const value = computed.getPropertyValue(name).trim();
+        if (value) {
+          toolbar2.style.setProperty(name, value);
+        }
+      }
+    },
+    [editor]
+  );
   useEffect(() => {
     const unregisterCommand = editor.registerCommand(
       SELECTION_CHANGE_COMMAND,
@@ -121,6 +155,7 @@ function FloatingToolbarPlugin() {
     const positionToolbar = () => {
       const toolbar2 = toolbarRef.current;
       if (!toolbar2) return;
+      applyThemeVars(toolbar2);
       const nativeSelection = window.getSelection();
       if (!nativeSelection || nativeSelection.rangeCount === 0) {
         setVisible(false);
@@ -135,7 +170,7 @@ function FloatingToolbarPlugin() {
       toolbar2.style.left = `${pos.left}px`;
     };
     requestAnimationFrame(positionToolbar);
-  }, [visible, state]);
+  }, [applyThemeVars, visible, state]);
   const handleFormat = useCallback(
     (format) => {
       editor.dispatchCommand(FORMAT_TEXT_COMMAND, format);
@@ -172,12 +207,13 @@ function FloatingToolbarPlugin() {
     [editor]
   );
   if (!visible) return null;
+  const toolbarClassName = portalClassName ? `${toolbar} ${portalClassName}` : toolbar;
   return createPortal(
     /* @__PURE__ */ jsxs(
       "div",
       {
         ref: toolbarRef,
-        className: toolbar,
+        className: toolbarClassName,
         role: "toolbar",
         "aria-label": "Text formatting",
         style: { position: "absolute", zIndex: 50 },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haklex/rich-plugin-floating-toolbar",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "Floating toolbar plugin",
   "license": "MIT",
   "type": "module",
@@ -16,8 +16,8 @@
     "dist"
   ],
   "dependencies": {
-    "@haklex/rich-editor-ui": "0.0.7",
-    "@haklex/rich-style-token": "0.0.7"
+    "@haklex/rich-editor-ui": "0.0.9",
+    "@haklex/rich-style-token": "0.0.9"
   },
   "devDependencies": {
     "@lexical/link": "^0.40.0",