@sparrowengg/twigs-editor-react 0.0.1

package/dist/es/components/dialog-link-editor/link-editor-dialog.js

@@ -0,0 +1,197 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Dialog, DialogContent, DialogTitle } from '../../react-components/dist/es/dialog/dialog.js';
+import { Text } from '../../react-components/dist/es/text/text.js';
+import { IconButton } from '../../react-components/dist/es/button/icon-button.js';
+import { CloseIcon } from '../../react-icons/dist/es/icons/close.js';
+import { Box } from '../../react-components/dist/es/box/box.js';
+import { FormInput } from '../../react-components/dist/es/input/form-input.js';
+import { Flex } from '../../react-components/dist/es/flex/flex.js';
+import { DeleteIcon } from '../../react-icons/dist/es/icons/delete.js';
+import { Button } from '../../react-components/dist/es/button/button.js';
+
+const LinkEditorDialog = ({
+  open,
+  title,
+  errors,
+  linkUrl,
+  linkText,
+  urlLabel,
+  isUpdate,
+  textLabel,
+  saveLabel = "Save",
+  cancelLabel = "Cancel",
+  updateLabel = "Update",
+  errorLabels,
+  closeModal,
+  removeLink,
+  setIsLinkEditMode,
+  handleLinkSubmission
+}) => {
+  var _a, _b;
+  const [editedLinkText, setEditedLinkText] = useState(linkText);
+  const [editedLinkUrl, setEditedLinkUrl] = useState(linkUrl);
+  const monitorInputInteraction = (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      handleLinkSubmission({
+        text: editedLinkText,
+        url: editedLinkUrl
+      });
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      setIsLinkEditMode(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open,
+      size: "sm",
+      onOpenChange: (op) => {
+        if (!op) {
+          closeModal();
+        }
+      },
+      children: /* @__PURE__ */ jsxs(
+        DialogContent,
+        {
+          css: {
+            padding: "0",
+            borderRadius: "2xl"
+          },
+          children: [
+            /* @__PURE__ */ jsxs(
+              DialogTitle,
+              {
+                css: {
+                  padding: "$8 $12",
+                  borderBottom: "1px solid $neutral200",
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(Text, { weight: "bold", size: "lg", children: title }),
+                  /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      onClick: closeModal,
+                      css: {
+                        color: "$neutral800"
+                      },
+                      icon: /* @__PURE__ */ jsx(CloseIcon, {}),
+                      color: "bright",
+                      size: "lg"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              Box,
+              {
+                css: {
+                  padding: "$8 $12"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    FormInput,
+                    {
+                      label: textLabel,
+                      size: "lg",
+                      onChange: (event) => {
+                        setEditedLinkText(event.target.value);
+                      },
+                      onKeyDown: (event) => {
+                        monitorInputInteraction(event);
+                      },
+                      value: editedLinkText,
+                      css: {
+                        boxSizing: "border-box"
+                      },
+                      error: errors.text ? (_a = errorLabels == null ? void 0 : errorLabels.text) != null ? _a : "Please enter a valid text" : void 0
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Box,
+                    {
+                      css: {
+                        marginTop: "$10"
+                      },
+                      children: /* @__PURE__ */ jsx(
+                        FormInput,
+                        {
+                          label: urlLabel,
+                          size: "lg",
+                          onChange: (event) => {
+                            setEditedLinkUrl(event.target.value);
+                          },
+                          onKeyDown: (event) => {
+                            monitorInputInteraction(event);
+                          },
+                          value: editedLinkUrl,
+                          css: {
+                            boxSizing: "border-box"
+                          },
+                          error: errors.url ? (_b = errorLabels == null ? void 0 : errorLabels.url) != null ? _b : "Please enter a valid URL" : void 0
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              Flex,
+              {
+                justifyContent: "space-between",
+                css: {
+                  padding: "$8 $12"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      icon: /* @__PURE__ */ jsx(DeleteIcon, {}),
+                      color: "bright",
+                      size: "lg",
+                      onClick: removeLink
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    Flex,
+                    {
+                      css: {
+                        gap: "$6"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(Button, { color: "default", size: "lg", onClick: closeModal, children: cancelLabel }),
+                        /* @__PURE__ */ jsx(
+                          Button,
+                          {
+                            color: "primary",
+                            size: "lg",
+                            disabled: editedLinkText === linkText && editedLinkUrl === linkUrl,
+                            onClick: () => handleLinkSubmission({
+                              text: editedLinkText,
+                              url: editedLinkUrl
+                            }),
+                            children: isUpdate ? updateLabel : saveLabel
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+
+export { LinkEditorDialog };
+//# sourceMappingURL=link-editor-dialog.js.map

package/dist/es/components/dialog-link-editor/link-editor-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-editor-dialog.js","sources":["../../../../src/components/dialog-link-editor/link-editor-dialog.tsx"],"sourcesContent":["import {\n  Box,\n  Button,\n  Dialog,\n  DialogContent,\n  DialogTitle,\n  Flex,\n  FormInput,\n  IconButton,\n  Text\n} from '@sparrowengg/twigs-react';\nimport { CloseIcon, DeleteIcon } from '@sparrowengg/twigs-react-icons';\nimport React, { useState } from 'react';\n\nexport const LinkEditorDialog = ({\n  open,\n  title,\n  errors,\n  linkUrl,\n  linkText,\n  urlLabel,\n  isUpdate,\n  textLabel,\n  saveLabel = 'Save',\n  cancelLabel = 'Cancel',\n  updateLabel = 'Update',\n  errorLabels,\n  closeModal,\n  removeLink,\n  setIsLinkEditMode,\n  handleLinkSubmission\n}: {\n  open: boolean;\n  title: string;\n  linkUrl: string;\n  linkText: string;\n  urlLabel: string;\n  isUpdate?: boolean;\n  textLabel: string;\n  saveLabel?: string;\n  cancelLabel?: string;\n  updateLabel?: string;\n  errorLabels?: {\n    text?: string;\n    url?: string;\n  };\n  closeModal: () => void;\n  removeLink: () => void;\n  handleLinkSubmission: ({ text, url }: { text: string; url: string }) => void;\n  setIsLinkEditMode: (isEditMode: boolean) => void;\n  errors: {\n    text: boolean;\n    url: boolean;\n  };\n}) => {\n  const [editedLinkText, setEditedLinkText] = useState(linkText);\n  const [editedLinkUrl, setEditedLinkUrl] = useState(linkUrl);\n\n  const monitorInputInteraction = (\n    event: React.KeyboardEvent<HTMLInputElement>\n  ) => {\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      handleLinkSubmission({\n        text: editedLinkText,\n        url: editedLinkUrl\n      });\n    } else if (event.key === 'Escape') {\n      event.preventDefault();\n      setIsLinkEditMode(false);\n    }\n  };\n\n  return (\n    <Dialog\n      open={open}\n      size=\"sm\"\n      onOpenChange={(op) => {\n        if (!op) {\n          closeModal();\n        }\n      }}\n    >\n      <DialogContent\n        css={{\n          padding: '0',\n          borderRadius: '2xl'\n        }}\n      >\n        <DialogTitle\n          css={{\n            padding: '$8 $12',\n            borderBottom: '1px solid $neutral200',\n            display: 'flex',\n            justifyContent: 'space-between',\n            alignItems: 'center'\n          }}\n        >\n          <Text weight=\"bold\" size=\"lg\">\n            {title}\n          </Text>\n          <IconButton\n            onClick={closeModal}\n            css={{\n              color: '$neutral800'\n            }}\n            icon={<CloseIcon />}\n            color=\"bright\"\n            size=\"lg\"\n          />\n        </DialogTitle>\n        <Box\n          css={{\n            padding: '$8 $12'\n          }}\n        >\n          <FormInput\n            label={textLabel}\n            size=\"lg\"\n            onChange={(event) => {\n              setEditedLinkText(event.target.value);\n            }}\n            onKeyDown={(event) => {\n              monitorInputInteraction(event);\n            }}\n            value={editedLinkText}\n            css={{\n              boxSizing: 'border-box'\n            }}\n            error={\n              errors.text\n                ? errorLabels?.text ?? 'Please enter a valid text'\n                : undefined\n            }\n          />\n          <Box\n            css={{\n              marginTop: '$10'\n            }}\n          >\n            <FormInput\n              label={urlLabel}\n              size=\"lg\"\n              onChange={(event) => {\n                setEditedLinkUrl(event.target.value);\n              }}\n              onKeyDown={(event) => {\n                monitorInputInteraction(event);\n              }}\n              value={editedLinkUrl}\n              css={{\n                boxSizing: 'border-box'\n              }}\n              error={\n                errors.url\n                  ? errorLabels?.url ?? 'Please enter a valid URL'\n                  : undefined\n              }\n            />\n          </Box>\n        </Box>\n        <Flex\n          justifyContent=\"space-between\"\n          css={{\n            padding: '$8 $12'\n          }}\n        >\n          <IconButton\n            icon={<DeleteIcon />}\n            color=\"bright\"\n            size=\"lg\"\n            onClick={removeLink}\n          />\n          <Flex\n            css={{\n              gap: '$6'\n            }}\n          >\n            <Button color=\"default\" size=\"lg\" onClick={closeModal}>\n              {cancelLabel}\n            </Button>\n            <Button\n              color=\"primary\"\n              size=\"lg\"\n              disabled={\n                editedLinkText === linkText && editedLinkUrl === linkUrl\n              }\n              onClick={() => handleLinkSubmission({\n                text: editedLinkText,\n                url: editedLinkUrl\n              })}\n            >\n              {isUpdate ? updateLabel : saveLabel}\n            </Button>\n          </Flex>\n        </Flex>\n      </DialogContent>\n    </Dialog>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/es/components/dialog-link-editor/link-tooltip.js

@@ -0,0 +1,120 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { prefixClassName } from '../../utils/prefix-class-name.js';
+import { createPortal } from 'react-dom';
+import { Box } from '../../react-components/dist/es/box/box.js';
+import { LinkIcon } from '../../react-icons/dist/es/icons/link.js';
+import { Link } from '../../react-components/dist/es/link/link.js';
+import { IconButton } from '../../react-components/dist/es/button/icon-button.js';
+import { PencilIcon } from '../../react-icons/dist/es/icons/pencil.js';
+import { DeleteIcon } from '../../react-icons/dist/es/icons/delete.js';
+
+const LinkTooltip = ({
+  linkUrl,
+  anchorElem,
+  containerRef,
+  handleEdit,
+  handleDelete,
+  https
+}) => {
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        ref: containerRef,
+        className: prefixClassName("link-tooltip"),
+        css: {
+          position: "absolute",
+          left: 0,
+          top: 0,
+          opacity: 0,
+          backgroundColor: "$black900",
+          maxWidth: 280,
+          borderRadius: "$lg",
+          display: "flex",
+          padding: "$2 $4",
+          alignItems: "center",
+          gap: "$3"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              className: prefixClassName("link-tooltip__icon"),
+              css: {
+                flexShrink: 0,
+                svg: {
+                  display: "block"
+                }
+              },
+              children: /* @__PURE__ */ jsx(LinkIcon, { color: "#fff", size: 16 })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Link,
+            {
+              className: prefixClassName("link-tooltip__link"),
+              css: {
+                color: "$white900",
+                textDecoration: "underline",
+                fontSize: "$sm",
+                textOverflow: "ellipsis",
+                overflow: "hidden"
+              },
+              target: "_blank",
+              referrerPolicy: "no-referrer",
+              href: https && !linkUrl.startsWith("https://") ? `https://${linkUrl}` : linkUrl,
+              children: linkUrl
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              className: prefixClassName("link-tooltip__actions"),
+              css: {
+                display: "flex",
+                borderLeft: "1px solid $white600",
+                margin: "$2",
+                paddingLeft: "$4",
+                flexShrink: 0
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    icon: /* @__PURE__ */ jsx(PencilIcon, { strokeWidth: 2 }),
+                    size: "xs",
+                    color: "light",
+                    css: {
+                      backgroundColor: "transparent"
+                    },
+                    onClick: () => {
+                      handleEdit();
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    icon: /* @__PURE__ */ jsx(DeleteIcon, { strokeWidth: 2 }),
+                    size: "xs",
+                    color: "light",
+                    css: {
+                      backgroundColor: "transparent"
+                    },
+                    onClick: () => {
+                      handleDelete();
+                    }
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    anchorElem
+  );
+};
+
+export { LinkTooltip };
+//# sourceMappingURL=link-tooltip.js.map

package/dist/es/components/dialog-link-editor/link-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-tooltip.js","sources":["../../../../src/components/dialog-link-editor/link-tooltip.tsx"],"sourcesContent":["import { Box, IconButton, Link } from '@sparrowengg/twigs-react';\nimport {\n  DeleteIcon,\n  LinkIcon,\n  PencilIcon\n} from '@sparrowengg/twigs-react-icons';\nimport { prefixClassName } from '@src/utils/prefix-class-name';\nimport React from 'react';\nimport { createPortal } from 'react-dom';\n\nexport const LinkTooltip = ({\n  linkUrl,\n  anchorElem,\n  containerRef,\n  handleEdit,\n  handleDelete,\n  https\n}: {\n  anchorElem: HTMLElement;\n  containerRef: React.RefObject<HTMLDivElement>;\n  linkUrl: string;\n  handleEdit: () => void;\n  handleDelete: () => void;\n  https: boolean;\n}) => {\n  return createPortal(\n    <Box\n      ref={containerRef}\n      className={prefixClassName('link-tooltip')}\n      css={{\n        position: 'absolute',\n        left: 0,\n        top: 0,\n        opacity: 0,\n        backgroundColor: '$black900',\n        maxWidth: 280,\n        borderRadius: '$lg',\n        display: 'flex',\n        padding: '$2 $4',\n        alignItems: 'center',\n        gap: '$3'\n      }}\n    >\n      <Box\n        className={prefixClassName('link-tooltip__icon')}\n        css={{\n          flexShrink: 0,\n\n          svg: {\n            display: 'block'\n          }\n        }}\n      >\n        <LinkIcon color=\"#fff\" size={16} />\n      </Box>\n      <Link\n        className={prefixClassName('link-tooltip__link')}\n        css={{\n          color: '$white900',\n          textDecoration: 'underline',\n          fontSize: '$sm',\n          textOverflow: 'ellipsis',\n          overflow: 'hidden'\n        }}\n        target=\"_blank\"\n        referrerPolicy=\"no-referrer\"\n        href={\n          https && !linkUrl.startsWith('https://')\n            ? `https://${linkUrl}`\n            : linkUrl\n        }\n      >\n        {linkUrl}\n      </Link>\n      <Box\n        className={prefixClassName('link-tooltip__actions')}\n        css={{\n          display: 'flex',\n          borderLeft: '1px solid $white600',\n          margin: '$2',\n          paddingLeft: '$4',\n          flexShrink: 0\n        }}\n      >\n        <IconButton\n          icon={<PencilIcon strokeWidth={2} />}\n          size=\"xs\"\n          color=\"light\"\n          css={{\n            backgroundColor: 'transparent'\n          }}\n          onClick={() => {\n            handleEdit();\n          }}\n        />\n        <IconButton\n          icon={<DeleteIcon strokeWidth={2} />}\n          size=\"xs\"\n          color=\"light\"\n          css={{\n            backgroundColor: 'transparent'\n          }}\n          onClick={() => {\n            handleDelete();\n          }}\n        />\n      </Box>\n    </Box>,\n    anchorElem\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,300 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { mergeRegister } from '@lexical/utils';
+import { $getSelection, $isRangeSelection, $isTextNode, $isParagraphNode, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_LOW } from 'lexical';
+import { useState, useCallback, useEffect, useRef, Fragment as Fragment$1 } from 'react';
+import { createPortal } from 'react-dom';
+import { getDOMRangeRect } from '../../utils/get-dom-range-rect.js';
+import { getSelectedNode } from '../../utils/get-selected-node.js';
+import { setFloatingElemPosition } from '../../utils/set-floating-elem-position.js';
+import { prefixClassName } from '../../utils/prefix-class-name.js';
+import { BoldTool } from '../toolbar/tools/bold.js';
+import '../toolbar-context/store.js';
+import '@lexical/code';
+import '@lexical/selection';
+import { ItalicTool } from '../toolbar/tools/italic.js';
+import { LinkTool } from '../toolbar/tools/link.js';
+import '@lexical/list';
+import { UnderlineTool } from '../toolbar/tools/underline.js';
+import '@lexical/rich-text';
+import { Box } from '../../react-components/dist/es/box/box.js';
+import { Flex } from '../../react-components/dist/es/flex/flex.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 defaultTools = [
+  "bold",
+  "italic",
+  "underline",
+  "link"
+];
+const toolMapping = {
+  bold: BoldTool,
+  italic: ItalicTool,
+  underline: UnderlineTool,
+  link: LinkTool
+};
+const FloatingToolbarContainer = ({
+  editor,
+  anchorElem,
+  children,
+  tools = defaultTools,
+  containerProps
+}) => {
+  const popupCharStylesEditorRef = useRef(null);
+  function mouseMoveListener(e) {
+    if ((popupCharStylesEditorRef == null ? void 0 : popupCharStylesEditorRef.current) && (e.buttons === 1 || e.buttons === 3)) {
+      if (popupCharStylesEditorRef.current.style.pointerEvents !== "none") {
+        const x = e.clientX;
+        const y = e.clientY;
+        const elementUnderMouse = document.elementFromPoint(x, y);
+        if (!popupCharStylesEditorRef.current.contains(elementUnderMouse)) {
+          popupCharStylesEditorRef.current.style.pointerEvents = "none";
+        }
+      }
+    }
+  }
+  function mouseUpListener() {
+    if (popupCharStylesEditorRef == null ? void 0 : popupCharStylesEditorRef.current) {
+      if (popupCharStylesEditorRef.current.style.pointerEvents !== "auto") {
+        popupCharStylesEditorRef.current.style.pointerEvents = "auto";
+      }
+    }
+  }
+  useEffect(() => {
+    if (popupCharStylesEditorRef == null ? void 0 : popupCharStylesEditorRef.current) {
+      document.addEventListener("mousemove", mouseMoveListener);
+      document.addEventListener("mouseup", mouseUpListener);
+      return () => {
+        document.removeEventListener("mousemove", mouseMoveListener);
+        document.removeEventListener("mouseup", mouseUpListener);
+      };
+    }
+  }, [popupCharStylesEditorRef]);
+  const updateFloatingToolbar = useCallback(() => {
+    const selection = $getSelection();
+    const popupCharStylesEditorElem = popupCharStylesEditorRef.current;
+    const nativeSelection = window.getSelection();
+    if (popupCharStylesEditorElem === null) {
+      return;
+    }
+    const rootElement = editor.getRootElement();
+    if (selection !== null && nativeSelection !== null && !nativeSelection.isCollapsed && rootElement !== null && rootElement.contains(nativeSelection.anchorNode)) {
+      const rangeRect = getDOMRangeRect(nativeSelection, rootElement);
+      setFloatingElemPosition(rangeRect, popupCharStylesEditorElem, anchorElem);
+    }
+  }, [editor, anchorElem]);
+  useEffect(() => {
+    const scrollerElem = anchorElem.parentElement;
+    const update = () => {
+      editor.getEditorState().read(() => {
+        updateFloatingToolbar();
+      });
+    };
+    window.addEventListener("resize", update);
+    if (scrollerElem) {
+      scrollerElem.addEventListener("scroll", update);
+    }
+    return () => {
+      window.removeEventListener("resize", update);
+      if (scrollerElem) {
+        scrollerElem.removeEventListener("scroll", update);
+      }
+    };
+  }, [editor, updateFloatingToolbar, anchorElem]);
+  useEffect(() => {
+    editor.getEditorState().read(() => {
+      updateFloatingToolbar();
+    });
+    return mergeRegister(
+      editor.registerUpdateListener(({ editorState }) => {
+        editorState.read(() => {
+          updateFloatingToolbar();
+        });
+      }),
+      editor.registerCommand(
+        SELECTION_CHANGE_COMMAND,
+        () => {
+          updateFloatingToolbar();
+          return false;
+        },
+        COMMAND_PRIORITY_LOW
+      )
+    );
+  }, [editor, updateFloatingToolbar]);
+  return /* @__PURE__ */ jsx(
+    Box,
+    __spreadProps(__spreadValues({
+      ref: popupCharStylesEditorRef,
+      className: prefixClassName("floating-toolbar")
+    }, containerProps), {
+      css: __spreadValues({
+        position: "absolute",
+        left: 0,
+        top: 0,
+        backgroundColor: "$black900",
+        borderRadius: "$md",
+        display: "flex",
+        "&::after": {
+          content: "",
+          position: "absolute",
+          top: "-8px",
+          left: "8px",
+          width: "0",
+          height: "0",
+          borderLeft: "8px solid transparent",
+          borderRight: "8px solid transparent",
+          borderBottom: "8px solid $black900"
+        },
+        "&.position--top::after": {
+          top: "auto",
+          bottom: "-8px",
+          borderBottom: "none",
+          borderTop: "8px solid $black900"
+        }
+      }, containerProps == null ? void 0 : containerProps.css),
+      children: children ? /* @__PURE__ */ jsx(Fragment, { children }) : /* @__PURE__ */ jsx(
+        Flex,
+        {
+          alignItems: "center",
+          css: {
+            padding: "$2",
+            gap: "$1",
+            ".twigs-editor-tool-button": {
+              backgroundColor: "transparent",
+              color: "$neutral100",
+              "&:hover": {
+                backgroundColorOpacity: ["$white100", 0.2],
+                color: "$neutral100"
+              },
+              "&--active": {
+                backgroundColorOpacity: ["$white100", 0.3]
+              }
+            }
+          },
+          children: tools.map((_item, i) => {
+            if (typeof _item === "object" && _item.renderComponent) {
+              const item2 = _item;
+              return (
+                // eslint-disable-next-line react/no-array-index-key
+                /* @__PURE__ */ jsx(Fragment$1, { children: item2.renderComponent({ editor }) }, i)
+              );
+            }
+            const item = _item;
+            const Tool = toolMapping[item];
+            if (!Tool) return null;
+            return (
+              // eslint-disable-next-line react/no-array-index-key
+              /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(Tool, {}) }, i)
+            );
+          })
+        }
+      )
+    })
+  );
+};
+function useFloatingTextFormatToolbar({
+  editor,
+  anchorElem,
+  children,
+  tools,
+  containerProps
+}) {
+  const [isText, setIsText] = useState(false);
+  const updatePopup = useCallback(() => {
+    editor.getEditorState().read(() => {
+      if (editor.isComposing()) {
+        return;
+      }
+      const selection = $getSelection();
+      const nativeSelection = window.getSelection();
+      const rootElement = editor.getRootElement();
+      if (nativeSelection !== null && (!$isRangeSelection(selection) || rootElement === null || !rootElement.contains(nativeSelection.anchorNode))) {
+        setIsText(false);
+        return;
+      }
+      if (!$isRangeSelection(selection)) {
+        return;
+      }
+      const node = getSelectedNode(selection);
+      if (selection.getTextContent() !== "") {
+        setIsText($isTextNode(node) || $isParagraphNode(node));
+      } else {
+        setIsText(false);
+      }
+      const rawTextContent = selection.getTextContent().replace(/\n/g, "");
+      if (!selection.isCollapsed() && rawTextContent === "") {
+        setIsText(false);
+      }
+    });
+  }, [editor]);
+  useEffect(() => {
+    document.addEventListener("selectionchange", updatePopup);
+    return () => {
+      document.removeEventListener("selectionchange", updatePopup);
+    };
+  }, [updatePopup]);
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerUpdateListener(() => {
+        updatePopup();
+      }),
+      editor.registerRootListener(() => {
+        if (editor.getRootElement() === null) {
+          setIsText(false);
+        }
+      })
+    );
+  }, [editor, updatePopup]);
+  if (!isText || !anchorElem) {
+    return null;
+  }
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      FloatingToolbarContainer,
+      {
+        editor,
+        anchorElem,
+        tools,
+        containerProps,
+        children
+      }
+    ),
+    anchorElem
+  );
+}
+const EditorFloatingToolbar = ({
+  anchorElem = document.body,
+  tools,
+  children,
+  containerProps
+}) => {
+  const [editor] = useLexicalComposerContext();
+  return useFloatingTextFormatToolbar({
+    editor,
+    anchorElem,
+    tools,
+    children,
+    containerProps
+  });
+};
+
+export { EditorFloatingToolbar };
+//# sourceMappingURL=floating-toolbar.js.map