@sparrowengg/twigs-editor-react 0.0.1

package/dist/cjs/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":["BoldTool","ItalicTool","UnderlineTool","LinkTool","useRef","useEffect","useCallback","$getSelection","getDOMRangeRect","setFloatingElemPosition","mergeRegister","SELECTION_CHANGE_COMMAND","COMMAND_PRIORITY_LOW","jsx","Box","prefixClassName","Fragment","Flex","item","useState","$isRangeSelection","getSelectedNode","$isTextNode","$isParagraphNode","createPortal","useLexicalComposerContext"],"mappings":"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"}

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

@@ -0,0 +1,142 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var LexicalContentEditable = require('@lexical/react/LexicalContentEditable');
+var LexicalErrorBoundary = require('@lexical/react/LexicalErrorBoundary');
+var LexicalRichTextPlugin = require('@lexical/react/LexicalRichTextPlugin');
+var React = require('react');
+var box = require('../../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__ */ jsxRuntime.jsx(
+    box.Box,
+    __spreadProps(__spreadValues({}, editorContainerProps), {
+      css: __spreadValues({
+        position: "relative"
+      }, editorContainerProps == null ? void 0 : editorContainerProps.css),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        LexicalRichTextPlugin.RichTextPlugin,
+        {
+          contentEditable: /* @__PURE__ */ jsxRuntime.jsx(box.Box, { className: "editor-container", children: /* @__PURE__ */ jsxRuntime.jsx(
+            box.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__ */ jsxRuntime.jsx(
+                LexicalContentEditable.ContentEditable,
+                {
+                  style: {
+                    minHeight: "120px",
+                    padding: "12px"
+                  }
+                }
+              )
+            }
+          ) }),
+          ErrorBoundary: LexicalErrorBoundary.LexicalErrorBoundary,
+          placeholder: !React.isValidElement(placeholder) ? /* @__PURE__ */ jsxRuntime.jsx(
+            box.Box,
+            {
+              css: {
+                position: "absolute",
+                top: "12px",
+                left: "12px",
+                color: "$black500",
+                pointerEvents: "none"
+              },
+              children: placeholder
+            }
+          ) : placeholder
+        }
+      )
+    })
+  );
+};
+
+exports.RichEditor = RichEditor;
+//# sourceMappingURL=index.js.map

package/dist/cjs/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":["jsx","Box","RichTextPlugin","ContentEditable","LexicalErrorBoundary","isValidElement"],"mappings":"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"}

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

@@ -0,0 +1,76 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var prefixClassName = require('../../utils/prefix-class-name.js');
+var React = require('react');
+var bold = require('./tools/bold.js');
+var code = require('./tools/code.js');
+var codeBlock = require('./tools/code-block.js');
+var italic = require('./tools/italic.js');
+var link = require('./tools/link.js');
+var orderedList = require('./tools/ordered-list.js');
+var underline = require('./tools/underline.js');
+var unorderedList = require('./tools/unordered-list.js');
+var format = require('./tools/format.js');
+var textAlign = require('./tools/text-align.js');
+var flex = require('../../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: format.FormatTool,
+  bold: bold.BoldTool,
+  italic: italic.ItalicTool,
+  underline: underline.UnderlineTool,
+  "unordered-list": unorderedList.UnorderedListTool,
+  "ordered-list": orderedList.OrderedListTool,
+  codeblock: codeBlock.CodeBlockTool,
+  code: code.CodeTool,
+  link: link.LinkTool,
+  "text-align": textAlign.TextAlignTool
+};
+const EditorToolbar = ({
+  tools = defaultTools,
+  children
+}) => {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children }) : /* @__PURE__ */ jsxRuntime.jsx(
+    flex.Flex,
+    {
+      css: {
+        gap: "$1"
+      },
+      className: prefixClassName.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__ */ jsxRuntime.jsx(React.Fragment, { 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__ */ jsxRuntime.jsx(React.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(Tool, {}) }, i)
+        );
+      })
+    }
+  ) });
+};
+
+exports.EditorToolbar = EditorToolbar;
+//# sourceMappingURL=toolbar.js.map

package/dist/cjs/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":["FormatTool","BoldTool","ItalicTool","UnderlineTool","UnorderedListTool","OrderedListTool","CodeBlockTool","CodeTool","LinkTool","TextAlignTool","useLexicalComposerContext","jsx","Fragment","Flex","prefixClassName","item"],"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,EAAAA,iBAAA;AAAA,EACR,IAAM,EAAAC,aAAA;AAAA,EACN,MAAQ,EAAAC,iBAAA;AAAA,EACR,SAAW,EAAAC,uBAAA;AAAA,EACX,gBAAkB,EAAAC,+BAAA;AAAA,EAClB,cAAgB,EAAAC,2BAAA;AAAA,EAChB,SAAW,EAAAC,uBAAA;AAAA,EACX,IAAM,EAAAC,aAAA;AAAA,EACN,IAAM,EAAAC,aAAA;AAAA,EACN,YAAc,EAAAC;AAChB,CAAA;AAEO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,KAAQ,GAAA,YAAA;AAAA,EACR;AACF,CAGM,KAAA;AACJ,EAAM,MAAA,CAAC,MAAM,CAAA,GAAIC,gDAA0B,EAAA;AAE3C,EAAA,uBAEKC,cAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA,QAAA,mBACID,cAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAS,CAEZ,mBAAAD,cAAA;AAAA,IAACE,SAAA;AAAA,IAAA;AAAA,MACC,GAAK,EAAA;AAAA,QACH,GAAK,EAAA;AAAA,OACP;AAAA,MACA,SAAA,EAAWC,gCAAgB,gBAAgB,CAAA;AAAA,MAE1C,QAAM,EAAA,KAAA,CAAA,GAAA,CAAI,CAAC,KAAA,EAAO,CAAM,KAAA;AACvB,QAAA,IAAK,+BAAsB,eAAiB,EAAA;AAC1C,UAAA,MAAMC,KAAO,GAAA,KAAA;AACb,UAAA;AAAA;AAAA,4BAEEJ,cAAA,CAACC,cAAA,EAAA,EAAkB,QAAAG,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,yCAEGH,cAAA,EAAA,EACC,QAAC,kBAAAD,cAAA,CAAA,IAAA,EAAA,EAAK,KADO,CAEf;AAAA;AAAA,OAEH;AAAA;AAAA,GAGP,EAAA,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,52 @@
+'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 bold = require('../../../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] = LexicalComposerContext.useLexicalComposerContext();
+  const [active] = store.useToolbarStore((state) => state.data.isBold);
+  const handleClick = () => editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, "bold");
+  if (renderButton) {
+    return renderButton({ editor, active, onChange: handleClick });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    iconButton.IconButton,
+    __spreadValues({
+      icon: /* @__PURE__ */ jsxRuntime.jsx(bold.BoldIcon, {}),
+      variant: active ? "solid" : "ghost",
+      className: clsx.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)
+  );
+};
+
+exports.BoldTool = BoldTool;
+//# sourceMappingURL=bold.js.map

package/dist/cjs/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":["useLexicalComposerContext","useToolbarStore","FORMAT_TEXT_COMMAND","jsx","IconButton","BoldIcon","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAQO,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,WAAc,GAAA,MAAM,MAAO,CAAA,eAAA,CAAgBC,6BAAqB,MAAM,CAAA;AAE5E,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,aAAS,EAAA,EAAA,CAAA;AAAA,MAChB,OAAA,EAAS,SAAS,OAAU,GAAA,OAAA;AAAA,MAC5B,SAAA,EAAWC,UAAK,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/cjs/components/toolbar/tools/code-block.js

@@ -0,0 +1,79 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var code = require('@lexical/code');
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var selection = require('@lexical/selection');
+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 codeBlock = require('../../../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] = LexicalComposerContext.useLexicalComposerContext();
+  const [format] = store.useToolbarStore((state) => state.data.format);
+  const active = format === "code";
+  const formatCode = () => {
+    editor.update(() => {
+      let selection$1 = lexical.$getSelection();
+      if (active) {
+        selection.$setBlocksType(selection$1, () => lexical.$createParagraphNode());
+        return;
+      }
+      if (selection$1 !== null) {
+        if (selection$1.isCollapsed()) {
+          selection.$setBlocksType(selection$1, () => code.$createCodeNode());
+        } else {
+          const textContent = selection$1.getTextContent();
+          const codeNode = code.$createCodeNode();
+          selection$1.insertNodes([codeNode]);
+          selection$1 = lexical.$getSelection();
+          if (lexical.$isRangeSelection(selection$1)) {
+            selection$1.insertRawText(textContent);
+          }
+        }
+      }
+    });
+  };
+  if (renderButton) {
+    return renderButton({ editor, active, onChange: formatCode });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    iconButton.IconButton,
+    __spreadValues({
+      icon: /* @__PURE__ */ jsxRuntime.jsx(codeBlock.CodeBlockIcon, {}),
+      variant: active ? "solid" : "ghost",
+      color: "default",
+      "data-tool": "code-block",
+      className: clsx.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)
+  );
+};
+
+exports.CodeBlockTool = CodeBlockTool;
+//# sourceMappingURL=code-block.js.map

package/dist/cjs/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":["useLexicalComposerContext","useToolbarStore","selection","$getSelection","$setBlocksType","$createParagraphNode","$createCodeNode","$isRangeSelection","jsx","IconButton","CodeBlockIcon","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,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,MAAM,CAAA;AAE7D,EAAA,MAAM,SAAS,MAAW,KAAA,MAAA;AAE1B,EAAA,MAAM,aAAa,MAAM;AACvB,IAAA,MAAA,CAAO,OAAO,MAAM;AAClB,MAAA,IAAIC,cAAYC,qBAAc,EAAA;AAE9B,MAAA,IAAI,MAAQ,EAAA;AACV,QAAeC,wBAAA,CAAAF,WAAA,EAAW,MAAMG,4BAAA,EAAsB,CAAA;AACtD,QAAA;AAAA;AAGF,MAAA,IAAIH,gBAAc,IAAM,EAAA;AACtB,QAAI,IAAAA,WAAA,CAAU,aAAe,EAAA;AAC3B,UAAeE,wBAAA,CAAAF,WAAA,EAAW,MAAMI,oBAAA,EAAiB,CAAA;AAAA,SAC5C,MAAA;AACL,UAAM,MAAA,WAAA,GAAcJ,YAAU,cAAe,EAAA;AAC7C,UAAA,MAAM,WAAWI,oBAAgB,EAAA;AACjC,UAAUJ,WAAA,CAAA,WAAA,CAAY,CAAC,QAAQ,CAAC,CAAA;AAChC,UAAAA,WAAA,GAAYC,qBAAc,EAAA;AAC1B,UAAI,IAAAI,yBAAA,CAAkBL,WAAS,CAAG,EAAA;AAChC,YAAAA,WAAA,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,uBAAAM,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,WAAU,EAAA,YAAA;AAAA,MACV,SAAA,EAAWC,UAAK,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/cjs/components/toolbar/tools/code.js

@@ -0,0 +1,54 @@
+'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 code = require('../../../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] = LexicalComposerContext.useLexicalComposerContext();
+  const [active] = store.useToolbarStore((state) => state.data.isCode);
+  const handleClick = () => {
+    editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, "code");
+  };
+  if (renderButton) {
+    return renderButton({ editor, active, onChange: handleClick });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    iconButton.IconButton,
+    __spreadValues({
+      icon: /* @__PURE__ */ jsxRuntime.jsx(code.CodeIcon, {}),
+      variant: active ? "solid" : "ghost",
+      color: "default",
+      onClick: handleClick,
+      "data-tool": "code",
+      className: clsx.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)
+  );
+};
+
+exports.CodeTool = CodeTool;
+//# sourceMappingURL=code.js.map

package/dist/cjs/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":["useLexicalComposerContext","useToolbarStore","FORMAT_TEXT_COMMAND","jsx","IconButton","CodeIcon","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAQO,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,IAAO,MAAA,CAAA,eAAA,CAAgBC,6BAAqB,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,uBAAAC,cAAA;AAAA,IAACC,qBAAA;AAAA,IAAA,cAAA,CAAA;AAAA,MACC,IAAA,iCAAOC,aAAS,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,EAAWC,UAAK,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/cjs/components/toolbar/tools/commons.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var selection = require('@lexical/selection');
+var lexical = require('lexical');
+
+const formatParagraph = (editor) => {
+  editor.update(() => {
+    const selection$1 = lexical.$getSelection();
+    if (lexical.$isRangeSelection(selection$1)) {
+      selection.$setBlocksType(selection$1, () => lexical.$createParagraphNode());
+    }
+  });
+};
+
+exports.formatParagraph = formatParagraph;
+//# sourceMappingURL=commons.js.map

package/dist/cjs/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":["selection","$getSelection","$isRangeSelection","$setBlocksType","$createParagraphNode"],"mappings":";;;;;AAqBa,MAAA,eAAA,GAAkB,CAAC,MAA0B,KAAA;AACxD,EAAA,MAAA,CAAO,OAAO,MAAM;AAClB,IAAA,MAAMA,cAAYC,qBAAc,EAAA;AAChC,IAAI,IAAAC,yBAAA,CAAkBF,WAAS,CAAG,EAAA;AAChC,MAAeG,wBAAA,CAAAH,WAAA,EAAW,MAAMI,4BAAA,EAAsB,CAAA;AAAA;AACxD,GACD,CAAA;AACH;;;;"}