@sparrowengg/twigs-editor-react 0.0.1

package/dist/es/components/floating-toolbar/floating-toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"floating-toolbar.js","sources":["../../../../src/components/floating-toolbar/floating-toolbar.tsx"],"sourcesContent":["import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport { mergeRegister } from '@lexical/utils';\nimport { Box, BoxProps, Flex } from '@sparrowengg/twigs-react';\nimport {\n  $getSelection,\n  $isParagraphNode,\n  $isRangeSelection,\n  $isTextNode,\n  COMMAND_PRIORITY_LOW,\n  LexicalEditor,\n  SELECTION_CHANGE_COMMAND\n} from 'lexical';\nimport React, {\n  Fragment,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { getDOMRangeRect } from '@src/utils/get-dom-range-rect';\nimport { getSelectedNode } from '@src/utils/get-selected-node';\nimport { setFloatingElemPosition } from '@src/utils/set-floating-elem-position';\nimport { prefixClassName } from '@src/utils/prefix-class-name';\nimport { DefaultToolbarTools } from '../toolbar/toolbar';\nimport {\n  BoldTool,\n  ItalicTool,\n  LinkTool,\n  UnderlineTool\n} from '../toolbar/tools';\n\ntype DefaultFloatingToolbarTools = Extract<\n  DefaultToolbarTools,\n  | 'bold'\n  | 'italic'\n  | 'underline'\n  | 'link'\n  | 'strikethrough'\n  | 'subscript'\n  | 'superscript'\n>;\n\ntype ToolProps = { editor: LexicalEditor };\n\ntype CustomTool = {\n  renderComponent: (props: ToolProps) => ReactNode;\n};\n\nexport type FloatingToolbarTools = (DefaultFloatingToolbarTools | CustomTool)[];\n\nconst defaultTools: DefaultFloatingToolbarTools[] = [\n  'bold',\n  'italic',\n  'underline',\n  'link'\n];\n\nconst toolMapping = {\n  bold: BoldTool,\n  italic: ItalicTool,\n  underline: UnderlineTool,\n  link: LinkTool\n};\n\nexport type FloatingToolbarProperties = {\n  isBold: boolean;\n  isItalic: boolean;\n  isUnderline: boolean;\n  isLink: boolean;\n  isStrikethrough: boolean;\n  isSubscript: boolean;\n  isSuperscript: boolean;\n};\n\nconst FloatingToolbarContainer = ({\n  editor,\n  anchorElem,\n  children,\n  tools = defaultTools,\n  containerProps\n}: {\n  editor: LexicalEditor;\n  anchorElem: HTMLElement;\n  children?: ReactNode;\n  tools?: FloatingToolbarTools;\n  containerProps?: BoxProps;\n}): React.JSX.Element => {\n  const popupCharStylesEditorRef = useRef<HTMLDivElement | null>(null);\n\n  function mouseMoveListener(e: MouseEvent) {\n    if (\n      popupCharStylesEditorRef?.current\n      && (e.buttons === 1 || e.buttons === 3)\n    ) {\n      if (popupCharStylesEditorRef.current.style.pointerEvents !== 'none') {\n        const x = e.clientX;\n        const y = e.clientY;\n        const elementUnderMouse = document.elementFromPoint(x, y);\n\n        if (!popupCharStylesEditorRef.current.contains(elementUnderMouse)) {\n          // Mouse is not over the target element => not a normal click, but probably a drag\n          popupCharStylesEditorRef.current.style.pointerEvents = 'none';\n        }\n      }\n    }\n  }\n  function mouseUpListener() {\n    if (popupCharStylesEditorRef?.current) {\n      if (popupCharStylesEditorRef.current.style.pointerEvents !== 'auto') {\n        popupCharStylesEditorRef.current.style.pointerEvents = 'auto';\n      }\n    }\n  }\n\n  // eslint-disable-next-line consistent-return\n  useEffect(() => {\n    if (popupCharStylesEditorRef?.current) {\n      document.addEventListener('mousemove', mouseMoveListener);\n      document.addEventListener('mouseup', mouseUpListener);\n\n      return () => {\n        document.removeEventListener('mousemove', mouseMoveListener);\n        document.removeEventListener('mouseup', mouseUpListener);\n      };\n    }\n  }, [popupCharStylesEditorRef]);\n\n  const updateFloatingToolbar = useCallback(() => {\n    const selection = $getSelection();\n\n    const popupCharStylesEditorElem = popupCharStylesEditorRef.current;\n    const nativeSelection = window.getSelection();\n\n    if (popupCharStylesEditorElem === null) {\n      return;\n    }\n\n    const rootElement = editor.getRootElement();\n    if (\n      selection !== null\n      && nativeSelection !== null\n      && !nativeSelection.isCollapsed\n      && rootElement !== null\n      && rootElement.contains(nativeSelection.anchorNode)\n    ) {\n      const rangeRect = getDOMRangeRect(nativeSelection, rootElement);\n\n      setFloatingElemPosition(rangeRect, popupCharStylesEditorElem, anchorElem);\n    }\n  }, [editor, anchorElem]);\n\n  useEffect(() => {\n    const scrollerElem = anchorElem.parentElement;\n\n    const update = () => {\n      editor.getEditorState().read(() => {\n        updateFloatingToolbar();\n      });\n    };\n\n    window.addEventListener('resize', update);\n    if (scrollerElem) {\n      scrollerElem.addEventListener('scroll', update);\n    }\n\n    return () => {\n      window.removeEventListener('resize', update);\n      if (scrollerElem) {\n        scrollerElem.removeEventListener('scroll', update);\n      }\n    };\n  }, [editor, updateFloatingToolbar, anchorElem]);\n\n  useEffect(() => {\n    editor.getEditorState().read(() => {\n      updateFloatingToolbar();\n    });\n    return mergeRegister(\n      editor.registerUpdateListener(({ editorState }) => {\n        editorState.read(() => {\n          updateFloatingToolbar();\n        });\n      }),\n\n      editor.registerCommand(\n        SELECTION_CHANGE_COMMAND,\n        () => {\n          updateFloatingToolbar();\n          return false;\n        },\n        COMMAND_PRIORITY_LOW\n      )\n    );\n  }, [editor, updateFloatingToolbar]);\n\n  return (\n    <Box\n      ref={popupCharStylesEditorRef}\n      className={prefixClassName('floating-toolbar')}\n      {...containerProps}\n      css={{\n        position: 'absolute',\n        left: 0,\n        top: 0,\n        backgroundColor: '$black900',\n        borderRadius: '$md',\n        display: 'flex',\n\n        '&::after': {\n          content: '',\n          position: 'absolute',\n          top: '-8px',\n          left: '8px',\n          width: '0',\n          height: '0',\n          borderLeft: '8px solid transparent',\n          borderRight: '8px solid transparent',\n          borderBottom: '8px solid $black900'\n        },\n\n        '&.position--top::after': {\n          top: 'auto',\n          bottom: '-8px',\n          borderBottom: 'none',\n          borderTop: '8px solid $black900'\n        },\n        ...containerProps?.css\n      }}\n    >\n      {children ? (\n        <>{children}</>\n      ) : (\n        <Flex\n          alignItems=\"center\"\n          css={{\n            padding: '$2',\n            gap: '$1',\n            '.twigs-editor-tool-button': {\n              backgroundColor: 'transparent',\n              color: '$neutral100',\n\n              '&:hover': {\n                backgroundColorOpacity: ['$white100', 0.2],\n                color: '$neutral100'\n              },\n\n              '&--active': {\n                backgroundColorOpacity: ['$white100', 0.3]\n              }\n            }\n          }}\n        >\n          {tools.map((_item, i) => {\n            // @ts-ignore\n            if (typeof _item === 'object' && _item.renderComponent) {\n              const item = _item as CustomTool;\n              return (\n                // eslint-disable-next-line react/no-array-index-key\n                <Fragment key={i}>{item.renderComponent({ editor })}</Fragment>\n              );\n            }\n\n            const item = _item as DefaultFloatingToolbarTools;\n            const Tool = toolMapping[item];\n            if (!Tool) return null;\n\n            return (\n              // eslint-disable-next-line react/no-array-index-key\n              <Fragment key={i}>\n                <Tool />\n              </Fragment>\n            );\n          })}\n        </Flex>\n      )}\n    </Box>\n  );\n};\n\nfunction useFloatingTextFormatToolbar({\n  editor,\n  anchorElem,\n  children,\n  tools,\n  containerProps\n}: {\n  editor: LexicalEditor;\n  anchorElem: HTMLElement;\n  tools?: (DefaultFloatingToolbarTools | CustomTool)[];\n  children?: ReactNode;\n  containerProps?: BoxProps;\n}) {\n  const [isText, setIsText] = useState(false);\n\n  const updatePopup = useCallback(() => {\n    editor.getEditorState().read(() => {\n      // Should not to pop up the floating toolbar when using IME input\n      if (editor.isComposing()) {\n        return;\n      }\n      const selection = $getSelection();\n      const nativeSelection = window.getSelection();\n      const rootElement = editor.getRootElement();\n\n      if (\n        nativeSelection !== null\n        && (!$isRangeSelection(selection)\n          || rootElement === null\n          || !rootElement.contains(nativeSelection.anchorNode))\n      ) {\n        setIsText(false);\n        return;\n      }\n\n      if (!$isRangeSelection(selection)) {\n        return;\n      }\n      const node = getSelectedNode(selection);\n\n      if (selection.getTextContent() !== '') {\n        setIsText($isTextNode(node) || $isParagraphNode(node));\n      } else {\n        setIsText(false);\n      }\n\n      const rawTextContent = selection.getTextContent().replace(/\\n/g, '');\n      if (!selection.isCollapsed() && rawTextContent === '') {\n        setIsText(false);\n      }\n    });\n  }, [editor]);\n\n  useEffect(() => {\n    document.addEventListener('selectionchange', updatePopup);\n    return () => {\n      document.removeEventListener('selectionchange', updatePopup);\n    };\n  }, [updatePopup]);\n\n  useEffect(() => {\n    return mergeRegister(\n      editor.registerUpdateListener(() => {\n        updatePopup();\n      }),\n      editor.registerRootListener(() => {\n        if (editor.getRootElement() === null) {\n          setIsText(false);\n        }\n      })\n    );\n  }, [editor, updatePopup]);\n\n  if (!isText || !anchorElem) {\n    return null;\n  }\n\n  return createPortal(\n    <FloatingToolbarContainer\n      editor={editor}\n      anchorElem={anchorElem}\n      tools={tools}\n      containerProps={containerProps}\n    >\n      {children}\n    </FloatingToolbarContainer>,\n    anchorElem\n  );\n}\n\nexport const EditorFloatingToolbar = ({\n  anchorElem = document.body,\n  tools,\n  children,\n  containerProps\n}: {\n  anchorElem?: HTMLElement;\n  tools?: (DefaultFloatingToolbarTools | CustomTool)[];\n  children?: ReactNode;\n  containerProps?: BoxProps;\n}) => {\n  const [editor] = useLexicalComposerContext();\n  return useFloatingTextFormatToolbar({\n    editor,\n    anchorElem,\n    tools,\n    children,\n    containerProps\n  });\n};\n"],"names":["item","Fragment"],"mappings":"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"}

package/dist/es/components/rich-editor/index.js

@@ -0,0 +1,140 @@
+import { jsx } from 'react/jsx-runtime';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import { isValidElement } from 'react';
+import { Box } from '../../react-components/dist/es/box/box.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));
+const RichEditor = ({
+  containerRef,
+  placeholder,
+  editorContainerProps
+}) => {
+  return /* @__PURE__ */ jsx(
+    Box,
+    __spreadProps(__spreadValues({}, editorContainerProps), {
+      css: __spreadValues({
+        position: "relative"
+      }, editorContainerProps == null ? void 0 : editorContainerProps.css),
+      children: /* @__PURE__ */ jsx(
+        RichTextPlugin,
+        {
+          contentEditable: /* @__PURE__ */ jsx(Box, { className: "editor-container", children: /* @__PURE__ */ jsx(
+            Box,
+            {
+              className: "editor",
+              css: {
+                position: "relative",
+                borderRadius: "$md",
+                border: "1px solid $neutral200",
+                textAlign: "left",
+                "& .text-bold": {
+                  fontWeight: "bold"
+                },
+                "& .text-italic": {
+                  fontStyle: "italic"
+                },
+                "& .text-underline": {
+                  textDecoration: "underline"
+                },
+                p: {
+                  margin: "$1 0"
+                },
+                ul: {
+                  listStyle: "disc",
+                  marginLeft: "$7",
+                  ul: {
+                    listStyle: "circle"
+                  }
+                },
+                ol: {
+                  listStyle: "decimal",
+                  marginLeft: "$7",
+                  ol: {
+                    listStyle: "lower-alpha"
+                  }
+                },
+                ".text-code": {
+                  color: "#F97316",
+                  padding: "0 $2",
+                  backgroundColor: "$neutral100",
+                  border: "1px solid $neutral200",
+                  borderRadius: "$sm",
+                  "&, & *": {
+                    fontFamily: "monospace"
+                  }
+                },
+                ".block-code": {
+                  padding: "$4",
+                  display: "block",
+                  color: "$neutral900",
+                  backgroundColor: "$neutral100",
+                  border: "1px solid $neutral200",
+                  borderRadius: "$md",
+                  "&, & *": {
+                    fontFamily: "monospace"
+                  }
+                },
+                ".block-h1": {
+                  fontSize: "$xl"
+                },
+                ".block-h2": {
+                  fontSize: "$lg"
+                },
+                ".block-h3, .block-h4, .block-h5, .block-h6": {
+                  fontSize: "$md"
+                }
+              },
+              ref: containerRef,
+              children: /* @__PURE__ */ jsx(
+                ContentEditable,
+                {
+                  style: {
+                    minHeight: "120px",
+                    padding: "12px"
+                  }
+                }
+              )
+            }
+          ) }),
+          ErrorBoundary: LexicalErrorBoundary,
+          placeholder: !isValidElement(placeholder) ? /* @__PURE__ */ jsx(
+            Box,
+            {
+              css: {
+                position: "absolute",
+                top: "12px",
+                left: "12px",
+                color: "$black500",
+                pointerEvents: "none"
+              },
+              children: placeholder
+            }
+          ) : placeholder
+        }
+      )
+    })
+  );
+};
+
+export { RichEditor };
+//# sourceMappingURL=index.js.map

package/dist/es/components/rich-editor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/rich-editor/index.tsx"],"sourcesContent":["import { ContentEditable } from '@lexical/react/LexicalContentEditable';\nimport { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';\nimport { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';\nimport { ReactNode, RefObject, isValidElement } from 'react';\nimport { Box, BoxProps } from '@sparrowengg/twigs-react';\n\nexport const RichEditor = ({\n  containerRef,\n  placeholder,\n  editorContainerProps\n}: {\n  containerRef?:\n    | ((instance: HTMLDivElement | null) => void)\n    | RefObject<HTMLDivElement>;\n  placeholder?: ReactNode | string;\n  editorContainerProps?: BoxProps;\n}) => {\n  return (\n    <Box\n      {...editorContainerProps}\n      css={{\n        position: 'relative',\n        ...editorContainerProps?.css\n      }}\n    >\n      <RichTextPlugin\n        contentEditable={(\n          <Box className=\"editor-container\">\n            <Box\n              className=\"editor\"\n              css={{\n                position: 'relative',\n                borderRadius: '$md',\n                border: '1px solid $neutral200',\n                textAlign: 'left',\n\n                '& .text-bold': {\n                  fontWeight: 'bold'\n                },\n                '& .text-italic': {\n                  fontStyle: 'italic'\n                },\n                '& .text-underline': {\n                  textDecoration: 'underline'\n                },\n                p: {\n                  margin: '$1 0'\n                },\n                ul: {\n                  listStyle: 'disc',\n                  marginLeft: '$7',\n\n                  ul: {\n                    listStyle: 'circle'\n                  }\n                },\n                ol: {\n                  listStyle: 'decimal',\n                  marginLeft: '$7',\n\n                  ol: {\n                    listStyle: 'lower-alpha'\n                  }\n                },\n                '.text-code': {\n                  color: '#F97316',\n                  padding: '0 $2',\n                  backgroundColor: '$neutral100',\n                  border: '1px solid $neutral200',\n                  borderRadius: '$sm',\n\n                  '&, & *': {\n                    fontFamily: 'monospace'\n                  }\n                },\n                '.block-code': {\n                  padding: '$4',\n                  display: 'block',\n                  color: '$neutral900',\n                  backgroundColor: '$neutral100',\n                  border: '1px solid $neutral200',\n                  borderRadius: '$md',\n\n                  '&, & *': {\n                    fontFamily: 'monospace'\n                  }\n                },\n                '.block-h1': {\n                  fontSize: '$xl'\n                },\n                '.block-h2': {\n                  fontSize: '$lg'\n                },\n                '.block-h3, .block-h4, .block-h5, .block-h6': {\n                  fontSize: '$md'\n                }\n              }}\n              ref={containerRef}\n            >\n              <ContentEditable\n                style={{\n                  minHeight: '120px',\n                  padding: '12px'\n                }}\n              />\n            </Box>\n          </Box>\n        )}\n        ErrorBoundary={LexicalErrorBoundary}\n        placeholder={\n          !isValidElement(placeholder) ? (\n            <Box\n              css={{\n                position: 'absolute',\n                top: '12px',\n                left: '12px',\n                color: '$black500',\n                pointerEvents: 'none'\n              }}\n            >\n              {placeholder}\n            </Box>\n          ) : (\n            placeholder\n          )\n        }\n      />\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/es/components/toolbar/toolbar.js

@@ -0,0 +1,74 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { prefixClassName } from '../../utils/prefix-class-name.js';
+import { Fragment as Fragment$1 } from 'react';
+import { BoldTool } from './tools/bold.js';
+import { CodeTool } from './tools/code.js';
+import { CodeBlockTool } from './tools/code-block.js';
+import { ItalicTool } from './tools/italic.js';
+import { LinkTool } from './tools/link.js';
+import { OrderedListTool } from './tools/ordered-list.js';
+import { UnderlineTool } from './tools/underline.js';
+import { UnorderedListTool } from './tools/unordered-list.js';
+import { FormatTool } from './tools/format.js';
+import { TextAlignTool } from './tools/text-align.js';
+import { Flex } from '../../react-components/dist/es/flex/flex.js';
+
+const defaultTools = [
+  "format",
+  "bold",
+  "italic",
+  "underline",
+  "unordered-list",
+  "ordered-list",
+  "link",
+  "codeblock",
+  "code",
+  "text-align"
+];
+const toolMapping = {
+  format: FormatTool,
+  bold: BoldTool,
+  italic: ItalicTool,
+  underline: UnderlineTool,
+  "unordered-list": UnorderedListTool,
+  "ordered-list": OrderedListTool,
+  codeblock: CodeBlockTool,
+  code: CodeTool,
+  link: LinkTool,
+  "text-align": TextAlignTool
+};
+const EditorToolbar = ({
+  tools = defaultTools,
+  children
+}) => {
+  const [editor] = useLexicalComposerContext();
+  return /* @__PURE__ */ jsx(Fragment, { children: children ? /* @__PURE__ */ jsx(Fragment, { children }) : /* @__PURE__ */ jsx(
+    Flex,
+    {
+      css: {
+        gap: "$1"
+      },
+      className: prefixClassName("editor-toolbar"),
+      children: tools.map((_item, i) => {
+        if (_item == null ? void 0 : _item.renderComponent) {
+          const item2 = _item;
+          return (
+            // eslint-disable-next-line react/no-array-index-key
+            /* @__PURE__ */ jsx(Fragment$1, { children: item2.renderComponent({ editor }) }, i)
+          );
+        }
+        const item = _item;
+        const Tool = toolMapping[item];
+        if (!Tool) return null;
+        return (
+          // eslint-disable-next-line react/no-array-index-key
+          /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(Tool, {}) }, i)
+        );
+      })
+    }
+  ) });
+};
+
+export { EditorToolbar };
+//# sourceMappingURL=toolbar.js.map

package/dist/es/components/toolbar/toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.js","sources":["../../../../src/components/toolbar/toolbar.tsx"],"sourcesContent":["import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport { Flex } from '@sparrowengg/twigs-react';\nimport { prefixClassName } from '@src/utils/prefix-class-name';\nimport { LexicalEditor } from 'lexical';\nimport { Fragment, ReactNode } from 'react';\nimport {\n  BoldTool,\n  CodeBlockTool,\n  CodeTool,\n  FormatTool,\n  ItalicTool,\n  LinkTool,\n  OrderedListTool,\n  TextAlignTool,\n  UnderlineTool,\n  UnorderedListTool\n} from './tools';\n\nexport type DefaultToolbarTools =\n  | 'format'\n  | 'bold'\n  | 'italic'\n  | 'underline'\n  | 'ordered-list'\n  | 'unordered-list'\n  | 'link'\n  | 'codeblock'\n  | 'code'\n  | 'text-align';\n\ntype CustomTool = {\n  renderComponent: (props: { editor: LexicalEditor }) => ReactNode;\n};\n\nexport type ToolbarTools = (DefaultToolbarTools | CustomTool)[];\n\nconst defaultTools: DefaultToolbarTools[] = [\n  'format',\n  'bold',\n  'italic',\n  'underline',\n  'unordered-list',\n  'ordered-list',\n  'link',\n  'codeblock',\n  'code',\n  'text-align'\n];\n\nconst toolMapping = {\n  format: FormatTool,\n  bold: BoldTool,\n  italic: ItalicTool,\n  underline: UnderlineTool,\n  'unordered-list': UnorderedListTool,\n  'ordered-list': OrderedListTool,\n  codeblock: CodeBlockTool,\n  code: CodeTool,\n  link: LinkTool,\n  'text-align': TextAlignTool\n};\n\nexport const EditorToolbar = ({\n  tools = defaultTools,\n  children\n}: {\n  tools?: ToolbarTools;\n  children?: ReactNode;\n}) => {\n  const [editor] = useLexicalComposerContext();\n\n  return (\n    <>\n      {children ? (\n        <>{children}</>\n      ) : (\n        <Flex\n          css={{\n            gap: '$1'\n          }}\n          className={prefixClassName('editor-toolbar')}\n        >\n          {tools.map((_item, i) => {\n            if ((_item as CustomTool)?.renderComponent) {\n              const item = _item as CustomTool;\n              return (\n                // eslint-disable-next-line react/no-array-index-key\n                <Fragment key={i}>{item.renderComponent({ editor })}</Fragment>\n              );\n            }\n\n            const item = _item as DefaultToolbarTools;\n            const Tool = toolMapping[item];\n            if (!Tool) return null;\n\n            return (\n              // eslint-disable-next-line react/no-array-index-key\n              <Fragment key={i}>\n                <Tool />\n              </Fragment>\n            );\n          })}\n        </Flex>\n      )}\n    </>\n  );\n};\n"],"names":["item","Fragment"],"mappings":";;;;;;;;;;;;;;;;AAoCA,MAAM,YAAsC,GAAA;AAAA,EAC1C,QAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACA,gBAAA;AAAA,EACA,cAAA;AAAA,EACA,MAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA;AAEA,MAAM,WAAc,GAAA;AAAA,EAClB,MAAQ,EAAA,UAAA;AAAA,EACR,IAAM,EAAA,QAAA;AAAA,EACN,MAAQ,EAAA,UAAA;AAAA,EACR,SAAW,EAAA,aAAA;AAAA,EACX,gBAAkB,EAAA,iBAAA;AAAA,EAClB,cAAgB,EAAA,eAAA;AAAA,EAChB,SAAW,EAAA,aAAA;AAAA,EACX,IAAM,EAAA,QAAA;AAAA,EACN,IAAM,EAAA,QAAA;AAAA,EACN,YAAc,EAAA;AAChB,CAAA;AAEO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,KAAQ,GAAA,YAAA;AAAA,EACR;AACF,CAGM,KAAA;AACJ,EAAM,MAAA,CAAC,MAAM,CAAA,GAAI,yBAA0B,EAAA;AAE3C,EAAA,uBAEK,GAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA,QAAA,mBACI,GAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAS,CAEZ,mBAAA,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,GAAK,EAAA;AAAA,QACH,GAAK,EAAA;AAAA,OACP;AAAA,MACA,SAAA,EAAW,gBAAgB,gBAAgB,CAAA;AAAA,MAE1C,QAAM,EAAA,KAAA,CAAA,GAAA,CAAI,CAAC,KAAA,EAAO,CAAM,KAAA;AACvB,QAAA,IAAK,+BAAsB,eAAiB,EAAA;AAC1C,UAAA,MAAMA,KAAO,GAAA,KAAA;AACb,UAAA;AAAA;AAAA,4BAEE,GAAA,CAACC,UAAA,EAAA,EAAkB,QAAAD,EAAAA,KAAAA,CAAK,gBAAgB,EAAE,MAAA,EAAQ,CAAA,EAAA,EAAnC,CAAqC;AAAA;AAAA;AAIxD,QAAA,MAAM,IAAO,GAAA,KAAA;AACb,QAAM,MAAA,IAAA,GAAO,YAAY,IAAI,CAAA;AAC7B,QAAI,IAAA,CAAC,MAAa,OAAA,IAAA;AAElB,QAAA;AAAA;AAAA,8BAEGC,UAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EAAK,KADO,CAEf;AAAA;AAAA,OAEH;AAAA;AAAA,GAGP,EAAA,CAAA;AAEJ;;;;"}

package/dist/es/components/toolbar/tools/bold.js

@@ -0,0 +1,50 @@
+import { jsx } from 'react/jsx-runtime';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { FORMAT_TEXT_COMMAND } from 'lexical';
+import { clsx } from '../../../react-editor/node_modules/clsx/dist/clsx.js';
+import { useToolbarStore } from '../../toolbar-context/store.js';
+import { IconButton } from '../../../react-components/dist/es/button/icon-button.js';
+import { BoldIcon } from '../../../react-icons/dist/es/icons/bold.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 BoldTool = ({ renderButton, buttonProps }) => {
+  const [editor] = useLexicalComposerContext();
+  const [active] = useToolbarStore((state) => state.data.isBold);
+  const handleClick = () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
+  if (renderButton) {
+    return renderButton({ editor, active, onChange: handleClick });
+  }
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    __spreadValues({
+      icon: /* @__PURE__ */ jsx(BoldIcon, {}),
+      variant: active ? "solid" : "ghost",
+      className: clsx("twigs-editor-tool-button", {
+        "twigs-editor-tool-button--active": active
+      }),
+      color: "default",
+      onClick: handleClick,
+      title: active ? "Clear bold formatting" : "Format text to bold",
+      "data-tool": "bold",
+      "aria-label": active ? "Clear bold formatting" : "Format text to bold"
+    }, buttonProps)
+  );
+};
+
+export { BoldTool };
+//# sourceMappingURL=bold.js.map

package/dist/es/components/toolbar/tools/bold.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bold.js","sources":["../../../../../src/components/toolbar/tools/bold.tsx"],"sourcesContent":["import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport { BoldIcon } 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 BoldTool = ({ renderButton, buttonProps }: ToolbarButtonProps) => {\n  const [editor] = useLexicalComposerContext();\n  const [active] = useToolbarStore((state) => state.data.isBold);\n\n  const handleClick = () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold');\n\n  if (renderButton) {\n    return renderButton({ editor, active, onChange: handleClick });\n  }\n\n  return (\n    <IconButton\n      icon={<BoldIcon />}\n      variant={active ? 'solid' : 'ghost'}\n      className={clsx('twigs-editor-tool-button', {\n        'twigs-editor-tool-button--active': active\n      })}\n      color=\"default\"\n      onClick={handleClick}\n      title={active ? 'Clear bold formatting' : 'Format text to bold'}\n      data-tool=\"bold\"\n      aria-label={active ? 'Clear bold formatting' : 'Format text to bold'}\n      {...buttonProps}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAQO,MAAM,QAAW,GAAA,CAAC,EAAE,YAAA,EAAc,aAAsC,KAAA;AAC7E,EAAM,MAAA,CAAC,MAAM,CAAA,GAAI,yBAA0B,EAAA;AAC3C,EAAM,MAAA,CAAC,MAAM,CAAI,GAAA,eAAA,CAAgB,CAAC,KAAU,KAAA,KAAA,CAAM,KAAK,MAAM,CAAA;AAE7D,EAAA,MAAM,WAAc,GAAA,MAAM,MAAO,CAAA,eAAA,CAAgB,qBAAqB,MAAM,CAAA;AAE5E,EAAA,IAAI,YAAc,EAAA;AAChB,IAAA,OAAO,aAAa,EAAE,MAAA,EAAQ,MAAQ,EAAA,QAAA,EAAU,aAAa,CAAA;AAAA;AAG/D,EACE,uBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA,cAAA,CAAA;AAAA,MACC,IAAA,sBAAO,QAAS,EAAA,EAAA,CAAA;AAAA,MAChB,OAAA,EAAS,SAAS,OAAU,GAAA,OAAA;AAAA,MAC5B,SAAA,EAAW,KAAK,0BAA4B,EAAA;AAAA,QAC1C,kCAAoC,EAAA;AAAA,OACrC,CAAA;AAAA,MACD,KAAM,EAAA,SAAA;AAAA,MACN,OAAS,EAAA,WAAA;AAAA,MACT,KAAA,EAAO,SAAS,uBAA0B,GAAA,qBAAA;AAAA,MAC1C,WAAU,EAAA,MAAA;AAAA,MACV,YAAA,EAAY,SAAS,uBAA0B,GAAA;AAAA,KAC3C,EAAA,WAAA;AAAA,GACN;AAEJ;;;;"}

package/dist/es/components/toolbar/tools/code-block.js

@@ -0,0 +1,77 @@
+import { jsx } from 'react/jsx-runtime';
+import { $createCodeNode } from '@lexical/code';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $setBlocksType } from '@lexical/selection';
+import { $getSelection, $createParagraphNode, $isRangeSelection } from 'lexical';
+import { clsx } from '../../../react-editor/node_modules/clsx/dist/clsx.js';
+import { useToolbarStore } from '../../toolbar-context/store.js';
+import { IconButton } from '../../../react-components/dist/es/button/icon-button.js';
+import { CodeBlockIcon } from '../../../react-icons/dist/es/icons/code-block.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 CodeBlockTool = ({
+  renderButton,
+  buttonProps
+}) => {
+  const [editor] = useLexicalComposerContext();
+  const [format] = useToolbarStore((state) => state.data.format);
+  const active = format === "code";
+  const formatCode = () => {
+    editor.update(() => {
+      let selection = $getSelection();
+      if (active) {
+        $setBlocksType(selection, () => $createParagraphNode());
+        return;
+      }
+      if (selection !== null) {
+        if (selection.isCollapsed()) {
+          $setBlocksType(selection, () => $createCodeNode());
+        } else {
+          const textContent = selection.getTextContent();
+          const codeNode = $createCodeNode();
+          selection.insertNodes([codeNode]);
+          selection = $getSelection();
+          if ($isRangeSelection(selection)) {
+            selection.insertRawText(textContent);
+          }
+        }
+      }
+    });
+  };
+  if (renderButton) {
+    return renderButton({ editor, active, onChange: formatCode });
+  }
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    __spreadValues({
+      icon: /* @__PURE__ */ jsx(CodeBlockIcon, {}),
+      variant: active ? "solid" : "ghost",
+      color: "default",
+      "data-tool": "code-block",
+      className: clsx("twigs-editor-tool-button", {
+        "twigs-editor-tool-button--active": active
+      }),
+      onClick: formatCode,
+      title: active ? "Convert code block to paragraph" : "Convert to code block",
+      "aria-label": active ? "Convert code block to paragraph" : "Convert to code block"
+    }, buttonProps)
+  );
+};
+
+export { CodeBlockTool };
+//# sourceMappingURL=code-block.js.map

package/dist/es/components/toolbar/tools/code-block.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block.js","sources":["../../../../../src/components/toolbar/tools/code-block.tsx"],"sourcesContent":["import { $createCodeNode } from '@lexical/code';\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport { $setBlocksType } from '@lexical/selection';\nimport { CodeBlockIcon } from '@sparrowengg/twigs-react-icons';\nimport { IconButton } from '@sparrowengg/twigs-react';\nimport {\n  $createParagraphNode,\n  $getSelection,\n  $isRangeSelection\n} from 'lexical';\nimport clsx from 'clsx';\nimport { useToolbarStore } from '../../toolbar-context/store';\nimport { ToolbarButtonProps } from './commons';\n\nexport const CodeBlockTool = ({\n  renderButton,\n  buttonProps\n}: ToolbarButtonProps) => {\n  const [editor] = useLexicalComposerContext();\n  const [format] = useToolbarStore((state) => state.data.format);\n\n  const active = format === 'code';\n\n  const formatCode = () => {\n    editor.update(() => {\n      let selection = $getSelection();\n\n      if (active) {\n        $setBlocksType(selection, () => $createParagraphNode());\n        return;\n      }\n\n      if (selection !== null) {\n        if (selection.isCollapsed()) {\n          $setBlocksType(selection, () => $createCodeNode());\n        } else {\n          const textContent = selection.getTextContent();\n          const codeNode = $createCodeNode();\n          selection.insertNodes([codeNode]);\n          selection = $getSelection();\n          if ($isRangeSelection(selection)) {\n            selection.insertRawText(textContent);\n          }\n        }\n      }\n    });\n  };\n\n  if (renderButton) {\n    return renderButton({ editor, active, onChange: formatCode });\n  }\n\n  return (\n    <IconButton\n      icon={<CodeBlockIcon />}\n      variant={active ? 'solid' : 'ghost'}\n      color=\"default\"\n      data-tool=\"code-block\"\n      className={clsx('twigs-editor-tool-button', {\n        'twigs-editor-tool-button--active': active\n      })}\n      onClick={formatCode}\n      title={\n        active ? 'Convert code block to paragraph' : 'Convert to code block'\n      }\n      aria-label={\n        active ? 'Convert code block to paragraph' : 'Convert to code block'\n      }\n      {...buttonProps}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,YAAA;AAAA,EACA;AACF,CAA0B,KAAA;AACxB,EAAM,MAAA,CAAC,MAAM,CAAA,GAAI,yBAA0B,EAAA;AAC3C,EAAM,MAAA,CAAC,MAAM,CAAI,GAAA,eAAA,CAAgB,CAAC,KAAU,KAAA,KAAA,CAAM,KAAK,MAAM,CAAA;AAE7D,EAAA,MAAM,SAAS,MAAW,KAAA,MAAA;AAE1B,EAAA,MAAM,aAAa,MAAM;AACvB,IAAA,MAAA,CAAO,OAAO,MAAM;AAClB,MAAA,IAAI,YAAY,aAAc,EAAA;AAE9B,MAAA,IAAI,MAAQ,EAAA;AACV,QAAe,cAAA,CAAA,SAAA,EAAW,MAAM,oBAAA,EAAsB,CAAA;AACtD,QAAA;AAAA;AAGF,MAAA,IAAI,cAAc,IAAM,EAAA;AACtB,QAAI,IAAA,SAAA,CAAU,aAAe,EAAA;AAC3B,UAAe,cAAA,CAAA,SAAA,EAAW,MAAM,eAAA,EAAiB,CAAA;AAAA,SAC5C,MAAA;AACL,UAAM,MAAA,WAAA,GAAc,UAAU,cAAe,EAAA;AAC7C,UAAA,MAAM,WAAW,eAAgB,EAAA;AACjC,UAAU,SAAA,CAAA,WAAA,CAAY,CAAC,QAAQ,CAAC,CAAA;AAChC,UAAA,SAAA,GAAY,aAAc,EAAA;AAC1B,UAAI,IAAA,iBAAA,CAAkB,SAAS,CAAG,EAAA;AAChC,YAAA,SAAA,CAAU,cAAc,WAAW,CAAA;AAAA;AACrC;AACF;AACF,KACD,CAAA;AAAA,GACH;AAEA,EAAA,IAAI,YAAc,EAAA;AAChB,IAAA,OAAO,aAAa,EAAE,MAAA,EAAQ,MAAQ,EAAA,QAAA,EAAU,YAAY,CAAA;AAAA;AAG9D,EACE,uBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA,cAAA,CAAA;AAAA,MACC,IAAA,sBAAO,aAAc,EAAA,EAAA,CAAA;AAAA,MACrB,OAAA,EAAS,SAAS,OAAU,GAAA,OAAA;AAAA,MAC5B,KAAM,EAAA,SAAA;AAAA,MACN,WAAU,EAAA,YAAA;AAAA,MACV,SAAA,EAAW,KAAK,0BAA4B,EAAA;AAAA,QAC1C,kCAAoC,EAAA;AAAA,OACrC,CAAA;AAAA,MACD,OAAS,EAAA,UAAA;AAAA,MACT,KAAA,EACE,SAAS,iCAAoC,GAAA,uBAAA;AAAA,MAE/C,YAAA,EACE,SAAS,iCAAoC,GAAA;AAAA,KAE3C,EAAA,WAAA;AAAA,GACN;AAEJ;;;;"}

package/dist/es/components/toolbar/tools/code.js

@@ -0,0 +1,52 @@
+import { jsx } from 'react/jsx-runtime';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { FORMAT_TEXT_COMMAND } from 'lexical';
+import { clsx } from '../../../react-editor/node_modules/clsx/dist/clsx.js';
+import { useToolbarStore } from '../../toolbar-context/store.js';
+import { IconButton } from '../../../react-components/dist/es/button/icon-button.js';
+import { CodeIcon } from '../../../react-icons/dist/es/icons/code.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 CodeTool = ({ renderButton, buttonProps }) => {
+  const [editor] = useLexicalComposerContext();
+  const [active] = useToolbarStore((state) => state.data.isCode);
+  const handleClick = () => {
+    editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code");
+  };
+  if (renderButton) {
+    return renderButton({ editor, active, onChange: handleClick });
+  }
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    __spreadValues({
+      icon: /* @__PURE__ */ jsx(CodeIcon, {}),
+      variant: active ? "solid" : "ghost",
+      color: "default",
+      onClick: handleClick,
+      "data-tool": "code",
+      className: clsx("twigs-editor-tool-button", {
+        "twigs-editor-tool-button--active": active
+      }),
+      title: active ? "Clear inline code formatting" : "Format text to inline code",
+      "aria-label": active ? "Clear inline code formatting" : "Format text to inline code"
+    }, buttonProps)
+  );
+};
+
+export { CodeTool };
+//# sourceMappingURL=code.js.map

package/dist/es/components/toolbar/tools/code.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code.js","sources":["../../../../../src/components/toolbar/tools/code.tsx"],"sourcesContent":["import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport { CodeIcon } 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 CodeTool = ({ renderButton, buttonProps }: ToolbarButtonProps) => {\n  const [editor] = useLexicalComposerContext();\n  const [active] = useToolbarStore((state) => state.data.isCode);\n\n  const handleClick = () => {\n    editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code');\n  };\n\n  if (renderButton) {\n    return renderButton({ editor, active, onChange: handleClick });\n  }\n\n  return (\n    <IconButton\n      icon={<CodeIcon />}\n      variant={active ? 'solid' : 'ghost'}\n      color=\"default\"\n      onClick={handleClick}\n      data-tool=\"code\"\n      className={clsx('twigs-editor-tool-button', {\n        'twigs-editor-tool-button--active': active\n      })}\n      title={\n        active ? 'Clear inline code formatting' : 'Format text to inline code'\n      }\n      aria-label={\n        active ? 'Clear inline code formatting' : 'Format text to inline code'\n      }\n      {...buttonProps}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAQO,MAAM,QAAW,GAAA,CAAC,EAAE,YAAA,EAAc,aAAsC,KAAA;AAC7E,EAAM,MAAA,CAAC,MAAM,CAAA,GAAI,yBAA0B,EAAA;AAC3C,EAAM,MAAA,CAAC,MAAM,CAAI,GAAA,eAAA,CAAgB,CAAC,KAAU,KAAA,KAAA,CAAM,KAAK,MAAM,CAAA;AAE7D,EAAA,MAAM,cAAc,MAAM;AACxB,IAAO,MAAA,CAAA,eAAA,CAAgB,qBAAqB,MAAM,CAAA;AAAA,GACpD;AAEA,EAAA,IAAI,YAAc,EAAA;AAChB,IAAA,OAAO,aAAa,EAAE,MAAA,EAAQ,MAAQ,EAAA,QAAA,EAAU,aAAa,CAAA;AAAA;AAG/D,EACE,uBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA,cAAA,CAAA;AAAA,MACC,IAAA,sBAAO,QAAS,EAAA,EAAA,CAAA;AAAA,MAChB,OAAA,EAAS,SAAS,OAAU,GAAA,OAAA;AAAA,MAC5B,KAAM,EAAA,SAAA;AAAA,MACN,OAAS,EAAA,WAAA;AAAA,MACT,WAAU,EAAA,MAAA;AAAA,MACV,SAAA,EAAW,KAAK,0BAA4B,EAAA;AAAA,QAC1C,kCAAoC,EAAA;AAAA,OACrC,CAAA;AAAA,MACD,KAAA,EACE,SAAS,8BAAiC,GAAA,4BAAA;AAAA,MAE5C,YAAA,EACE,SAAS,8BAAiC,GAAA;AAAA,KAExC,EAAA,WAAA;AAAA,GACN;AAEJ;;;;"}

package/dist/es/components/toolbar/tools/commons.js

@@ -0,0 +1,14 @@
+import { $setBlocksType } from '@lexical/selection';
+import { $getSelection, $isRangeSelection, $createParagraphNode } from 'lexical';
+
+const formatParagraph = (editor) => {
+  editor.update(() => {
+    const selection = $getSelection();
+    if ($isRangeSelection(selection)) {
+      $setBlocksType(selection, () => $createParagraphNode());
+    }
+  });
+};
+
+export { formatParagraph };
+//# sourceMappingURL=commons.js.map

package/dist/es/components/toolbar/tools/commons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"commons.js","sources":["../../../../../src/components/toolbar/tools/commons.ts"],"sourcesContent":["import { $setBlocksType } from '@lexical/selection';\nimport { IconButtonProps } from '@sparrowengg/twigs-react';\nimport {\n  $createParagraphNode,\n  $getSelection,\n  $isRangeSelection,\n  LexicalEditor\n} from 'lexical';\nimport { ReactNode } from 'react';\n\nexport type RenderButtonProps = {\n  editor: LexicalEditor;\n  active: boolean;\n  onChange?: () => void;\n};\n\nexport type ToolbarButtonProps = {\n  renderButton?: (props: RenderButtonProps) => ReactNode;\n  buttonProps?: IconButtonProps;\n};\n\nexport const formatParagraph = (editor: LexicalEditor) => {\n  editor.update(() => {\n    const selection = $getSelection();\n    if ($isRangeSelection(selection)) {\n      $setBlocksType(selection, () => $createParagraphNode());\n    }\n  });\n};\n"],"names":[],"mappings":";;;AAqBa,MAAA,eAAA,GAAkB,CAAC,MAA0B,KAAA;AACxD,EAAA,MAAA,CAAO,OAAO,MAAM;AAClB,IAAA,MAAM,YAAY,aAAc,EAAA;AAChC,IAAI,IAAA,iBAAA,CAAkB,SAAS,CAAG,EAAA;AAChC,MAAe,cAAA,CAAA,SAAA,EAAW,MAAM,oBAAA,EAAsB,CAAA;AAAA;AACxD,GACD,CAAA;AACH;;;;"}

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

@@ -0,0 +1,134 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $createHeadingNode } from '@lexical/rich-text';
+import { $setBlocksType } from '@lexical/selection';
+import { $getSelection, $isRangeSelection, $createParagraphNode } from 'lexical';
+import { useToolbarStore } from '../../toolbar-context/store.js';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '../../../react-components/dist/es/dropdown/dropdown.js';
+import { IconButton } from '../../../react-components/dist/es/button/icon-button.js';
+import { TextFormatIcon } from '../../../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] = useLexicalComposerContext();
+  const [format] = useToolbarStore((state) => state.data.format);
+  const formatText = (type) => {
+    if (type === "paragraph") {
+      formatParagraph();
+    } else {
+      formatHeading(type);
+    }
+  };
+  const formatHeading = (headingSize) => {
+    if (headingSize) {
+      editor.update(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+          $setBlocksType(selection, () => $createHeadingNode(headingSize));
+        }
+      });
+    }
+  };
+  const formatParagraph = () => {
+    editor.update(() => {
+      const selection = $getSelection();
+      if ($isRangeSelection(selection)) {
+        $setBlocksType(selection, () => $createParagraphNode());
+      }
+    });
+  };
+  const _a = formatMapping, { paragraph } = _a, headings = __objRest(_a, ["paragraph"]);
+  if (renderButton) {
+    return renderButton({ editor, active: format, onChange: formatText });
+  }
+  return /* @__PURE__ */ jsxs(DropdownMenu, __spreadProps(__spreadValues({}, dropdownMenuProps), { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, __spreadProps(__spreadValues({ asChild: true }, dropdownMenuTriggerProps), { children: renderDropdownTrigger ? renderDropdownTrigger() : /* @__PURE__ */ jsx(
+      IconButton,
+      __spreadValues({
+        icon: /* @__PURE__ */ jsx(TextFormatIcon, {}),
+        variant: "ghost",
+        color: "default",
+        className: "twigs-editor-tool-button",
+        "data-tool": "format"
+      }, dropdownMenuTriggerButtonProps)
+    ) })),
+    /* @__PURE__ */ jsxs(
+      DropdownMenuContent,
+      __spreadProps(__spreadValues({
+        className: "twigs-editor-toolbar__format-options"
+      }, dropdownMenuContentProps), {
+        children: [
+          /* @__PURE__ */ jsx(
+            DropdownMenuItem,
+            __spreadProps(__spreadValues({
+              onClick: formatParagraph
+            }, typeof dropdownMenuItemProps === "function" ? dropdownMenuItemProps({ type: "paragraph", formatText }) : dropdownMenuItemProps), {
+              children: paragraph
+            })
+          ),
+          Object.keys(headings).map(
+            (item) => /* @__PURE__ */ jsx(
+              DropdownMenuItem,
+              __spreadProps(__spreadValues({
+                onClick: () => formatHeading(item)
+              }, typeof dropdownMenuItemProps === "function" ? dropdownMenuItemProps({ type: item, formatText }) : dropdownMenuItemProps), {
+                children: formatMapping[item]
+              }),
+              item
+            )
+          )
+        ]
+      })
+    )
+  ] }));
+};
+
+export { FormatTool };
+//# sourceMappingURL=format.js.map