@sparrowengg/twigs-editor-react 0.0.1

package/dist/cjs/components/toolbar/tools/format.js

@@ -0,0 +1,136 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var richText = require('@lexical/rich-text');
+var selection = require('@lexical/selection');
+var lexical = require('lexical');
+var store = require('../../toolbar-context/store.js');
+var dropdown = require('../../../react-components/dist/es/dropdown/dropdown.js');
+var iconButton = require('../../../react-components/dist/es/button/icon-button.js');
+var textFormat = require('../../../react-icons/dist/es/icons/text-format.js');
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const formatMapping = {
+  paragraph: "Paragraph",
+  h1: "Heading 1",
+  h2: "Heading 2",
+  h3: "Heading 3",
+  h4: "Heading 4",
+  h5: "Heading 5",
+  h6: "Heading 6"
+};
+const FormatTool = ({
+  renderButton,
+  dropdownMenuProps,
+  dropdownMenuContentProps,
+  dropdownMenuItemProps,
+  dropdownMenuTriggerProps,
+  dropdownMenuTriggerButtonProps,
+  renderDropdownTrigger
+}) => {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const [format] = store.useToolbarStore((state) => state.data.format);
+  const formatText = (type) => {
+    if (type === "paragraph") {
+      formatParagraph();
+    } else {
+      formatHeading(type);
+    }
+  };
+  const formatHeading = (headingSize) => {
+    if (headingSize) {
+      editor.update(() => {
+        const selection$1 = lexical.$getSelection();
+        if (lexical.$isRangeSelection(selection$1)) {
+          selection.$setBlocksType(selection$1, () => richText.$createHeadingNode(headingSize));
+        }
+      });
+    }
+  };
+  const formatParagraph = () => {
+    editor.update(() => {
+      const selection$1 = lexical.$getSelection();
+      if (lexical.$isRangeSelection(selection$1)) {
+        selection.$setBlocksType(selection$1, () => lexical.$createParagraphNode());
+      }
+    });
+  };
+  const _a = formatMapping, { paragraph } = _a, headings = __objRest(_a, ["paragraph"]);
+  if (renderButton) {
+    return renderButton({ editor, active: format, onChange: formatText });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(dropdown.DropdownMenu, __spreadProps(__spreadValues({}, dropdownMenuProps), { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(dropdown.DropdownMenuTrigger, __spreadProps(__spreadValues({ asChild: true }, dropdownMenuTriggerProps), { children: renderDropdownTrigger ? renderDropdownTrigger() : /* @__PURE__ */ jsxRuntime.jsx(
+      iconButton.IconButton,
+      __spreadValues({
+        icon: /* @__PURE__ */ jsxRuntime.jsx(textFormat.TextFormatIcon, {}),
+        variant: "ghost",
+        color: "default",
+        className: "twigs-editor-tool-button",
+        "data-tool": "format"
+      }, dropdownMenuTriggerButtonProps)
+    ) })),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      dropdown.DropdownMenuContent,
+      __spreadProps(__spreadValues({
+        className: "twigs-editor-toolbar__format-options"
+      }, dropdownMenuContentProps), {
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            dropdown.DropdownMenuItem,
+            __spreadProps(__spreadValues({
+              onClick: formatParagraph
+            }, typeof dropdownMenuItemProps === "function" ? dropdownMenuItemProps({ type: "paragraph", formatText }) : dropdownMenuItemProps), {
+              children: paragraph
+            })
+          ),
+          Object.keys(headings).map(
+            (item) => /* @__PURE__ */ jsxRuntime.jsx(
+              dropdown.DropdownMenuItem,
+              __spreadProps(__spreadValues({
+                onClick: () => formatHeading(item)
+              }, typeof dropdownMenuItemProps === "function" ? dropdownMenuItemProps({ type: item, formatText }) : dropdownMenuItemProps), {
+                children: formatMapping[item]
+              }),
+              item
+            )
+          )
+        ]
+      })
+    )
+  ] }));
+};
+
+exports.FormatTool = FormatTool;
+//# sourceMappingURL=format.js.map

package/dist/cjs/components/toolbar/tools/format.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"format.js","sources":["../../../../../src/components/toolbar/tools/format.tsx"],"sourcesContent":["import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport { $createHeadingNode, HeadingTagType } from '@lexical/rich-text';\nimport { $setBlocksType } from '@lexical/selection';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n  IconButton\n} from '@sparrowengg/twigs-react';\nimport { TextFormatIcon } from '@sparrowengg/twigs-react-icons';\nimport {\n  $createParagraphNode,\n  $getSelection,\n  $isRangeSelection\n} from 'lexical';\nimport React, { ComponentProps } from 'react';\nimport { useToolbarStore } from '../../toolbar-context/store';\nimport { TextFormats } from '../../toolbar-context/utils';\nimport { RenderButtonProps, ToolbarButtonProps } from './commons';\n\nconst formatMapping = {\n  paragraph: 'Paragraph',\n  h1: 'Heading 1',\n  h2: 'Heading 2',\n  h3: 'Heading 3',\n  h4: 'Heading 4',\n  h5: 'Heading 5',\n  h6: 'Heading 6'\n} as const;\n\nexport type FormatToolProps = Omit<ToolbarButtonProps, 'renderButton'> & {\n  renderButton?: (\n    props: Omit<RenderButtonProps, 'onChange' | 'active'> & {\n      onChange: (type: keyof typeof formatMapping) => void;\n      active: TextFormats;\n    }\n  ) => React.ReactNode;\n  dropdownMenuProps?: Partial<ComponentProps<typeof DropdownMenu>>;\n  dropdownMenuTriggerProps?: Partial<\n    ComponentProps<typeof DropdownMenuTrigger>\n  >;\n  dropdownMenuTriggerButtonProps?: Partial<ComponentProps<typeof IconButton>>;\n  dropdownMenuContentProps?: Partial<\n    ComponentProps<typeof DropdownMenuContent>\n  >;\n  dropdownMenuItemProps?:\n    | Partial<ComponentProps<typeof DropdownMenuItem>>\n    | ((args: {\n        type: keyof typeof formatMapping;\n        formatText: (formatType: keyof typeof formatMapping) => void;\n      }) => Partial<ComponentProps<typeof DropdownMenuItem>>);\n  renderDropdownTrigger?: () => React.ReactNode;\n};\n\nexport const FormatTool = ({\n  renderButton,\n  dropdownMenuProps,\n  dropdownMenuContentProps,\n  dropdownMenuItemProps,\n  dropdownMenuTriggerProps,\n  dropdownMenuTriggerButtonProps,\n  renderDropdownTrigger\n}: FormatToolProps) => {\n  const [editor] = useLexicalComposerContext();\n  const [format] = useToolbarStore((state) => state.data.format);\n\n  const formatText = (type: keyof typeof formatMapping) => {\n    if (type === 'paragraph') {\n      formatParagraph();\n    } else {\n      formatHeading(type);\n    }\n  };\n\n  const formatHeading = (headingSize: HeadingTagType) => {\n    if (headingSize) {\n      editor.update(() => {\n        const selection = $getSelection();\n        if ($isRangeSelection(selection)) {\n          $setBlocksType(selection, () => $createHeadingNode(headingSize));\n        }\n      });\n    }\n  };\n\n  const formatParagraph = () => {\n    editor.update(() => {\n      const selection = $getSelection();\n      if ($isRangeSelection(selection)) {\n        $setBlocksType(selection, () => $createParagraphNode());\n      }\n    });\n  };\n\n  const { paragraph, ...headings } = formatMapping;\n\n  if (renderButton) {\n    return renderButton({ editor, active: format, onChange: formatText });\n  }\n\n  return (\n    <DropdownMenu {...dropdownMenuProps}>\n      <DropdownMenuTrigger asChild {...dropdownMenuTriggerProps}>\n        {renderDropdownTrigger ? (\n          renderDropdownTrigger()\n        ) : (\n          <IconButton\n            icon={<TextFormatIcon />}\n            variant=\"ghost\"\n            color=\"default\"\n            className=\"twigs-editor-tool-button\"\n            data-tool=\"format\"\n            {...dropdownMenuTriggerButtonProps}\n          />\n        )}\n      </DropdownMenuTrigger>\n      <DropdownMenuContent\n        className=\"twigs-editor-toolbar__format-options\"\n        {...dropdownMenuContentProps}\n      >\n        <DropdownMenuItem\n          onClick={formatParagraph}\n          {...(typeof dropdownMenuItemProps === 'function'\n            ? dropdownMenuItemProps({ type: 'paragraph', formatText })\n            : dropdownMenuItemProps)}\n        >\n          {paragraph}\n        </DropdownMenuItem>\n        {(Object.keys(headings) as unknown as (keyof typeof headings)[]).map(\n          (item) => (\n            <DropdownMenuItem\n              onClick={() => formatHeading(item)}\n              key={item}\n              {...(typeof dropdownMenuItemProps === 'function'\n                ? dropdownMenuItemProps({ type: item, formatText })\n                : dropdownMenuItemProps)}\n            >\n              {formatMapping[item]}\n            </DropdownMenuItem>\n          )\n        )}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n};\n"],"names":["useLexicalComposerContext","useToolbarStore","selection","$getSelection","$isRangeSelection","$setBlocksType","$createHeadingNode","$createParagraphNode","jsxs","DropdownMenu","jsx","DropdownMenuTrigger","IconButton","TextFormatIcon","DropdownMenuContent","DropdownMenuItem"],"mappings":"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"}

package/dist/cjs/components/toolbar/tools/italic.js

@@ -0,0 +1,57 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var clsx = require('../../../react-editor/node_modules/clsx/dist/clsx.js');
+var lexical = require('lexical');
+var store = require('../../toolbar-context/store.js');
+var iconButton = require('../../../react-components/dist/es/button/icon-button.js');
+var italics = require('../../../react-icons/dist/es/icons/italics.js');
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+const ItalicTool = ({
+  renderButton,
+  buttonProps
+}) => {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const [active] = store.useToolbarStore((state) => state.data.isItalic);
+  const handleClick = () => {
+    editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, "italic");
+  };
+  if (renderButton) {
+    return renderButton({ editor, active, onChange: handleClick });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    iconButton.IconButton,
+    __spreadValues({
+      icon: /* @__PURE__ */ jsxRuntime.jsx(italics.ItalicsIcon, {}),
+      variant: active ? "solid" : "ghost",
+      color: "default",
+      className: clsx.clsx("twigs-editor-tool-button", {
+        "twigs-editor-tool-button--active": active
+      }),
+      onClick: handleClick,
+      title: active ? "Clear italics formatting" : "Format text to italics",
+      "data-tool": "italic",
+      "aria-label": active ? "Clear italics formatting" : "Format text to italics"
+    }, buttonProps)
+  );
+};
+
+exports.ItalicTool = ItalicTool;
+//# sourceMappingURL=italic.js.map

package/dist/cjs/components/toolbar/tools/italic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"italic.js","sources":["../../../../../src/components/toolbar/tools/italic.tsx"],"sourcesContent":["import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport { IconButton } from '@sparrowengg/twigs-react';\nimport { ItalicsIcon } from '@sparrowengg/twigs-react-icons';\nimport clsx from 'clsx';\nimport { FORMAT_TEXT_COMMAND } from 'lexical';\nimport { useToolbarStore } from '../../toolbar-context/store';\nimport { ToolbarButtonProps } from './commons';\n\nexport const ItalicTool = ({\n  renderButton,\n  buttonProps\n}: ToolbarButtonProps) => {\n  const [editor] = useLexicalComposerContext();\n  const [active] = useToolbarStore((state) => state.data.isItalic);\n\n  const handleClick = () => {\n    editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic');\n  };\n\n  if (renderButton) {\n    return renderButton({ editor, active, onChange: handleClick });\n  }\n\n  return (\n    <IconButton\n      icon={<ItalicsIcon />}\n      variant={active ? 'solid' : 'ghost'}\n      color=\"default\"\n      className={clsx('twigs-editor-tool-button', {\n        'twigs-editor-tool-button--active': active\n      })}\n      onClick={handleClick}\n      title={active ? 'Clear italics formatting' : 'Format text to italics'}\n      data-tool=\"italic\"\n      aria-label={\n        active ? 'Clear italics formatting' : 'Format text to italics'\n      }\n      {...buttonProps}\n    />\n  );\n};\n"],"names":["useLexicalComposerContext","useToolbarStore","FORMAT_TEXT_COMMAND","jsx","IconButton","ItalicsIcon","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAQO,MAAM,aAAa,CAAC;AAAA,EACzB,YAAA;AAAA,EACA;AACF,CAA0B,KAAA;AACxB,EAAM,MAAA,CAAC,MAAM,CAAA,GAAIA,gDAA0B,EAAA;AAC3C,EAAM,MAAA,CAAC,MAAM,CAAI,GAAAC,qBAAA,CAAgB,CAAC,KAAU,KAAA,KAAA,CAAM,KAAK,QAAQ,CAAA;AAE/D,EAAA,MAAM,cAAc,MAAM;AACxB,IAAO,MAAA,CAAA,eAAA,CAAgBC,6BAAqB,QAAQ,CAAA;AAAA,GACtD;AAEA,EAAA,IAAI,YAAc,EAAA;AAChB,IAAA,OAAO,aAAa,EAAE,MAAA,EAAQ,MAAQ,EAAA,QAAA,EAAU,aAAa,CAAA;AAAA;AAG/D,EACE,uBAAAC,cAAA;AAAA,IAACC,qBAAA;AAAA,IAAA,cAAA,CAAA;AAAA,MACC,IAAA,iCAAOC,mBAAY,EAAA,EAAA,CAAA;AAAA,MACnB,OAAA,EAAS,SAAS,OAAU,GAAA,OAAA;AAAA,MAC5B,KAAM,EAAA,SAAA;AAAA,MACN,SAAA,EAAWC,UAAK,0BAA4B,EAAA;AAAA,QAC1C,kCAAoC,EAAA;AAAA,OACrC,CAAA;AAAA,MACD,OAAS,EAAA,WAAA;AAAA,MACT,KAAA,EAAO,SAAS,0BAA6B,GAAA,wBAAA;AAAA,MAC7C,WAAU,EAAA,QAAA;AAAA,MACV,YAAA,EACE,SAAS,0BAA6B,GAAA;AAAA,KAEpC,EAAA,WAAA;AAAA,GACN;AAEJ;;;;"}

package/dist/cjs/components/toolbar/tools/link.js

@@ -0,0 +1,71 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var link = require('@lexical/link');
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var commands = require('../../../utils/commands.js');
+var clsx = require('../../../react-editor/node_modules/clsx/dist/clsx.js');
+var lexical = require('lexical');
+var store = require('../../toolbar-context/store.js');
+var iconButton = require('../../../react-components/dist/es/button/icon-button.js');
+var link$1 = require('../../../react-icons/dist/es/icons/link.js');
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+const LinkTool = ({ renderButton, buttonProps }) => {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const [active] = store.useToolbarStore((state) => state.data.isLink);
+  const handleClick = () => {
+    editor.update(() => {
+      const selection = lexical.$getSelection();
+      if (selection === null || lexical.$isRangeSelection(selection) && (selection == null ? void 0 : selection.isCollapsed())) {
+        const newLinkNode = link.$createLinkNode("");
+        newLinkNode.append(lexical.$createTextNode(" "));
+        lexical.$insertNodes([newLinkNode]);
+        newLinkNode.selectStart();
+        editor.dispatchCommand(commands.ADD_BLANK_LINK, void 0);
+        return;
+      }
+      if (!active) {
+        editor.dispatchCommand(link.TOGGLE_LINK_COMMAND, "");
+      } else {
+        editor.dispatchCommand(link.TOGGLE_LINK_COMMAND, null);
+      }
+    });
+  };
+  if (renderButton) {
+    return renderButton({ editor, active, onChange: handleClick });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    iconButton.IconButton,
+    __spreadValues({
+      icon: /* @__PURE__ */ jsxRuntime.jsx(link$1.LinkIcon, {}),
+      variant: active ? "solid" : "ghost",
+      color: "default",
+      className: clsx.clsx("twigs-editor-tool-button", {
+        "twigs-editor-tool-button--active": active
+      }),
+      onClick: handleClick,
+      title: active ? "Remove link" : "Convert to link",
+      "aria-label": active ? "Remove link" : "Convert to link",
+      "data-tool": "link"
+    }, buttonProps)
+  );
+};
+
+exports.LinkTool = LinkTool;
+//# sourceMappingURL=link.js.map

package/dist/cjs/components/toolbar/tools/link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.js","sources":["../../../../../src/components/toolbar/tools/link.tsx"],"sourcesContent":["import { $createLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport { LinkIcon } from '@sparrowengg/twigs-react-icons';\nimport { IconButton } from '@sparrowengg/twigs-react';\nimport { ADD_BLANK_LINK } from '@src/utils/commands';\nimport clsx from 'clsx';\nimport {\n  $createTextNode,\n  $getSelection,\n  $insertNodes,\n  $isRangeSelection\n} from 'lexical';\nimport { useToolbarStore } from '../../toolbar-context/store';\nimport { ToolbarButtonProps } from './commons';\n\nexport const LinkTool = ({ renderButton, buttonProps }: ToolbarButtonProps) => {\n  const [editor] = useLexicalComposerContext();\n  const [active] = useToolbarStore((state) => state.data.isLink);\n\n  const handleClick = () => {\n    editor.update(() => {\n      const selection = $getSelection();\n      /**\n       * Handle link insertion when there is no selection (cursor blinking at a single point)\n       */\n      if (\n        selection === null\n        || ($isRangeSelection(selection) && selection?.isCollapsed())\n      ) {\n        const newLinkNode = $createLinkNode('');\n\n        // Completely empty string is not selectable, so we need to add a space.\n        // This space will be trimmed in the editor modal\n        newLinkNode.append($createTextNode(' '));\n\n        $insertNodes([newLinkNode]);\n        newLinkNode.selectStart();\n\n        editor.dispatchCommand(ADD_BLANK_LINK, undefined);\n\n        return;\n      }\n\n      if (!active) {\n        editor.dispatchCommand(TOGGLE_LINK_COMMAND, '');\n      } else {\n        editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);\n      }\n    });\n  };\n\n  if (renderButton) {\n    return renderButton({ editor, active, onChange: handleClick });\n  }\n\n  return (\n    <IconButton\n      icon={<LinkIcon />}\n      variant={active ? 'solid' : 'ghost'}\n      color=\"default\"\n      className={clsx('twigs-editor-tool-button', {\n        'twigs-editor-tool-button--active': active\n      })}\n      onClick={handleClick}\n      title={active ? 'Remove link' : 'Convert to link'}\n      aria-label={active ? 'Remove link' : 'Convert to link'}\n      data-tool=\"link\"\n      {...buttonProps}\n    />\n  );\n};\n"],"names":["useLexicalComposerContext","useToolbarStore","$getSelection","$isRangeSelection","$createLinkNode","$createTextNode","$insertNodes","ADD_BLANK_LINK","TOGGLE_LINK_COMMAND","jsx","IconButton","LinkIcon","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeO,MAAM,QAAW,GAAA,CAAC,EAAE,YAAA,EAAc,aAAsC,KAAA;AAC7E,EAAM,MAAA,CAAC,MAAM,CAAA,GAAIA,gDAA0B,EAAA;AAC3C,EAAM,MAAA,CAAC,MAAM,CAAI,GAAAC,qBAAA,CAAgB,CAAC,KAAU,KAAA,KAAA,CAAM,KAAK,MAAM,CAAA;AAE7D,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,MAAA,CAAO,OAAO,MAAM;AAClB,MAAA,MAAM,YAAYC,qBAAc,EAAA;AAIhC,MAAA,IACE,cAAc,IACV,IAAAC,yBAAA,CAAkB,SAAS,CAAA,KAAK,uCAAW,WAC/C,EAAA,CAAA,EAAA;AACA,QAAM,MAAA,WAAA,GAAcC,qBAAgB,EAAE,CAAA;AAItC,QAAY,WAAA,CAAA,MAAA,CAAOC,uBAAgB,CAAA,GAAG,CAAC,CAAA;AAEvC,QAAaC,oBAAA,CAAA,CAAC,WAAW,CAAC,CAAA;AAC1B,QAAA,WAAA,CAAY,WAAY,EAAA;AAExB,QAAO,MAAA,CAAA,eAAA,CAAgBC,yBAAgB,MAAS,CAAA;AAEhD,QAAA;AAAA;AAGF,MAAA,IAAI,CAAC,MAAQ,EAAA;AACX,QAAO,MAAA,CAAA,eAAA,CAAgBC,0BAAqB,EAAE,CAAA;AAAA,OACzC,MAAA;AACL,QAAO,MAAA,CAAA,eAAA,CAAgBA,0BAAqB,IAAI,CAAA;AAAA;AAClD,KACD,CAAA;AAAA,GACH;AAEA,EAAA,IAAI,YAAc,EAAA;AAChB,IAAA,OAAO,aAAa,EAAE,MAAA,EAAQ,MAAQ,EAAA,QAAA,EAAU,aAAa,CAAA;AAAA;AAG/D,EACE,uBAAAC,cAAA;AAAA,IAACC,qBAAA;AAAA,IAAA,cAAA,CAAA;AAAA,MACC,IAAA,iCAAOC,eAAS,EAAA,EAAA,CAAA;AAAA,MAChB,OAAA,EAAS,SAAS,OAAU,GAAA,OAAA;AAAA,MAC5B,KAAM,EAAA,SAAA;AAAA,MACN,SAAA,EAAWC,UAAK,0BAA4B,EAAA;AAAA,QAC1C,kCAAoC,EAAA;AAAA,OACrC,CAAA;AAAA,MACD,OAAS,EAAA,WAAA;AAAA,MACT,KAAA,EAAO,SAAS,aAAgB,GAAA,iBAAA;AAAA,MAChC,YAAA,EAAY,SAAS,aAAgB,GAAA,iBAAA;AAAA,MACrC,WAAU,EAAA;AAAA,KACN,EAAA,WAAA;AAAA,GACN;AAEJ;;;;"}

package/dist/cjs/components/toolbar/tools/ordered-list.js

@@ -0,0 +1,62 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var list = require('@lexical/list');
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var clsx = require('../../../react-editor/node_modules/clsx/dist/clsx.js');
+var store = require('../../toolbar-context/store.js');
+var commons = require('./commons.js');
+var iconButton = require('../../../react-components/dist/es/button/icon-button.js');
+var orderedList = require('../../../react-icons/dist/es/icons/ordered-list.js');
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+const OrderedListTool = ({
+  renderButton,
+  buttonProps
+}) => {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const [active] = store.useToolbarStore((state) => state.data.isOrderedList);
+  const handleClick = () => {
+    if (!active) {
+      editor.dispatchCommand(list.INSERT_ORDERED_LIST_COMMAND, void 0);
+    } else {
+      commons.formatParagraph(editor);
+    }
+  };
+  if (renderButton) {
+    return renderButton({ editor, active, onChange: handleClick });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    iconButton.IconButton,
+    __spreadValues({
+      icon: /* @__PURE__ */ jsxRuntime.jsx(orderedList.OrderedListIcon, {}),
+      variant: active ? "solid" : "ghost",
+      color: "default",
+      className: clsx.clsx("twigs-editor-tool-button", {
+        "twigs-editor-tool-button--active": active
+      }),
+      onClick: handleClick,
+      title: active ? "Change formatting from ordered list to paragraph" : "Change formatting to ordered list",
+      "aria-label": active ? "Change formatting from ordered list to paragraph" : "Change formatting to ordered list",
+      "data-tool": "ordered-list"
+    }, buttonProps)
+  );
+};
+
+exports.OrderedListTool = OrderedListTool;
+//# sourceMappingURL=ordered-list.js.map

package/dist/cjs/components/toolbar/tools/ordered-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ordered-list.js","sources":["../../../../../src/components/toolbar/tools/ordered-list.tsx"],"sourcesContent":["import { INSERT_ORDERED_LIST_COMMAND } from '@lexical/list';\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport { OrderedListIcon } from '@sparrowengg/twigs-react-icons';\nimport { IconButton } from '@sparrowengg/twigs-react';\nimport clsx from 'clsx';\nimport { useToolbarStore } from '../../toolbar-context/store';\nimport { ToolbarButtonProps, formatParagraph } from './commons';\n\nexport const OrderedListTool = ({\n  renderButton,\n  buttonProps\n}: ToolbarButtonProps) => {\n  const [editor] = useLexicalComposerContext();\n  const [active] = useToolbarStore((state) => state.data.isOrderedList);\n\n  const handleClick = () => {\n    if (!active) {\n      editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);\n    } else {\n      formatParagraph(editor);\n    }\n  };\n\n  if (renderButton) {\n    return renderButton({ editor, active, onChange: handleClick });\n  }\n\n  return (\n    <IconButton\n      icon={<OrderedListIcon />}\n      variant={active ? 'solid' : 'ghost'}\n      color=\"default\"\n      className={clsx('twigs-editor-tool-button', {\n        'twigs-editor-tool-button--active': active\n      })}\n      onClick={handleClick}\n      title={\n        active\n          ? 'Change formatting from ordered list to paragraph'\n          : 'Change formatting to ordered list'\n      }\n      aria-label={\n        active\n          ? 'Change formatting from ordered list to paragraph'\n          : 'Change formatting to ordered list'\n      }\n      data-tool=\"ordered-list\"\n      {...buttonProps}\n    />\n  );\n};\n"],"names":["useLexicalComposerContext","useToolbarStore","INSERT_ORDERED_LIST_COMMAND","formatParagraph","jsx","IconButton","OrderedListIcon","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAQO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,YAAA;AAAA,EACA;AACF,CAA0B,KAAA;AACxB,EAAM,MAAA,CAAC,MAAM,CAAA,GAAIA,gDAA0B,EAAA;AAC3C,EAAM,MAAA,CAAC,MAAM,CAAI,GAAAC,qBAAA,CAAgB,CAAC,KAAU,KAAA,KAAA,CAAM,KAAK,aAAa,CAAA;AAEpE,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,IAAI,CAAC,MAAQ,EAAA;AACX,MAAO,MAAA,CAAA,eAAA,CAAgBC,kCAA6B,MAAS,CAAA;AAAA,KACxD,MAAA;AACL,MAAAC,uBAAA,CAAgB,MAAM,CAAA;AAAA;AACxB,GACF;AAEA,EAAA,IAAI,YAAc,EAAA;AAChB,IAAA,OAAO,aAAa,EAAE,MAAA,EAAQ,MAAQ,EAAA,QAAA,EAAU,aAAa,CAAA;AAAA;AAG/D,EACE,uBAAAC,cAAA;AAAA,IAACC,qBAAA;AAAA,IAAA,cAAA,CAAA;AAAA,MACC,IAAA,iCAAOC,2BAAgB,EAAA,EAAA,CAAA;AAAA,MACvB,OAAA,EAAS,SAAS,OAAU,GAAA,OAAA;AAAA,MAC5B,KAAM,EAAA,SAAA;AAAA,MACN,SAAA,EAAWC,UAAK,0BAA4B,EAAA;AAAA,QAC1C,kCAAoC,EAAA;AAAA,OACrC,CAAA;AAAA,MACD,OAAS,EAAA,WAAA;AAAA,MACT,KAAA,EACE,SACI,kDACA,GAAA,mCAAA;AAAA,MAEN,YAAA,EACE,SACI,kDACA,GAAA,mCAAA;AAAA,MAEN,WAAU,EAAA;AAAA,KACN,EAAA,WAAA;AAAA,GACN;AAEJ;;;;"}

package/dist/cjs/components/toolbar/tools/text-align.js

@@ -0,0 +1,82 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var clsx = require('../../../react-editor/node_modules/clsx/dist/clsx.js');
+var lexical = require('lexical');
+var store = require('../../toolbar-context/store.js');
+var utils = require('../../toolbar-context/utils.js');
+var iconButton = require('../../../react-components/dist/es/button/icon-button.js');
+var textAlignJustify = require('../../../react-icons/dist/es/icons/text-align-justify.js');
+var textAlignRight = require('../../../react-icons/dist/es/icons/text-align-right.js');
+var textAlignCenter = require('../../../react-icons/dist/es/icons/text-align-center.js');
+var textAlignLeft = require('../../../react-icons/dist/es/icons/text-align-left.js');
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+const IconMapping = {
+  left: /* @__PURE__ */ jsxRuntime.jsx(textAlignLeft.TextAlignLeftIcon, {}),
+  center: /* @__PURE__ */ jsxRuntime.jsx(textAlignCenter.TextAlignCenterIcon, {}),
+  right: /* @__PURE__ */ jsxRuntime.jsx(textAlignRight.TextAlignRightIcon, {}),
+  justify: /* @__PURE__ */ jsxRuntime.jsx(textAlignJustify.TextAlignJustifyIcon, {})
+};
+const TextAlignTool = ({
+  renderButton,
+  buttonProps
+}) => {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const [alignment] = store.useToolbarStore((state) => state.data.textAlign);
+  const getNextAlignment = (currentAlign) => {
+    let activeIndex = utils.textAlignments.indexOf(currentAlign);
+    if (activeIndex === utils.textAlignments.length - 1) {
+      activeIndex = 0;
+    } else {
+      activeIndex++;
+    }
+    return utils.textAlignments[activeIndex];
+  };
+  const handleClick = () => {
+    editor.dispatchCommand(lexical.FORMAT_ELEMENT_COMMAND, getNextAlignment(alignment));
+  };
+  if (renderButton) {
+    return renderButton({ editor, active: alignment, onChange: handleClick });
+  }
+  const Icon = () => IconMapping[alignment];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    iconButton.IconButton,
+    __spreadValues({
+      icon: /* @__PURE__ */ jsxRuntime.jsx(Icon, {}),
+      variant: "ghost",
+      color: "default",
+      className: clsx.clsx(
+        "twigs-editor-tool-button",
+        `twigs-editor-tool-button--${alignment}`
+      ),
+      onClick: handleClick,
+      title: `Change text alignment from ${alignment} to ${getNextAlignment(
+        alignment
+      )}`,
+      "aria-label": `Change text alignment from ${alignment} to ${getNextAlignment(
+        alignment
+      )}`,
+      "data-tool": "text-align"
+    }, buttonProps)
+  );
+};
+
+exports.TextAlignTool = TextAlignTool;
+//# sourceMappingURL=text-align.js.map

package/dist/cjs/components/toolbar/tools/text-align.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-align.js","sources":["../../../../../src/components/toolbar/tools/text-align.tsx"],"sourcesContent":["import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport {\n  TextAlignCenterIcon,\n  TextAlignJustifyIcon,\n  TextAlignLeftIcon,\n  TextAlignRightIcon\n} from '@sparrowengg/twigs-react-icons';\nimport { IconButton } from '@sparrowengg/twigs-react';\nimport clsx from 'clsx';\nimport { FORMAT_ELEMENT_COMMAND } from 'lexical';\nimport React, { ReactNode } from 'react';\nimport { useToolbarStore } from '../../toolbar-context/store';\nimport { TextAlignments, textAlignments } from '../../toolbar-context/utils';\nimport { RenderButtonProps, ToolbarButtonProps } from './commons';\n\nconst IconMapping: Record<TextAlignments, ReactNode> = {\n  left: <TextAlignLeftIcon />,\n  center: <TextAlignCenterIcon />,\n  right: <TextAlignRightIcon />,\n  justify: <TextAlignJustifyIcon />\n};\n\nexport const TextAlignTool = ({\n  renderButton,\n  buttonProps\n}: Omit<ToolbarButtonProps, 'renderButton'> & {\n  renderButton?: (\n    props: Omit<RenderButtonProps, 'onChange' | 'active'> & {\n      onChange: (alignment: TextAlignments) => void;\n      active: TextAlignments;\n    }\n  ) => React.ReactNode;\n}) => {\n  const [editor] = useLexicalComposerContext();\n  const [alignment] = useToolbarStore((state) => state.data.textAlign);\n\n  const getNextAlignment = (currentAlign: TextAlignments) => {\n    let activeIndex = textAlignments.indexOf(currentAlign);\n    if (activeIndex === textAlignments.length - 1) {\n      activeIndex = 0;\n    } else {\n      activeIndex++;\n    }\n\n    return textAlignments[activeIndex];\n  };\n\n  const handleClick = () => {\n    editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, getNextAlignment(alignment));\n  };\n\n  if (renderButton) {\n    return renderButton({ editor, active: alignment, onChange: handleClick });\n  }\n\n  const Icon = () => IconMapping[alignment];\n\n  return (\n    <IconButton\n      icon={<Icon />}\n      variant=\"ghost\"\n      color=\"default\"\n      className={clsx(\n        'twigs-editor-tool-button',\n        `twigs-editor-tool-button--${alignment}`\n      )}\n      onClick={handleClick}\n      title={`Change text alignment from ${alignment} to ${getNextAlignment(\n        alignment\n      )}`}\n      aria-label={`Change text alignment from ${alignment} to ${getNextAlignment(\n        alignment\n      )}`}\n      data-tool=\"text-align\"\n      {...buttonProps}\n    />\n  );\n};\n"],"names":["TextAlignLeftIcon","TextAlignCenterIcon","TextAlignRightIcon","TextAlignJustifyIcon","useLexicalComposerContext","useToolbarStore","textAlignments","FORMAT_ELEMENT_COMMAND","jsx","IconButton","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,MAAM,WAAiD,GAAA;AAAA,EACrD,IAAA,iCAAOA,+BAAkB,EAAA,EAAA,CAAA;AAAA,EACzB,MAAA,iCAASC,mCAAoB,EAAA,EAAA,CAAA;AAAA,EAC7B,KAAA,iCAAQC,iCAAmB,EAAA,EAAA,CAAA;AAAA,EAC3B,OAAA,iCAAUC,qCAAqB,EAAA,EAAA;AACjC,CAAA;AAEO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,YAAA;AAAA,EACA;AACF,CAOM,KAAA;AACJ,EAAM,MAAA,CAAC,MAAM,CAAA,GAAIC,gDAA0B,EAAA;AAC3C,EAAM,MAAA,CAAC,SAAS,CAAI,GAAAC,qBAAA,CAAgB,CAAC,KAAU,KAAA,KAAA,CAAM,KAAK,SAAS,CAAA;AAEnE,EAAM,MAAA,gBAAA,GAAmB,CAAC,YAAiC,KAAA;AACzD,IAAI,IAAA,WAAA,GAAcC,oBAAe,CAAA,OAAA,CAAQ,YAAY,CAAA;AACrD,IAAI,IAAA,WAAA,KAAgBA,oBAAe,CAAA,MAAA,GAAS,CAAG,EAAA;AAC7C,MAAc,WAAA,GAAA,CAAA;AAAA,KACT,MAAA;AACL,MAAA,WAAA,EAAA;AAAA;AAGF,IAAA,OAAOA,qBAAe,WAAW,CAAA;AAAA,GACnC;AAEA,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,MAAA,CAAO,eAAgB,CAAAC,8BAAA,EAAwB,gBAAiB,CAAA,SAAS,CAAC,CAAA;AAAA,GAC5E;AAEA,EAAA,IAAI,YAAc,EAAA;AAChB,IAAA,OAAO,aAAa,EAAE,MAAA,EAAQ,QAAQ,SAAW,EAAA,QAAA,EAAU,aAAa,CAAA;AAAA;AAG1E,EAAM,MAAA,IAAA,GAAO,MAAM,WAAA,CAAY,SAAS,CAAA;AAExC,EACE,uBAAAC,cAAA;AAAA,IAACC,qBAAA;AAAA,IAAA,cAAA,CAAA;AAAA,MACC,IAAA,iCAAO,IAAK,EAAA,EAAA,CAAA;AAAA,MACZ,OAAQ,EAAA,OAAA;AAAA,MACR,KAAM,EAAA,SAAA;AAAA,MACN,SAAW,EAAAC,SAAA;AAAA,QACT,0BAAA;AAAA,QACA,6BAA6B,SAAS,CAAA;AAAA,OACxC;AAAA,MACA,OAAS,EAAA,WAAA;AAAA,MACT,KAAA,EAAO,CAA8B,2BAAA,EAAA,SAAS,CAAO,IAAA,EAAA,gBAAA;AAAA,QACnD;AAAA,OACD,CAAA,CAAA;AAAA,MACD,YAAA,EAAY,CAA8B,2BAAA,EAAA,SAAS,CAAO,IAAA,EAAA,gBAAA;AAAA,QACxD;AAAA,OACD,CAAA,CAAA;AAAA,MACD,WAAU,EAAA;AAAA,KACN,EAAA,WAAA;AAAA,GACN;AAEJ;;;;"}

package/dist/cjs/components/toolbar/tools/underline.js

@@ -0,0 +1,57 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var lexical = require('lexical');
+var clsx = require('../../../react-editor/node_modules/clsx/dist/clsx.js');
+var store = require('../../toolbar-context/store.js');
+var iconButton = require('../../../react-components/dist/es/button/icon-button.js');
+var underline = require('../../../react-icons/dist/es/icons/underline.js');
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+const UnderlineTool = ({
+  renderButton,
+  buttonProps
+}) => {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const [active] = store.useToolbarStore((state) => state.data.isUnderline);
+  const handleClick = () => {
+    editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, "underline");
+  };
+  if (renderButton) {
+    return renderButton({ editor, active, onChange: handleClick });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    iconButton.IconButton,
+    __spreadValues({
+      icon: /* @__PURE__ */ jsxRuntime.jsx(underline.UnderlineIcon, {}),
+      variant: active ? "solid" : "ghost",
+      color: "default",
+      onClick: handleClick,
+      className: clsx.clsx("twigs-editor-tool-button", {
+        "twigs-editor-tool-button--active": active
+      }),
+      title: active ? "Remove underline" : "Add underline",
+      "aria-label": active ? "Remove underline" : "Add underline",
+      "data-tool": "underline"
+    }, buttonProps)
+  );
+};
+
+exports.UnderlineTool = UnderlineTool;
+//# sourceMappingURL=underline.js.map

package/dist/cjs/components/toolbar/tools/underline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"underline.js","sources":["../../../../../src/components/toolbar/tools/underline.tsx"],"sourcesContent":["import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport { UnderlineIcon } from '@sparrowengg/twigs-react-icons';\nimport { IconButton } from '@sparrowengg/twigs-react';\nimport { FORMAT_TEXT_COMMAND } from 'lexical';\nimport clsx from 'clsx';\nimport { useToolbarStore } from '../../toolbar-context/store';\nimport { ToolbarButtonProps } from './commons';\n\nexport const UnderlineTool = ({\n  renderButton,\n  buttonProps\n}: ToolbarButtonProps) => {\n  const [editor] = useLexicalComposerContext();\n  const [active] = useToolbarStore((state) => state.data.isUnderline);\n\n  const handleClick = () => {\n    editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline');\n  };\n\n  if (renderButton) {\n    return renderButton({ editor, active, onChange: handleClick });\n  }\n\n  return (\n    <IconButton\n      icon={<UnderlineIcon />}\n      variant={active ? 'solid' : 'ghost'}\n      color=\"default\"\n      onClick={handleClick}\n      className={clsx('twigs-editor-tool-button', {\n        'twigs-editor-tool-button--active': active\n      })}\n      title={active ? 'Remove underline' : 'Add underline'}\n      aria-label={active ? 'Remove underline' : 'Add underline'}\n      data-tool=\"underline\"\n      {...buttonProps}\n    />\n  );\n};\n"],"names":["useLexicalComposerContext","useToolbarStore","FORMAT_TEXT_COMMAND","jsx","IconButton","UnderlineIcon","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAQO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,YAAA;AAAA,EACA;AACF,CAA0B,KAAA;AACxB,EAAM,MAAA,CAAC,MAAM,CAAA,GAAIA,gDAA0B,EAAA;AAC3C,EAAM,MAAA,CAAC,MAAM,CAAI,GAAAC,qBAAA,CAAgB,CAAC,KAAU,KAAA,KAAA,CAAM,KAAK,WAAW,CAAA;AAElE,EAAA,MAAM,cAAc,MAAM;AACxB,IAAO,MAAA,CAAA,eAAA,CAAgBC,6BAAqB,WAAW,CAAA;AAAA,GACzD;AAEA,EAAA,IAAI,YAAc,EAAA;AAChB,IAAA,OAAO,aAAa,EAAE,MAAA,EAAQ,MAAQ,EAAA,QAAA,EAAU,aAAa,CAAA;AAAA;AAG/D,EACE,uBAAAC,cAAA;AAAA,IAACC,qBAAA;AAAA,IAAA,cAAA,CAAA;AAAA,MACC,IAAA,iCAAOC,uBAAc,EAAA,EAAA,CAAA;AAAA,MACrB,OAAA,EAAS,SAAS,OAAU,GAAA,OAAA;AAAA,MAC5B,KAAM,EAAA,SAAA;AAAA,MACN,OAAS,EAAA,WAAA;AAAA,MACT,SAAA,EAAWC,UAAK,0BAA4B,EAAA;AAAA,QAC1C,kCAAoC,EAAA;AAAA,OACrC,CAAA;AAAA,MACD,KAAA,EAAO,SAAS,kBAAqB,GAAA,eAAA;AAAA,MACrC,YAAA,EAAY,SAAS,kBAAqB,GAAA,eAAA;AAAA,MAC1C,WAAU,EAAA;AAAA,KACN,EAAA,WAAA;AAAA,GACN;AAEJ;;;;"}

package/dist/cjs/components/toolbar/tools/unordered-list.js

@@ -0,0 +1,62 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var list = require('@lexical/list');
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var clsx = require('../../../react-editor/node_modules/clsx/dist/clsx.js');
+var store = require('../../toolbar-context/store.js');
+var commons = require('./commons.js');
+var iconButton = require('../../../react-components/dist/es/button/icon-button.js');
+var unorderedList = require('../../../react-icons/dist/es/icons/unordered-list.js');
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+const UnorderedListTool = ({
+  renderButton,
+  buttonProps
+}) => {
+  const [active] = store.useToolbarStore((state) => state.data.isUnOrderedList);
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const handleClick = () => {
+    if (!active) {
+      editor.dispatchCommand(list.INSERT_UNORDERED_LIST_COMMAND, void 0);
+    } else {
+      commons.formatParagraph(editor);
+    }
+  };
+  if (renderButton) {
+    return renderButton({ editor, active, onChange: handleClick });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    iconButton.IconButton,
+    __spreadValues({
+      icon: /* @__PURE__ */ jsxRuntime.jsx(unorderedList.UnorderedListIcon, {}),
+      variant: active ? "solid" : "ghost",
+      color: "default",
+      onClick: handleClick,
+      title: active ? "Change formatting from unordered list to paragraph" : "Change formatting to unordered list",
+      "aria-label": active ? "Change formatting from unordered list to paragraph" : "Change formatting to unordered list",
+      className: clsx.clsx("twigs-editor-tool-button", {
+        "twigs-editor-tool-button--active": active
+      }),
+      "data-tool": "unordered-list"
+    }, buttonProps)
+  );
+};
+
+exports.UnorderedListTool = UnorderedListTool;
+//# sourceMappingURL=unordered-list.js.map

package/dist/cjs/components/toolbar/tools/unordered-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"unordered-list.js","sources":["../../../../../src/components/toolbar/tools/unordered-list.tsx"],"sourcesContent":["import { INSERT_UNORDERED_LIST_COMMAND } from '@lexical/list';\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport { UnorderedListIcon } from '@sparrowengg/twigs-react-icons';\nimport { IconButton } from '@sparrowengg/twigs-react';\nimport clsx from 'clsx';\nimport { useToolbarStore } from '../../toolbar-context/store';\nimport { ToolbarButtonProps, formatParagraph } from './commons';\n\nexport const UnorderedListTool = ({\n  renderButton,\n  buttonProps\n}: ToolbarButtonProps) => {\n  const [active] = useToolbarStore((state) => state.data.isUnOrderedList);\n  const [editor] = useLexicalComposerContext();\n\n  const handleClick = () => {\n    if (!active) {\n      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);\n    } else {\n      formatParagraph(editor);\n    }\n  };\n\n  if (renderButton) {\n    return renderButton({ editor, active, onChange: handleClick });\n  }\n\n  return (\n    <IconButton\n      icon={<UnorderedListIcon />}\n      variant={active ? 'solid' : 'ghost'}\n      color=\"default\"\n      onClick={handleClick}\n      title={\n        active\n          ? 'Change formatting from unordered list to paragraph'\n          : 'Change formatting to unordered list'\n      }\n      aria-label={\n        active\n          ? 'Change formatting from unordered list to paragraph'\n          : 'Change formatting to unordered list'\n      }\n      className={clsx('twigs-editor-tool-button', {\n        'twigs-editor-tool-button--active': active\n      })}\n      data-tool=\"unordered-list\"\n      {...buttonProps}\n    />\n  );\n};\n"],"names":["useToolbarStore","useLexicalComposerContext","INSERT_UNORDERED_LIST_COMMAND","formatParagraph","jsx","IconButton","UnorderedListIcon","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAQO,MAAM,oBAAoB,CAAC;AAAA,EAChC,YAAA;AAAA,EACA;AACF,CAA0B,KAAA;AACxB,EAAM,MAAA,CAAC,MAAM,CAAI,GAAAA,qBAAA,CAAgB,CAAC,KAAU,KAAA,KAAA,CAAM,KAAK,eAAe,CAAA;AACtE,EAAM,MAAA,CAAC,MAAM,CAAA,GAAIC,gDAA0B,EAAA;AAE3C,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,IAAI,CAAC,MAAQ,EAAA;AACX,MAAO,MAAA,CAAA,eAAA,CAAgBC,oCAA+B,MAAS,CAAA;AAAA,KAC1D,MAAA;AACL,MAAAC,uBAAA,CAAgB,MAAM,CAAA;AAAA;AACxB,GACF;AAEA,EAAA,IAAI,YAAc,EAAA;AAChB,IAAA,OAAO,aAAa,EAAE,MAAA,EAAQ,MAAQ,EAAA,QAAA,EAAU,aAAa,CAAA;AAAA;AAG/D,EACE,uBAAAC,cAAA;AAAA,IAACC,qBAAA;AAAA,IAAA,cAAA,CAAA;AAAA,MACC,IAAA,iCAAOC,+BAAkB,EAAA,EAAA,CAAA;AAAA,MACzB,OAAA,EAAS,SAAS,OAAU,GAAA,OAAA;AAAA,MAC5B,KAAM,EAAA,SAAA;AAAA,MACN,OAAS,EAAA,WAAA;AAAA,MACT,KAAA,EACE,SACI,oDACA,GAAA,qCAAA;AAAA,MAEN,YAAA,EACE,SACI,oDACA,GAAA,qCAAA;AAAA,MAEN,SAAA,EAAWC,UAAK,0BAA4B,EAAA;AAAA,QAC1C,kCAAoC,EAAA;AAAA,OACrC,CAAA;AAAA,MACD,WAAU,EAAA;AAAA,KACN,EAAA,WAAA;AAAA,GACN;AAEJ;;;;"}