@haklex/rich-plugin-toolbar 0.0.65 → 0.0.66

package/README.md

@@ -0,0 +1,70 @@
+# @haklex/rich-plugin-toolbar
+
+Top toolbar plugin with formatting controls for the Haklex rich editor.
+
+## Installation
+
+```bash
+pnpm add @haklex/rich-plugin-toolbar
+```
+
+## Peer Dependencies
+
+| Package | Version |
+| --- | --- |
+| `@lexical/list` | `^0.41.0` |
+| `@lexical/react` | `^0.41.0` |
+| `@lexical/rich-text` | `^0.41.0` |
+| `@lexical/selection` | `^0.41.0` |
+| `@lexical/utils` | `^0.41.0` |
+| `lexical` | `^0.41.0` |
+| `lucide-react` | `^0.574.0` |
+| `react` | `>= 19` |
+| `react-dom` | `>= 19` |
+
+## Usage
+
+```tsx
+import { ToolbarPlugin } from '@haklex/rich-plugin-toolbar'
+import '@haklex/rich-plugin-toolbar/style.css'
+
+function Editor() {
+  return (
+    <RichEditor>
+      <ToolbarPlugin />
+    </RichEditor>
+  )
+}
+```
+
+The toolbar renders at the top of the editor with controls for text formatting (bold, italic, underline, strikethrough, code), block type selection (paragraph, headings, quote, lists), text alignment, and undo/redo.
+
+```tsx
+import type { ToolbarPluginProps } from '@haklex/rich-plugin-toolbar'
+
+const props: ToolbarPluginProps = {
+  // ...
+}
+```
+
+## Exports
+
+| Export | Type | Description |
+| --- | --- | --- |
+| `ToolbarPlugin` | Component | Main toolbar component to render inside `RichEditor` |
+| `ToolbarPluginProps` | TypeScript type | Props type for `ToolbarPlugin` |
+
+## Sub-path Exports
+
+| Path | Description |
+| --- | --- |
+| `@haklex/rich-plugin-toolbar` | Plugin component and types |
+| `@haklex/rich-plugin-toolbar/style.css` | Stylesheet |
+
+## Part of Haklex
+
+This package is part of the [Haklex](../../README.md) rich editor ecosystem.
+
+## License
+
+MIT

package/dist/ToolbarButton.d.ts

@@ -1,12 +1,12 @@
 import { ReactNode } from 'react';
 import { ToolbarTooltipHandle } from './types';
 export interface ToolbarButtonProps {
-    icon: ReactNode;
-    title: string;
-    shortcut?: string;
     active?: boolean;
     disabled?: boolean;
+    icon: ReactNode;
     onClick: () => void;
+    shortcut?: string;
+    title: string;
     tooltipHandle?: ToolbarTooltipHandle;
 }
 export declare function ToolbarButton({ icon, title, shortcut, active, disabled, onClick, tooltipHandle, }: ToolbarButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/ToolbarButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarButton.d.ts","sourceRoot":"","sources":["../src/ToolbarButton.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,KAAK,EAAE,oBAAoB,EAAyB,MAAM,SAAS,CAAA;AAE1E,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,SAAS,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,aAAa,CAAC,EAAE,oBAAoB,CAAA;CACrC;AAED,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,OAAO,EACP,aAAa,GACd,EAAE,kBAAkB,2CAoCpB"}
+{"version":3,"file":"ToolbarButton.d.ts","sourceRoot":"","sources":["../src/ToolbarButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,oBAAoB,EAAyB,MAAM,SAAS,CAAC;AAE3E,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,oBAAoB,CAAC;CACtC;AAED,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,OAAO,EACP,aAAa,GACd,EAAE,kBAAkB,2CAoCpB"}

package/dist/ToolbarDropdown.d.ts

@@ -1,18 +1,18 @@
 import { CSSProperties, ReactNode } from 'react';
 import { ToolbarTooltipHandle } from './types';
 export interface ToolbarDropdownItem {
-    label: string;
-    icon?: ReactNode;
     active?: boolean;
-    style?: CSSProperties;
+    icon?: ReactNode;
+    label: string;
     onSelect: () => void;
+    style?: CSSProperties;
 }
 export interface ToolbarDropdownProps {
+    items: ToolbarDropdownItem[];
     label: string;
     title: string;
-    items: ToolbarDropdownItem[];
-    triggerWidth?: number;
     tooltipHandle?: ToolbarTooltipHandle;
+    triggerWidth?: number;
 }
 export declare function ToolbarDropdown({ label, title, items, triggerWidth, tooltipHandle, }: ToolbarDropdownProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ToolbarDropdown.d.ts.map

package/dist/ToolbarDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarDropdown.d.ts","sourceRoot":"","sources":["../src/ToolbarDropdown.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGrD,OAAO,KAAK,EAAE,oBAAoB,EAAyB,MAAM,SAAS,CAAA;AAE1E,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAA;CACrB;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,mBAAmB,EAAE,CAAA;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,oBAAoB,CAAA;CACrC;AAED,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,KAAK,EACL,KAAK,EACL,YAAY,EACZ,aAAa,GACd,EAAE,oBAAoB,2CAyEtB"}
+{"version":3,"file":"ToolbarDropdown.d.ts","sourceRoot":"","sources":["../src/ToolbarDropdown.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtD,OAAO,KAAK,EAAE,oBAAoB,EAAyB,MAAM,SAAS,CAAC;AAE3E,MAAM,WAAW,mBAAmB;IAClC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,oBAAoB,CAAC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,KAAK,EACL,KAAK,EACL,YAAY,EACZ,aAAa,GACd,EAAE,oBAAoB,2CAyEtB"}

package/dist/ToolbarPlugin.d.ts

@@ -1,8 +1,8 @@
 import { ReactElement } from 'react';
 export interface ToolbarPluginProps {
     className?: string;
-    maxVisibleInsertItems?: number;
     insertItemOrder?: string[];
+    maxVisibleInsertItems?: number;
 }
 export declare function ToolbarPlugin({ className, maxVisibleInsertItems, insertItemOrder, }: ToolbarPluginProps): ReactElement;
 //# sourceMappingURL=ToolbarPlugin.d.ts.map

package/dist/ToolbarPlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarPlugin.d.ts","sourceRoot":"","sources":["../src/ToolbarPlugin.tsx"],"names":[],"mappings":"AAgEA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAA;AA0HxD,MAAM,WAAW,kBAAkB;IACjC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;CAC3B;AAED,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,qBAAwD,EACxD,eAAe,GAChB,EAAE,kBAAkB,GAAG,YAAY,CA4bnC"}
+{"version":3,"file":"ToolbarPlugin.d.ts","sourceRoot":"","sources":["../src/ToolbarPlugin.tsx"],"names":[],"mappings":"AAgEA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAkHzD,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,CA4YnC"}

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { collectCommandItems } from "@haklex/rich-editor";
+import { collectCommandItems } from "@haklex/rich-editor/commands";
 import { TooltipTrigger, TooltipRoot, TooltipContent, DropdownMenuContent, DropdownMenuItem, DropdownMenu, DropdownMenuTrigger, createTooltipHandle, TooltipProvider } from "@haklex/rich-editor-ui";
 import { $isListNode, INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, INSERT_CHECK_LIST_COMMAND } from "@lexical/list";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
@@ -30,15 +30,15 @@ function ToolbarButton({
   const button = /* @__PURE__ */ jsx(
     "button",
     {
-      type: "button",
+      "aria-label": title,
+      "aria-pressed": active,
       className: `${toolbarButton}${active ? ` ${toolbarButtonActive}` : ""}`,
       disabled,
+      type: "button",
       onMouseDown: (e) => {
         e.preventDefault();
         onClick();
-      },
-      "aria-label": title,
-      "aria-pressed": active
+      }
     }
   );
   if (tooltipHandle) {
@@ -72,8 +72,8 @@ function ToolbarDropdown({
     DropdownMenuTrigger,
     {
       className: toolbarDropdownTrigger,
-      style: triggerStyle,
-      render: /* @__PURE__ */ jsx("button", { type: "button" })
+      render: /* @__PURE__ */ jsx("button", { type: "button" }),
+      style: triggerStyle
     }
   );
   const triggerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -205,9 +205,7 @@ function ToolbarPlugin({
 }) {
   const [editor] = useLexicalComposerContext();
   const [state, setState] = useState(INITIAL_STATE);
-  const [tooltipHandle] = useState(
-    () => createTooltipHandle()
-  );
+  const [tooltipHandle] = useState(() => createTooltipHandle());
   const toolbarItems = useMemo(() => {
     const items = collectCommandItems(editor).filter(
       (item) => item.placement?.includes("toolbar") && item.group === "insert"
@@ -228,20 +226,13 @@ function ToolbarPlugin({
       return parent !== null && $isRootOrShadowRoot(parent);
     }) ?? anchorNode.getTopLevelElementOrThrow();
     if ($isListNode(element)) {
-      const parentList = $findMatchingParent(
-        anchorNode,
-        (node) => $isListNode(node)
-      );
+      const parentList = $findMatchingParent(anchorNode, (node) => $isListNode(node));
       if (parentList) {
         element = parentList;
       }
     }
     const blockType = getBlockType(element);
-    const fontFamily = $getSelectionStyleValueForProperty(
-      selection,
-      "font-family",
-      ""
-    );
+    const fontFamily = $getSelectionStyleValueForProperty(selection, "font-family", "");
     const elementFormat = $isElementNode(element) ? element.getFormatType() : "left";
     setState((prev) => ({
       ...prev,
@@ -273,13 +264,11 @@ function ToolbarPlugin({
       },
       COMMAND_PRIORITY_LOW
     );
-    const unregisterUpdate = editor.registerUpdateListener(
-      ({ editorState }) => {
-        editorState.read(() => {
-          updateToolbar();
-        });
-      }
-    );
+    const unregisterUpdate = editor.registerUpdateListener(({ editorState }) => {
+      editorState.read(() => {
+        updateToolbar();
+      });
+    });
     return () => {
       unregisterUndo();
       unregisterRedo();
@@ -366,261 +355,239 @@ function ToolbarPlugin({
   const containerClassName = className ? `${toolbarContainer} ${className}` : toolbarContainer;
   const h = tooltipHandle;
   return /* @__PURE__ */ jsxs(TooltipProvider, { delay: 300, children: [
-    /* @__PURE__ */ jsx(
-      TooltipRoot,
-      {
-        handle: tooltipHandle,
-        disableHoverablePopup: true,
-        children: ((props) => props.payload !== void 0 ? /* @__PURE__ */ jsxs(TooltipContent, { side: "bottom", sideOffset: 4, children: [
-          props.payload.title,
-          props.payload.shortcut && /* @__PURE__ */ jsx("span", { className: tooltipShortcut, children: props.payload.shortcut })
-        ] }) : null)
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: containerClassName,
-        role: "toolbar",
-        "aria-label": "Editor toolbar",
-        children: /* @__PURE__ */ jsxs("div", { className: toolbarRow, children: [
-          /* @__PURE__ */ jsx(
-            ToolbarDropdown,
-            {
-              label: getFontLabel(state.fontFamily),
-              title: "Font family",
-              items: fontFamilyItems,
-              triggerWidth: 76,
-              tooltipHandle: h
-            }
-          ),
-          /* @__PURE__ */ jsx(ToolbarSeparator, {}),
-          /* @__PURE__ */ jsx(
-            ToolbarDropdown,
-            {
-              label: BLOCK_TYPE_LABELS[state.blockType] ?? "Text",
-              title: "Block type",
-              items: headingItems,
-              triggerWidth: 120,
-              tooltipHandle: h
-            }
-          ),
-          /* @__PURE__ */ jsx(ToolbarSeparator, {}),
-          /* @__PURE__ */ jsx(
-            ToolbarButton,
-            {
-              icon: /* @__PURE__ */ jsx(Undo, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
-              title: "Undo",
-              shortcut: "Ctrl+Z",
-              disabled: !state.canUndo,
-              onClick: () => editor.dispatchCommand(UNDO_COMMAND, void 0),
-              tooltipHandle: h
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            ToolbarButton,
-            {
-              icon: /* @__PURE__ */ jsx(Redo, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
-              title: "Redo",
-              shortcut: "Ctrl+Y",
-              disabled: !state.canRedo,
-              onClick: () => editor.dispatchCommand(REDO_COMMAND, void 0),
-              tooltipHandle: h
-            }
-          ),
-          /* @__PURE__ */ jsx(ToolbarSeparator, {}),
-          /* @__PURE__ */ jsx(
-            ToolbarButton,
-            {
-              icon: /* @__PURE__ */ jsx(Bold, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
-              title: "Bold",
-              shortcut: "Ctrl+B",
-              active: state.isBold,
-              onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold"),
-              tooltipHandle: h
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            ToolbarButton,
-            {
-              icon: /* @__PURE__ */ jsx(Italic, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
-              title: "Italic",
-              shortcut: "Ctrl+I",
-              active: state.isItalic,
-              onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic"),
-              tooltipHandle: h
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            ToolbarButton,
-            {
-              icon: /* @__PURE__ */ jsx(Underline, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
-              title: "Underline",
-              shortcut: "Ctrl+U",
-              active: state.isUnderline,
-              onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline"),
-              tooltipHandle: h
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            ToolbarButton,
-            {
-              icon: /* @__PURE__ */ jsx(Strikethrough, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
-              title: "Strikethrough",
-              active: state.isStrikethrough,
-              onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough"),
-              tooltipHandle: h
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            ToolbarButton,
-            {
-              icon: /* @__PURE__ */ jsx(Code, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
-              title: "Inline Code",
-              active: state.isCode,
-              onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code"),
-              tooltipHandle: h
-            }
-          ),
-          /* @__PURE__ */ jsx(ToolbarSeparator, {}),
-          /* @__PURE__ */ jsx(
-            ToolbarButton,
-            {
-              icon: /* @__PURE__ */ jsx(Highlighter, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
-              title: "Highlight",
-              active: state.isHighlight,
-              onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "highlight"),
-              tooltipHandle: h
-            }
-          ),
-          /* @__PURE__ */ jsx(ToolbarSeparator, {}),
-          /* @__PURE__ */ jsx(
-            ToolbarButton,
-            {
-              icon: /* @__PURE__ */ jsx(List, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
-              title: "Bulleted List",
-              active: state.blockType === "bullet",
-              onClick: () => editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, void 0),
-              tooltipHandle: h
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            ToolbarButton,
-            {
-              icon: /* @__PURE__ */ jsx(ListOrdered, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
-              title: "Numbered List",
-              active: state.blockType === "number",
-              onClick: () => editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, void 0),
-              tooltipHandle: h
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            ToolbarButton,
-            {
-              icon: /* @__PURE__ */ jsx(ListChecks, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
-              title: "Checklist",
-              active: state.blockType === "check",
-              onClick: () => editor.dispatchCommand(INSERT_CHECK_LIST_COMMAND, void 0),
-              tooltipHandle: h
-            }
-          ),
-          /* @__PURE__ */ jsx(ToolbarSeparator, {}),
-          /* @__PURE__ */ jsx(
-            ToolbarButton,
-            {
-              icon: /* @__PURE__ */ jsx(AlignLeft, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
-              title: "Align Left",
-              active: state.elementFormat === "left" || state.elementFormat === "",
-              onClick: () => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "left"),
-              tooltipHandle: h
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            ToolbarButton,
-            {
-              icon: /* @__PURE__ */ jsx(AlignCenter, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
-              title: "Align Center",
-              active: state.elementFormat === "center",
-              onClick: () => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "center"),
-              tooltipHandle: h
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            ToolbarButton,
-            {
-              icon: /* @__PURE__ */ jsx(AlignRight, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
-              title: "Align Right",
-              active: state.elementFormat === "right",
-              onClick: () => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "right"),
-              tooltipHandle: h
-            }
-          ),
+    /* @__PURE__ */ jsx(TooltipRoot, { disableHoverablePopup: true, handle: tooltipHandle, children: ((props) => props.payload !== void 0 ? /* @__PURE__ */ jsxs(TooltipContent, { side: "bottom", sideOffset: 4, children: [
+      props.payload.title,
+      props.payload.shortcut && /* @__PURE__ */ jsx("span", { className: tooltipShortcut, children: props.payload.shortcut })
+    ] }) : null) }),
+    /* @__PURE__ */ jsx("div", { "aria-label": "Editor toolbar", className: containerClassName, role: "toolbar", children: /* @__PURE__ */ jsxs("div", { className: toolbarRow, children: [
+      /* @__PURE__ */ jsx(
+        ToolbarDropdown,
+        {
+          items: fontFamilyItems,
+          label: getFontLabel(state.fontFamily),
+          title: "Font family",
+          tooltipHandle: h,
+          triggerWidth: 76
+        }
+      ),
+      /* @__PURE__ */ jsx(ToolbarSeparator, {}),
+      /* @__PURE__ */ jsx(
+        ToolbarDropdown,
+        {
+          items: headingItems,
+          label: BLOCK_TYPE_LABELS[state.blockType] ?? "Text",
+          title: "Block type",
+          tooltipHandle: h,
+          triggerWidth: 120
+        }
+      ),
+      /* @__PURE__ */ jsx(ToolbarSeparator, {}),
+      /* @__PURE__ */ jsx(
+        ToolbarButton,
+        {
+          disabled: !state.canUndo,
+          icon: /* @__PURE__ */ jsx(Undo, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
+          shortcut: "Ctrl+Z",
+          title: "Undo",
+          tooltipHandle: h,
+          onClick: () => editor.dispatchCommand(UNDO_COMMAND, void 0)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ToolbarButton,
+        {
+          disabled: !state.canRedo,
+          icon: /* @__PURE__ */ jsx(Redo, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
+          shortcut: "Ctrl+Y",
+          title: "Redo",
+          tooltipHandle: h,
+          onClick: () => editor.dispatchCommand(REDO_COMMAND, void 0)
+        }
+      ),
+      /* @__PURE__ */ jsx(ToolbarSeparator, {}),
+      /* @__PURE__ */ jsx(
+        ToolbarButton,
+        {
+          active: state.isBold,
+          icon: /* @__PURE__ */ jsx(Bold, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
+          shortcut: "Ctrl+B",
+          title: "Bold",
+          tooltipHandle: h,
+          onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ToolbarButton,
+        {
+          active: state.isItalic,
+          icon: /* @__PURE__ */ jsx(Italic, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
+          shortcut: "Ctrl+I",
+          title: "Italic",
+          tooltipHandle: h,
+          onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ToolbarButton,
+        {
+          active: state.isUnderline,
+          icon: /* @__PURE__ */ jsx(Underline, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
+          shortcut: "Ctrl+U",
+          title: "Underline",
+          tooltipHandle: h,
+          onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ToolbarButton,
+        {
+          active: state.isStrikethrough,
+          icon: /* @__PURE__ */ jsx(Strikethrough, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
+          title: "Strikethrough",
+          tooltipHandle: h,
+          onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ToolbarButton,
+        {
+          active: state.isCode,
+          icon: /* @__PURE__ */ jsx(Code, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
+          title: "Inline Code",
+          tooltipHandle: h,
+          onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code")
+        }
+      ),
+      /* @__PURE__ */ jsx(ToolbarSeparator, {}),
+      /* @__PURE__ */ jsx(
+        ToolbarButton,
+        {
+          active: state.isHighlight,
+          icon: /* @__PURE__ */ jsx(Highlighter, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
+          title: "Highlight",
+          tooltipHandle: h,
+          onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "highlight")
+        }
+      ),
+      /* @__PURE__ */ jsx(ToolbarSeparator, {}),
+      /* @__PURE__ */ jsx(
+        ToolbarButton,
+        {
+          active: state.blockType === "bullet",
+          icon: /* @__PURE__ */ jsx(List, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
+          title: "Bulleted List",
+          tooltipHandle: h,
+          onClick: () => editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, void 0)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ToolbarButton,
+        {
+          active: state.blockType === "number",
+          icon: /* @__PURE__ */ jsx(ListOrdered, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
+          title: "Numbered List",
+          tooltipHandle: h,
+          onClick: () => editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, void 0)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ToolbarButton,
+        {
+          active: state.blockType === "check",
+          icon: /* @__PURE__ */ jsx(ListChecks, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
+          title: "Checklist",
+          tooltipHandle: h,
+          onClick: () => editor.dispatchCommand(INSERT_CHECK_LIST_COMMAND, void 0)
+        }
+      ),
+      /* @__PURE__ */ jsx(ToolbarSeparator, {}),
+      /* @__PURE__ */ jsx(
+        ToolbarButton,
+        {
+          active: state.elementFormat === "left" || state.elementFormat === "",
+          icon: /* @__PURE__ */ jsx(AlignLeft, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
+          title: "Align Left",
+          tooltipHandle: h,
+          onClick: () => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "left")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ToolbarButton,
+        {
+          active: state.elementFormat === "center",
+          icon: /* @__PURE__ */ jsx(AlignCenter, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
+          title: "Align Center",
+          tooltipHandle: h,
+          onClick: () => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "center")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ToolbarButton,
+        {
+          active: state.elementFormat === "right",
+          icon: /* @__PURE__ */ jsx(AlignRight, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
+          title: "Align Right",
+          tooltipHandle: h,
+          onClick: () => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "right")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ToolbarButton,
+        {
+          active: state.elementFormat === "justify",
+          icon: /* @__PURE__ */ jsx(AlignJustify, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
+          title: "Justify",
+          tooltipHandle: h,
+          onClick: () => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "justify")
+        }
+      ),
+      toolbarItems.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(ToolbarSeparator, {}),
+        toolbarItems.slice(0, maxVisibleInsertItems).map((item) => /* @__PURE__ */ jsx(
+          ToolbarButton,
+          {
+            icon: item.icon,
+            shortcut: item.shortcut,
+            title: item.title,
+            tooltipHandle: h,
+            onClick: () => item.onSelect(editor, "")
+          },
+          item.title
+        )),
+        toolbarItems.length > maxVisibleInsertItems && /* @__PURE__ */ jsxs(DropdownMenu, { modal: false, children: [
           /* @__PURE__ */ jsx(
-            ToolbarButton,
+            TooltipTrigger,
             {
-              icon: /* @__PURE__ */ jsx(AlignJustify, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
-              title: "Justify",
-              active: state.elementFormat === "justify",
-              onClick: () => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "justify"),
-              tooltipHandle: h
-            }
-          ),
-          toolbarItems.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(ToolbarSeparator, {}),
-            toolbarItems.slice(0, maxVisibleInsertItems).map((item) => /* @__PURE__ */ jsx(
-              ToolbarButton,
-              {
-                icon: item.icon,
-                title: item.title,
-                shortcut: item.shortcut,
-                onClick: () => item.onSelect(editor, ""),
-                tooltipHandle: h
-              },
-              item.title
-            )),
-            toolbarItems.length > maxVisibleInsertItems && /* @__PURE__ */ jsxs(DropdownMenu, { modal: false, children: [
-              /* @__PURE__ */ jsx(
-                TooltipTrigger,
+              handle: h,
+              payload: { title: "More" },
+              render: /* @__PURE__ */ jsx(
+                DropdownMenuTrigger,
                 {
-                  handle: h,
-                  payload: { title: "More" },
-                  render: /* @__PURE__ */ jsx(
-                    DropdownMenuTrigger,
-                    {
-                      className: toolbarButton,
-                      render: /* @__PURE__ */ jsx("button", { type: "button" })
-                    }
-                  ),
-                  children: /* @__PURE__ */ jsx(Ellipsis, { size: ICON_SIZE, strokeWidth: ICON_STROKE })
+                  className: toolbarButton,
+                  render: /* @__PURE__ */ jsx("button", { type: "button" })
                 }
               ),
-              /* @__PURE__ */ jsx(DropdownMenuContent, { positionMethod: "fixed", sideOffset: 4, children: toolbarItems.slice(maxVisibleInsertItems).map((item) => /* @__PURE__ */ jsxs(
-                DropdownMenuItem,
-                {
-                  onClick: () => item.onSelect(editor, ""),
-                  children: [
-                    item.icon && /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        style: {
-                          marginRight: 8,
-                          display: "inline-flex",
-                          transform: "scale(0.8)",
-                          transformOrigin: "left center"
-                        },
-                        children: item.icon
-                      }
-                    ),
-                    item.title
-                  ]
+              children: /* @__PURE__ */ jsx(Ellipsis, { size: ICON_SIZE, strokeWidth: ICON_STROKE })
+            }
+          ),
+          /* @__PURE__ */ jsx(DropdownMenuContent, { positionMethod: "fixed", sideOffset: 4, children: toolbarItems.slice(maxVisibleInsertItems).map((item) => /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => item.onSelect(editor, ""), children: [
+            item.icon && /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  marginRight: 8,
+                  display: "inline-flex",
+                  transform: "scale(0.8)",
+                  transformOrigin: "left center"
                 },
-                item.title
-              )) })
-            ] })
-          ] })
+                children: item.icon
+              }
+            ),
+            item.title
+          ] }, item.title)) })
         ] })
-      }
-    )
+      ] })
+    ] }) })
   ] });
 }
 export {

package/dist/types.d.ts

@@ -1,7 +1,7 @@
 import { createTooltipHandle } from '@haklex/rich-editor-ui';
 export interface ToolbarTooltipPayload {
-    title: string;
     shortcut?: string;
+    title: string;
 }
 export type ToolbarTooltipHandle = ReturnType<typeof createTooltipHandle<ToolbarTooltipPayload>>;
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AAEjE,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAC3C,OAAO,mBAAmB,CAAC,qBAAqB,CAAC,CAClD,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAElE,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,qBAAqB,CAAC,CAAC,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@haklex/rich-plugin-toolbar",
   "type": "module",
-  "version": "0.0.65",
+  "version": "0.0.66",
   "description": "Top toolbar plugin for rich editor",
   "license": "MIT",
   "exports": {
@@ -27,9 +27,9 @@
     "react-dom": ">=19"
   },
   "dependencies": {
-    "@haklex/rich-editor": "0.0.65",
-    "@haklex/rich-editor-ui": "0.0.65",
-    "@haklex/rich-style-token": "0.0.65"
+    "@haklex/rich-editor": "0.0.66",
+    "@haklex/rich-editor-ui": "0.0.66",
+    "@haklex/rich-style-token": "0.0.66"
   },
   "devDependencies": {
     "@lexical/list": "^0.41.0",
@@ -52,6 +52,11 @@
   "publishConfig": {
     "access": "public"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Innei/haklex.git",
+    "directory": "packages/rich-plugin-toolbar"
+  },
   "scripts": {
     "build": "vite build",
     "dev:build": "vite build --watch"