@k2b/ui 0.38.0 → 0.39.0

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

@@ -11,20 +11,19 @@ var _tmpl$ = ["<div class=\"k2b-ste-size-picker\">", "", "</div>"],
   _tmpl$4 = ["<div class=\"k2b-ste-size-row\">", "</div>"],
   _tmpl$5 = ["<button type=\"button\" tabindex=\"-1\"", "></button>"],
   _tmpl$6 = ["<label class=\"k2b-ste-recovery-label\">", "<textarea class=\"k2b-ste-recovery\" readonly", "></textarea></label>"],
-  _tmpl$7 = ["<i", " aria-hidden=\"true\"></i>"],
+  _tmpl$7 = ["<div class=\"k2b-ste-table-sheet-heading\"><span", ">", "</span>", "</div>"],
   _tmpl$8 = "<i class=\"ti ti-chevron-down\" aria-hidden=\"true\"></i>",
-  _tmpl$9 = ["<div class=\"k2b-ste-table-sheet-heading\"><span", ">", "</span>", "</div>"],
+  _tmpl$9 = "<i class=\"ti ti-copy\" aria-hidden=\"true\"></i>",
   _tmpl$0 = ["<i class=\"", "\" aria-hidden=\"true\"></i>"],
   _tmpl$1 = ["<span class=\"k2b-ste-check\"", "><i class=\"ti ti-alert-triangle\" aria-hidden=\"true\"></i>", "</span>"],
   _tmpl$10 = ["<div class=\"k2b-ste-status\" role=\"status\"><span>", "</span>", "</div>"],
   _tmpl$11 = ["<div class=\"k2b-ste-toolbar-slot\">", "</div>"],
   _tmpl$12 = ["<div class=\"k2b-ste-loading\" role=\"status\"", ">", "</div>"],
-  _tmpl$13 = ["<div class=\"k2b-ste-floating-menu\"", " style=\"", "\">", "</div>"],
-  _tmpl$14 = "<i class=\"ti ti-x\" aria-hidden=\"true\"></i>",
-  _tmpl$15 = ["<div class=\"k2b-ste-notice\"><div class=\"k2b-ste-notice-content\">", "", "</div>", "</div>"],
-  _tmpl$16 = ["<div class=\"", "\"", "><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\">", "</div></div>"],
-  _tmpl$17 = ["<div><span style=\"", "\"></span></div>"],
-  _tmpl$18 = ["<span>", "</span>"];
+  _tmpl$13 = "<i class=\"ti ti-x\" aria-hidden=\"true\"></i>",
+  _tmpl$14 = ["<div class=\"k2b-ste-notice\"><div class=\"k2b-ste-notice-content\">", "", "</div>", "</div>"],
+  _tmpl$15 = ["<div class=\"", "\"", "><span class=\"k2b-ste-announcement\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">", "</span>", "", "", "<div", "", "></div><div class=\"k2b-ste-floating-menu\" style=\"", "\">", "</div><div role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">", "</div></div>"],
+  _tmpl$16 = ["<div><span style=\"", "\"></span></div>"],
+  _tmpl$17 = ["<span>", "</span>"];
 import { history, historyKeymap, redo, undo } from "@codemirror/commands";
 import { EditorView, keymap } from "@codemirror/view";
 import { clipboard } from "@k2b/stdlib/solid";
@@ -279,10 +278,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(() => {
@@ -344,8 +360,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({
@@ -373,22 +390,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(() => {
@@ -450,10 +464,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() {
@@ -523,25 +539,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 [{
+    const row = [{
       get sectionLabel() {
-        return menuHeading();
+        return kind === "cell" ? menuRow() : undefined;
       },
-      items: []
-    }, {
-      get sectionLabel() {
-        return menuRow();
-      },
-      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))
     }, {
@@ -554,8 +567,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",
@@ -581,70 +600,119 @@ 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 => _$ssr(_tmpl$7, _$ssrAttribute("title", _$escape(menuHeading(kind()), true), false), _$escape(menuHeading(kind())), _$escape(_$createComponent(Button, {
+    variant: "ghost",
+    onClick: close,
+    get children() {
+      return t().done;
+    }
+  })));
+  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 => _$ssr(_tmpl$9, _$ssrAttribute("title", _$escape(menuHeading(), true), false), _$escape(menuHeading()), _$escape(_$createComponent(Button, {
-          variant: "ghost",
-          onClick: close,
-          get children() {
-            return t().done;
-          }
-        })));
+        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, {
           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 [_$ssr(_tmpl$7, _$ssrAttribute("class", props.readOnly ? "ti ti-copy" : floating ? "ti ti-dots" : "ti ti-table", false)), trigger?.text ?? (props.readOnly ? t().copyTable : undefined), _$createComponent(Show, {
+            return [_$ssr(_tmpl$2), trigger?.text, _$createComponent(Show, {
               get when() {
                 return trigger?.text;
               },
@@ -657,6 +725,60 @@ 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, {
+              "class": "k2b-ste-copy-menu",
+              variant: "ghost",
+              size: "sm",
+              get label() {
+                return t().copyTable;
+              },
+              onMouseDown: preserveSelection,
+              get children() {
+                return [_$ssr(_tmpl$9), t().copyTable];
+              }
+            });
+          }
+        });
+      }
+    })
+  });
   const runFormat = command => {
     if (!editor || blocked()) return;
     if (cell()?.isConnected && isInlineCommand(command) && formatActiveCell(editor.view, command)) return;
@@ -666,7 +788,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);
@@ -811,7 +933,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();
     };
@@ -833,25 +954,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);
@@ -870,15 +1007,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`);
@@ -889,7 +1023,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
@@ -903,11 +1037,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);
@@ -945,7 +1081,7 @@ export function TextEditor(props) {
       button.disabled = disabled;
     });
   });
-  return _$ssr(_tmpl$16, `k2b-text-editor ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-mode", _$escape(mode(), true), false) + _$ssrAttribute("data-readonly", props.readOnly ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-active", active() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("aria-busy", _$escape(props.loading || !ready(), true), false), _$escape(announcement()), _$escape(_$createComponent(Show, {
+  return _$ssr(_tmpl$15, `k2b-text-editor ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-mode", _$escape(mode(), true), false) + _$ssrAttribute("data-readonly", props.readOnly ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-active", active() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("aria-busy", _$escape(props.loading || !ready(), true), false), _$escape(announcement()), _$escape(_$createComponent(Show, {
     get when() {
       return !props.presentation || "status" in props || check();
     },
@@ -1034,7 +1170,7 @@ export function TextEditor(props) {
                       });
                     },
                     get children() {
-                      return menu(false);
+                      return menu();
                     }
                   })
                 });
@@ -1072,22 +1208,15 @@ export function TextEditor(props) {
     get children() {
       return _$ssr(_tmpl$12, _$ssrAttribute("aria-label", _$escape(t().loading, true), false), _$escape(_$createComponent(For, {
         each: [82, 100, 68, 0, 96, 74],
-        children: width => _$ssr(_tmpl$17, _$ssrStyleProperty("width:", `${_$escape(width, true)}%`))
+        children: width => _$ssr(_tmpl$16, _$ssrStyleProperty("width:", `${_$escape(width, true)}%`))
       })));
     }
-  })), _$ssrAttribute("class", props.presentation ? "k2b-ste-app-host" : "k2b-ste-host", false), _$ssrAttribute("hidden", props.loading || !ready(), true), _$escape(_$createComponent(Show, {
-    get when() {
-      return _$memo(() => !!(cell() && mode() === "formatted"))() && !menuBlocked();
-    },
-    get children() {
-      return _$ssr(_tmpl$13, _$ssrAttribute("data-readonly", props.readOnly ? "true" : _$escape(undefined, true), false), _$ssrStyle(menuPosition()), _$escape(menu(true)));
-    }
-  })), _$escape(_$createComponent(Show, {
+  })), _$ssrAttribute("class", props.presentation ? "k2b-ste-app-host" : "k2b-ste-host", false), _$ssrAttribute("hidden", props.loading || !ready(), true), _$ssrStyle(menuPosition()), _$escape(cellMenu()), _$escape(_$createComponent(Show, {
     get when() {
       return notice() || recovery() !== undefined;
     },
     get children() {
-      return _$ssr(_tmpl$15, _$escape(_$createComponent(Show, {
+      return _$ssr(_tmpl$14, _$escape(_$createComponent(Show, {
         get when() {
           return notice();
         },
@@ -1097,7 +1226,7 @@ export function TextEditor(props) {
               return _$memo(() => !!notice()?.images)() && props.onAttachImages;
             },
             get fallback() {
-              return _$ssr(_tmpl$18, _$escape(notice()?.message));
+              return _$ssr(_tmpl$17, _$escape(notice()?.message));
             },
             get children() {
               return _$createComponent(Button, {
@@ -1144,7 +1273,7 @@ export function TextEditor(props) {
             },
             onClick: () => setNotice(undefined),
             get children() {
-              return _$ssr(_tmpl$14);
+              return _$ssr(_tmpl$13);
             }
           });
         }