@haklex/rich-plugin-toolbar 0.0.87 → 0.0.89

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,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"}
+{"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"}

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { collectCommandItems } from "@haklex/rich-editor/commands";
+import { collectCommandItems, $selectionTouchesSpoiler, $toggleSpoilerSelection } 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";
@@ -7,7 +7,7 @@ import { $createHeadingNode, $isHeadingNode } from "@lexical/rich-text";
 import { $getSelectionStyleValueForProperty, $patchStyleText, $setBlocksType } from "@lexical/selection";
 import { $findMatchingParent } from "@lexical/utils";
 import { $getSelection, $isRangeSelection, $isRootOrShadowRoot, $isElementNode, CAN_UNDO_COMMAND, COMMAND_PRIORITY_LOW, CAN_REDO_COMMAND, $createParagraphNode, UNDO_COMMAND, REDO_COMMAND, FORMAT_TEXT_COMMAND, FORMAT_ELEMENT_COMMAND } from "lexical";
-import { ChevronDown, Pilcrow, Heading1, Heading2, Heading3, Undo, Redo, Bold, Italic, Underline, Strikethrough, Code, Highlighter, List, ListOrdered, ListChecks, AlignLeft, AlignCenter, AlignRight, AlignJustify, Ellipsis } from "lucide-react";
+import { ChevronDown, Pilcrow, Heading1, Heading2, Heading3, Undo, Redo, Bold, Italic, Underline, Strikethrough, Code, Highlighter, EyeOff, List, ListOrdered, ListChecks, AlignLeft, AlignCenter, AlignRight, AlignJustify, Ellipsis } from "lucide-react";
 import { useState, useMemo, useCallback, useEffect } from "react";
 var toolbarContainer = "_1e1ersc0";
 var toolbarRow = "_1e1ersc1";
@@ -178,7 +178,8 @@ const INITIAL_STATE = {
   isUnderline: false,
   isStrikethrough: false,
   isCode: false,
-  isHighlight: false
+  isHighlight: false,
+  isSpoiler: false
 };
 function getBlockType(anchorNode) {
   if ($isHeadingNode(anchorNode)) {
@@ -234,17 +235,25 @@ function ToolbarPlugin({
     const blockType = getBlockType(element);
     const fontFamily = $getSelectionStyleValueForProperty(selection, "font-family", "");
     const elementFormat = $isElementNode(element) ? element.getFormatType() : "left";
+    const isBold = selection.hasFormat("bold");
+    const isItalic = selection.hasFormat("italic");
+    const isUnderline = selection.hasFormat("underline");
+    const isStrikethrough = selection.hasFormat("strikethrough");
+    const isCode = selection.hasFormat("code");
+    const isHighlight = selection.hasFormat("highlight");
+    const isSpoiler = $selectionTouchesSpoiler(selection);
     setState((prev) => ({
       ...prev,
       blockType,
       fontFamily,
       elementFormat,
-      isBold: selection.hasFormat("bold"),
-      isItalic: selection.hasFormat("italic"),
-      isUnderline: selection.hasFormat("underline"),
-      isStrikethrough: selection.hasFormat("strikethrough"),
-      isCode: selection.hasFormat("code"),
-      isHighlight: selection.hasFormat("highlight")
+      isBold,
+      isItalic,
+      isUnderline,
+      isStrikethrough,
+      isCode,
+      isHighlight,
+      isSpoiler
     }));
   }, []);
   useEffect(() => {
@@ -469,6 +478,16 @@ function ToolbarPlugin({
           onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "highlight")
         }
       ),
+      /* @__PURE__ */ jsx(
+        ToolbarButton,
+        {
+          active: state.isSpoiler,
+          icon: /* @__PURE__ */ jsx(EyeOff, { size: ICON_SIZE, strokeWidth: ICON_STROKE }),
+          title: "Spoiler",
+          tooltipHandle: h,
+          onClick: () => editor.update($toggleSpoilerSelection)
+        }
+      ),
       /* @__PURE__ */ jsx(ToolbarSeparator, {}),
       /* @__PURE__ */ jsx(
         ToolbarButton,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haklex/rich-plugin-toolbar",
-  "version": "0.0.87",
+  "version": "0.0.89",
   "description": "Top toolbar plugin for rich editor",
   "repository": {
     "type": "git",
@@ -21,9 +21,9 @@
     "dist"
   ],
   "dependencies": {
-    "@haklex/rich-editor": "0.0.87",
-    "@haklex/rich-editor-ui": "0.0.87",
-    "@haklex/rich-style-token": "0.0.87"
+    "@haklex/rich-editor": "0.0.89",
+    "@haklex/rich-style-token": "0.0.89",
+    "@haklex/rich-editor-ui": "0.0.89"
   },
   "devDependencies": {
     "@lexical/list": "^0.42.0",
@@ -36,7 +36,7 @@
     "@vanilla-extract/css": "^1.18.0",
     "@vanilla-extract/vite-plugin": "^5.1.4",
     "lexical": "^0.42.0",
-    "lucide-react": "^0.577.0",
+    "lucide-react": "^1.0.0",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "typescript": "^5.9.3",
@@ -50,7 +50,7 @@
     "@lexical/selection": "^0.42.0",
     "@lexical/utils": "^0.42.0",
     "lexical": "^0.42.0",
-    "lucide-react": "^0.574.0",
+    "lucide-react": "^1.0.0",
     "react": ">=19",
     "react-dom": ">=19"
   },