@sustaina/shared-ui 1.49.0 → 1.49.2

package/dist/index.js

@@ -8762,7 +8762,7 @@ function DialogContent({
       {
         "data-slot": "dialog-content",
         className: cn(
-          "fixed top-1/2 left-1/2 z-50 flex min-h-0 max-h-[90vh] w-full max-w-[80vw] translate-x-[-50%] translate-y-[-50%] flex-col rounded-lg border bg-background shadow-lg duration-200 sm:max-w-7xl",
+          "fixed top-1/2 left-1/2 z-50 flex min-h-0 max-h-[90vh] w-full max-w-[80vw] translate-x-[-50%] translate-y-[-50%] flex-col rounded-lg bg-background shadow-lg duration-200 sm:max-w-7xl",
           className
         ),
         ...props,
@@ -12533,7 +12533,7 @@ var ToolbarButton = React.forwardRef(function ToolbarButton2({ label, icon: Icon
         disabled ? "pointer-events-none opacity-40" : ""
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "h-4 w-4", "aria-hidden": true, style: { color: iconColor } }),
+        /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "h-4 w-4", "aria-hidden": true, color: iconColor }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: label })
       ]
     }
@@ -13110,11 +13110,11 @@ function LinkPlugin({ disabled, state }) {
         return;
       }
       const nodeKey = detectedLink.getKey();
-      const rect = linkElement.getBoundingClientRect();
+      const linkRect = linkElement.getBoundingClientRect();
       setLinkPreview({
         nodeKey,
         url: initialUrl,
-        rect
+        rect: linkRect
       });
     },
     [disabled, findLink, hidePreview]
@@ -13156,11 +13156,13 @@ function LinkPlugin({ disabled, state }) {
     }
     rootElement.addEventListener("click", handleClick);
     document.addEventListener("mousedown", handleClickOutside);
+    window.addEventListener("scroll", hidePreview, true);
     return () => {
       rootElement.removeEventListener("click", handleClick);
       document.removeEventListener("mousedown", handleClickOutside);
+      window.removeEventListener("scroll", hidePreview, true);
     };
-  }, [editor, handleClick, handleClickOutside]);
+  }, [editor, handleClick, handleClickOutside, hidePreview]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       ToolbarButton,
@@ -13184,7 +13186,7 @@ function LinkPlugin({ disabled, state }) {
     /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isLinkDialogOpen, onOpenChange: handleLinkDialogOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(
       DialogContent,
       {
-        className: "min-w-[70vw] max-w-7xl",
+        className: "max-w-[50vw]! min-w-[320px]!",
         header: editingExistingLink ? "Edit link" : "Insert link",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { hidden: true }),
@@ -13223,66 +13225,107 @@ function LinkPlugin({ disabled, state }) {
         ]
       }
     ) }),
-    linkPreview && /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ref: previewRef,
-        className: "fixed z-50 flex items-center gap-2 rounded-md border border-border bg-popover p-2 shadow-md",
-        style: {
-          top: `${linkPreview.rect.bottom + 4}px`,
-          left: `${linkPreview.rect.left}px`,
-          maxWidth: "300px"
-        },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "a",
-            {
-              href: linkPreview.url,
-              target: "_blank",
-              rel: "noopener noreferrer",
-              className: "flex-1 truncate text-sm text-primary hover:underline",
-              onClick: (e) => {
-                e.preventDefault();
-                handleOpenLink();
-              },
-              children: linkPreview.url
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              title: "Open link",
-              onClick: handleOpenLink,
-              className: "cursor-pointer inline-flex h-6 w-6 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-muted hover:text-foreground",
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: "h-3.5 w-3.5" })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              title: "Edit link",
-              onClick: handleEditClick,
-              className: "cursor-pointer inline-flex h-6 w-6 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-muted hover:text-foreground",
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "h-3.5 w-3.5" })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              title: "Edit link",
-              onClick: handleRemoveLink,
-              className: "cursor-pointer inline-flex h-6 w-6 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-muted hover:text-foreground",
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link2Off, { className: "h-3.5 w-3.5" })
-            }
-          )
-        ]
-      }
+    linkPreview && reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        LinkPreviewPopover,
+        {
+          previewRef,
+          linkPreview,
+          handleOpenLink,
+          handleEditClick,
+          handleRemoveLink
+        }
+      ),
+      document.body
     )
   ] });
 }
+var PREVIEW_WIDTH = 300;
+var PREVIEW_PADDING = 8;
+var PREVIEW_HEIGHT = 40;
+function LinkPreviewPopover({
+  previewRef,
+  linkPreview,
+  handleOpenLink,
+  handleEditClick,
+  handleRemoveLink
+}) {
+  const { rect } = linkPreview;
+  const viewportWidth = typeof window !== "undefined" ? window.innerWidth : 0;
+  const viewportHeight = typeof window !== "undefined" ? window.innerHeight : 0;
+  let top = rect.bottom + 4;
+  let left = rect.left;
+  if (left + PREVIEW_WIDTH > viewportWidth - PREVIEW_PADDING) {
+    left = Math.max(PREVIEW_PADDING, viewportWidth - PREVIEW_WIDTH - PREVIEW_PADDING);
+  }
+  if (left < PREVIEW_PADDING) {
+    left = PREVIEW_PADDING;
+  }
+  if (top + PREVIEW_HEIGHT > viewportHeight - PREVIEW_PADDING) {
+    top = rect.top - PREVIEW_HEIGHT - 4;
+  }
+  if (top < PREVIEW_PADDING) {
+    top = PREVIEW_PADDING;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: previewRef,
+      className: "fixed z-9999 flex items-center gap-2 rounded-md border border-border bg-popover p-2 shadow-md",
+      style: {
+        top: `${top}px`,
+        left: `${left}px`,
+        maxWidth: `${PREVIEW_WIDTH}px`
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "a",
+          {
+            href: linkPreview.url,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "flex-1 truncate text-sm text-primary hover:underline",
+            onClick: (e) => {
+              e.preventDefault();
+              handleOpenLink();
+            },
+            children: linkPreview.url
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            title: "Open link",
+            onClick: handleOpenLink,
+            className: "cursor-pointer inline-flex h-6 w-6 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-muted hover:text-foreground",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: "h-3.5 w-3.5" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            title: "Edit link",
+            onClick: handleEditClick,
+            className: "cursor-pointer inline-flex h-6 w-6 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-muted hover:text-foreground",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "h-3.5 w-3.5" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            title: "Remove link",
+            onClick: handleRemoveLink,
+            className: "cursor-pointer inline-flex h-6 w-6 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-muted hover:text-foreground",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link2Off, { className: "h-3.5 w-3.5" })
+          }
+        )
+      ]
+    }
+  );
+}
 function FormatPlugin({ disabled, state }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const toggleFormat = React.useCallback(
@@ -13290,6 +13333,7 @@ function FormatPlugin({ disabled, state }) {
       if (disabled) {
         return;
       }
+      editor.focus();
       editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, format5);
     },
     [disabled, editor]
@@ -13347,74 +13391,80 @@ function FormatPlugin({ disabled, state }) {
     )
   ] });
 }
-function AdjustFontSizePlugin({ disabled }) {
+var fontSizes = [8, 10, 12, 14, 16, 18, 20, 24, 28, 32, 36, 48, 64, 72];
+var DEFAULT_FONT_SIZE = 14;
+function AdjustFontSizePlugin({ disabled, state }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const adjustFontSize = React.useCallback(
-    (direction) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const currentSize = state.fontSize ? parseInt(state.fontSize, 10) : DEFAULT_FONT_SIZE;
+  const applyFontSize = React.useCallback(
+    (size = DEFAULT_FONT_SIZE) => {
       if (disabled) {
         return;
       }
+      editor.focus();
       editor.update(() => {
         const selection$1 = lexical.$getSelection();
         if (!lexical.$isRangeSelection(selection$1)) {
           return;
         }
-        const currentFontSize = selection.$getSelectionStyleValueForProperty(selection$1, "font-size", "14px");
-        const currentSize = parseInt(currentFontSize, 10) || 14;
-        const step = 2;
-        const minSize = 8;
-        const maxSize = 72;
-        let newSize;
-        if (direction === "increase") {
-          newSize = Math.min(currentSize + step, maxSize);
-        } else {
-          newSize = Math.max(currentSize - step, minSize);
-        }
-        selection.$patchStyleText(selection$1, { "font-size": `${newSize}px` });
+        selection.$patchStyleText(selection$1, { "font-size": `${size}px` });
       });
+      setIsOpen(false);
+      editor.focus();
     },
     [disabled, editor]
   );
-  const resetFontSize = React.useCallback(() => {
-    if (disabled) {
-      return;
-    }
-    editor.update(() => {
-      const selection$1 = lexical.$getSelection();
-      if (!lexical.$isRangeSelection(selection$1)) {
-        return;
-      }
-      selection.$patchStyleText(selection$1, { "font-size": null });
-    });
-  }, [disabled, editor]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ToolbarButton,
-      {
-        label: "Increase text size",
-        icon: lucideReact.AArrowUp,
-        onClick: () => adjustFontSize("increase"),
-        disabled
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ToolbarButton,
-      {
-        label: "Decrease text size",
-        icon: lucideReact.AArrowDown,
-        onClick: () => adjustFontSize("decrease"),
-        disabled
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ToolbarButton,
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
       {
-        label: "Reset text size",
-        icon: lucideReact.ALargeSmall,
-        onClick: resetFontSize,
-        disabled
+        type: "button",
+        title: "Font size",
+        disabled,
+        onMouseDown: (e) => e.preventDefault(),
+        className: cn(
+          "inline-flex h-8 min-w-14 items-center justify-between gap-1 rounded-md border border-input bg-background px-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: `${currentSize}px` }),
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-3.5 w-3.5 opacity-50" })
+        ]
       }
-    )
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-fit p-1", align: "start", onOpenAutoFocus: (e) => e.preventDefault(), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col max-h-60 overflow-y-auto [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-muted-foreground/30 [&::-webkit-scrollbar-track]:bg-transparent", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          disabled: currentSize === DEFAULT_FONT_SIZE,
+          type: "button",
+          onClick: () => applyFontSize(DEFAULT_FONT_SIZE),
+          className: cn(
+            "rounded px-2 py-1 text-left text-sm",
+            currentSize !== DEFAULT_FONT_SIZE && "hover:bg-muted",
+            currentSize === DEFAULT_FONT_SIZE && "text-gray-400"
+          ),
+          children: "Default"
+        },
+        "default"
+      ),
+      fontSizes.map((size) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => applyFontSize(size),
+          className: cn(
+            "rounded px-2 py-1 text-left text-sm hover:bg-muted",
+            currentSize === size && "bg-muted font-medium"
+          ),
+          children: [
+            size,
+            "px"
+          ]
+        },
+        size
+      ))
+    ] }) })
   ] });
 }
 var textColors = [
@@ -13438,6 +13488,7 @@ function ColorPlugin({ disabled, state }) {
       if (disabled) {
         return;
       }
+      editor.focus();
       editor.update(() => {
         const selection$1 = lexical.$getSelection();
         if (!lexical.$isRangeSelection(selection$1)) {
@@ -13455,7 +13506,7 @@ function ColorPlugin({ disabled, state }) {
       ToolbarButton,
       {
         label: "Text color",
-        icon: lucideReact.Palette,
+        icon: lucideReact.BaselineIcon,
         disabled,
         iconColor: state.textColor || void 0
       }
@@ -13484,6 +13535,7 @@ function BlockPlugin({ disabled, state }) {
       if (disabled) {
         return;
       }
+      editor.focus();
       editor.update(() => {
         const selection$1 = lexical.$getSelection();
         if (!lexical.$isRangeSelection(selection$1)) {
@@ -13631,6 +13683,7 @@ function AlignPlugin({ disabled, state }) {
       if (disabled) {
         return;
       }
+      editor.focus();
       editor.dispatchCommand(lexical.FORMAT_ELEMENT_COMMAND, format5);
     },
     [disabled, editor]
@@ -13679,7 +13732,8 @@ var initialToolbarState = {
   elementFormat: null,
   canUndo: false,
   canRedo: false,
-  textColor: null
+  textColor: null,
+  fontSize: `${DEFAULT_FONT_SIZE}px`
 };
 function ToolbarPlugin({ disabled, ...props }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
@@ -13713,6 +13767,7 @@ function ToolbarPlugin({ disabled, ...props }) {
     const hasLink = nodes2.some((node) => link.$isLinkNode(node) || link.$isLinkNode(node.getParent()));
     const elementFormat = element.getFormatType?.() ?? null;
     const textColor = selection.$getSelectionStyleValueForProperty(selection$1, "color", void 0);
+    const fontSize = selection.$getSelectionStyleValueForProperty(selection$1, "font-size", void 0);
     setState((current) => ({
       ...current,
       blockType,
@@ -13723,7 +13778,8 @@ function ToolbarPlugin({ disabled, ...props }) {
       isStrikethrough: selection$1.hasFormat("strikethrough"),
       isCode: selection$1.hasFormat("code"),
       isLink: hasLink,
-      textColor: textColor || null
+      textColor: textColor || null,
+      fontSize: fontSize || null
     }));
   }, []);
   React.useEffect(() => {
@@ -13777,11 +13833,11 @@ function ToolbarPlugin({ disabled, ...props }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mx-1 h-5 w-px bg-border", "aria-hidden": true }),
-    /* @__PURE__ */ jsxRuntime.jsx(FormatPlugin, { disabled: false, state }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mx-1 h-5 w-px bg-border", "aria-hidden": true }),
-    /* @__PURE__ */ jsxRuntime.jsx(AdjustFontSizePlugin, { disabled }),
+    /* @__PURE__ */ jsxRuntime.jsx(AdjustFontSizePlugin, { disabled, state }),
     /* @__PURE__ */ jsxRuntime.jsx(ColorPlugin, { disabled, state }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mx-1 h-5 w-px bg-border", "aria-hidden": true }),
+    /* @__PURE__ */ jsxRuntime.jsx(FormatPlugin, { disabled: false, state }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mx-1 h-5 w-px bg-border", "aria-hidden": true }),
     /* @__PURE__ */ jsxRuntime.jsx(BlockPlugin, { disabled, state }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mx-1 h-5 w-px bg-border", "aria-hidden": true }),
     /* @__PURE__ */ jsxRuntime.jsx(LinkPlugin, { disabled, state }),
@@ -13856,7 +13912,7 @@ function ControlledValuePlugin({
   return null;
 }
 var theme = {
-  paragraph: "mb-2 leading-6 text-sm text-foreground",
+  paragraph: "mb-2 leading-normal text-sm text-foreground",
   placeholder: "pointer-events-none absolute left-0 top-0 px-3 py-2 text-sm text-muted-foreground select-none",
   quote: "border-l-2 border-border pl-3 italic text-muted-foreground",
   heading: {