@jxsuite/studio 0.32.0 → 0.34.0

package/src/utils/link-target.ts

@@ -0,0 +1,93 @@
+/**
+ * Link-target.ts — pure, dependency-free helpers for classifying and composing anchor `href`
+ * targets in the properties panel's Link section.
+ *
+ * `classifyHref` splits a raw href string into a discriminated `{ kind, value }` pair so the UI can
+ * offer a target-kind selector (Internal page / External URL / #anchor / mailto: / tel:).
+ * `composeHref` is its inverse — the two round-trip for every kind so editing through the UI never
+ * corrupts an href.
+ *
+ * Both functions are total (never throw) and have no DOM or platform dependencies, so they are
+ * fully unit-testable in isolation.
+ */
+
+/** The distinct target kinds an anchor href can address. */
+export type LinkKind = "internal" | "external" | "anchor" | "mailto" | "tel";
+
+/** A classified href: its {@link LinkKind} plus the "bare" value for that kind's input. */
+export interface LinkTarget {
+  kind: LinkKind;
+  /**
+   * The user-facing value for the kind's input: - internal → the path (e.g. `/about/`) - external →
+   * the full href (e.g. `https://x.com`) - anchor → the fragment WITHOUT the leading `#` (e.g.
+   * `section`) - mailto → the email address WITHOUT the `mailto:` scheme - tel → the phone number
+   * WITHOUT the `tel:` scheme
+   */
+  value: string;
+}
+
+/** Matches an absolute URL scheme like `http://`, `https://`, `ftp://`, or protocol-relative `//`. */
+const ABSOLUTE_SCHEME = /^([a-z][a-z\d+.-]*:)?\/\//i;
+
+/**
+ * Classify a raw `href` string into a {@link LinkTarget}.
+ *
+ * Rules (checked in order): 1. `mailto:…` → `{ kind: "mailto", value: address }` 2. `tel:…` → `{
+ * kind: "tel", value: number }` 3. `#…` → `{ kind: "anchor", value: rest }` (leading `#` stripped)
+ * 4. absolute (`http(s)://…`) or protocol-relative (`//…`) → `{ kind: "external", value: href }` 5.
+ * `/…` → `{ kind: "internal", value: path }` 6. anything else → `{ kind: "external", value: href
+ * }`
+ *
+ * @param href The raw attribute value (may be empty)
+ */
+export function classifyHref(href = ""): LinkTarget {
+  const value = href;
+  const lower = value.toLowerCase();
+
+  if (lower.startsWith("mailto:")) {
+    return { kind: "mailto", value: value.slice("mailto:".length) };
+  }
+  if (lower.startsWith("tel:")) {
+    return { kind: "tel", value: value.slice("tel:".length) };
+  }
+  if (value.startsWith("#")) {
+    return { kind: "anchor", value: value.slice(1) };
+  }
+  if (ABSOLUTE_SCHEME.test(value)) {
+    return { kind: "external", value };
+  }
+  if (value.startsWith("/")) {
+    return { kind: "internal", value };
+  }
+  return { kind: "external", value };
+}
+
+/**
+ * Compose an `href` string from a {@link LinkKind} and its bare value — the inverse of
+ * {@link classifyHref}. An empty (or whitespace-only) value yields `""` for every kind so callers
+ * can treat "cleared" uniformly. Round-trips with `classifyHref` for every kind.
+ *
+ * @param kind The target kind
+ * @param value The bare value for that kind (address/number/fragment/path/href)
+ */
+export function composeHref(kind: LinkKind, value: string): string {
+  const bare = (value ?? "").trim();
+  if (!bare) {
+    return "";
+  }
+  switch (kind) {
+    case "mailto": {
+      return `mailto:${bare}`;
+    }
+    case "tel": {
+      return `tel:${bare}`;
+    }
+    case "anchor": {
+      return bare.startsWith("#") ? bare : `#${bare}`;
+    }
+    // Internal / external — the bare value IS the href.
+    default: {
+      return bare;
+    }
+  }
+}

package/src/utils/strip-events.ts

@@ -0,0 +1,54 @@
+/**
+ * Strip `on*` event-handler bindings from a Jx document tree (returns a shallow-rebuilt copy). Used
+ * to neutralize handlers before edit/design rendering so the canvas never wires live behavior, and
+ * to drop `timing: "server"` state entries the canvas can't run.
+ *
+ * Lives in its own dependency-light module (it pulls only the pure `@jxsuite/schema/guards`
+ * predicate) so the slim canvas-iframe subtree renderer can import it without dragging in the
+ * editor's reactive `store.ts`; `store.ts` re-exports it for the legacy in-realm patcher.
+ */
+
+import { isEventBinding } from "@jxsuite/schema/guards";
+import type { JxMutableNode } from "@jxsuite/schema/types";
+
+/** Strip all `on*` event-handler properties (and server-timed state) from a document tree. */
+export function stripEventHandlers(node: JxMutableNode): JxMutableNode {
+  if (!node || typeof node !== "object") {
+    return node;
+  }
+  if (Array.isArray(node)) {
+    // Arrays of nodes round-trip element-wise; the array itself is not a node.
+    return node.map((n: JxMutableNode) => stripEventHandlers(n)) as unknown as JxMutableNode;
+  }
+  const out: Record<string, unknown> = {};
+  for (const [k, v] of Object.entries(node)) {
+    if (k.startsWith("on") && isEventBinding(v)) {
+      continue;
+    }
+    if (k === "children") {
+      out.children = Array.isArray(v)
+        ? v.map((c: JxMutableNode) => stripEventHandlers(c))
+        : stripEventHandlers(v as JxMutableNode);
+    } else if (k === "cases" && typeof v === "object") {
+      const cases: Record<string, unknown> = {};
+      for (const [ck, cv] of Object.entries(v as Record<string, unknown>)) {
+        cases[ck] = stripEventHandlers(cv as JxMutableNode);
+      }
+      out.cases = cases;
+    } else if (k === "state" && typeof v === "object" && v !== null) {
+      const state: Record<string, unknown> = {};
+      for (const [sk, sv] of Object.entries(v as Record<string, unknown>)) {
+        if (sv && typeof sv === "object" && (sv as Record<string, unknown>).timing === "server") {
+          continue;
+        }
+        state[sk] = sv;
+      }
+      out.state = state;
+    } else if (k === "style" || k === "attributes" || k === "$media") {
+      out[k] = v;
+    } else {
+      out[k] = v;
+    }
+  }
+  return out;
+}

package/src/view.ts

@@ -28,15 +28,6 @@ interface ViewState {
         _editingTarget?: string | null;
       })
     | null;
-  componentInlineEdit: {
-    el: HTMLElement;
-    path: (string | number)[];
-    originalText: string;
-    mediaName: string | null;
-    _outsideHandler?: ((e: MouseEvent) => void) | null;
-    [k: string]: unknown;
-  } | null;
-  inlineEditCleanup: (() => void) | null;
   blockActionBarEl: HTMLElement | null;
   selDragCleanup: (() => void) | null;
   dndCleanups: (() => void)[];
@@ -46,16 +37,9 @@ interface ViewState {
   forcedAttrEl: HTMLElement | null;
   elementsCollapsed: Set<string>;
   elementsFilter: string;
-  lastDragInput: {
-    clientX: number;
-    clientY: number;
-    [k: string]: unknown;
-  } | null;
   _currentDropTargetRow: HTMLElement | null;
   layerDragSourceHeight: number;
-  savedRange: Range | null;
   _completionRegistered: boolean;
-  stylebookElToTag: WeakMap<Element, string>;
   showAddBreakpointForm: boolean;
   addBreakpointPreview: string;
   layoutSelection: unknown;
@@ -81,10 +65,6 @@ export const view: ViewState = {
   monacoEditor: null,
   functionEditor: null,
 
-  // Inline editing
-  componentInlineEdit: null,
-  inlineEditCleanup: null,
-
   // Floating UI containers
   blockActionBarEl: null,
 
@@ -105,16 +85,13 @@ export const view: ViewState = {
   elementsFilter: "",
 
   // Drag interaction
-  lastDragInput: null,
   _currentDropTargetRow: null,
   layerDragSourceHeight: 0,
 
   // Editor state
-  savedRange: null,
   _completionRegistered: false,
 
   // Canvas / stylebook
-  stylebookElToTag: new WeakMap(),
 
   // Responsive breakpoints UI
   showAddBreakpointForm: false,

package/src/workspace/workspace.ts

@@ -1,4 +1,4 @@
-import { computed, reactive } from "../reactivity";
+import { computed, reactive, toRaw } from "../reactivity";
 import { createTab, disposeTab } from "../tabs/tab";
 import type { Tab } from "../tabs/tab";
 
@@ -56,6 +56,19 @@ export const activeTab = computed(() =>
   workspace.activeTabId ? (workspace.tabs.get(workspace.activeTabId) ?? null) : null,
 ) as unknown as ComputedRef<Tab | null>;
 
+/**
+ * Whether `tab` is the active tab. Identity check survives reactive-proxy wrapping (activeTab.value
+ * is a proxy; callers may hold either the raw tab or a proxy of it).
+ *
+ * @param {Tab | null} tab
+ */
+export function isTabActive(tab: Tab | null): boolean {
+  const active = activeTab.value;
+  return (
+    tab !== null && active !== null && toRaw(active as object) === toRaw(tab as unknown as object)
+  );
+}
+
 /**
  * Open a new tab and make it active.
  *

package/src/canvas/canvas-subtree-render.ts

@@ -1,113 +0,0 @@
-/// <reference lib="dom" />
-/// <reference lib="dom.iterable" />
-/**
- * Isolated subtree rendering for surgical canvas patches. Re-renders a single document node into
- * fresh DOM using the same edit-mode transform, runtime renderer, scope, and path mapper as the
- * panel's last full render — so the patched DOM is indistinguishable from a full re-render.
- */
-
-import { elToRenderScope, elToScope, getNodeAtPath, stripEventHandlers } from "../store";
-import { prepareForEditMode } from "../utils/edit-display";
-import { renderNode as runtimeRenderNode } from "@jxsuite/runtime";
-import { effectScope } from "../reactivity";
-import { canvasPerf } from "./canvas-perf";
-
-import type { JxPath } from "../state";
-import type { JxMutableNode } from "@jxsuite/schema/types";
-import type { CanvasPanel, PanelLiveCtx } from "../types";
-
-/**
- * Render the document node at docPath into a detached DOM subtree for the given panel.
- *
- * The scope comes from the parent element's recorded render scope (elToScope), falling back to the
- * panel's root scope — so $-bindings, $media, and state references resolve exactly as they did in
- * the full render. Throws when the panel has no live render context.
- *
- * @param {CanvasPanel} panel
- * @param {JxMutableNode} doc Raw (non-reactive) document root
- * @param {JxPath} docPath
- * @param {Element} parentEl The rendered parent element (scope source)
- */
-export function renderSubtree(
-  panel: CanvasPanel,
-  doc: JxMutableNode,
-  docPath: JxPath,
-  parentEl: Element,
-): HTMLElement | Text {
-  const { liveCtx } = panel;
-  if (!liveCtx) {
-    throw new Error("panel-missing-live-ctx");
-  }
-  const node = getNodeAtPath(doc, docPath) as JxMutableNode | string | undefined;
-  if (node === undefined) {
-    throw new Error(`node-not-found:${docPath.join("/")}`);
-  }
-  const def = typeof node === "string" ? node : prepareForEditMode(stripEventHandlers(node));
-  const scope = elToScope.get(parentEl) ?? liveCtx.scope;
-
-  // Render inside an effect scope parented to the panel's render scope: disposable on its own
-  // When the subtree is later replaced/removed, and disposed with the panel on full renders.
-  const render = () => {
-    const subScope = effectScope();
-    const rendered = subScope.run(() =>
-      runtimeRenderNode(def, scope, {
-        _path: docPathToRenderPath(docPath, liveCtx),
-        onNodeCreated: liveCtx.pathMapper,
-      }),
-    )!;
-    if (rendered instanceof HTMLElement) {
-      elToRenderScope.set(rendered, subScope);
-    }
-    return rendered;
-  };
-  const el = panel.renderScope ? panel.renderScope.run(render)! : render();
-  canvasPerf.subtreeRenders += 1;
-
-  // Match full-render edit display: canvas content never receives pointer events directly.
-  if (el instanceof HTMLElement) {
-    el.style.pointerEvents = "none";
-    for (const child of el.querySelectorAll("*")) {
-      (child as HTMLElement).style.pointerEvents = "none";
-    }
-  }
-  return el;
-}
-
-/**
- * Inverse of makePathMapper's layout-prefix strip: document paths are relative to the page doc,
- * render paths to the layout-merged doc. ($map/$switch paths never reach here — the patcher
- * escalates them.)
- *
- * @param {JxPath} docPath
- * @param {PanelLiveCtx} liveCtx
- */
-function docPathToRenderPath(docPath: JxPath, liveCtx: PanelLiveCtx): (string | number)[] {
-  if (liveCtx.layoutWrapped && liveCtx.pageContentPrefix && docPath[0] === "children") {
-    // Re-apply the slot-container offset stripped by makePathMapper: page child index N renders at
-    // Container index N + offset (offset = leading layout siblings before the <slot>).
-    const [, idx] = docPath;
-    return typeof idx === "number"
-      ? [...liveCtx.pageContentPrefix, idx + (liveCtx.pageContentOffset ?? 0), ...docPath.slice(2)]
-      : [...liveCtx.pageContentPrefix, ...docPath.slice(1)];
-  }
-  return docPath;
-}
-
-/**
- * The DOM node currently occupying children[index] of the rendered parent, or null when appending
- * at the end. The runtime renders an optional leading text node (from textContent) followed by one
- * DOM node per children entry, in order.
- *
- * @param {Element} parentEl
- * @param {JxMutableNode} parentNode
- * @param {number} index
- */
-export function domChildReference(
-  parentEl: Element,
-  parentNode: JxMutableNode,
-  index: number,
-): ChildNode | null {
-  const text = parentNode.textContent;
-  const textOffset = text != null && String(text) !== "" ? 1 : 0;
-  return parentEl.childNodes[textOffset + index] ?? null;
-}

package/src/editor/component-inline-edit.ts

@@ -1,349 +0,0 @@
-/// <reference lib="dom" />
-/**
- * Component inline edit — extracted from studio.js (Phase 4j). Manages plaintext-only editing on
- * canvas elements in design mode, with slash menu delegation for block insertion.
- */
-
-import {
-  canvasPanels,
-  childIndex,
-  elToPath,
-  getNodeAtPath,
-  parentElementPath,
-  renderOnly,
-  updateUi,
-} from "../store";
-import { activeTab } from "../workspace/workspace";
-import type { JxPath } from "../state";
-import {
-  mutateInsertNode,
-  mutateRemoveNode,
-  mutateUpdateProperty,
-  transactDoc,
-} from "../tabs/transact";
-import { view } from "../view";
-import { panelMediaToActiveMedia } from "../canvas/canvas-helpers";
-import { dismissSlashMenu, isSlashMenuOpen, showSlashMenu } from "./slash-menu";
-import { renderBlockActionBar } from "../panels/block-action-bar";
-import { defaultDef } from "../panels/shared";
-
-/**
- * Initialize the component inline edit module.
- *
- * @param {{
- *   findCanvasElement: (
- *     path: import("../state").JxPath,
- *     canvasEl: HTMLElement,
- *   ) => HTMLElement | null;
- * }} _ctx
- */
-export function initComponentInlineEdit(_ctx: {
-  findCanvasElement: (path: JxPath, canvasEl: HTMLElement) => HTMLElement | null;
-}) {
-  // Public init hook retained for API symmetry; the ctx it once stored is no longer read here.
-  void _ctx;
-}
-
-/**
- * Enter plaintext inline editing on a canvas element.
- *
- * @param {HTMLElement} el
- * @param {JxPath} path
- */
-export function enterComponentInlineEdit(el: HTMLElement, path: JxPath) {
-  if (view.componentInlineEdit && view.componentInlineEdit.el === el) {
-    return;
-  }
-
-  const node = getNodeAtPath(activeTab.value!.doc.document, path);
-  if (!node) {
-    return;
-  }
-
-  const tc = node.textContent;
-  if (node.$props && (node.tagName || "").includes("-")) {
-    return;
-  }
-  if (Array.isArray(node.children) && node.children.length > 0) {
-    return;
-  }
-  if (node.children && typeof node.children === "object") {
-    return;
-  }
-  if (tc && typeof tc === "object") {
-    return;
-  }
-  const voids = new Set(["img", "input", "br", "hr", "video", "audio", "source", "embed", "slot"]);
-  if (voids.has(node.tagName || "")) {
-    return;
-  }
-
-  for (const p of canvasPanels) {
-    const boxes = p.overlay.querySelectorAll(".overlay-box") as NodeListOf<HTMLElement>;
-    for (const box of boxes) {
-      box.style.border = "none";
-    }
-    p.overlayClk.style.pointerEvents = "none";
-  }
-
-  el.contentEditable = "plaintext-only";
-  el.style.pointerEvents = "auto";
-  el.style.cursor = "text";
-  el.style.outline = "1px solid var(--accent, #4f8bc7)";
-  el.style.outlineOffset = "-1px";
-  el.style.minHeight = "1em";
-
-  const rawText = typeof tc === "string" ? tc : "";
-  el.textContent = rawText;
-
-  view.componentInlineEdit = {
-    el,
-    mediaName: canvasPanels.find((p) => p.canvas.contains(el))?.mediaName || null,
-    originalText: rawText,
-    path,
-  };
-
-  el.focus();
-  const sel = window.getSelection();
-  const range = document.createRange();
-  range.selectNodeContents(el);
-  range.collapse(false);
-  sel?.removeAllRanges();
-  sel?.addRange(range);
-
-  el.addEventListener("keydown", componentInlineKeydown);
-  el.addEventListener("input", componentInlineInput);
-
-  const outsideHandler = (evt: MouseEvent) => {
-    if (!view.componentInlineEdit) {
-      document.removeEventListener("mousedown", outsideHandler, true);
-      return;
-    }
-    if (view.componentInlineEdit.el.contains(evt.target as Node)) {
-      return;
-    }
-    if (isSlashMenuOpen()) {
-      return;
-    }
-    if (view.blockActionBarEl && view.blockActionBarEl.contains(evt.target as Node)) {
-      return;
-    }
-    document.removeEventListener("mousedown", outsideHandler, true);
-
-    let hitMedia = null;
-    let hitPath: (string | number)[] | null = null;
-    for (const p of canvasPanels) {
-      const els = p.canvas.querySelectorAll("*") as NodeListOf<HTMLElement>;
-      for (const child of els) {
-        child.style.pointerEvents = "auto";
-      }
-      p.overlayClk.style.display = "none";
-      const found = document.elementsFromPoint(evt.clientX, evt.clientY);
-      p.overlayClk.style.display = "";
-      for (const child of els) {
-        child.style.pointerEvents = "none";
-      }
-      for (const hit of found) {
-        if (p.canvas.contains(hit) && hit !== p.canvas) {
-          const hitElPath = elToPath.get(hit);
-          if (hitElPath) {
-            hitPath = hitElPath;
-            hitMedia = p.mediaName;
-            break;
-          }
-        }
-      }
-      if (hitPath) {
-        break;
-      }
-    }
-
-    const { el: editEl, path: editPath, originalText } = view.componentInlineEdit;
-    const newText = (editEl.textContent ?? "").trim();
-    cleanupComponentInlineEdit(editEl);
-
-    const isEmpty = !newText;
-    const pPath = parentElementPath(editPath);
-
-    if (hitPath) {
-      let hp = hitPath;
-      const media = panelMediaToActiveMedia(hitMedia);
-      updateUi("pendingInlineEdit", { mediaName: hitMedia, path: hp });
-      activeTab.value!.session.ui.activeMedia = media;
-      if (isEmpty && pPath) {
-        transactDoc(activeTab.value, (t) => {
-          mutateRemoveNode(t, editPath);
-          const removedIdx = childIndex(editPath) as number;
-          const hitIdx = childIndex(hp) as number;
-          const hitParent = parentElementPath(hp);
-          if (
-            hitParent &&
-            pPath &&
-            hitParent.join("/") === pPath.join("/") &&
-            hitIdx > removedIdx
-          ) {
-            hp = [...pPath, "children", hitIdx - 1];
-            updateUi("pendingInlineEdit", { mediaName: hitMedia, path: hp });
-          }
-          t.session.selection = hp;
-        });
-      } else if (newText !== originalText) {
-        transactDoc(activeTab.value, (t) => {
-          mutateUpdateProperty(t, editPath, "textContent", newText || undefined);
-          t.session.selection = hp;
-        });
-      } else {
-        activeTab.value!.session.selection = hp;
-      }
-    } else if (isEmpty && pPath) {
-      transactDoc(activeTab.value, (t) => mutateRemoveNode(t, editPath));
-    } else if (newText !== originalText) {
-      transactDoc(activeTab.value, (t) =>
-        mutateUpdateProperty(t, editPath, "textContent", newText || undefined),
-      );
-    } else {
-      renderOnly("canvas");
-      renderOnly("overlays");
-    }
-  };
-  document.addEventListener("mousedown", outsideHandler, true);
-  view.componentInlineEdit._outsideHandler = outsideHandler;
-
-  renderBlockActionBar();
-}
-
-/** @param {KeyboardEvent} e */
-function componentInlineKeydown(e: KeyboardEvent) {
-  if (isSlashMenuOpen() && ["ArrowDown", "ArrowUp", "Enter", "Escape"].includes(e.key)) {
-    return;
-  }
-
-  if (e.key === "Enter" && !e.shiftKey) {
-    e.preventDefault();
-    splitParagraph();
-  } else if (e.key === "Escape") {
-    e.preventDefault();
-    cancelComponentInlineEdit();
-  }
-  e.stopPropagation();
-}
-
-function splitParagraph() {
-  if (!view.componentInlineEdit) {
-    return;
-  }
-  const { el, path, mediaName } = view.componentInlineEdit;
-
-  const sel = el.ownerDocument.defaultView?.getSelection() as Selection | null;
-  const fullText = el.textContent || "";
-  let offset = fullText.length;
-  if (sel && sel.rangeCount) {
-    const range = sel.getRangeAt(0);
-    const preRange = document.createRange();
-    preRange.selectNodeContents(el);
-    preRange.setEnd(range.startContainer, range.startOffset);
-    offset = preRange.toString().length;
-  }
-
-  const textBefore = fullText.slice(0, offset);
-  const textAfter = fullText.slice(offset);
-
-  const tag = "p";
-  const pPath = parentElementPath(path) as JxPath;
-  const idx = childIndex(path) as number;
-  if (!pPath) {
-    return;
-  }
-
-  const newDef = { tagName: tag, textContent: textAfter };
-  const newPath = [...pPath, "children", idx + 1];
-
-  cleanupComponentInlineEdit(el);
-
-  transactDoc(activeTab.value, (t) => {
-    mutateUpdateProperty(t, path, "textContent", textBefore || undefined);
-    mutateInsertNode(t, pPath, idx + 1, newDef);
-    t.session.selection = newPath;
-  });
-
-  updateUi("pendingInlineEdit", { mediaName, path: newPath });
-}
-
-function cancelComponentInlineEdit() {
-  if (!view.componentInlineEdit) {
-    return;
-  }
-  const { el } = view.componentInlineEdit;
-  cleanupComponentInlineEdit(el);
-  renderOnly("canvas");
-  renderOnly("overlays");
-}
-
-/** @param {HTMLElement} el */
-function cleanupComponentInlineEdit(el: HTMLElement) {
-  el.removeEventListener("keydown", componentInlineKeydown);
-  el.removeEventListener("input", componentInlineInput);
-  dismissSlashMenu();
-  el.removeAttribute("contenteditable");
-  el.style.cursor = "";
-  el.style.outline = "";
-  el.style.outlineOffset = "";
-  el.style.minHeight = "";
-  el.style.pointerEvents = "";
-
-  if (view.componentInlineEdit?._outsideHandler) {
-    document.removeEventListener("mousedown", view.componentInlineEdit._outsideHandler, true);
-  }
-  view.componentInlineEdit = null;
-
-  for (const p of canvasPanels) {
-    p.overlay.style.display = "";
-    p.overlayClk.style.pointerEvents = "";
-  }
-}
-
-// ─── Component-mode slash commands ──────────────────────────────────────────
-
-function componentInlineInput() {
-  if (!view.componentInlineEdit) {
-    return;
-  }
-  const { el, originalText } = view.componentInlineEdit;
-  const text = el.textContent || "";
-
-  if (originalText === "" && text.startsWith("/")) {
-    const filter = text.slice(1).toLowerCase();
-    showSlashMenu(el, filter, { onSelect: handleComponentSlashSelect });
-  } else {
-    dismissSlashMenu();
-  }
-}
-
-/** @param {{ tag: string; label: string; description: string }} cmd */
-function handleComponentSlashSelect(cmd: { tag: string; label: string; description: string }) {
-  if (!view.componentInlineEdit) {
-    return;
-  }
-  const { el, path, mediaName } = view.componentInlineEdit;
-  const pPath = parentElementPath(path);
-  const idx = childIndex(path) as number;
-  if (!pPath) {
-    return;
-  }
-
-  cleanupComponentInlineEdit(el);
-
-  const newDef = defaultDef(cmd.tag);
-  const newPath = [...pPath, "children", idx];
-
-  transactDoc(activeTab.value, (t) => {
-    mutateRemoveNode(t, path);
-    mutateInsertNode(t, pPath, idx, newDef);
-    t.session.selection = newPath;
-  });
-
-  const hasText = newDef.textContent != null;
-  if (hasText) {
-    updateUi("pendingInlineEdit", { mediaName, path: newPath });
-  }
-}