@mieweb/ui 0.11.0-dev.23 → 0.11.0-dev.25

package/dist/{chunk-5EOW6AP3.js → chunk-UTSRPQ5B.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 = {
@@ -511,6 +511,26 @@ function getSpeechRecognition() {
   return w.SpeechRecognition || w.webkitSpeechRecognition;
 }
 var BLOCK_BOUNDARY = /^(BR|DIV|P|LI|UL|OL|TABLE|TR|TD|TH|H[1-6]|BLOCKQUOTE|PRE|HR)$/;
+var MARKDOWN_BLOCK_RULES = {
+  "#": { command: "formatBlock", value: "h1" },
+  "##": { command: "formatBlock", value: "h2" },
+  "###": { command: "formatBlock", value: "h3" },
+  "-": { command: "insertUnorderedList" },
+  "*": { command: "insertUnorderedList" },
+  "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;
@@ -557,6 +577,12 @@ var RichTextEditor = React2.forwardRef(
     defaultMacrosOpen = false,
     macroLabels,
     onCreateMacro,
+    toolbar,
+    defaultToolbar = "visible",
+    onToolbarChange,
+    blockMenu = false,
+    blockMenuLabels,
+    markdownShortcuts = false,
     "aria-label": ariaLabel
   }, ref) => {
     const editorRef = React2.useRef(null);
@@ -571,6 +597,19 @@ var RichTextEditor = React2.forwardRef(
     const hasVariables = Boolean(variableGroups && variableGroups.length > 0);
     const hasMacros = Boolean(macros);
     const isEmpty = isHtmlEmpty(value);
+    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(16);
+    const gutterWrapperRef = React2.useRef(null);
+    const hoverBlockNodeRef = React2.useRef(null);
+    const blockTargetRangeRef = React2.useRef(null);
+    const firstBlockItemRef = React2.useRef(null);
     React2.useImperativeHandle(ref, () => editorRef.current);
     React2.useEffect(() => {
       setSpeechSupported(Boolean(getSpeechRecognition()));
@@ -584,6 +623,16 @@ var RichTextEditor = React2.forwardRef(
         }
       };
     }, []);
+    React2.useEffect(() => {
+      toolbarVisibleRef.current = toolbarVisible;
+      if (toolbarVisible) return;
+      if (recognitionRef.current && isListeningRef.current) {
+        shouldRestartRef.current = false;
+        isListeningRef.current = false;
+        recognitionRef.current.stop();
+        setIsListening(false);
+      }
+    }, [toolbarVisible]);
     React2.useEffect(() => {
       if (editorRef.current && editorRef.current.innerHTML !== value) {
         editorRef.current.innerHTML = value;
@@ -722,22 +771,18 @@ var RichTextEditor = React2.forwardRef(
       saveSelection();
       updateContent();
     };
-    const expandTypedShortcut = (event) => {
-      if (disabled || event.key !== " " || // Space during IME composition selects/converts a candidate; never
-      // hijack it for macro expansion.
-      event.nativeEvent.isComposing || event.ctrlKey || event.metaKey || event.altKey || !macros)
-        return;
+    const collectTokenBeforeCaret = () => {
       const selection = window.getSelection();
       if (!selection || selection.rangeCount === 0 || !selection.isCollapsed)
-        return;
+        return null;
       const caret = selection.getRangeAt(0);
       const node = caret.startContainer;
       if (node.nodeType !== Node.TEXT_NODE || !editorRef.current?.contains(node))
-        return;
+        return null;
       const typed = /(\S+)$/.exec(
         (node.textContent ?? "").slice(0, caret.startOffset)
       );
-      if (!typed) return;
+      if (!typed) return null;
       let token = typed[1];
       let startNode = node;
       let startOffset = caret.startOffset - typed[1].length;
@@ -751,17 +796,164 @@ var RichTextEditor = React2.forwardRef(
         startNode = prev;
         startOffset = text.length - continued[1].length;
       }
-      const lowered = token.toLowerCase();
+      const atLineStart = startOffset === 0 && !previousVisibleText(startNode, editorRef.current);
+      return {
+        token,
+        startNode,
+        startOffset,
+        caretNode: node,
+        caretOffset: caret.startOffset,
+        atLineStart,
+        selection
+      };
+    };
+    const selectCollectedToken = (collected) => {
+      const replaceRange = document.createRange();
+      replaceRange.setStart(collected.startNode, collected.startOffset);
+      replaceRange.setEnd(collected.caretNode, collected.caretOffset);
+      collected.selection.removeAllRanges();
+      collected.selection.addRange(replaceRange);
+      return replaceRange;
+    };
+    const expandTypedShortcut = (event) => {
+      if (!macros) return;
+      const collected = collectTokenBeforeCaret();
+      if (!collected) return;
+      const lowered = collected.token.toLowerCase();
       const macro = macros.flatMap((group) => group.macros).find((candidate) => candidate.shortcut?.toLowerCase() === lowered);
       if (!macro) return;
       event.preventDefault();
-      const replaceRange = document.createRange();
-      replaceRange.setStart(startNode, startOffset);
-      replaceRange.setEnd(node, caret.startOffset);
-      selection.removeAllRanges();
-      selection.addRange(replaceRange);
+      selectCollectedToken(collected);
       insertTextAtSelection(macro.content);
     };
+    const applyMarkdownShortcut = (event) => {
+      const collected = collectTokenBeforeCaret();
+      if (!collected || !collected.atLineStart) return false;
+      if (!Object.hasOwn(MARKDOWN_BLOCK_RULES, collected.token)) return false;
+      const rule = MARKDOWN_BLOCK_RULES[collected.token];
+      event.preventDefault();
+      const replaceRange = selectCollectedToken(collected);
+      let deleted = false;
+      try {
+        deleted = document.execCommand("delete", false);
+      } catch {
+        deleted = false;
+      }
+      if (!deleted) {
+        replaceRange.deleteContents();
+        replaceRange.collapse(true);
+        collected.selection.removeAllRanges();
+        collected.selection.addRange(replaceRange);
+      }
+      try {
+        document.execCommand(rule.command, false, rule.value);
+      } catch {
+      }
+      editorRef.current?.focus();
+      saveSelection();
+      updateContent();
+      return true;
+    };
+    const handleEditorKeyDown = (event) => {
+      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) 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;
@@ -783,6 +975,7 @@ var RichTextEditor = React2.forwardRef(
         );
         return;
       }
+      if (!toolbarVisibleRef.current) return;
       const recognition = new SpeechRecognition();
       recognition.continuous = true;
       recognition.interimResults = true;
@@ -859,6 +1052,43 @@ 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",
       {
@@ -868,7 +1098,7 @@ var RichTextEditor = React2.forwardRef(
           className
         ),
         children: [
-          /* @__PURE__ */ jsxs(
+          toolbarVisible && /* @__PURE__ */ jsxs(
             "div",
             {
               "data-slot": "rich-text-editor-toolbar",
@@ -1056,7 +1286,10 @@ var RichTextEditor = React2.forwardRef(
                       size: "sm",
                       onClick: toggleDictation,
                       disabled: disabled || !speechSupported,
-                      className: cn("h-8 gap-1 px-2", isListening && "animate-pulse"),
+                      className: cn(
+                        "h-8 gap-1 px-2",
+                        isListening && "animate-pulse"
+                      ),
                       title: !speechSupported ? "Speech recognition not supported in this browser" : isListening ? "Stop dictation" : "Start dictation",
                       children: [
                         isListening ? /* @__PURE__ */ jsx(MicOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Mic, { className: "h-4 w-4" }),
@@ -1093,16 +1326,98 @@ 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 p-4",
+                        blockMenu && "ps-10"
+                      ),
                       children: placeholder
                     }
                   ),
@@ -1119,12 +1434,23 @@ var RichTextEditor = React2.forwardRef(
                       onPaste: handlePaste,
                       onDrop: handleDrop,
                       onBlur: hasMacros ? saveSelection : void 0,
-                      onKeyDown: hasMacros ? expandTypedShortcut : 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",
                         "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"
                       ),
@@ -1159,5 +1485,5 @@ var RichTextEditor = React2.forwardRef(
 RichTextEditor.displayName = "RichTextEditor";
 
 export { MacroLibrary, RichTextEditor, convertAngleBracketsToMustache, processDictation };
-//# sourceMappingURL=chunk-5EOW6AP3.js.map
-//# sourceMappingURL=chunk-5EOW6AP3.js.map
+//# sourceMappingURL=chunk-UTSRPQ5B.js.map
+//# sourceMappingURL=chunk-UTSRPQ5B.js.map