@k2b/ui 0.38.0 → 0.39.0

package/dist/browser/text-editor/TextEditor.js

@@ -20,17 +20,17 @@ var _tmpl$ = /*#__PURE__*/_$template(`<div class=k2b-ste-size-picker><!$><!/><!$
   _tmpl$4 = /*#__PURE__*/_$template(`<div class=k2b-ste-size-row>`),
   _tmpl$5 = /*#__PURE__*/_$template(`<button type=button tabindex=-1>`),
   _tmpl$6 = /*#__PURE__*/_$template(`<label class=k2b-ste-recovery-label><!$><!/><textarea class=k2b-ste-recovery readonly>`),
-  _tmpl$7 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<div class=k2b-ste-table-sheet-heading><span></span><!$><!/>`),
   _tmpl$8 = /*#__PURE__*/_$template(`<i class="ti ti-chevron-down"aria-hidden=true>`),
-  _tmpl$9 = /*#__PURE__*/_$template(`<div class=k2b-ste-table-sheet-heading><span></span><!$><!/>`),
-  _tmpl$0 = /*#__PURE__*/_$template(`<span class=k2b-ste-check><i class="ti ti-alert-triangle"aria-hidden=true></i><!$><!/>`),
-  _tmpl$1 = /*#__PURE__*/_$template(`<div class=k2b-ste-status role=status><span></span><!$><!/>`),
-  _tmpl$10 = /*#__PURE__*/_$template(`<div class=k2b-ste-toolbar-slot>`),
-  _tmpl$11 = /*#__PURE__*/_$template(`<div class=k2b-ste-loading role=status>`),
-  _tmpl$12 = /*#__PURE__*/_$template(`<div class=k2b-ste-floating-menu>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<i class="ti ti-copy"aria-hidden=true>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<span class=k2b-ste-check><i class="ti ti-alert-triangle"aria-hidden=true></i><!$><!/>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<div class=k2b-ste-status role=status><span></span><!$><!/>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<div class=k2b-ste-toolbar-slot>`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<div class=k2b-ste-loading role=status>`),
   _tmpl$13 = /*#__PURE__*/_$template(`<i class="ti ti-x"aria-hidden=true>`),
   _tmpl$14 = /*#__PURE__*/_$template(`<div class=k2b-ste-notice><div class=k2b-ste-notice-content><!$><!/><!$><!/></div><!$><!/>`),
-  _tmpl$15 = /*#__PURE__*/_$template(`<div><span class=k2b-ste-announcement role=status aria-live=polite aria-atomic=true></span><!$><!/><!$><!/><!$><!/><div></div><!$><!/><div role=status aria-live=polite aria-atomic=true>`),
+  _tmpl$15 = /*#__PURE__*/_$template(`<div><span class=k2b-ste-announcement role=status aria-live=polite aria-atomic=true></span><!$><!/><!$><!/><!$><!/><div></div><div class=k2b-ste-floating-menu></div><div role=status aria-live=polite aria-atomic=true>`),
   _tmpl$16 = /*#__PURE__*/_$template(`<div><span>`),
   _tmpl$17 = /*#__PURE__*/_$template(`<span>`);
 import { history, historyKeymap, redo, undo } from "@codemirror/commands";
@@ -344,10 +344,27 @@ export function TextEditor(props) {
   const [documentRevision, setDocumentRevision] = createSignal(0);
   const [phoneMenu, setPhoneMenu] = createSignal(false);
   const [platform, setPlatform] = createSignal("other");
+  /** What the open cell menu acts on: a row grip, a column grip, or the cell (right-click, keys, toolbar). */
+  const [scope, setScope] = createSignal("cell");
+  let grip;
   createEffect(() => {
     const target = cell();
-    target?.setAttribute("data-active", "");
-    onCleanup(() => target?.removeAttribute("data-active"));
+    const kind = scope();
+    if (!target) return;
+    if (kind === "cell") {
+      target.setAttribute("data-active", "");
+      onCleanup(() => target.removeAttribute("data-active"));
+      return;
+    }
+    // A grip's menu marks its whole row or column, and the grip stays visible while the menu is open.
+    const marked = kind === "row" ? [target.closest("tr")] : [...(target.closest(".k2b-ste-table")?.querySelectorAll(`.k2b-ste-cell[data-c="${target.dataset.c}"]`) ?? [])].map(element => element.parentElement);
+    const opener = grip;
+    for (const element of marked) element?.setAttribute("data-marked", "");
+    opener?.setAttribute("data-open", "");
+    onCleanup(() => {
+      for (const element of marked) element?.removeAttribute("data-marked");
+      opener?.removeAttribute("data-open");
+    });
   });
   let disposed = false;
   onCleanup(() => {
@@ -415,8 +432,9 @@ export function TextEditor(props) {
     show();
   };
   let menuOpen = false;
-  let pointerAnchor;
-  let floatingTrigger;
+  let openCellMenu;
+  let closeCellMenu;
+  let copyTrigger;
   const tableTriggers = new Set();
   let frame = 0;
   const [menuPosition, setMenuPosition] = createSignal({
@@ -444,22 +462,19 @@ export function TextEditor(props) {
     const wrap = target.closest(".k2b-ste-table");
     const table = wrap?.querySelector("table");
     if (!target.isConnected || !wrap || !table || mode() !== "formatted") {
+      closeCellMenu?.();
       menuOpen = false;
       setCell(undefined);
       checkFocus();
       return;
     }
-    const rect = target.getBoundingClientRect();
+    // Only the read-only phone copy control sits below its table; every other menu opens beside its anchor.
+    if (!props.readOnly) return;
     const bounds = root.getBoundingClientRect();
-    const right = Math.min(table.getBoundingClientRect().right, wrap.getBoundingClientRect().right);
-    const position = props.readOnly ? {
+    setMenuPosition({
       left: `${wrap.getBoundingClientRect().left - bounds.left}px`,
       top: `${wrap.getBoundingClientRect().bottom - bounds.top - (window.matchMedia("(max-width: 47.999rem)").matches ? 44 : 0)}px`
-    } : {
-      left: `${right - bounds.left - 24}px`,
-      top: `${rect.top - bounds.top + (rect.height - 24) / 2}px`
-    };
-    setMenuPosition(pointerAnchor ?? position);
+    });
   };
   const schedulePosition = () => {
     if (!frame) frame = requestAnimationFrame(() => {
@@ -521,10 +536,12 @@ export function TextEditor(props) {
     const header = cell()?.closest(".k2b-ste-table")?.querySelector(`.k2b-ste-cell[data-r="0"][data-c="${column}"]`);
     return t().menuColumn(header?.dataset.raw || t().column(column + 1));
   };
-  const menuHeading = () => `${menuRow()} · ${menuColumn()}`;
-  const actionItem = (action, choice) => ({
+  const menuHeading = (kind = scope()) => kind === "row" ? menuRow() : kind === "column" ? menuColumn() : `${menuRow()} · ${menuColumn()}`;
+  const actionItem = (action, choice, kind = "cell") => ({
     get label() {
-      return phoneMenu() && action in shortActionLabels ? t()[shortActionLabels[action]] : t()[action];
+      // A grip's sheet has no row or column heading over its entries, so deleting keeps its full name.
+      const short = phoneMenu() && action in shortActionLabels && !(kind !== "cell" && action.startsWith("delete"));
+      return short ? t()[shortActionLabels[action]] : t()[action];
     },
     icon: `ti ti-${actionIcons[action]}`,
     get disabled() {
@@ -594,25 +611,22 @@ export function TextEditor(props) {
       void copy("markdown");
     }
   }];
-  const items = () => {
+  /** The row grip shows row and table actions, the column grip column, alignment and table actions; the rest everything. */
+  const items = kind => {
     if (props.readOnly) return copyItems();
     const align = () => {
       documentRevision();
       return cell()?.parentElement?.style.textAlign || "left";
     };
-    return [{
-      get sectionLabel() {
-        return menuHeading();
-      },
-      items: []
-    }, {
+    const row = [{
       get sectionLabel() {
-        return menuRow();
+        return kind === "cell" ? menuRow() : undefined;
       },
-      items: ["rowAbove", "rowBelow", "moveRowUp", "moveRowDown", "deleteRow"].map(action => actionItem(action))
-    }, {
+      items: ["rowAbove", "rowBelow", "moveRowUp", "moveRowDown", "deleteRow"].map(action => actionItem(action, undefined, kind))
+    }];
+    const column = [{
       get sectionLabel() {
-        return menuColumn();
+        return kind === "cell" ? menuColumn() : undefined;
       },
       items: ["colLeft", "colRight", "moveColLeft", "moveColRight"].map(action => actionItem(action))
     }, {
@@ -625,8 +639,14 @@ export function TextEditor(props) {
         checked: () => align() === ["left", "center", "right"][index]
       }))
     }, {
-      items: [actionItem("deleteCol")]
-    }, {
+      items: [actionItem("deleteCol", undefined, kind)]
+    }];
+    return [{
+      get sectionLabel() {
+        return menuHeading(kind);
+      },
+      items: []
+    }, ...(kind === "column" ? [] : row), ...(kind === "row" ? [] : column), {
       sectionLabel: t().table,
       items: [actionItem("toggleHeader", {
         choice: "checkbox",
@@ -652,89 +672,132 @@ export function TextEditor(props) {
   const menuChange = open => {
     menuOpen = open;
   };
+  // A press beside an open table menu only closes it: no cell takes focus, no
+  // text is selected and no column is marked. The menu's light dismiss closes it.
+  let tableMenuOpen = false;
+  const tableMenuChange = open => {
+    menuOpen = open;
+    tableMenuOpen = open && !phoneMenu();
+  };
+  let swallow;
+  const pressBesideMenu = event => {
+    swallow?.abort();
+    if (!tableMenuOpen || event.target instanceof Element && event.target.closest(".k2b-ste-table-menu")) return;
+    event.stopPropagation();
+    const current = new AbortController();
+    swallow = current;
+    const block = blocked => {
+      blocked.preventDefault();
+      blocked.stopPropagation();
+      if (blocked.type === "click" || blocked.type === "contextmenu") current.abort();
+    };
+    for (const type of ["mousedown", "mouseup", "click", "contextmenu"]) document.addEventListener(type, block, {
+      capture: true,
+      signal: current.signal
+    });
+    // Only this press is swallowed: its click follows the release in the same task, and a cancelled press never
+    // clicks. A key other than a modifier, which may come with the press, starts new input.
+    const end = () => current.abort();
+    document.addEventListener("pointerup", () => setTimeout(end), {
+      capture: true,
+      once: true,
+      signal: current.signal
+    });
+    document.addEventListener("pointercancel", end, {
+      capture: true,
+      once: true,
+      signal: current.signal
+    });
+    document.addEventListener("keydown", key => {
+      if (!["Shift", "Control", "Alt", "Meta"].includes(key.key)) end();
+    }, {
+      capture: true,
+      signal: current.signal
+    });
+  };
   const menuClose = () => {
     menuOpen = false;
-    pointerAnchor = undefined;
+    tableMenuOpen = false;
+    setScope("cell");
+    grip = undefined;
     schedulePosition();
     queueMicrotask(() => {
       if (disposed) return;
       const focused = document.activeElement;
-      if (focused instanceof HTMLElement && focused.matches(".k2b-ste-cell-menu, .k2b-ste-table-tool")) cell()?.focus();
+      if (focused instanceof HTMLElement && focused.matches(".k2b-ste-copy-menu, .k2b-ste-table-tool")) cell()?.focus();
       checkFocus();
     });
   };
-  const menu = (floating, trigger) => // A sheet owns its item inventory until it closes. Replace that owner when
+  const sheetTop = kind => props.readOnly ? undefined : close => (() => {
+    var _el$14 = _$getNextElement(_tmpl$7),
+      _el$15 = _el$14.firstChild,
+      _el$16 = _el$15.nextSibling,
+      [_el$17, _co$4] = _$getNextMarker(_el$16.nextSibling);
+    _$insert(_el$15, () => menuHeading(kind()));
+    _$insert(_el$14, _$createComponent(Button, {
+      variant: "ghost",
+      onClick: close,
+      get children() {
+        return t().done;
+      }
+    }), _el$17, _co$4);
+    _$effect(() => _$setAttribute(_el$15, "title", menuHeading(kind())));
+    return _el$14;
+  })();
+  const menuLabel = () => props.readOnly ? t().copyTable : t().tableMenu;
+  const menuDisabled = () => menuBlocked() || localSource() || !cell()?.isConnected;
+  // A sheet owns its item inventory until it closes. Replace that owner when
   // edit access changes so an already open sheet cannot retain edit entries.
-  _$createComponent(Show, {
+  /** The toolbar's table button: the whole menu for the focused cell. */
+  const menu = trigger => _$createComponent(Show, {
     get when() {
       return props.readOnly ? "read" : "write";
     },
     keyed: true,
     children: _access => _$createComponent(Dropdown, {
       get items() {
-        return items();
+        return items("cell");
       },
       phone: "sheet",
       get sheetTop() {
-        return props.readOnly ? undefined : close => (() => {
-          var _el$16 = _$getNextElement(_tmpl$9),
-            _el$17 = _el$16.firstChild,
-            _el$18 = _el$17.nextSibling,
-            [_el$19, _co$4] = _$getNextMarker(_el$18.nextSibling);
-          _$insert(_el$17, menuHeading);
-          _$insert(_el$16, _$createComponent(Button, {
-            variant: "ghost",
-            onClick: close,
-            get children() {
-              return t().done;
-            }
-          }), _el$19, _co$4);
-          _$effect(() => _$setAttribute(_el$17, "title", menuHeading()));
-          return _el$16;
-        })();
+        return sheetTop(() => "cell");
       },
       menuClass: "k2b-ste-table-menu",
       get position() {
-        return floating ? "right-start" : trigger?.position ?? "bottom-right";
+        return trigger?.position ?? "bottom-right";
       },
       width: "18rem",
       get label() {
-        return _$memo(() => !!props.readOnly)() ? t().copyTable : t().tableMenu;
+        return menuLabel();
       },
       get disabled() {
-        return menuBlocked() || localSource() || !cell()?.isConnected;
+        return menuDisabled();
       },
-      onOpenChange: menuChange,
+      onOpenChange: tableMenuChange,
       onClose: menuClose,
       get children() {
         return _$createComponent(Dropdown.Trigger, {
           ref: element => {
-            if (floating) floatingTrigger = element;else {
-              tableTriggers.add(element);
-              onCleanup(() => tableTriggers.delete(element));
-            }
+            tableTriggers.add(element);
+            onCleanup(() => tableTriggers.delete(element));
           },
           get ["class"]() {
-            return floating ? props.readOnly ? "k2b-ste-cell-menu k2b-ste-copy-menu" : "k2b-ste-cell-menu" : `k2b-ste-tool k2b-ste-table-tool ${trigger?.class ?? ""}`;
+            return `k2b-ste-tool k2b-ste-table-tool ${trigger?.class ?? ""}`;
           },
           variant: "ghost",
           get size() {
             return trigger?.size ?? "sm";
           },
           get iconOnly() {
-            return _$memo(() => !!!trigger?.text)() && !props.readOnly;
+            return !trigger?.text;
           },
           get label() {
-            return trigger?.text ?? (props.readOnly ? t().copyTable : t().tableMenu);
+            return trigger?.text ?? t().tableMenu;
           },
-          "aria-pressed": !floating ? true : undefined,
+          "aria-pressed": true,
           onMouseDown: preserveSelection,
           get children() {
-            return [(() => {
-              var _el$14 = _$getNextElement(_tmpl$7);
-              _$effect(() => _$className(_el$14, props.readOnly ? "ti ti-copy" : floating ? "ti ti-dots" : "ti ti-table"));
-              return _el$14;
-            })(), _$memo(() => trigger?.text ?? (props.readOnly ? t().copyTable : undefined)), _$createComponent(Show, {
+            return [_$getNextElement(_tmpl$2), _$memo(() => trigger?.text), _$createComponent(Show, {
               get when() {
                 return trigger?.text;
               },
@@ -747,6 +810,63 @@ export function TextEditor(props) {
       }
     })
   });
+  /** Grips, right-click and Shift+F10 open this menu beside its anchor; it has no button of its own. */
+  const cellMenu = () => _$createComponent(Show, {
+    get when() {
+      return props.readOnly ? "read" : "write";
+    },
+    keyed: true,
+    children: _access => _$createComponent(Dropdown, {
+      get items() {
+        return items(scope());
+      },
+      phone: "sheet",
+      get sheetTop() {
+        return sheetTop(scope);
+      },
+      menuClass: "k2b-ste-table-menu",
+      position: "bottom-right",
+      width: "18rem",
+      get label() {
+        return menuLabel();
+      },
+      get disabled() {
+        return menuDisabled();
+      },
+      onOpenChange: tableMenuChange,
+      onClose: menuClose,
+      openAt: open => {
+        openCellMenu = open;
+      },
+      closeWith: close => {
+        closeCellMenu = close;
+      },
+      get children() {
+        return _$createComponent(Show, {
+          get when() {
+            return _$memo(() => !!(props.readOnly && cell() && mode() === "formatted"))() && !menuBlocked();
+          },
+          get children() {
+            return _$createComponent(Dropdown.Trigger, {
+              ref: element => {
+                copyTrigger = element;
+              },
+              "class": "k2b-ste-copy-menu",
+              variant: "ghost",
+              size: "sm",
+              get label() {
+                return t().copyTable;
+              },
+              onMouseDown: preserveSelection,
+              get children() {
+                return [_$getNextElement(_tmpl$9), _$memo(() => t().copyTable)];
+              }
+            });
+          }
+        });
+      }
+    })
+  });
   const runFormat = command => {
     if (!editor || blocked()) return;
     if (cell()?.isConnected && isInlineCommand(command) && formatActiveCell(editor.view, command)) return;
@@ -756,7 +876,7 @@ export function TextEditor(props) {
     if (disposed) return;
     // A host toolbar sits outside this root. Native popover focus moves before
     // its toggle callback, but Dropdown already exposes its synchronous state.
-    if (menuOpen || [...tableTriggers, floatingTrigger].some(trigger => trigger?.isConnected && trigger.getAttribute("aria-expanded") === "true")) return;
+    if (menuOpen || [...tableTriggers, copyTrigger].some(trigger => trigger?.isConnected && trigger.getAttribute("aria-expanded") === "true")) return;
     const focused = document.activeElement;
     setLocalSource(focused instanceof HTMLElement && !!focused.closest(".k2b-ste-table-source"));
     const inside = focused instanceof Node && root.contains(focused);
@@ -809,9 +929,9 @@ export function TextEditor(props) {
         },
         onMouseDown: preserveSelection,
         get children() {
-          var _el$20 = _$getNextElement(_tmpl$7);
-          _$className(_el$20, `ti ti-${command}`);
-          return _el$20;
+          var _el$21 = _$getNextElement(_tmpl$0);
+          _$className(_el$21, `ti ti-${command}`);
+          return _el$21;
         }
       });
     }
@@ -903,7 +1023,6 @@ export function TextEditor(props) {
     const focus = event => {
       if (!(event instanceof CustomEvent) || !(event.detail.cell instanceof HTMLElement)) return;
       setActive(true);
-      if (!menuOpen) pointerAnchor = undefined;
       setCell(event.detail.cell);
       positionMenu();
     };
@@ -925,25 +1044,41 @@ export function TextEditor(props) {
         pointerCheck = setTimeout(checkFocus);
       }
     };
+    // A grip opens its row's or column's menu below itself; right-click opens
+    // at the pointer and a key below the cell. Focus returns to the cell.
     const keyboardMenu = event => {
-      if (menuBlocked()) return;
-      focus(event);
-      if (event instanceof CustomEvent) {
-        const bounds = root.getBoundingClientRect();
-        const anchor = event.detail.anchor instanceof HTMLElement ? event.detail.anchor.getBoundingClientRect() : undefined;
-        if (anchor || typeof event.detail.x === "number") {
-          pointerAnchor = {
-            left: `${(anchor?.left ?? event.detail.x) - bounds.left}px`,
-            top: `${(anchor?.bottom ?? event.detail.y) - bounds.top}px`
-          };
-          positionMenu();
-        }
+      if (menuBlocked() || menuOpen || !(event instanceof CustomEvent) || !(event.detail.cell instanceof HTMLElement)) return;
+      const target = event.detail.cell;
+      const opener = event.detail.anchor instanceof HTMLElement ? event.detail.anchor : undefined;
+      const kind = event.detail.scope === "row" || event.detail.scope === "column" ? event.detail.scope : "cell";
+      const {
+        x,
+        y
+      } = event.detail;
+      let anchor = opener ?? target;
+      if (!opener && typeof x === "number" && typeof y === "number") {
+        // Keep the pointer's place inside the cell, so the menu follows it while the page scrolls.
+        const start = target.getBoundingClientRect();
+        anchor = {
+          getBoundingClientRect: () => {
+            const box = target.getBoundingClientRect();
+            const left = box.left + x - start.left;
+            const top = box.top + y - start.top;
+            return {
+              left,
+              top,
+              right: left,
+              bottom: top
+            };
+          }
+        };
       }
+      grip = opener;
+      setScope(kind);
+      focus(event);
+      // Focus returns to the menu's cell as it closes; moving a row or column moves that cell.
       queueMicrotask(() => {
-        if (disposed || !cell()?.isConnected) return;
-        const tableTrigger = [...tableTriggers].find(trigger => trigger.isConnected);
-        const trigger = (window.matchMedia("(max-width: 47.999rem)").matches && tableTrigger?.isConnected ? tableTrigger : undefined) ?? floatingTrigger;
-        trigger?.click();
+        if (!disposed && cell()?.isConnected) openCellMenu?.(anchor, () => cell());
       });
     };
     const mutations = new MutationObserver(schedulePosition);
@@ -962,15 +1097,12 @@ export function TextEditor(props) {
     root.addEventListener("mousedown", viewMouseDown);
     document.addEventListener("focusin", focusChange);
     document.addEventListener("pointerdown", pointer);
+    document.addEventListener("pointerdown", pressBesideMenu, true);
     root.addEventListener("k2b-ste-table-structure", structureAnnouncement);
     root.addEventListener("k2b-ste-cell-focus", focus);
     root.addEventListener("k2b-ste-cell-blur", focusChange);
     root.addEventListener("k2b-ste-cell-menu", keyboardMenu);
-    const tableScroll = event => {
-      if (menuOpen && event.target instanceof HTMLElement && event.target.classList.contains("k2b-ste-table") && floatingTrigger?.getAttribute("aria-expanded") === "true") floatingTrigger.click();
-      schedulePosition();
-    };
-    window.addEventListener("scroll", tableScroll, true);
+    window.addEventListener("scroll", schedulePosition, true);
     window.addEventListener("resize", schedulePosition);
     const viewport = window.visualViewport;
     const keyboard = () => root.style.setProperty("--k2b-ste-keyboard", `${Math.max(0, window.innerHeight - (viewport?.height ?? window.innerHeight) - (viewport?.offsetTop ?? 0))}px`);
@@ -981,7 +1113,7 @@ export function TextEditor(props) {
     updateCheck();
     props.onReady?.(editor, {
       tableActive: () => mode() === "formatted" && !!cell()?.isConnected,
-      TableMenu: trigger => menu(false, trigger),
+      TableMenu: trigger => menu(trigger),
       formatCell: format => !!editor && !blocked() && !!cell()?.isConnected && formatActiveCell(editor.view, format),
       notify: message => setNotice({
         message
@@ -995,11 +1127,13 @@ export function TextEditor(props) {
       root.removeEventListener("mousedown", viewMouseDown);
       document.removeEventListener("focusin", focusChange);
       document.removeEventListener("pointerdown", pointer);
+      document.removeEventListener("pointerdown", pressBesideMenu, true);
+      swallow?.abort();
       root.removeEventListener("k2b-ste-table-structure", structureAnnouncement);
       root.removeEventListener("k2b-ste-cell-focus", focus);
       root.removeEventListener("k2b-ste-cell-blur", focusChange);
       root.removeEventListener("k2b-ste-cell-menu", keyboardMenu);
-      window.removeEventListener("scroll", tableScroll, true);
+      window.removeEventListener("scroll", schedulePosition, true);
       window.removeEventListener("resize", schedulePosition);
       viewport?.removeEventListener("resize", keyboard);
       viewport?.removeEventListener("scroll", keyboard);
@@ -1038,44 +1172,43 @@ export function TextEditor(props) {
     });
   });
   return (() => {
-    var _el$21 = _$getNextElement(_tmpl$15),
-      _el$22 = _el$21.firstChild,
-      _el$49 = _el$22.nextSibling,
-      [_el$50, _co$1] = _$getNextMarker(_el$49.nextSibling),
-      _el$51 = _el$50.nextSibling,
-      [_el$52, _co$10] = _$getNextMarker(_el$51.nextSibling),
-      _el$53 = _el$52.nextSibling,
-      [_el$54, _co$11] = _$getNextMarker(_el$53.nextSibling),
-      _el$33 = _el$54.nextSibling,
-      _el$55 = _el$33.nextSibling,
-      [_el$56, _co$12] = _$getNextMarker(_el$55.nextSibling),
-      _el$35 = _el$56.nextSibling;
+    var _el$22 = _$getNextElement(_tmpl$15),
+      _el$23 = _el$22.firstChild,
+      _el$50 = _el$23.nextSibling,
+      [_el$51, _co$1] = _$getNextMarker(_el$50.nextSibling),
+      _el$52 = _el$51.nextSibling,
+      [_el$53, _co$10] = _$getNextMarker(_el$52.nextSibling),
+      _el$54 = _el$53.nextSibling,
+      [_el$55, _co$11] = _$getNextMarker(_el$54.nextSibling),
+      _el$34 = _el$55.nextSibling,
+      _el$35 = _el$34.nextSibling,
+      _el$36 = _el$35.nextSibling;
     var _ref$3 = root;
-    typeof _ref$3 === "function" ? _$use(_ref$3, _el$21) : root = _el$21;
-    _$insert(_el$22, announcement);
-    _$insert(_el$21, _$createComponent(Show, {
+    typeof _ref$3 === "function" ? _$use(_ref$3, _el$22) : root = _el$22;
+    _$insert(_el$23, announcement);
+    _$insert(_el$22, _$createComponent(Show, {
       get when() {
         return !props.presentation || "status" in props || check();
       },
       get children() {
-        var _el$23 = _$getNextElement(_tmpl$1),
-          _el$24 = _el$23.firstChild,
-          _el$29 = _el$24.nextSibling,
-          [_el$30, _co$6] = _$getNextMarker(_el$29.nextSibling);
-        _$insert(_el$24, () => props.status);
-        _$insert(_el$23, _$createComponent(Show, {
+        var _el$24 = _$getNextElement(_tmpl$10),
+          _el$25 = _el$24.firstChild,
+          _el$30 = _el$25.nextSibling,
+          [_el$31, _co$6] = _$getNextMarker(_el$30.nextSibling);
+        _$insert(_el$25, () => props.status);
+        _$insert(_el$24, _$createComponent(Show, {
           get when() {
             return check();
           },
           get children() {
             return [(() => {
-              var _el$25 = _$getNextElement(_tmpl$0),
-                _el$26 = _el$25.firstChild,
-                _el$27 = _el$26.nextSibling,
-                [_el$28, _co$5] = _$getNextMarker(_el$27.nextSibling);
-              _$insert(_el$25, () => t().checkTable, _el$28, _co$5);
-              _$effect(() => _$setAttribute(_el$25, "title", missingSeparator() ? t().checkSeparatorDetail : t().checkTableDetail));
-              return _el$25;
+              var _el$26 = _$getNextElement(_tmpl$1),
+                _el$27 = _el$26.firstChild,
+                _el$28 = _el$27.nextSibling,
+                [_el$29, _co$5] = _$getNextMarker(_el$28.nextSibling);
+              _$insert(_el$26, () => t().checkTable, _el$29, _co$5);
+              _$effect(() => _$setAttribute(_el$26, "title", missingSeparator() ? t().checkSeparatorDetail : t().checkTableDetail));
+              return _el$26;
             })(), _$createComponent(Button, {
               size: "sm",
               variant: "ghost",
@@ -1104,17 +1237,17 @@ export function TextEditor(props) {
               }
             })];
           }
-        }), _el$30, _co$6);
-        return _el$23;
+        }), _el$31, _co$6);
+        return _el$24;
       }
-    }), _el$50, _co$1);
-    _$insert(_el$21, _$createComponent(Show, {
+    }), _el$51, _co$1);
+    _$insert(_el$22, _$createComponent(Show, {
       get when() {
         return _$memo(() => !!(!props.readOnly && mode() !== "plain"))() && props.toolbar !== false;
       },
       get children() {
-        var _el$31 = _$getNextElement(_tmpl$10);
-        _$insert(_el$31, _$createComponent(Toolbar, {
+        var _el$32 = _$getNextElement(_tmpl$11);
+        _$insert(_el$32, _$createComponent(Toolbar, {
           "class": "k2b-ste-toolbar",
           get label() {
             return t().formatting;
@@ -1153,14 +1286,14 @@ export function TextEditor(props) {
                           onMouseDown: preserveSelection,
                           onClick: () => runFormat(command),
                           get children() {
-                            var _el$57 = _$getNextElement(_tmpl$7);
-                            _$className(_el$57, `ti ti-${icon}`);
-                            return _el$57;
+                            var _el$56 = _$getNextElement(_tmpl$0);
+                            _$className(_el$56, `ti ti-${icon}`);
+                            return _el$56;
                           }
                         });
                       },
                       get children() {
-                        return menu(false);
+                        return menu();
                       }
                     })
                   });
@@ -1190,64 +1323,45 @@ export function TextEditor(props) {
             })];
           }
         }));
-        return _el$31;
+        return _el$32;
       }
-    }), _el$52, _co$10);
-    _$insert(_el$21, _$createComponent(Show, {
+    }), _el$53, _co$10);
+    _$insert(_el$22, _$createComponent(Show, {
       get when() {
         return props.loading || !ready();
       },
       get children() {
-        var _el$32 = _$getNextElement(_tmpl$11);
-        _$insert(_el$32, _$createComponent(For, {
+        var _el$33 = _$getNextElement(_tmpl$12);
+        _$insert(_el$33, _$createComponent(For, {
           each: [82, 100, 68, 0, 96, 74],
           children: width => (() => {
-            var _el$58 = _$getNextElement(_tmpl$16),
-              _el$59 = _el$58.firstChild;
-            _$setStyleProperty(_el$59, "width", `${width}%`);
-            return _el$58;
+            var _el$57 = _$getNextElement(_tmpl$16),
+              _el$58 = _el$57.firstChild;
+            _$setStyleProperty(_el$58, "width", `${width}%`);
+            return _el$57;
           })()
         }));
-        _$effect(() => _$setAttribute(_el$32, "aria-label", t().loading));
-        return _el$32;
+        _$effect(() => _$setAttribute(_el$33, "aria-label", t().loading));
+        return _el$33;
       }
-    }), _el$54, _co$11);
+    }), _el$55, _co$11);
     var _ref$4 = mount;
-    typeof _ref$4 === "function" ? _$use(_ref$4, _el$33) : mount = _el$33;
-    _$insert(_el$21, _$createComponent(Show, {
-      get when() {
-        return _$memo(() => !!(cell() && mode() === "formatted"))() && !menuBlocked();
-      },
-      get children() {
-        var _el$34 = _$getNextElement(_tmpl$12);
-        _$insert(_el$34, () => menu(true));
-        _$effect(_p$ => {
-          var _v$5 = props.readOnly ? "true" : undefined,
-            _v$6 = menuPosition();
-          _v$5 !== _p$.e && _$setAttribute(_el$34, "data-readonly", _p$.e = _v$5);
-          _p$.t = _$style(_el$34, _v$6, _p$.t);
-          return _p$;
-        }, {
-          e: undefined,
-          t: undefined
-        });
-        return _el$34;
-      }
-    }), _el$56, _co$12);
-    _$insert(_el$35, _$createComponent(Show, {
+    typeof _ref$4 === "function" ? _$use(_ref$4, _el$34) : mount = _el$34;
+    _$insert(_el$35, cellMenu);
+    _$insert(_el$36, _$createComponent(Show, {
       get when() {
         return notice() || recovery() !== undefined;
       },
       get children() {
-        var _el$36 = _$getNextElement(_tmpl$14),
-          _el$37 = _el$36.firstChild,
-          _el$42 = _el$37.firstChild,
-          [_el$43, _co$8] = _$getNextMarker(_el$42.nextSibling),
-          _el$44 = _el$43.nextSibling,
-          [_el$45, _co$9] = _$getNextMarker(_el$44.nextSibling),
-          _el$47 = _el$37.nextSibling,
-          [_el$48, _co$0] = _$getNextMarker(_el$47.nextSibling);
-        _$insert(_el$37, _$createComponent(Show, {
+        var _el$37 = _$getNextElement(_tmpl$14),
+          _el$38 = _el$37.firstChild,
+          _el$43 = _el$38.firstChild,
+          [_el$44, _co$8] = _$getNextMarker(_el$43.nextSibling),
+          _el$45 = _el$44.nextSibling,
+          [_el$46, _co$9] = _$getNextMarker(_el$45.nextSibling),
+          _el$48 = _el$38.nextSibling,
+          [_el$49, _co$0] = _$getNextMarker(_el$48.nextSibling);
+        _$insert(_el$38, _$createComponent(Show, {
           get when() {
             return notice();
           },
@@ -1258,9 +1372,9 @@ export function TextEditor(props) {
               },
               get fallback() {
                 return (() => {
-                  var _el$60 = _$getNextElement(_tmpl$17);
-                  _$insert(_el$60, () => notice()?.message);
-                  return _el$60;
+                  var _el$59 = _$getNextElement(_tmpl$17);
+                  _$insert(_el$59, () => notice()?.message);
+                  return _el$59;
                 })();
               },
               get children() {
@@ -1278,20 +1392,20 @@ export function TextEditor(props) {
               }
             });
           }
-        }), _el$43, _co$8);
-        _$insert(_el$37, _$createComponent(Show, {
+        }), _el$44, _co$8);
+        _$insert(_el$38, _$createComponent(Show, {
           get when() {
             return recovery() !== undefined;
           },
           get children() {
             return [(() => {
-              var _el$38 = _$getNextElement(_tmpl$6),
-                _el$40 = _el$38.firstChild,
-                [_el$41, _co$7] = _$getNextMarker(_el$40.nextSibling),
-                _el$39 = _el$41.nextSibling;
-              _$insert(_el$38, () => t().recoveredInput, _el$41, _co$7);
-              _$effect(() => _$setProperty(_el$39, "value", recovery()));
-              return _el$38;
+              var _el$39 = _$getNextElement(_tmpl$6),
+                _el$41 = _el$39.firstChild,
+                [_el$42, _co$7] = _$getNextMarker(_el$41.nextSibling),
+                _el$40 = _el$42.nextSibling;
+              _$insert(_el$39, () => t().recoveredInput, _el$42, _co$7);
+              _$effect(() => _$setProperty(_el$40, "value", recovery()));
+              return _el$39;
             })(), _$createComponent(Button, {
               size: "sm",
               variant: "ghost",
@@ -1304,8 +1418,8 @@ export function TextEditor(props) {
               }
             })];
           }
-        }), _el$45, _co$9);
-        _$insert(_el$36, _$createComponent(Show, {
+        }), _el$46, _co$9);
+        _$insert(_el$37, _$createComponent(Show, {
           get when() {
             return notice();
           },
@@ -1322,25 +1436,27 @@ export function TextEditor(props) {
               }
             });
           }
-        }), _el$48, _co$0);
-        return _el$36;
+        }), _el$49, _co$0);
+        return _el$37;
       }
     }));
     _$effect(_p$ => {
-      var _v$7 = `k2b-text-editor ${props.class ?? ""}`,
-        _v$8 = mode(),
-        _v$9 = props.readOnly ? "true" : undefined,
-        _v$0 = active() ? "true" : undefined,
+      var _v$5 = `k2b-text-editor ${props.class ?? ""}`,
+        _v$6 = mode(),
+        _v$7 = props.readOnly ? "true" : undefined,
+        _v$8 = active() ? "true" : undefined,
+        _v$9 = props.loading || !ready(),
+        _v$0 = props.presentation ? "k2b-ste-app-host" : "k2b-ste-host",
         _v$1 = props.loading || !ready(),
-        _v$10 = props.presentation ? "k2b-ste-app-host" : "k2b-ste-host",
-        _v$11 = props.loading || !ready();
-      _v$7 !== _p$.e && _$className(_el$21, _p$.e = _v$7);
-      _v$8 !== _p$.t && _$setAttribute(_el$21, "data-mode", _p$.t = _v$8);
-      _v$9 !== _p$.a && _$setAttribute(_el$21, "data-readonly", _p$.a = _v$9);
-      _v$0 !== _p$.o && _$setAttribute(_el$21, "data-active", _p$.o = _v$0);
-      _v$1 !== _p$.i && _$setAttribute(_el$21, "aria-busy", _p$.i = _v$1);
-      _v$10 !== _p$.n && _$className(_el$33, _p$.n = _v$10);
-      _v$11 !== _p$.s && _$setProperty(_el$33, "hidden", _p$.s = _v$11);
+        _v$10 = menuPosition();
+      _v$5 !== _p$.e && _$className(_el$22, _p$.e = _v$5);
+      _v$6 !== _p$.t && _$setAttribute(_el$22, "data-mode", _p$.t = _v$6);
+      _v$7 !== _p$.a && _$setAttribute(_el$22, "data-readonly", _p$.a = _v$7);
+      _v$8 !== _p$.o && _$setAttribute(_el$22, "data-active", _p$.o = _v$8);
+      _v$9 !== _p$.i && _$setAttribute(_el$22, "aria-busy", _p$.i = _v$9);
+      _v$0 !== _p$.n && _$className(_el$34, _p$.n = _v$0);
+      _v$1 !== _p$.s && _$setProperty(_el$34, "hidden", _p$.s = _v$1);
+      _p$.h = _$style(_el$35, _v$10, _p$.h);
       return _p$;
     }, {
       e: undefined,
@@ -1349,9 +1465,10 @@ export function TextEditor(props) {
       o: undefined,
       i: undefined,
       n: undefined,
-      s: undefined
+      s: undefined,
+      h: undefined
     });
-    return _el$21;
+    return _el$22;
   })();
 }
 _$delegateEvents(["keydown", "click"]);