@sparrowengg/twigs-editor-react 0.0.1

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

@@ -0,0 +1,199 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var dialog = require('../../react-components/dist/es/dialog/dialog.js');
+var text = require('../../react-components/dist/es/text/text.js');
+var iconButton = require('../../react-components/dist/es/button/icon-button.js');
+var close = require('../../react-icons/dist/es/icons/close.js');
+var box = require('../../react-components/dist/es/box/box.js');
+var formInput = require('../../react-components/dist/es/input/form-input.js');
+var flex = require('../../react-components/dist/es/flex/flex.js');
+var _delete = require('../../react-icons/dist/es/icons/delete.js');
+var button = require('../../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] = React.useState(linkText);
+  const [editedLinkUrl, setEditedLinkUrl] = React.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__ */ jsxRuntime.jsx(
+    dialog.Dialog,
+    {
+      open,
+      size: "sm",
+      onOpenChange: (op) => {
+        if (!op) {
+          closeModal();
+        }
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        dialog.DialogContent,
+        {
+          css: {
+            padding: "0",
+            borderRadius: "2xl"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              dialog.DialogTitle,
+              {
+                css: {
+                  padding: "$8 $12",
+                  borderBottom: "1px solid $neutral200",
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(text.Text, { weight: "bold", size: "lg", children: title }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    iconButton.IconButton,
+                    {
+                      onClick: closeModal,
+                      css: {
+                        color: "$neutral800"
+                      },
+                      icon: /* @__PURE__ */ jsxRuntime.jsx(close.CloseIcon, {}),
+                      color: "bright",
+                      size: "lg"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              box.Box,
+              {
+                css: {
+                  padding: "$8 $12"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    formInput.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__ */ jsxRuntime.jsx(
+                    box.Box,
+                    {
+                      css: {
+                        marginTop: "$10"
+                      },
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        formInput.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__ */ jsxRuntime.jsxs(
+              flex.Flex,
+              {
+                justifyContent: "space-between",
+                css: {
+                  padding: "$8 $12"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    iconButton.IconButton,
+                    {
+                      icon: /* @__PURE__ */ jsxRuntime.jsx(_delete.DeleteIcon, {}),
+                      color: "bright",
+                      size: "lg",
+                      onClick: removeLink
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    flex.Flex,
+                    {
+                      css: {
+                        gap: "$6"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(button.Button, { color: "default", size: "lg", onClick: closeModal, children: cancelLabel }),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          button.Button,
+                          {
+                            color: "primary",
+                            size: "lg",
+                            disabled: editedLinkText === linkText && editedLinkUrl === linkUrl,
+                            onClick: () => handleLinkSubmission({
+                              text: editedLinkText,
+                              url: editedLinkUrl
+                            }),
+                            children: isUpdate ? updateLabel : saveLabel
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+
+exports.LinkEditorDialog = LinkEditorDialog;
+//# sourceMappingURL=link-editor-dialog.js.map

package/dist/cjs/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":["useState","jsx","Dialog","jsxs","DialogContent","DialogTitle","Text","IconButton","CloseIcon","Box","FormInput","Flex","DeleteIcon","Button"],"mappings":";;;;;;;;;;;;;;AAcO,MAAM,mBAAmB,CAAC;AAAA,EAC/B,IAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAY,GAAA,MAAA;AAAA,EACZ,WAAc,GAAA,QAAA;AAAA,EACd,WAAc,GAAA,QAAA;AAAA,EACd,WAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAA;AAAA,EACA,iBAAA;AAAA,EACA;AACF,CAuBM,KAAA;AAtDN,EAAA,IAAA,EAAA,EAAA,EAAA;AAuDE,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAIA,eAAS,QAAQ,CAAA;AAC7D,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAIA,eAAS,OAAO,CAAA;AAE1D,EAAM,MAAA,uBAAA,GAA0B,CAC9B,KACG,KAAA;AACH,IAAI,IAAA,KAAA,CAAM,QAAQ,OAAS,EAAA;AACzB,MAAA,KAAA,CAAM,cAAe,EAAA;AACrB,MAAqB,oBAAA,CAAA;AAAA,QACnB,IAAM,EAAA,cAAA;AAAA,QACN,GAAK,EAAA;AAAA,OACN,CAAA;AAAA,KACH,MAAA,IAAW,KAAM,CAAA,GAAA,KAAQ,QAAU,EAAA;AACjC,MAAA,KAAA,CAAM,cAAe,EAAA;AACrB,MAAA,iBAAA,CAAkB,KAAK,CAAA;AAAA;AACzB,GACF;AAEA,EACE,uBAAAC,cAAA;AAAA,IAACC,aAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,IAAK,EAAA,IAAA;AAAA,MACL,YAAA,EAAc,CAAC,EAAO,KAAA;AACpB,QAAA,IAAI,CAAC,EAAI,EAAA;AACP,UAAW,UAAA,EAAA;AAAA;AACb,OACF;AAAA,MAEA,QAAA,kBAAAC,eAAA;AAAA,QAACC,oBAAA;AAAA,QAAA;AAAA,UACC,GAAK,EAAA;AAAA,YACH,OAAS,EAAA,GAAA;AAAA,YACT,YAAc,EAAA;AAAA,WAChB;AAAA,UAEA,QAAA,EAAA;AAAA,4BAAAD,eAAA;AAAA,cAACE,kBAAA;AAAA,cAAA;AAAA,gBACC,GAAK,EAAA;AAAA,kBACH,OAAS,EAAA,QAAA;AAAA,kBACT,YAAc,EAAA,uBAAA;AAAA,kBACd,OAAS,EAAA,MAAA;AAAA,kBACT,cAAgB,EAAA,eAAA;AAAA,kBAChB,UAAY,EAAA;AAAA,iBACd;AAAA,gBAEA,QAAA,EAAA;AAAA,kCAAAJ,cAAA,CAACK,SAAK,EAAA,EAAA,MAAA,EAAO,MAAO,EAAA,IAAA,EAAK,MACtB,QACH,EAAA,KAAA,EAAA,CAAA;AAAA,kCACAL,cAAA;AAAA,oBAACM,qBAAA;AAAA,oBAAA;AAAA,sBACC,OAAS,EAAA,UAAA;AAAA,sBACT,GAAK,EAAA;AAAA,wBACH,KAAO,EAAA;AAAA,uBACT;AAAA,sBACA,IAAA,iCAAOC,eAAU,EAAA,EAAA,CAAA;AAAA,sBACjB,KAAM,EAAA,QAAA;AAAA,sBACN,IAAK,EAAA;AAAA;AAAA;AACP;AAAA;AAAA,aACF;AAAA,4BACAL,eAAA;AAAA,cAACM,OAAA;AAAA,cAAA;AAAA,gBACC,GAAK,EAAA;AAAA,kBACH,OAAS,EAAA;AAAA,iBACX;AAAA,gBAEA,QAAA,EAAA;AAAA,kCAAAR,cAAA;AAAA,oBAACS,mBAAA;AAAA,oBAAA;AAAA,sBACC,KAAO,EAAA,SAAA;AAAA,sBACP,IAAK,EAAA,IAAA;AAAA,sBACL,QAAA,EAAU,CAAC,KAAU,KAAA;AACnB,wBAAkB,iBAAA,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA,uBACtC;AAAA,sBACA,SAAA,EAAW,CAAC,KAAU,KAAA;AACpB,wBAAA,uBAAA,CAAwB,KAAK,CAAA;AAAA,uBAC/B;AAAA,sBACA,KAAO,EAAA,cAAA;AAAA,sBACP,GAAK,EAAA;AAAA,wBACH,SAAW,EAAA;AAAA,uBACb;AAAA,sBACA,OACE,MAAO,CAAA,IAAA,GAAA,CACH,EAAa,GAAA,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAA,IAAA,KAAb,YAAqB,2BACrB,GAAA;AAAA;AAAA,mBAER;AAAA,kCACAT,cAAA;AAAA,oBAACQ,OAAA;AAAA,oBAAA;AAAA,sBACC,GAAK,EAAA;AAAA,wBACH,SAAW,EAAA;AAAA,uBACb;AAAA,sBAEA,QAAA,kBAAAR,cAAA;AAAA,wBAACS,mBAAA;AAAA,wBAAA;AAAA,0BACC,KAAO,EAAA,QAAA;AAAA,0BACP,IAAK,EAAA,IAAA;AAAA,0BACL,QAAA,EAAU,CAAC,KAAU,KAAA;AACnB,4BAAiB,gBAAA,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA,2BACrC;AAAA,0BACA,SAAA,EAAW,CAAC,KAAU,KAAA;AACpB,4BAAA,uBAAA,CAAwB,KAAK,CAAA;AAAA,2BAC/B;AAAA,0BACA,KAAO,EAAA,aAAA;AAAA,0BACP,GAAK,EAAA;AAAA,4BACH,SAAW,EAAA;AAAA,2BACb;AAAA,0BACA,OACE,MAAO,CAAA,GAAA,GAAA,CACH,EAAa,GAAA,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAA,GAAA,KAAb,YAAoB,0BACpB,GAAA;AAAA;AAAA;AAER;AAAA;AACF;AAAA;AAAA,aACF;AAAA,4BACAP,eAAA;AAAA,cAACQ,SAAA;AAAA,cAAA;AAAA,gBACC,cAAe,EAAA,eAAA;AAAA,gBACf,GAAK,EAAA;AAAA,kBACH,OAAS,EAAA;AAAA,iBACX;AAAA,gBAEA,QAAA,EAAA;AAAA,kCAAAV,cAAA;AAAA,oBAACM,qBAAA;AAAA,oBAAA;AAAA,sBACC,IAAA,iCAAOK,kBAAW,EAAA,EAAA,CAAA;AAAA,sBAClB,KAAM,EAAA,QAAA;AAAA,sBACN,IAAK,EAAA,IAAA;AAAA,sBACL,OAAS,EAAA;AAAA;AAAA,mBACX;AAAA,kCACAT,eAAA;AAAA,oBAACQ,SAAA;AAAA,oBAAA;AAAA,sBACC,GAAK,EAAA;AAAA,wBACH,GAAK,EAAA;AAAA,uBACP;AAAA,sBAEA,QAAA,EAAA;AAAA,wCAAAV,cAAA,CAACY,iBAAO,KAAM,EAAA,SAAA,EAAU,MAAK,IAAK,EAAA,OAAA,EAAS,YACxC,QACH,EAAA,WAAA,EAAA,CAAA;AAAA,wCACAZ,cAAA;AAAA,0BAACY,aAAA;AAAA,0BAAA;AAAA,4BACC,KAAM,EAAA,SAAA;AAAA,4BACN,IAAK,EAAA,IAAA;AAAA,4BACL,QAAA,EACE,cAAmB,KAAA,QAAA,IAAY,aAAkB,KAAA,OAAA;AAAA,4BAEnD,OAAA,EAAS,MAAM,oBAAqB,CAAA;AAAA,8BAClC,IAAM,EAAA,cAAA;AAAA,8BACN,GAAK,EAAA;AAAA,6BACN,CAAA;AAAA,4BAEA,qBAAW,WAAc,GAAA;AAAA;AAAA;AAC5B;AAAA;AAAA;AACF;AAAA;AAAA;AACF;AAAA;AAAA;AACF;AAAA,GACF;AAEJ;;;;"}

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

@@ -0,0 +1,122 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var prefixClassName = require('../../utils/prefix-class-name.js');
+var ReactDOM__default = require('react-dom');
+var box = require('../../react-components/dist/es/box/box.js');
+var link = require('../../react-icons/dist/es/icons/link.js');
+var link$1 = require('../../react-components/dist/es/link/link.js');
+var iconButton = require('../../react-components/dist/es/button/icon-button.js');
+var pencil = require('../../react-icons/dist/es/icons/pencil.js');
+var _delete = require('../../react-icons/dist/es/icons/delete.js');
+
+const LinkTooltip = ({
+  linkUrl,
+  anchorElem,
+  containerRef,
+  handleEdit,
+  handleDelete,
+  https
+}) => {
+  return ReactDOM__default.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      box.Box,
+      {
+        ref: containerRef,
+        className: prefixClassName.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__ */ jsxRuntime.jsx(
+            box.Box,
+            {
+              className: prefixClassName.prefixClassName("link-tooltip__icon"),
+              css: {
+                flexShrink: 0,
+                svg: {
+                  display: "block"
+                }
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(link.LinkIcon, { color: "#fff", size: 16 })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            link$1.Link,
+            {
+              className: prefixClassName.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__ */ jsxRuntime.jsxs(
+            box.Box,
+            {
+              className: prefixClassName.prefixClassName("link-tooltip__actions"),
+              css: {
+                display: "flex",
+                borderLeft: "1px solid $white600",
+                margin: "$2",
+                paddingLeft: "$4",
+                flexShrink: 0
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  iconButton.IconButton,
+                  {
+                    icon: /* @__PURE__ */ jsxRuntime.jsx(pencil.PencilIcon, { strokeWidth: 2 }),
+                    size: "xs",
+                    color: "light",
+                    css: {
+                      backgroundColor: "transparent"
+                    },
+                    onClick: () => {
+                      handleEdit();
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  iconButton.IconButton,
+                  {
+                    icon: /* @__PURE__ */ jsxRuntime.jsx(_delete.DeleteIcon, { strokeWidth: 2 }),
+                    size: "xs",
+                    color: "light",
+                    css: {
+                      backgroundColor: "transparent"
+                    },
+                    onClick: () => {
+                      handleDelete();
+                    }
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    anchorElem
+  );
+};
+
+exports.LinkTooltip = LinkTooltip;
+//# sourceMappingURL=link-tooltip.js.map

package/dist/cjs/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":["createPortal","jsxs","Box","prefixClassName","jsx","LinkIcon","Link","IconButton","PencilIcon","DeleteIcon"],"mappings":"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"}

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

@@ -0,0 +1,302 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var utils = require('@lexical/utils');
+var lexical = require('lexical');
+var React = require('react');
+var ReactDOM__default = 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('../toolbar-context/store.js');
+require('@lexical/code');
+require('@lexical/selection');
+var italic = require('../toolbar/tools/italic.js');
+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;
+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: bold.BoldTool,
+  italic: italic.ItalicTool,
+  underline: underline.UnderlineTool,
+  link: link.LinkTool
+};
+const FloatingToolbarContainer = ({
+  editor,
+  anchorElem,
+  children,
+  tools = defaultTools,
+  containerProps
+}) => {
+  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") {
+        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";
+      }
+    }
+  }
+  React.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 = React.useCallback(() => {
+    const selection = lexical.$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.getDOMRangeRect(nativeSelection, rootElement);
+      setFloatingElemPosition.setFloatingElemPosition(rangeRect, popupCharStylesEditorElem, anchorElem);
+    }
+  }, [editor, anchorElem]);
+  React.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]);
+  React.useEffect(() => {
+    editor.getEditorState().read(() => {
+      updateFloatingToolbar();
+    });
+    return utils.mergeRegister(
+      editor.registerUpdateListener(({ editorState }) => {
+        editorState.read(() => {
+          updateFloatingToolbar();
+        });
+      }),
+      editor.registerCommand(
+        lexical.SELECTION_CHANGE_COMMAND,
+        () => {
+          updateFloatingToolbar();
+          return false;
+        },
+        lexical.COMMAND_PRIORITY_LOW
+      )
+    );
+  }, [editor, updateFloatingToolbar]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    box.Box,
+    __spreadProps(__spreadValues({
+      ref: popupCharStylesEditorRef,
+      className: prefixClassName.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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children }) : /* @__PURE__ */ jsxRuntime.jsx(
+        flex.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__ */ jsxRuntime.jsx(React.Fragment, { children: item2.renderComponent({ editor }) }, i)
+              );
+            }
+            const item = _item;
+            const Tool = toolMapping[item];
+            if (!Tool) return null;
+            return (
+              // eslint-disable-next-line react/no-array-index-key
+              /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(Tool, {}) }, i)
+            );
+          })
+        }
+      )
+    })
+  );
+};
+function useFloatingTextFormatToolbar({
+  editor,
+  anchorElem,
+  children,
+  tools,
+  containerProps
+}) {
+  const [isText, setIsText] = React.useState(false);
+  const updatePopup = React.useCallback(() => {
+    editor.getEditorState().read(() => {
+      if (editor.isComposing()) {
+        return;
+      }
+      const selection = lexical.$getSelection();
+      const nativeSelection = window.getSelection();
+      const rootElement = editor.getRootElement();
+      if (nativeSelection !== null && (!lexical.$isRangeSelection(selection) || rootElement === null || !rootElement.contains(nativeSelection.anchorNode))) {
+        setIsText(false);
+        return;
+      }
+      if (!lexical.$isRangeSelection(selection)) {
+        return;
+      }
+      const node = getSelectedNode.getSelectedNode(selection);
+      if (selection.getTextContent() !== "") {
+        setIsText(lexical.$isTextNode(node) || lexical.$isParagraphNode(node));
+      } else {
+        setIsText(false);
+      }
+      const rawTextContent = selection.getTextContent().replace(/\n/g, "");
+      if (!selection.isCollapsed() && rawTextContent === "") {
+        setIsText(false);
+      }
+    });
+  }, [editor]);
+  React.useEffect(() => {
+    document.addEventListener("selectionchange", updatePopup);
+    return () => {
+      document.removeEventListener("selectionchange", updatePopup);
+    };
+  }, [updatePopup]);
+  React.useEffect(() => {
+    return utils.mergeRegister(
+      editor.registerUpdateListener(() => {
+        updatePopup();
+      }),
+      editor.registerRootListener(() => {
+        if (editor.getRootElement() === null) {
+          setIsText(false);
+        }
+      })
+    );
+  }, [editor, updatePopup]);
+  if (!isText || !anchorElem) {
+    return null;
+  }
+  return ReactDOM__default.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      FloatingToolbarContainer,
+      {
+        editor,
+        anchorElem,
+        tools,
+        containerProps,
+        children
+      }
+    ),
+    anchorElem
+  );
+}
+const EditorFloatingToolbar = ({
+  anchorElem = document.body,
+  tools,
+  children,
+  containerProps
+}) => {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  return useFloatingTextFormatToolbar({
+    editor,
+    anchorElem,
+    tools,
+    children,
+    containerProps
+  });
+};
+
+exports.EditorFloatingToolbar = EditorFloatingToolbar;
+//# sourceMappingURL=floating-toolbar.js.map