@jxsuite/studio 0.33.0 → 0.35.0

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 });
-  }
-}

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

@@ -1,207 +0,0 @@
-/// <reference lib="dom" />
-import { canvasPanels, childIndex, getNodeAtPath, parentElementPath, renderOnly } from "../store";
-import { activeTab } from "../workspace/workspace";
-import { mutateInsertNode, mutateUpdateProperty, transactDoc } from "../tabs/transact";
-import { view } from "../view";
-import { isEditableBlock, startEditing } from "./inline-edit";
-import { restoreTemplateExpressions } from "../utils/edit-display";
-import { renderBlockActionBar } from "../panels/block-action-bar";
-import { defaultDef } from "../panels/shared";
-import { findCanvasElement, getActivePanel } from "../canvas/canvas-helpers";
-
-import type { JxContentResult, SlashCommand } from "./inline-edit";
-import type { JxPath } from "../state";
-import type { JxMutableNode } from "@jxsuite/schema/types";
-
-/**
- * Enter rich-text inline editing on a canvas element (edit/content mode).
- *
- * @param {HTMLElement} el
- * @param {JxPath} path
- */
-export function enterInlineEdit(el: HTMLElement, path: JxPath) {
-  // Restore raw template expressions before editing.
-  // PrepareForEditMode renders ${expr} as ❪ expr ❫ for display;
-  // Revert so the user edits the real syntax and commits it back intact.
-  restoreTemplateExpressions(el);
-
-  // Hide overlays while editing
-  for (const p of canvasPanels) {
-    p.overlay.style.display = "none";
-    p.overlayClk.style.pointerEvents = "none";
-  }
-
-  startEditing(el, path, {
-    onCommit(
-      commitPath: JxPath,
-      children: (JxMutableNode | string)[] | null,
-      textContent: string | null,
-    ) {
-      const node = getNodeAtPath(activeTab.value!.doc.document, commitPath);
-      if (children) {
-        if (node && JSON.stringify(node.children) === JSON.stringify(children)) {
-          return;
-        }
-        transactDoc(activeTab.value, (t) => {
-          mutateUpdateProperty(t, commitPath, "textContent");
-          mutateUpdateProperty(t, commitPath, "children", children);
-        });
-      } else if (textContent != null) {
-        if (node && node.textContent === textContent && !node.children) {
-          return;
-        }
-        transactDoc(activeTab.value, (t) => {
-          mutateUpdateProperty(t, commitPath, "children");
-          mutateUpdateProperty(t, commitPath, "textContent", textContent);
-        });
-      }
-    },
-
-    onEnd() {
-      if (view.inlineEditCleanup) {
-        view.inlineEditCleanup();
-        view.inlineEditCleanup = null;
-      }
-      for (const p of canvasPanels) {
-        p.overlay.style.display = "";
-        p.overlayClk.style.pointerEvents = "";
-      }
-      renderOnly("overlays");
-    },
-
-    onInsert(afterPath: JxPath, cmd: SlashCommand, commitData: JxContentResult | undefined) {
-      const isEmpty =
-        !commitData ||
-        (commitData.textContent != null && commitData.textContent.trim() === "") ||
-        (commitData.children &&
-          (commitData.children.length === 0 ||
-            (commitData.children.length === 1 &&
-              typeof commitData.children[0] === "string" &&
-              commitData.children[0].trim() === "") ||
-            (commitData.children.length === 1 &&
-              typeof commitData.children[0] === "object" &&
-              commitData.children[0]?.tagName === "br")));
-
-      // If the element is empty, swap its tagName instead of inserting after
-      if (isEmpty) {
-        transactDoc(activeTab.value, (t) => {
-          mutateUpdateProperty(t, afterPath, "tagName", cmd.tag);
-          mutateUpdateProperty(t, afterPath, "children");
-          const def = defaultDef(cmd.tag);
-          if (def.textContent && def.textContent !== "Paragraph text") {
-            mutateUpdateProperty(t, afterPath, "textContent", def.textContent);
-          } else {
-            mutateUpdateProperty(t, afterPath, "textContent");
-          }
-          t.session.selection = afterPath;
-        });
-
-        requestAnimationFrame(() => {
-          const activePanel = getActivePanel();
-          if (activePanel) {
-            const nextEl = findCanvasElement(afterPath, activePanel.canvas);
-            if (nextEl && isEditableBlock(nextEl)) {
-              enterInlineEdit(nextEl, afterPath);
-            }
-          }
-        });
-        return;
-      }
-
-      const elementDef = defaultDef(cmd.tag);
-      const parentPath = parentElementPath(afterPath) as JxPath;
-      const idx = childIndex(afterPath) as number;
-      const newPath = [...parentPath, "children", idx + 1];
-
-      // Apply pending commit from inline edit first (batched to avoid double render)
-      transactDoc(activeTab.value, (t) => {
-        if (commitData) {
-          if (commitData.children) {
-            mutateUpdateProperty(t, afterPath, "textContent");
-            mutateUpdateProperty(t, afterPath, "children", commitData.children);
-          } else if (commitData.textContent != null) {
-            mutateUpdateProperty(t, afterPath, "children");
-            mutateUpdateProperty(t, afterPath, "textContent", commitData.textContent);
-          }
-        }
-        mutateInsertNode(t, parentPath, idx + 1, structuredClone(elementDef));
-        t.session.selection = newPath;
-      });
-
-      // If the inserted element is editable, enter editing
-      requestAnimationFrame(() => {
-        const activePanel = getActivePanel();
-        if (activePanel) {
-          const newEl = findCanvasElement(newPath, activePanel.canvas);
-          if (newEl && isEditableBlock(newEl)) {
-            enterInlineEdit(newEl, newPath);
-          }
-        }
-      });
-    },
-
-    onSplit(splitPath: JxPath, before: JxContentResult, after: JxContentResult) {
-      const tag = "p";
-
-      // Insert new element after with "after" content
-      const parentPath = parentElementPath(splitPath) as JxPath;
-      const idx = childIndex(splitPath) as number;
-      const newNode: JxMutableNode = { tagName: tag };
-      if (after.textContent != null) {
-        newNode.textContent = after.textContent;
-      } else if (after.children) {
-        newNode.children = after.children;
-      } else {
-        newNode.textContent = "";
-      }
-
-      const newPath = [...parentPath, "children", idx + 1];
-
-      transactDoc(activeTab.value, (t) => {
-        if (before.textContent != null) {
-          mutateUpdateProperty(t, splitPath, "children");
-          mutateUpdateProperty(t, splitPath, "textContent", before.textContent);
-        } else if (before.children) {
-          mutateUpdateProperty(t, splitPath, "textContent");
-          mutateUpdateProperty(t, splitPath, "children", before.children);
-        }
-        mutateInsertNode(t, parentPath, idx + 1, newNode);
-        t.session.selection = newPath;
-      });
-
-      // Re-enter editing on the new element after render
-      requestAnimationFrame(() => {
-        const activePanel = getActivePanel();
-        if (activePanel) {
-          const newEl = findCanvasElement(newPath, activePanel.canvas);
-          if (newEl && isEditableBlock(newEl)) {
-            enterInlineEdit(newEl, newPath);
-            // Place cursor at start of new element
-            const sel = window.getSelection();
-            const range = document.createRange();
-            range.selectNodeContents(newEl);
-            range.collapse(true);
-            sel?.removeAllRanges();
-            sel?.addRange(range);
-          }
-        }
-      });
-    },
-  });
-
-  // Show the block action bar (with inline formatting buttons) on the viewport
-  requestAnimationFrame(() => renderBlockActionBar());
-
-  // Re-render action bar when selection changes inside contenteditable
-  const selectionHandler = () => renderBlockActionBar();
-  document.addEventListener("selectionchange", selectionHandler);
-  el.addEventListener("mouseup", selectionHandler);
-  el.addEventListener("keyup", selectionHandler);
-
-  const inlineEditCleanup = () => {
-    document.removeEventListener("selectionchange", selectionHandler);
-    el.removeEventListener("mouseup", selectionHandler);
-    el.removeEventListener("keyup", selectionHandler);
-  };
-  view.inlineEditCleanup = inlineEditCleanup;
-}