@haklex/rich-plugin-toolbar 0.15.9 → 0.16.0

package/dist/ToolbarPlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarPlugin.d.ts","sourceRoot":"","sources":["../src/ToolbarPlugin.tsx"],"names":[],"mappings":"AAqEA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAoHzD,MAAM,WAAW,kBAAkB;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,qBAAwD,EACxD,eAAe,GAChB,EAAE,kBAAkB,GAAG,YAAY,CA4ZnC"}
+{"version":3,"file":"ToolbarPlugin.d.ts","sourceRoot":"","sources":["../src/ToolbarPlugin.tsx"],"names":[],"mappings":"AAwDA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAuBzD,MAAM,WAAW,kBAAkB;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,qBAAwD,EACxD,eAAe,GAChB,EAAE,kBAAkB,GAAG,YAAY,CAkUnC"}

package/dist/actions.d.ts

@@ -0,0 +1,18 @@
+import { ElementNode, LexicalEditor } from 'lexical';
+import { BlockType } from './constants';
+/**
+ * Derive the canonical block type from an element node.
+ * Exposed so downstream toolbars can recompute block type for any selection target.
+ */
+export declare function getBlockType(anchorNode: ElementNode): BlockType;
+/**
+ * Apply a block type (paragraph / heading / list) to the current selection.
+ * For list types this delegates to the corresponding INSERT_*_LIST_COMMAND.
+ */
+export declare function applyBlockType(editor: LexicalEditor, type: BlockType): void;
+/**
+ * Patch the `font-family` style on the current selection.
+ * Passing an empty string clears the override and inherits the editor default.
+ */
+export declare function applyFontFamily(editor: LexicalEditor, value: string): void;
+//# sourceMappingURL=actions.d.ts.map

package/dist/actions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../src/actions.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAO1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAE7C;;;GAGG;AACH,wBAAgB,YAAY,CAAC,UAAU,EAAE,WAAW,GAAG,SAAS,CAgB/D;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,GAAG,IAAI,CA0B3E;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAO1E"}

package/dist/constants.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties } from 'react';
+export interface FontFamilyDef {
+    label: string;
+    value: string;
+    /** Suggested style for the dropdown menu entry. */
+    style?: CSSProperties;
+}
+export declare const FONT_FAMILIES: FontFamilyDef[];
+export declare function getFontLabel(fontFamily: string): string;
+export type BlockType = 'paragraph' | 'h1' | 'h2' | 'h3' | 'bullet' | 'number' | 'check' | 'other';
+export declare const BLOCK_TYPE_LABELS: Record<BlockType, string>;
+//# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,eAAO,MAAM,aAAa,EAAE,aAAa,EAcxC,CAAC;AAEF,wBAAgB,YAAY,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAUvD;AAED,MAAM,MAAM,SAAS,GACjB,WAAW,GACX,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,QAAQ,GACR,QAAQ,GACR,OAAO,GACP,OAAO,CAAC;AAEZ,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CASvD,CAAC"}

package/dist/index.d.ts

@@ -1,3 +1,11 @@
+export { applyBlockType, applyFontFamily, getBlockType } from './actions';
+export { BLOCK_TYPE_LABELS, FONT_FAMILIES, getFontLabel, } from './constants';
+export type { BlockType, FontFamilyDef } from './constants';
+export { ToolbarButton } from './ToolbarButton';
+export { ToolbarDropdown } from './ToolbarDropdown';
+export { ToolbarSeparator } from './ToolbarSeparator';
 export type { ToolbarPluginProps } from './ToolbarPlugin';
 export { ToolbarPlugin } from './ToolbarPlugin';
+export { INITIAL_TOOLBAR_STATE, useToolbarState } from './use-toolbar-state';
+export type { ToolbarState } from './use-toolbar-state';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC1E,OAAO,EACL,iBAAiB,EACjB,aAAa,EACb,YAAY,GACb,MAAM,aAAa,CAAC;AACrB,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,qBAAqB,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC7E,YAAY,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/index.mjs

@@ -1,14 +1,122 @@
-import { $selectionTouchesSpoiler, $toggleSpoilerSelection, collectCommandItems } from "@haklex/rich-editor/commands";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger, createTooltipHandle } from "@haklex/rich-editor-ui";
 import { $isListNode, INSERT_CHECK_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND } from "@lexical/list";
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { $createHeadingNode, $isHeadingNode } from "@lexical/rich-text";
 import { $getSelectionStyleValueForProperty, $patchStyleText, $setBlocksType } from "@lexical/selection";
-import { $findMatchingParent } from "@lexical/utils";
 import { $createParagraphNode, $getSelection, $isElementNode, $isRangeSelection, $isRootOrShadowRoot, CAN_REDO_COMMAND, CAN_UNDO_COMMAND, COMMAND_PRIORITY_LOW, FORMAT_ELEMENT_COMMAND, FORMAT_TEXT_COMMAND, REDO_COMMAND, UNDO_COMMAND } from "lexical";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger, createTooltipHandle } from "@haklex/rich-editor-ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { AlignCenter, AlignJustify, AlignLeft, AlignRight, Bold, ChevronDown, Code, Ellipsis, EyeOff, Heading1, Heading2, Heading3, Highlighter, Italic, List, ListChecks, ListOrdered, Pilcrow, Redo, Strikethrough, Underline, Undo } from "lucide-react";
+import { $selectionTouchesSpoiler, $toggleSpoilerSelection, collectCommandItems } from "@haklex/rich-editor/commands";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { $findMatchingParent } from "@lexical/utils";
+//#region src/actions.ts
+/**
+* Derive the canonical block type from an element node.
+* Exposed so downstream toolbars can recompute block type for any selection target.
+*/
+function getBlockType(anchorNode) {
+	if ($isHeadingNode(anchorNode)) {
+		const tag = anchorNode.getTag();
+		if (tag === "h1" || tag === "h2" || tag === "h3") return tag;
+		return "other";
+	}
+	if ($isListNode(anchorNode)) {
+		const listType = anchorNode.getListType();
+		if (listType === "bullet") return "bullet";
+		if (listType === "number") return "number";
+		if (listType === "check") return "check";
+		return "other";
+	}
+	if (anchorNode.getType() === "paragraph") return "paragraph";
+	return "other";
+}
+/**
+* Apply a block type (paragraph / heading / list) to the current selection.
+* For list types this delegates to the corresponding INSERT_*_LIST_COMMAND.
+*/
+function applyBlockType(editor, type) {
+	if (type === "bullet") {
+		editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, void 0);
+		return;
+	}
+	if (type === "number") {
+		editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, void 0);
+		return;
+	}
+	if (type === "check") {
+		editor.dispatchCommand(INSERT_CHECK_LIST_COMMAND, void 0);
+		return;
+	}
+	editor.update(() => {
+		const selection = $getSelection();
+		if (!$isRangeSelection(selection)) return;
+		if (type === "paragraph" || type === "other") {
+			$setBlocksType(selection, () => $createParagraphNode());
+			return;
+		}
+		if (type === "h1" || type === "h2" || type === "h3") $setBlocksType(selection, () => $createHeadingNode(type));
+	});
+}
+/**
+* Patch the `font-family` style on the current selection.
+* Passing an empty string clears the override and inherits the editor default.
+*/
+function applyFontFamily(editor, value) {
+	editor.update(() => {
+		const selection = $getSelection();
+		if ($isRangeSelection(selection)) $patchStyleText(selection, { "font-family": value || "" });
+	});
+}
+//#endregion
+//#region src/constants.ts
+var FONT_FAMILIES = [
+	{
+		label: "默认",
+		value: ""
+	},
+	{
+		label: "宋体",
+		value: "\"Noto Serif CJK SC\", \"Source Han Serif SC\", SimSun, serif"
+	},
+	{
+		label: "黑体",
+		value: "\"Noto Sans CJK SC\", \"Source Han Sans SC\", SimHei, sans-serif"
+	},
+	{
+		label: "楷体",
+		value: "KaiTi, STKaiti, serif"
+	},
+	{
+		label: "Sans",
+		value: "system-ui, -apple-system, sans-serif"
+	},
+	{
+		label: "Serif",
+		value: "Georgia, \"Times New Roman\", serif"
+	},
+	{
+		label: "Mono",
+		value: "ui-monospace, \"SF Mono\", \"Fira Code\", monospace"
+	}
+];
+function getFontLabel(fontFamily) {
+	if (!fontFamily) return "默认";
+	const match = FONT_FAMILIES.find((f) => f.value === fontFamily);
+	if (match) return match.label;
+	for (const def of FONT_FAMILIES) if (def.value && fontFamily.startsWith(def.value.split(",")[0])) return def.label;
+	return "默认";
+}
+var BLOCK_TYPE_LABELS = {
+	paragraph: "Text",
+	h1: "Heading 1",
+	h2: "Heading 2",
+	h3: "Heading 3",
+	bullet: "Bulleted List",
+	number: "Numbered List",
+	check: "To-do List",
+	other: "Other"
+};
+//#endregion
 //#region src/styles.css.ts
 var toolbarContainer = "_1e1ersc0";
 var toolbarRow = "_1e1ersc1";
@@ -103,57 +211,8 @@ function ToolbarSeparator() {
 	return /* @__PURE__ */ jsx("div", { className: toolbarSeparator });
 }
 //#endregion
-//#region src/ToolbarPlugin.tsx
-var ICON_SIZE = 15;
-var ICON_STROKE = 2;
-var FONT_FAMILIES = [
-	{
-		label: "默认",
-		value: ""
-	},
-	{
-		label: "宋体",
-		value: "\"Noto Serif CJK SC\", \"Source Han Serif SC\", SimSun, serif"
-	},
-	{
-		label: "黑体",
-		value: "\"Noto Sans CJK SC\", \"Source Han Sans SC\", SimHei, sans-serif"
-	},
-	{
-		label: "楷体",
-		value: "KaiTi, STKaiti, serif"
-	},
-	{
-		label: "Sans",
-		value: "system-ui, -apple-system, sans-serif"
-	},
-	{
-		label: "Serif",
-		value: "Georgia, \"Times New Roman\", serif"
-	},
-	{
-		label: "Mono",
-		value: "ui-monospace, \"SF Mono\", \"Fira Code\", monospace"
-	}
-];
-function getFontLabel(fontFamily) {
-	if (!fontFamily) return "默认";
-	const match = FONT_FAMILIES.find((f) => f.value === fontFamily);
-	if (match) return match.label;
-	for (const def of FONT_FAMILIES) if (def.value && fontFamily.startsWith(def.value.split(",")[0])) return def.label;
-	return "默认";
-}
-var BLOCK_TYPE_LABELS = {
-	paragraph: "Text",
-	h1: "Heading 1",
-	h2: "Heading 2",
-	h3: "Heading 3",
-	bullet: "Bulleted List",
-	number: "Numbered List",
-	check: "To-do List",
-	other: "Other"
-};
-var INITIAL_STATE = {
+//#region src/use-toolbar-state.ts
+var INITIAL_TOOLBAR_STATE = {
 	canUndo: false,
 	canRedo: false,
 	blockType: "paragraph",
@@ -167,36 +226,14 @@ var INITIAL_STATE = {
 	isHighlight: false,
 	isSpoiler: false
 };
-function getBlockType(anchorNode) {
-	if ($isHeadingNode(anchorNode)) {
-		const tag = anchorNode.getTag();
-		if (tag === "h1" || tag === "h2" || tag === "h3") return tag;
-		return "other";
-	}
-	if ($isListNode(anchorNode)) {
-		const listType = anchorNode.getListType();
-		if (listType === "bullet") return "bullet";
-		if (listType === "number") return "number";
-		if (listType === "check") return "check";
-		return "other";
-	}
-	if (anchorNode.getType() === "paragraph") return "paragraph";
-	return "other";
-}
-var DEFAULT_MAX_VISIBLE_INSERT_ITEMS = 5;
-function ToolbarPlugin({ className, maxVisibleInsertItems = DEFAULT_MAX_VISIBLE_INSERT_ITEMS, insertItemOrder }) {
+/**
+* Subscribe to selection/format/history changes and return a reactive ToolbarState.
+* Use inside a component mounted under a LexicalComposer (e.g. via `header={...}`
+* slot of the editor) so the lexical context is available.
+*/
+function useToolbarState() {
 	const [editor] = useLexicalComposerContext();
-	const [state, setState] = useState(INITIAL_STATE);
-	const [tooltipHandle] = useState(() => createTooltipHandle());
-	const toolbarItems = useMemo(() => {
-		const items = collectCommandItems(editor).filter((item) => item.placement?.includes("toolbar") && item.group === "insert");
-		if (!insertItemOrder || insertItemOrder.length === 0) return items;
-		return items.sort((a, b) => {
-			const ai = insertItemOrder.indexOf(a.title);
-			const bi = insertItemOrder.indexOf(b.title);
-			return (ai === -1 ? Infinity : ai) - (bi === -1 ? Infinity : bi);
-		});
-	}, [editor, insertItemOrder]);
+	const [state, setState] = useState(INITIAL_TOOLBAR_STATE);
 	const updateToolbar = useCallback(() => {
 		const selection = $getSelection();
 		if (!$isRangeSelection(selection)) return;
@@ -259,18 +296,32 @@ function ToolbarPlugin({ className, maxVisibleInsertItems = DEFAULT_MAX_VISIBLE_
 			unregisterUpdate();
 		};
 	}, [editor, updateToolbar]);
-	const applyFontFamily = useCallback((value) => {
-		editor.update(() => {
-			const selection = $getSelection();
-			if ($isRangeSelection(selection)) $patchStyleText(selection, { "font-family": value || "" });
+	return state;
+}
+//#endregion
+//#region src/ToolbarPlugin.tsx
+var ICON_SIZE = 15;
+var ICON_STROKE = 2;
+var DEFAULT_MAX_VISIBLE_INSERT_ITEMS = 5;
+function ToolbarPlugin({ className, maxVisibleInsertItems = DEFAULT_MAX_VISIBLE_INSERT_ITEMS, insertItemOrder }) {
+	const [editor] = useLexicalComposerContext();
+	const state = useToolbarState();
+	const [tooltipHandle] = useState(() => createTooltipHandle());
+	const toolbarItems = useMemo(() => {
+		const items = collectCommandItems(editor).filter((item) => item.placement?.includes("toolbar") && item.group === "insert");
+		if (!insertItemOrder || insertItemOrder.length === 0) return items;
+		return items.sort((a, b) => {
+			const ai = insertItemOrder.indexOf(a.title);
+			const bi = insertItemOrder.indexOf(b.title);
+			return (ai === -1 ? Infinity : ai) - (bi === -1 ? Infinity : bi);
 		});
-	}, [editor]);
+	}, [editor, insertItemOrder]);
 	const fontFamilyItems = useMemo(() => FONT_FAMILIES.map((def) => ({
 		label: def.label,
 		active: state.fontFamily === def.value,
 		style: def.value ? { fontFamily: def.value } : void 0,
-		onSelect: () => applyFontFamily(def.value)
-	})), [state.fontFamily, applyFontFamily]);
+		onSelect: () => applyFontFamily(editor, def.value)
+	})), [editor, state.fontFamily]);
 	const headingItems = useMemo(() => [
 		{
 			label: "Text",
@@ -582,4 +633,4 @@ function ToolbarPlugin({ className, maxVisibleInsertItems = DEFAULT_MAX_VISIBLE_
 	});
 }
 //#endregion
-export { ToolbarPlugin };
+export { BLOCK_TYPE_LABELS, FONT_FAMILIES, INITIAL_TOOLBAR_STATE, ToolbarButton, ToolbarDropdown, ToolbarPlugin, ToolbarSeparator, applyBlockType, applyFontFamily, getBlockType, getFontLabel, useToolbarState };

package/dist/use-toolbar-state.d.ts

@@ -0,0 +1,24 @@
+import { ElementFormatType } from 'lexical';
+import { BlockType } from './constants';
+export interface ToolbarState {
+    blockType: BlockType;
+    canRedo: boolean;
+    canUndo: boolean;
+    elementFormat: ElementFormatType;
+    fontFamily: string;
+    isBold: boolean;
+    isCode: boolean;
+    isHighlight: boolean;
+    isItalic: boolean;
+    isSpoiler: boolean;
+    isStrikethrough: boolean;
+    isUnderline: boolean;
+}
+export declare const INITIAL_TOOLBAR_STATE: ToolbarState;
+/**
+ * Subscribe to selection/format/history changes and return a reactive ToolbarState.
+ * Use inside a component mounted under a LexicalComposer (e.g. via `header={...}`
+ * slot of the editor) so the lexical context is available.
+ */
+export declare function useToolbarState(): ToolbarState;
+//# sourceMappingURL=use-toolbar-state.d.ts.map

package/dist/use-toolbar-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-toolbar-state.d.ts","sourceRoot":"","sources":["../src/use-toolbar-state.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAe,MAAM,SAAS,CAAC;AAa9D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAE7C,MAAM,WAAW,YAAY;IAC3B,SAAS,EAAE,SAAS,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,iBAAiB,CAAC;IACjC,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,eAAe,EAAE,OAAO,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,qBAAqB,EAAE,YAanC,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,eAAe,IAAI,YAAY,CAyF9C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haklex/rich-plugin-toolbar",
-  "version": "0.15.9",
+  "version": "0.16.0",
   "description": "Top toolbar plugin for rich editor",
   "repository": {
     "type": "git",
@@ -32,8 +32,8 @@
     "@vanilla-extract/vite-plugin": "^5.2.2",
     "lexical": "^0.44.0",
     "lucide-react": "^1.16.0",
-    "react": "19.2.6",
-    "react-dom": "19.2.6",
+    "react": "19.2.5",
+    "react-dom": "19.2.5",
     "typescript": "^5.9.3",
     "unplugin-dts": "^1.0.1",
     "vite": "^8.0.13"
@@ -48,9 +48,9 @@
     "lucide-react": "^1.0.0",
     "react": ">=19",
     "react-dom": ">=19",
-    "@haklex/rich-style-token": "0.15.9",
-    "@haklex/rich-editor": "0.15.9",
-    "@haklex/rich-editor-ui": "0.15.9"
+    "@haklex/rich-editor": "0.15.4",
+    "@haklex/rich-editor-ui": "0.15.4",
+    "@haklex/rich-style-token": "0.15.4"
   },
   "publishConfig": {
     "access": "public"