@haklex/rich-plugin-floating-toolbar 0.62.2 → 0.63.1

package/dist/FloatingToolbarPlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingToolbarPlugin.d.ts","sourceRoot":"","sources":["../src/FloatingToolbarPlugin.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAoBrD,MAAM,WAAW,0BAA0B;IACzC,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAOD,wBAAgB,qBAAqB,CAAC,EACpC,OAAO,GACR,GAAE,0BAA+B,GAAG,YAAY,GAAG,IAAI,CAkOvD"}
+{"version":3,"file":"FloatingToolbarPlugin.d.ts","sourceRoot":"","sources":["../src/FloatingToolbarPlugin.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAoBrD,MAAM,WAAW,0BAA0B;IACzC,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAOD,wBAAgB,qBAAqB,CAAC,EACpC,OAAO,GACR,GAAE,0BAA+B,GAAG,YAAY,GAAG,IAAI,CA0OvD"}

package/dist/index.mjs

@@ -4,6 +4,7 @@ import { $createRubyNode, $isKaTeXInlineNode, $isRubyNode } from "@haklex/rich-e
 import { ActionButton, ColorPicker, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, Kbd, TextInput, TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger, createTooltipHandle } from "@haklex/rich-editor-ui";
 import { usePortalContainer, usePortalTheme, vars } from "@haklex/rich-style-token";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { useLexicalEditable } from "@lexical/react/useLexicalEditable";
 import { $getSelectionStyleValueForProperty, $patchStyleText } from "@lexical/selection";
 import { $createTextNode, $getNearestNodeFromDOMNode, $getNodeByKey, $getSelection, $isRangeSelection, $isTextNode, $setSelection, COMMAND_PRIORITY_LOW, FORMAT_TEXT_COMMAND, KEY_DOWN_COMMAND, SELECTION_CHANGE_COMMAND } from "lexical";
 import { Bold, Code, Ellipsis, EyeOff, Highlighter, Italic, Languages, Link, RemoveFormatting, Strikethrough, Subscript, Superscript, Trash2, Underline, Unlink, X } from "lucide-react";
@@ -433,7 +434,7 @@ function useEditorBindings({ editor, editRuby, modeRef, openLink, toolbarRef, up
 	useEffect(() => {
 		const onRootClick = (event) => {
 			const target = event.target;
-			if (!target) return;
+			if (!target || !editor.isEditable()) return;
 			if (window.getSelection()?.isCollapsed === false) return;
 			const ruby = editor.read(() => {
 				const node = findRubyAncestor($getNearestNodeFromDOMNode(target));
@@ -454,6 +455,7 @@ function useEditorBindings({ editor, editRuby, modeRef, openLink, toolbarRef, up
 			const isModK = event.key.toLowerCase() === "k" && (event.metaKey || event.ctrlKey) && !event.altKey && !event.shiftKey;
 			const isAltF10 = event.key === "F10" && event.altKey;
 			if (!isModK && !isAltF10 || modeRef.current.kind !== "format") return false;
+			if (isModK && !editor.isEditable()) return false;
 			const selection = $getSelection();
 			if (!$isRangeSelection(selection) || selection.isCollapsed()) return false;
 			if (isAltF10 && !toolbarRef.current) return false;
@@ -807,6 +809,7 @@ function toBox(rect) {
 }
 function FloatingToolbarPlugin({ actions } = {}) {
 	const [editor] = useLexicalComposerContext();
+	const editable = useLexicalEditable();
 	const { className: portalClassName, theme: portalTheme } = usePortalTheme();
 	const portalContainer = usePortalContainer();
 	const selectionSnapshot = useTextSelectionSnapshot();
@@ -819,7 +822,7 @@ function FloatingToolbarPlugin({ actions } = {}) {
 	const modes = useInlineModes(editor, useCallback((target) => {
 		setPendingFocus(target ? { target } : null);
 	}, []));
-	const { mode, modeRef, openLink, openRuby, editRuby, commitOnOutsideClick } = modes;
+	const { mode, modeRef, openLink, openRuby, editRuby, commitOnOutsideClick, cancel } = modes;
 	useEditorBindings({
 		editor,
 		editRuby,
@@ -839,6 +842,9 @@ function FloatingToolbarPlugin({ actions } = {}) {
 	useEffect(() => {
 		if (!selectionSnapshot) setVisible(false);
 	}, [selectionSnapshot]);
+	useEffect(() => {
+		if (!editable) cancel(false);
+	}, [cancel, editable]);
 	useEffect(() => {
 		if (!pendingFocus) return;
 		const button = pendingFocus.target === "editor" ? null : toolbarRef.current?.querySelector(`[aria-label="${pendingFocus.target}"]`);
@@ -877,7 +883,7 @@ function FloatingToolbarPlugin({ actions } = {}) {
 		rubyKey,
 		selectionSnapshot
 	]);
-	const shown = visible || mode.kind !== "format";
+	const shown = editable ? visible || mode.kind !== "format" : visible && actions != null;
 	useToolbarPosition({
 		active: shown,
 		editor,
@@ -921,7 +927,6 @@ function FloatingToolbarPlugin({ actions } = {}) {
 				children: props.payload.label
 			}) : null)
 		}), createPortal(/* @__PURE__ */ jsxs("div", {
-			"aria-label": mode.kind === "format" ? "Text formatting" : void 0,
 			className: toolbarClassName,
 			"data-theme": portalClassName ? portalTheme : void 0,
 			ref: toolbarRef,
@@ -930,6 +935,7 @@ function FloatingToolbarPlugin({ actions } = {}) {
 				position: "fixed",
 				zIndex: 50
 			},
+			"aria-label": mode.kind !== "format" ? void 0 : editable ? "Text formatting" : "Selection actions",
 			onFocus: (e) => syncRovingTabIndex(e.currentTarget, e.target),
 			onKeyDown: (e) => {
 				if (mode.kind !== "format") return;
@@ -940,7 +946,8 @@ function FloatingToolbarPlugin({ actions } = {}) {
 				}
 			},
 			children: [
-				mode.kind === "format" && /* @__PURE__ */ jsx(FormatBar, {
+				mode.kind === "format" && !editable && actions,
+				mode.kind === "format" && editable && /* @__PURE__ */ jsx(FormatBar, {
 					actions,
 					handle,
 					state,

package/dist/use-editor-bindings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-editor-bindings.d.ts","sourceRoot":"","sources":["../src/use-editor-bindings.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAS7C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEnE,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,UAAU,EACV,aAAa,GACd,EAAE;IACD,MAAM,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,OAAO,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IAChC,QAAQ,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,UAAU,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC7C,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B,QAyDA"}
+{"version":3,"file":"use-editor-bindings.d.ts","sourceRoot":"","sources":["../src/use-editor-bindings.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAS7C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEnE,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,UAAU,EACV,aAAa,GACd,EAAE;IACD,MAAM,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,OAAO,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IAChC,QAAQ,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,UAAU,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC7C,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B,QA0DA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haklex/rich-plugin-floating-toolbar",
-  "version": "0.62.2",
+  "version": "0.63.1",
   "description": "Floating toolbar plugin",
   "repository": {
     "type": "git",
@@ -37,9 +37,9 @@
     "vite": "^8.3.5"
   },
   "peerDependencies": {
-    "@haklex/rich-editor": "^0.62.2",
-    "@haklex/rich-editor-ui": "^0.62.2",
-    "@haklex/rich-style-token": "^0.62.2",
+    "@haklex/rich-editor": "^0.63.1",
+    "@haklex/rich-editor-ui": "^0.63.1",
+    "@haklex/rich-style-token": "^0.63.1",
     "@lexical/link": "^0.53.0",
     "@lexical/react": "^0.53.0",
     "@lexical/selection": "^0.53.0",