@sparrowengg/twigs-editor-react 0.0.1 → 0.0.2

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

@@ -3,14 +3,16 @@
 var jsxRuntime = require('react/jsx-runtime');
 var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
 var utils = require('@lexical/utils');
+var twigsReact = require('@sparrowengg/twigs-react');
 var lexical = require('lexical');
-var React = require('react');
-var ReactDOM__default = require('react-dom');
+var react = require('react');
+var reactDom = require('react-dom');
 var getDomRangeRect = require('../../utils/get-dom-range-rect.js');
 var getSelectedNode = require('../../utils/get-selected-node.js');
 var setFloatingElemPosition = require('../../utils/set-floating-elem-position.js');
 var prefixClassName = require('../../utils/prefix-class-name.js');
 var bold = require('../toolbar/tools/bold.js');
+require('@sparrowengg/twigs-react-icons');
 require('../toolbar-context/store.js');
 require('@lexical/code');
 require('@lexical/selection');
@@ -19,8 +21,6 @@ var link = require('../toolbar/tools/link.js');
 require('@lexical/list');
 var underline = require('../toolbar/tools/underline.js');
 require('@lexical/rich-text');
-var box = require('../../react-components/dist/es/box/box.js');
-var flex = require('../../react-components/dist/es/flex/flex.js');
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -60,7 +60,7 @@ const FloatingToolbarContainer = ({
   tools = defaultTools,
   containerProps
 }) => {
-  const popupCharStylesEditorRef = React.useRef(null);
+  const popupCharStylesEditorRef = react.useRef(null);
   function mouseMoveListener(e) {
     if ((popupCharStylesEditorRef == null ? void 0 : popupCharStylesEditorRef.current) && (e.buttons === 1 || e.buttons === 3)) {
       if (popupCharStylesEditorRef.current.style.pointerEvents !== "none") {
@@ -80,7 +80,7 @@ const FloatingToolbarContainer = ({
       }
     }
   }
-  React.useEffect(() => {
+  react.useEffect(() => {
     if (popupCharStylesEditorRef == null ? void 0 : popupCharStylesEditorRef.current) {
       document.addEventListener("mousemove", mouseMoveListener);
       document.addEventListener("mouseup", mouseUpListener);
@@ -90,7 +90,7 @@ const FloatingToolbarContainer = ({
       };
     }
   }, [popupCharStylesEditorRef]);
-  const updateFloatingToolbar = React.useCallback(() => {
+  const updateFloatingToolbar = react.useCallback(() => {
     const selection = lexical.$getSelection();
     const popupCharStylesEditorElem = popupCharStylesEditorRef.current;
     const nativeSelection = window.getSelection();
@@ -103,7 +103,7 @@ const FloatingToolbarContainer = ({
       setFloatingElemPosition.setFloatingElemPosition(rangeRect, popupCharStylesEditorElem, anchorElem);
     }
   }, [editor, anchorElem]);
-  React.useEffect(() => {
+  react.useEffect(() => {
     const scrollerElem = anchorElem.parentElement;
     const update = () => {
       editor.getEditorState().read(() => {
@@ -121,7 +121,7 @@ const FloatingToolbarContainer = ({
       }
     };
   }, [editor, updateFloatingToolbar, anchorElem]);
-  React.useEffect(() => {
+  react.useEffect(() => {
     editor.getEditorState().read(() => {
       updateFloatingToolbar();
     });
@@ -142,7 +142,7 @@ const FloatingToolbarContainer = ({
     );
   }, [editor, updateFloatingToolbar]);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    box.Box,
+    twigsReact.Box,
     __spreadProps(__spreadValues({
       ref: popupCharStylesEditorRef,
       className: prefixClassName.prefixClassName("floating-toolbar")
@@ -173,7 +173,7 @@ const FloatingToolbarContainer = ({
         }
       }, containerProps == null ? void 0 : containerProps.css),
       children: children ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children }) : /* @__PURE__ */ jsxRuntime.jsx(
-        flex.Flex,
+        twigsReact.Flex,
         {
           alignItems: "center",
           css: {
@@ -196,7 +196,7 @@ const FloatingToolbarContainer = ({
               const item2 = _item;
               return (
                 // eslint-disable-next-line react/no-array-index-key
-                /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: item2.renderComponent({ editor }) }, i)
+                /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: item2.renderComponent({ editor }) }, i)
               );
             }
             const item = _item;
@@ -204,7 +204,7 @@ const FloatingToolbarContainer = ({
             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)
+              /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(Tool, {}) }, i)
             );
           })
         }
@@ -219,8 +219,8 @@ function useFloatingTextFormatToolbar({
   tools,
   containerProps
 }) {
-  const [isText, setIsText] = React.useState(false);
-  const updatePopup = React.useCallback(() => {
+  const [isText, setIsText] = react.useState(false);
+  const updatePopup = react.useCallback(() => {
     editor.getEditorState().read(() => {
       if (editor.isComposing()) {
         return;
@@ -247,13 +247,13 @@ function useFloatingTextFormatToolbar({
       }
     });
   }, [editor]);
-  React.useEffect(() => {
+  react.useEffect(() => {
     document.addEventListener("selectionchange", updatePopup);
     return () => {
       document.removeEventListener("selectionchange", updatePopup);
     };
   }, [updatePopup]);
-  React.useEffect(() => {
+  react.useEffect(() => {
     return utils.mergeRegister(
       editor.registerUpdateListener(() => {
         updatePopup();
@@ -268,7 +268,7 @@ function useFloatingTextFormatToolbar({
   if (!isText || !anchorElem) {
     return null;
   }
-  return ReactDOM__default.createPortal(
+  return reactDom.createPortal(
     /* @__PURE__ */ jsxRuntime.jsx(
       FloatingToolbarContainer,
       {

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

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

@@ -4,8 +4,8 @@ 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 react = require('react');
+var twigsReact = require('@sparrowengg/twigs-react');
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -32,7 +32,7 @@ const RichEditor = ({
   editorContainerProps
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    box.Box,
+    twigsReact.Box,
     __spreadProps(__spreadValues({}, editorContainerProps), {
       css: __spreadValues({
         position: "relative"
@@ -40,8 +40,8 @@ const RichEditor = ({
       children: /* @__PURE__ */ jsxRuntime.jsx(
         LexicalRichTextPlugin.RichTextPlugin,
         {
-          contentEditable: /* @__PURE__ */ jsxRuntime.jsx(box.Box, { className: "editor-container", children: /* @__PURE__ */ jsxRuntime.jsx(
-            box.Box,
+          contentEditable: /* @__PURE__ */ jsxRuntime.jsx(twigsReact.Box, { className: "editor-container", children: /* @__PURE__ */ jsxRuntime.jsx(
+            twigsReact.Box,
             {
               className: "editor",
               css: {
@@ -119,8 +119,8 @@ const RichEditor = ({
             }
           ) }),
           ErrorBoundary: LexicalErrorBoundary.LexicalErrorBoundary,
-          placeholder: !React.isValidElement(placeholder) ? /* @__PURE__ */ jsxRuntime.jsx(
-            box.Box,
+          placeholder: !react.isValidElement(placeholder) ? /* @__PURE__ */ jsxRuntime.jsx(
+            twigsReact.Box,
             {
               css: {
                 position: "absolute",

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

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

@@ -2,8 +2,9 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var twigsReact = require('@sparrowengg/twigs-react');
 var prefixClassName = require('../../utils/prefix-class-name.js');
-var React = require('react');
+var react = require('react');
 var bold = require('./tools/bold.js');
 var code = require('./tools/code.js');
 var codeBlock = require('./tools/code-block.js');
@@ -14,7 +15,6 @@ 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",
@@ -46,7 +46,7 @@ const EditorToolbar = ({
 }) => {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children }) : /* @__PURE__ */ jsxRuntime.jsx(
-    flex.Flex,
+    twigsReact.Flex,
     {
       css: {
         gap: "$1"
@@ -57,7 +57,7 @@ const EditorToolbar = ({
           const item2 = _item;
           return (
             // eslint-disable-next-line react/no-array-index-key
-            /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: item2.renderComponent({ editor }) }, i)
+            /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: item2.renderComponent({ editor }) }, i)
           );
         }
         const item = _item;
@@ -65,7 +65,7 @@ const EditorToolbar = ({
         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)
+          /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(Tool, {}) }, i)
         );
       })
     }

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

@@ -1 +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;;;;"}
+{"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,eAAA;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

@@ -2,11 +2,11 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var twigsReactIcons = require('@sparrowengg/twigs-react-icons');
+var twigsReact = require('@sparrowengg/twigs-react');
 var lexical = require('lexical');
-var clsx = require('../../../react-editor/node_modules/clsx/dist/clsx.js');
+var clsx = require('../../../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;
@@ -32,9 +32,9 @@ const BoldTool = ({ renderButton, buttonProps }) => {
     return renderButton({ editor, active, onChange: handleClick });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
-    iconButton.IconButton,
+    twigsReact.IconButton,
     __spreadValues({
-      icon: /* @__PURE__ */ jsxRuntime.jsx(bold.BoldIcon, {}),
+      icon: /* @__PURE__ */ jsxRuntime.jsx(twigsReactIcons.BoldIcon, {}),
       variant: active ? "solid" : "ghost",
       className: clsx.clsx("twigs-editor-tool-button", {
         "twigs-editor-tool-button--active": active

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

@@ -1 +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;;;;"}
+{"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,wBAAS,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

@@ -4,11 +4,11 @@ var jsxRuntime = require('react/jsx-runtime');
 var code = require('@lexical/code');
 var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
 var selection = require('@lexical/selection');
+var twigsReactIcons = require('@sparrowengg/twigs-react-icons');
+var twigsReact = require('@sparrowengg/twigs-react');
 var lexical = require('lexical');
-var clsx = require('../../../react-editor/node_modules/clsx/dist/clsx.js');
+var clsx = require('../../../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;
@@ -59,9 +59,9 @@ const CodeBlockTool = ({
     return renderButton({ editor, active, onChange: formatCode });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
-    iconButton.IconButton,
+    twigsReact.IconButton,
     __spreadValues({
-      icon: /* @__PURE__ */ jsxRuntime.jsx(codeBlock.CodeBlockIcon, {}),
+      icon: /* @__PURE__ */ jsxRuntime.jsx(twigsReactIcons.CodeBlockIcon, {}),
       variant: active ? "solid" : "ghost",
       color: "default",
       "data-tool": "code-block",

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

@@ -1 +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;;;;"}
+{"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,6BAAc,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

@@ -2,11 +2,11 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var twigsReactIcons = require('@sparrowengg/twigs-react-icons');
+var twigsReact = require('@sparrowengg/twigs-react');
 var lexical = require('lexical');
-var clsx = require('../../../react-editor/node_modules/clsx/dist/clsx.js');
+var clsx = require('../../../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;
@@ -34,9 +34,9 @@ const CodeTool = ({ renderButton, buttonProps }) => {
     return renderButton({ editor, active, onChange: handleClick });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
-    iconButton.IconButton,
+    twigsReact.IconButton,
     __spreadValues({
-      icon: /* @__PURE__ */ jsxRuntime.jsx(code.CodeIcon, {}),
+      icon: /* @__PURE__ */ jsxRuntime.jsx(twigsReactIcons.CodeIcon, {}),
       variant: active ? "solid" : "ghost",
       color: "default",
       onClick: handleClick,

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

@@ -1 +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;;;;"}
+{"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,wBAAS,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/format.js

@@ -4,11 +4,10 @@ var jsxRuntime = require('react/jsx-runtime');
 var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
 var richText = require('@lexical/rich-text');
 var selection = require('@lexical/selection');
+var twigsReact = require('@sparrowengg/twigs-react');
+var twigsReactIcons = require('@sparrowengg/twigs-react-icons');
 var lexical = require('lexical');
 var store = require('../../toolbar-context/store.js');
-var dropdown = require('../../../react-components/dist/es/dropdown/dropdown.js');
-var iconButton = require('../../../react-components/dist/es/button/icon-button.js');
-var textFormat = require('../../../react-icons/dist/es/icons/text-format.js');
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -90,11 +89,11 @@ const FormatTool = ({
   if (renderButton) {
     return renderButton({ editor, active: format, onChange: formatText });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(dropdown.DropdownMenu, __spreadProps(__spreadValues({}, dropdownMenuProps), { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(dropdown.DropdownMenuTrigger, __spreadProps(__spreadValues({ asChild: true }, dropdownMenuTriggerProps), { children: renderDropdownTrigger ? renderDropdownTrigger() : /* @__PURE__ */ jsxRuntime.jsx(
-      iconButton.IconButton,
+  return /* @__PURE__ */ jsxRuntime.jsxs(twigsReact.DropdownMenu, __spreadProps(__spreadValues({}, dropdownMenuProps), { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(twigsReact.DropdownMenuTrigger, __spreadProps(__spreadValues({ asChild: true }, dropdownMenuTriggerProps), { children: renderDropdownTrigger ? renderDropdownTrigger() : /* @__PURE__ */ jsxRuntime.jsx(
+      twigsReact.IconButton,
       __spreadValues({
-        icon: /* @__PURE__ */ jsxRuntime.jsx(textFormat.TextFormatIcon, {}),
+        icon: /* @__PURE__ */ jsxRuntime.jsx(twigsReactIcons.TextFormatIcon, {}),
         variant: "ghost",
         color: "default",
         className: "twigs-editor-tool-button",
@@ -102,13 +101,13 @@ const FormatTool = ({
       }, dropdownMenuTriggerButtonProps)
     ) })),
     /* @__PURE__ */ jsxRuntime.jsxs(
-      dropdown.DropdownMenuContent,
+      twigsReact.DropdownMenuContent,
       __spreadProps(__spreadValues({
         className: "twigs-editor-toolbar__format-options"
       }, dropdownMenuContentProps), {
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            dropdown.DropdownMenuItem,
+            twigsReact.DropdownMenuItem,
             __spreadProps(__spreadValues({
               onClick: formatParagraph
             }, typeof dropdownMenuItemProps === "function" ? dropdownMenuItemProps({ type: "paragraph", formatText }) : dropdownMenuItemProps), {
@@ -117,7 +116,7 @@ const FormatTool = ({
           ),
           Object.keys(headings).map(
             (item) => /* @__PURE__ */ jsxRuntime.jsx(
-              dropdown.DropdownMenuItem,
+              twigsReact.DropdownMenuItem,
               __spreadProps(__spreadValues({
                 onClick: () => formatHeading(item)
               }, typeof dropdownMenuItemProps === "function" ? dropdownMenuItemProps({ type: item, formatText }) : dropdownMenuItemProps), {

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

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