@mieweb/ui 0.11.0-dev.24 → 0.11.0-dev.26

package/dist/{chunk-IYY7NKA3.js → chunk-OEJ4TCXY.js}

@@ -6,7 +6,7 @@ import { X, Search, History, BookOpen, ChevronRight, ChevronDown, Plus } from '.
 import { Button } from './chunk-WFBUBT54.js';
 import { cn } from './chunk-TQONQSJO.js';
 import * as React2 from 'react';
-import { Bold, Italic, Underline, List, ListOrdered, AlignLeft, AlignCenter, AlignRight, Braces, Replace, MicOff, Mic, BookOpen as BookOpen$1 } from 'lucide-react';
+import { Bold, Italic, Underline, List, ListOrdered, AlignLeft, AlignCenter, AlignRight, Braces, Replace, MicOff, Mic, BookOpen as BookOpen$1, Plus as Plus$1 } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 var DEFAULT_LABELS = {
@@ -520,6 +520,17 @@ var MARKDOWN_BLOCK_RULES = {
   "1.": { command: "insertOrderedList" },
   ">": { command: "formatBlock", value: "blockquote" }
 };
+function nodeRect(node) {
+  if (node.nodeType === Node.ELEMENT_NODE) {
+    return node.getBoundingClientRect();
+  }
+  if (node.nodeType === Node.TEXT_NODE && (node.textContent ?? "").length > 0) {
+    const range = document.createRange();
+    range.selectNodeContents(node);
+    return range.getBoundingClientRect();
+  }
+  return null;
+}
 function lastTextWithin(node) {
   if (node.nodeType === Node.TEXT_NODE) {
     return (node.textContent ?? "").length > 0 ? node : null;
@@ -566,8 +577,13 @@ var RichTextEditor = React2.forwardRef(
     defaultMacrosOpen = false,
     macroLabels,
     onCreateMacro,
-    toolbar = "visible",
+    toolbar,
+    defaultToolbar = "visible",
+    onToolbarChange,
+    blockMenu = false,
+    blockMenuLabels,
     markdownShortcuts = false,
+    chromeless = false,
     "aria-label": ariaLabel
   }, ref) => {
     const editorRef = React2.useRef(null);
@@ -582,8 +598,46 @@ var RichTextEditor = React2.forwardRef(
     const hasVariables = Boolean(variableGroups && variableGroups.length > 0);
     const hasMacros = Boolean(macros);
     const isEmpty = isHtmlEmpty(value);
-    const toolbarVisible = toolbar !== "hidden";
+    const [uncontrolledToolbar, setUncontrolledToolbar] = React2.useState(defaultToolbar);
+    const toolbarVisible = (toolbar ?? uncontrolledToolbar) !== "hidden";
+    const setToolbarVisibility = (next) => {
+      if (toolbar === void 0) setUncontrolledToolbar(next);
+      onToolbarChange?.(next);
+    };
     const toolbarVisibleRef = React2.useRef(toolbarVisible);
+    const [blockMenuOpen, setBlockMenuOpen] = React2.useState(false);
+    const [gutterTop, setGutterTop] = React2.useState(chromeless ? 7 : 16);
+    const gutterWrapperRef = React2.useRef(null);
+    const measureRestGutterTop = React2.useCallback(() => {
+      const fallback = chromeless ? 7 : 16;
+      if (!editorRef.current) return fallback;
+      const padding = parseFloat(
+        getComputedStyle(editorRef.current).paddingTop
+      );
+      return Number.isNaN(padding) ? fallback : Math.round(padding);
+    }, [chromeless]);
+    React2.useLayoutEffect(() => {
+      if (!blockMenu || !editorRef.current) return;
+      setGutterTop((current) => {
+        const next = measureRestGutterTop();
+        return current === next ? current : next;
+      });
+    }, [blockMenu, measureRestGutterTop]);
+    const hoverBlockNodeRef = React2.useRef(null);
+    const resetGutter = React2.useCallback(() => {
+      hoverBlockNodeRef.current = null;
+      const next = measureRestGutterTop();
+      setGutterTop((current) => current === next ? current : next);
+    }, [measureRestGutterTop]);
+    const reconcileGutterWithContent = React2.useCallback(() => {
+      if (!blockMenu || !editorRef.current) return;
+      const hovered = hoverBlockNodeRef.current;
+      if (hovered && !editorRef.current.contains(hovered) || !editorRef.current.hasChildNodes()) {
+        resetGutter();
+      }
+    }, [blockMenu, resetGutter]);
+    const blockTargetRangeRef = React2.useRef(null);
+    const firstBlockItemRef = React2.useRef(null);
     React2.useImperativeHandle(ref, () => editorRef.current);
     React2.useEffect(() => {
       setSpeechSupported(Boolean(getSpeechRecognition()));
@@ -610,10 +664,12 @@ var RichTextEditor = React2.forwardRef(
     React2.useEffect(() => {
       if (editorRef.current && editorRef.current.innerHTML !== value) {
         editorRef.current.innerHTML = value;
+        reconcileGutterWithContent();
       }
-    }, [value]);
+    }, [value, reconcileGutterWithContent]);
     const updateContent = () => {
       if (editorRef.current) onChange(editorRef.current.innerHTML);
+      reconcileGutterWithContent();
     };
     const insertSanitized = (html) => {
       if (!sanitizeHtml) return false;
@@ -829,13 +885,108 @@ var RichTextEditor = React2.forwardRef(
       return true;
     };
     const handleEditorKeyDown = (event) => {
-      if (disabled || event.key !== " " || // Space during IME composition selects/converts a candidate; never
+      if (disabled) return;
+      if (blockMenu && event.key === "/" && (event.ctrlKey || event.metaKey) && !event.altKey) {
+        event.preventDefault();
+        openBlockMenuAtCaret();
+        return;
+      }
+      if (event.key !== " " || // Space during IME composition selects/converts a candidate; never
       // hijack it for shortcut expansion.
       event.nativeEvent.isComposing || event.ctrlKey || event.metaKey || event.altKey)
         return;
       if (markdownShortcuts && applyMarkdownShortcut(event)) return;
       expandTypedShortcut(event);
     };
+    const handleGutterMouseMove = (event) => {
+      if (blockMenuOpen || !editorRef.current || !gutterWrapperRef.current)
+        return;
+      let target = null;
+      let top = null;
+      for (const child of Array.from(editorRef.current.childNodes)) {
+        const rect = nodeRect(child);
+        if (!rect) continue;
+        if (rect.width === 0 && rect.height === 0) continue;
+        if (target === null || rect.top <= event.clientY) {
+          target = child;
+          top = rect.top;
+        }
+      }
+      if (!target || top === null) {
+        resetGutter();
+        return;
+      }
+      hoverBlockNodeRef.current = target;
+      const wrapperTop = gutterWrapperRef.current.getBoundingClientRect().top;
+      const next = Math.max(Math.round(top - wrapperTop), 4);
+      setGutterTop((current) => current === next ? current : next);
+    };
+    const rangeAtStartOf = (node) => {
+      const range = document.createRange();
+      range.setStart(node, 0);
+      range.collapse(true);
+      return range;
+    };
+    const handleBlockMenuOpenChange = (open) => {
+      if (open) {
+        const block = hoverBlockNodeRef.current ?? editorRef.current?.firstChild ?? null;
+        blockTargetRangeRef.current = block ? rangeAtStartOf(block) : null;
+      } else if (editorRef.current && document.activeElement?.closest('[role="menu"]')) {
+        const editor = editorRef.current;
+        editor.focus();
+        const target = blockTargetRangeRef.current;
+        const selection = window.getSelection();
+        if (target && selection && editor.contains(target.startContainer)) {
+          selection.removeAllRanges();
+          selection.addRange(target);
+          saveSelection();
+        }
+      }
+      setBlockMenuOpen(open);
+    };
+    const openBlockMenuAtCaret = () => {
+      const selection = window.getSelection();
+      if (selection && selection.rangeCount > 0 && editorRef.current?.contains(selection.getRangeAt(0).startContainer)) {
+        const caret = selection.getRangeAt(0);
+        blockTargetRangeRef.current = caret.cloneRange();
+        let node = caret.startContainer;
+        while (node.parentNode && node.parentNode !== editorRef.current) {
+          node = node.parentNode;
+        }
+        const rect = nodeRect(node);
+        const wrapperRect = gutterWrapperRef.current?.getBoundingClientRect();
+        if (rect && wrapperRect) {
+          setGutterTop(Math.max(Math.round(rect.top - wrapperRect.top), 4));
+        }
+      } else {
+        blockTargetRangeRef.current = null;
+      }
+      setBlockMenuOpen(true);
+    };
+    const applyBlockFormat = (command, value2) => {
+      if (disabled || !editorRef.current) return;
+      setBlockMenuOpen(false);
+      editorRef.current.focus();
+      const target = blockTargetRangeRef.current;
+      const selection = window.getSelection();
+      if (target && selection && editorRef.current.contains(target.startContainer)) {
+        selection.removeAllRanges();
+        selection.addRange(target);
+      }
+      try {
+        document.execCommand(command, false, value2);
+      } catch {
+      }
+      saveSelection();
+      updateContent();
+    };
+    React2.useEffect(() => {
+      if (!blockMenuOpen) return;
+      const frame = requestAnimationFrame(
+        () => firstBlockItemRef.current?.focus()
+      );
+      return () => cancelAnimationFrame(frame);
+    }, [blockMenuOpen]);
     const toggleDictation = async () => {
       const SpeechRecognition = getSpeechRecognition();
       if (!SpeechRecognition) return;
@@ -934,12 +1085,51 @@ var RichTextEditor = React2.forwardRef(
       }
     };
     const iconButtonClass = "h-8 w-8 p-0";
+    const blockFormatItems = [
+      { key: "text", label: "Text", command: "formatBlock", value: "p" },
+      {
+        key: "heading1",
+        label: "Heading 1",
+        command: "formatBlock",
+        value: "h1"
+      },
+      {
+        key: "heading2",
+        label: "Heading 2",
+        command: "formatBlock",
+        value: "h2"
+      },
+      {
+        key: "heading3",
+        label: "Heading 3",
+        command: "formatBlock",
+        value: "h3"
+      },
+      {
+        key: "bulletList",
+        label: "Bullet list",
+        command: "insertUnorderedList"
+      },
+      {
+        key: "numberedList",
+        label: "Numbered list",
+        command: "insertOrderedList"
+      },
+      {
+        key: "quote",
+        label: "Quote",
+        command: "formatBlock",
+        value: "blockquote"
+      }
+    ];
     return /* @__PURE__ */ jsxs(
       "div",
       {
         "data-slot": "rich-text-editor",
+        "data-chromeless": chromeless || void 0,
         className: cn(
-          "border-border bg-background flex flex-col overflow-hidden rounded-lg border",
+          "bg-background flex flex-col",
+          !chromeless && "border-border overflow-hidden rounded-lg border",
           className
         ),
         children: [
@@ -1171,16 +1361,103 @@ var RichTextEditor = React2.forwardRef(
             /* @__PURE__ */ jsxs(
               "div",
               {
+                ref: gutterWrapperRef,
                 className: cn(
                   "relative flex-1",
+                  blockMenu && "group/rte-body",
                   hasMacros && macrosOpen && "md:me-72"
                 ),
+                onMouseMove: blockMenu && !disabled ? handleGutterMouseMove : void 0,
                 children: [
+                  blockMenu && !disabled && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      "data-slot": "rich-text-editor-block-gutter",
+                      className: "absolute start-1 z-10",
+                      style: { top: gutterTop },
+                      children: /* @__PURE__ */ jsxs(
+                        Dropdown,
+                        {
+                          open: blockMenuOpen,
+                          onOpenChange: handleBlockMenuOpenChange,
+                          placement: "bottom-start",
+                          trigger: /* @__PURE__ */ jsx(
+                            Button,
+                            {
+                              type: "button",
+                              variant: "ghost",
+                              size: "sm",
+                              className: cn(
+                                "h-6 w-6 p-0",
+                                // Revealed on hover/focus; always visible on touch,
+                                // which has no hover to reveal it with.
+                                "opacity-0 transition-opacity",
+                                "group-hover/rte-body:opacity-100",
+                                "focus-visible:opacity-100",
+                                "[@media(hover:none)]:opacity-100",
+                                blockMenuOpen && "opacity-100"
+                              ),
+                              "aria-label": blockMenuLabels?.blockMenu ?? "Block menu",
+                              title: blockMenuLabels?.blockMenu ?? "Block menu",
+                              children: /* @__PURE__ */ jsx(Plus$1, { className: "h-4 w-4" })
+                            }
+                          ),
+                          children: [
+                            blockFormatItems.map((item, index) => /* @__PURE__ */ jsx(
+                              DropdownItem,
+                              {
+                                ref: index === 0 ? firstBlockItemRef : void 0,
+                                onClick: () => applyBlockFormat(item.command, item.value),
+                                children: blockMenuLabels?.[item.key] ?? item.label
+                              },
+                              item.key
+                            )),
+                            /* @__PURE__ */ jsx(DropdownSeparator, {}),
+                            hasMacros && /* @__PURE__ */ jsx(
+                              DropdownItem,
+                              {
+                                onClick: () => {
+                                  setBlockMenuOpen(false);
+                                  if (blockTargetRangeRef.current) {
+                                    savedRangeRef.current = blockTargetRangeRef.current;
+                                  }
+                                  setMacrosOpen(true);
+                                  focusRestoringSelection();
+                                },
+                                children: blockMenuLabels?.insertMacro ?? "Insert macro\u2026"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              DropdownItem,
+                              {
+                                onClick: () => {
+                                  setBlockMenuOpen(false);
+                                  setToolbarVisibility(
+                                    toolbarVisible ? "hidden" : "visible"
+                                  );
+                                  editorRef.current?.focus();
+                                },
+                                children: toolbarVisible ? blockMenuLabels?.hideToolbar ?? "Hide toolbar" : blockMenuLabels?.showToolbar ?? "Show toolbar"
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    }
+                  ),
                   isEmpty && placeholder && /* @__PURE__ */ jsx(
                     "div",
                     {
                       "aria-hidden": "true",
-                      className: "text-muted-foreground pointer-events-none absolute start-0 top-0 p-4",
+                      className: cn(
+                        "text-muted-foreground pointer-events-none absolute start-0 top-0",
+                        // Chromeless hosts drop the wrapper's clipping, so a long
+                        // placeholder must stay a single ellipsized line (as a
+                        // native textarea clips its own) instead of wrapping out
+                        // of the one-row field.
+                        chromeless ? "end-0 truncate px-3 py-[7px] text-base" : "p-4",
+                        blockMenu && "ps-10"
+                      ),
                       children: placeholder
                     }
                   ),
@@ -1192,17 +1469,33 @@ var RichTextEditor = React2.forwardRef(
                       "aria-multiline": "true",
                       "aria-label": ariaLabel ?? placeholder,
                       contentEditable: !disabled,
+                      "data-macros-open": hasMacros && macrosOpen ? "" : void 0,
                       tabIndex: disabled ? -1 : 0,
                       onInput: updateContent,
                       onPaste: handlePaste,
                       onDrop: handleDrop,
                       onBlur: hasMacros ? saveSelection : void 0,
-                      onKeyDown: hasMacros || markdownShortcuts ? handleEditorKeyDown : void 0,
+                      onKeyDown: hasMacros || markdownShortcuts || blockMenu ? handleEditorKeyDown : void 0,
                       onKeyUp: hasMacros ? saveSelection : void 0,
                       onMouseUp: hasMacros ? saveSelection : void 0,
                       className: cn(
-                        "min-h-[250px] overflow-y-auto p-4 focus:outline-none",
+                        "overflow-y-auto focus:outline-none",
+                        // Chromeless surfaces start one Input row tall (Textarea md
+                        // metrics: 24px line + 7px padding + the host's 1px borders
+                        // = h-10) and auto-grow with content.
+                        chromeless ? "min-h-[38px] px-3 py-[7px] text-base" : "min-h-[250px] p-4",
                         "prose prose-sm max-w-none",
+                        // Baseline block styles: Tailwind preflight strips heading,
+                        // list and quote styling, and the `prose` classes above only
+                        // work when the host installs @tailwindcss/typography —
+                        // without these, block formats would apply invisibly.
+                        "[&_h1]:my-3 [&_h1]:text-2xl [&_h1]:font-bold",
+                        "[&_h2]:my-3 [&_h2]:text-xl [&_h2]:font-bold",
+                        "[&_h3]:my-2 [&_h3]:text-lg [&_h3]:font-semibold",
+                        "[&_ul]:my-2 [&_ul]:list-disc [&_ul]:ps-6",
+                        "[&_ol]:my-2 [&_ol]:list-decimal [&_ol]:ps-6",
+                        "[&_blockquote]:border-border [&_blockquote]:text-muted-foreground [&_blockquote]:my-2 [&_blockquote]:border-s-4 [&_blockquote]:ps-3",
+                        blockMenu && "ps-10",
                         hasMacros && macrosOpen && "md:min-h-[400px]",
                         disabled && "bg-muted/20 cursor-not-allowed text-neutral-700 dark:text-neutral-300"
                       ),
@@ -1237,5 +1530,5 @@ var RichTextEditor = React2.forwardRef(
 RichTextEditor.displayName = "RichTextEditor";
 
 export { MacroLibrary, RichTextEditor, convertAngleBracketsToMustache, processDictation };
-//# sourceMappingURL=chunk-IYY7NKA3.js.map
-//# sourceMappingURL=chunk-IYY7NKA3.js.map
+//# sourceMappingURL=chunk-OEJ4TCXY.js.map
+//# sourceMappingURL=chunk-OEJ4TCXY.js.map