@jxsuite/studio 0.8.0 → 0.10.1

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

@@ -0,0 +1,317 @@
+/**
+ * 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 {
+  getState,
+  update,
+  updateUi,
+  renderOnly,
+  getNodeAtPath,
+  selectNode,
+  removeNode,
+  insertNode,
+  updateProperty,
+  parentElementPath,
+  childIndex,
+  canvasPanels,
+  elToPath,
+} from "../store.js";
+import { view } from "../view.js";
+import { isSlashMenuOpen, showSlashMenu, dismissSlashMenu } from "./slash-menu.js";
+import { renderBlockActionBar } from "../panels/block-action-bar.js";
+import { defaultDef } from "../panels/shared.js";
+
+/** @type {any} */
+let _ctx = null;
+
+/**
+ * Initialize the component inline edit module.
+ *
+ * @param {{ findCanvasElement: Function }} ctx
+ */
+export function initComponentInlineEdit(ctx) {
+  _ctx = ctx;
+}
+
+/**
+ * Enter plaintext inline editing on a canvas element.
+ *
+ * @param {any} el
+ * @param {any} path
+ */
+export function enterComponentInlineEdit(el, path) {
+  if (view.componentInlineEdit && view.componentInlineEdit.el === el) {
+    return;
+  }
+
+  const S = getState();
+  const node = getNodeAtPath(S.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");
+    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,
+    path,
+    originalText: rawText,
+    mediaName: canvasPanels.find((p) => p.canvas.contains(el))?.mediaName || null,
+  };
+
+  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 = (/** @type {any} */ evt) => {
+    if (!view.componentInlineEdit) {
+      document.removeEventListener("mousedown", outsideHandler, true);
+      return;
+    }
+    if (view.componentInlineEdit.el.contains(evt.target)) return;
+    if (isSlashMenuOpen()) return;
+    if (view.blockActionBarEl && view.blockActionBarEl.contains(evt.target)) return;
+    document.removeEventListener("mousedown", outsideHandler, true);
+
+    let hitPath = null,
+      hitMedia = null;
+    for (const p of canvasPanels) {
+      const els = p.canvas.querySelectorAll("*");
+      for (const el of els) el.style.pointerEvents = "auto";
+      p.overlayClk.style.display = "none";
+      const found = document.elementsFromPoint(evt.clientX, evt.clientY);
+      p.overlayClk.style.display = "";
+      for (const el of els) el.style.pointerEvents = "none";
+      for (const hit of found) {
+        if (p.canvas.contains(hit) && hit !== p.canvas) {
+          const path = elToPath.get(hit);
+          if (path) {
+            hitPath = path;
+            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);
+    const S = getState();
+
+    if (hitPath) {
+      const media = hitMedia === "base" ? null : (hitMedia ?? null);
+      updateUi("pendingInlineEdit", { path: hitPath, mediaName: hitMedia });
+      const withMedia = { ...S, ui: { ...S.ui, activeMedia: media } };
+      if (isEmpty && pPath) {
+        let s = removeNode(withMedia, editPath);
+        const removedIdx = /** @type {number} */ (childIndex(editPath));
+        const hitIdx = /** @type {number} */ (childIndex(hitPath));
+        const hitParent = parentElementPath(hitPath);
+        if (hitParent && pPath && hitParent.join("/") === pPath.join("/") && hitIdx > removedIdx) {
+          hitPath = [...pPath, "children", hitIdx - 1];
+          updateUi("pendingInlineEdit", { path: hitPath, mediaName: hitMedia });
+        }
+        update(selectNode(s, hitPath));
+      } else if (newText !== originalText) {
+        update(
+          selectNode(
+            updateProperty(withMedia, editPath, "textContent", newText || undefined),
+            hitPath,
+          ),
+        );
+      } else {
+        update(selectNode(withMedia, hitPath));
+      }
+    } else {
+      if (isEmpty && pPath) {
+        update(removeNode(S, editPath));
+      } else if (newText !== originalText) {
+        update(updateProperty(S, editPath, "textContent", newText || undefined));
+      } else {
+        renderOnly("canvas");
+        renderOnly("overlays");
+      }
+    }
+  };
+  document.addEventListener("mousedown", outsideHandler, true);
+  view.componentInlineEdit._outsideHandler = outsideHandler;
+
+  renderBlockActionBar();
+}
+
+/** @param {any} e */
+function componentInlineKeydown(e) {
+  if (isSlashMenuOpen()) {
+    if (["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 = /** @type {any} */ (el.ownerDocument.defaultView?.getSelection());
+  const fullText = el.textContent || "";
+  let offset = fullText.length;
+  if (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 = /** @type {any} */ (parentElementPath(path));
+  const idx = /** @type {number} */ (childIndex(path));
+  if (!pPath) return;
+
+  const newDef = { tagName: tag, textContent: textAfter };
+  const newPath = [...pPath, "children", idx + 1];
+
+  cleanupComponentInlineEdit(el);
+
+  const S = getState();
+  let s = updateProperty(S, path, "textContent", textBefore || undefined);
+  s = insertNode(s, pPath, idx + 1, newDef);
+  s = selectNode(s, newPath);
+
+  updateUi("pendingInlineEdit", { path: newPath, mediaName });
+  update(s);
+}
+
+function _commitComponentInlineEdit() {
+  if (!view.componentInlineEdit) return;
+  const { el, path, originalText } = view.componentInlineEdit;
+  const newText = (el.textContent ?? "").trim();
+
+  cleanupComponentInlineEdit(el);
+
+  const S = getState();
+  const pPath = parentElementPath(path);
+  if (!newText && pPath) {
+    update(removeNode(S, path));
+  } else if (newText !== originalText) {
+    update(updateProperty(S, path, "textContent", newText || undefined));
+  } else {
+    renderOnly("canvas");
+    renderOnly("overlays");
+  }
+}
+
+function cancelComponentInlineEdit() {
+  if (!view.componentInlineEdit) return;
+  const { el } = view.componentInlineEdit;
+  cleanupComponentInlineEdit(el);
+  renderOnly("canvas");
+  renderOnly("overlays");
+}
+
+/** @param {any} el */
+function cleanupComponentInlineEdit(el) {
+  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 {any} cmd */
+function handleComponentSlashSelect(cmd) {
+  if (!view.componentInlineEdit) return;
+  const { el, path, mediaName } = view.componentInlineEdit;
+  const pPath = parentElementPath(path);
+  const idx = /** @type {number} */ (childIndex(path));
+  if (!pPath) return;
+
+  cleanupComponentInlineEdit(el);
+
+  const S = getState();
+  const newDef = defaultDef(cmd.tag);
+  const newPath = [...pPath, "children", idx];
+
+  let s = removeNode(S, path);
+  s = insertNode(s, pPath, idx, newDef);
+  s = selectNode(s, newPath);
+
+  const hasText = newDef.textContent != null;
+  if (hasText) updateUi("pendingInlineEdit", { path: newPath, mediaName });
+  update(s);
+}

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

@@ -0,0 +1,213 @@
+/**
+ * Content inline edit bridge — extracted from studio.js (Phase 4k). Rich-text editing entry point
+ * for edit/content mode. Bridges startEditing() with Jx document state mutations.
+ */
+
+import {
+  getState,
+  update,
+  renderOnly,
+  selectNode,
+  insertNode,
+  updateProperty,
+  getNodeAtPath,
+  parentElementPath,
+  childIndex,
+  canvasPanels,
+} from "../store.js";
+import { view } from "../view.js";
+import { startEditing, isEditableBlock } from "./inline-edit.js";
+import { restoreTemplateExpressions } from "../utils/edit-display.js";
+import { renderBlockActionBar } from "../panels/block-action-bar.js";
+import { defaultDef } from "../panels/shared.js";
+import { findCanvasElement, getActivePanel } from "../canvas/canvas-helpers.js";
+
+/**
+ * Enter rich-text inline editing on a canvas element (edit/content mode).
+ *
+ * @param {any} el
+ * @param {any} path
+ */
+export function enterInlineEdit(el, path) {
+  // 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(
+      /** @type {any} */ commitPath,
+      /** @type {any} */ children,
+      /** @type {any} */ textContent,
+    ) {
+      const S = getState();
+      const node = getNodeAtPath(S.document, commitPath);
+      if (children) {
+        if (node && JSON.stringify(node.children) === JSON.stringify(children)) return;
+        let s = updateProperty(S, commitPath, "textContent", undefined);
+        s = updateProperty(s, commitPath, "children", children);
+        update(s);
+      } else if (textContent != null) {
+        if (node && node.textContent === textContent && !node.children) return;
+        let s = updateProperty(S, commitPath, "children", undefined);
+        s = updateProperty(s, commitPath, "textContent", textContent);
+        update(s);
+      }
+    },
+
+    onSplit(/** @type {any} */ splitPath, /** @type {any} */ before, /** @type {any} */ after) {
+      const tag = "p";
+      let s = getState();
+
+      if (before.textContent != null) {
+        s = updateProperty(s, splitPath, "children", undefined);
+        s = updateProperty(s, splitPath, "textContent", before.textContent);
+      } else if (before.children) {
+        s = updateProperty(s, splitPath, "textContent", undefined);
+        s = updateProperty(s, splitPath, "children", before.children);
+      }
+
+      // Insert new element after with "after" content
+      const parentPath = /** @type {any} */ (parentElementPath(splitPath));
+      const idx = /** @type {number} */ (childIndex(splitPath));
+      /** @type {any} */
+      const newNode = { tagName: tag };
+      if (after.textContent != null) {
+        newNode.textContent = after.textContent;
+      } else if (after.children) {
+        newNode.children = after.children;
+      } else {
+        newNode.textContent = "";
+      }
+
+      s = insertNode(s, parentPath, idx + 1, newNode);
+      const newPath = [...parentPath, "children", idx + 1];
+      s = selectNode(s, newPath);
+      update(s);
+
+      // 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);
+          }
+        }
+      });
+    },
+
+    onInsert(/** @type {any} */ afterPath, /** @type {any} */ cmd, /** @type {any} */ commitData) {
+      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) {
+        let s = getState();
+        s = updateProperty(s, afterPath, "tagName", cmd.tag);
+        s = updateProperty(s, afterPath, "children", undefined);
+        const def = defaultDef(cmd.tag);
+        if (def.textContent && def.textContent !== "Paragraph text") {
+          s = updateProperty(s, afterPath, "textContent", def.textContent);
+        } else {
+          s = updateProperty(s, afterPath, "textContent", undefined);
+        }
+        s = selectNode(s, afterPath);
+        update(s);
+
+        requestAnimationFrame(() => {
+          const activePanel = getActivePanel();
+          if (activePanel) {
+            const el = findCanvasElement(afterPath, activePanel.canvas);
+            if (el && isEditableBlock(el)) {
+              enterInlineEdit(el, afterPath);
+            }
+          }
+        });
+        return;
+      }
+
+      const elementDef = defaultDef(cmd.tag);
+      const parentPath = /** @type {any} */ (parentElementPath(afterPath));
+      const idx = /** @type {number} */ (childIndex(afterPath));
+
+      // Apply pending commit from inline edit first (batched to avoid double render)
+      let s = getState();
+      if (commitData) {
+        if (commitData.children) {
+          s = updateProperty(s, afterPath, "textContent", undefined);
+          s = updateProperty(s, afterPath, "children", commitData.children);
+        } else if (commitData.textContent != null) {
+          s = updateProperty(s, afterPath, "children", undefined);
+          s = updateProperty(s, afterPath, "textContent", commitData.textContent);
+        }
+      }
+
+      s = insertNode(s, parentPath, idx + 1, structuredClone(elementDef));
+      const newPath = [...parentPath, "children", idx + 1];
+      s = selectNode(s, newPath);
+      update(s);
+
+      // 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);
+          }
+        }
+      });
+    },
+
+    onEnd() {
+      if (view.inlineEditCleanup) {
+        view.inlineEditCleanup();
+        view.inlineEditCleanup = null;
+      }
+      for (const p of canvasPanels) {
+        p.overlay.style.display = "";
+        p.overlayClk.style.pointerEvents = "";
+      }
+      renderOnly("overlays");
+    },
+  });
+
+  // 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;
+}

package/src/panels/block-action-bar.js

@@ -23,6 +23,7 @@ import { isEditing, getActiveElement, getInlineActions } from "../editor/inline-
 import { toggleInlineFormat, isTagActiveInSelection } from "../editor/inline-format.js";
 import { componentRegistry } from "../files/components.js";
 import { convertToComponent } from "../editor/convert-to-component.js";
+import { findCanvasElement, getActivePanel } from "../canvas/canvas-helpers.js";
 
 /** @type {any} */
 let _ctx = null;
@@ -32,8 +33,6 @@ let _ctx = null;
  *
  * @param {{
  *   getCanvasMode: () => string;
- *   findCanvasElement: Function;
- *   getActivePanel: Function;
  *   navigateToComponent: Function;
  *   createFloatingContainer: Function;
  * }} ctx
@@ -186,6 +185,11 @@ export function dismissLinkPopover() {
   if (view.linkPopoverHost) litRender(nothing, view.linkPopoverHost);
 }
 
+/** Dismiss the block action bar. */
+export function dismissBlockActionBar() {
+  if (view.blockActionBarEl) litRender(nothing, view.blockActionBarEl);
+}
+
 /** @param {any} anchorBtn */
 function showLinkPopover(anchorBtn) {
   litRender(nothing, view.linkPopoverHost);
@@ -312,12 +316,12 @@ export function renderBlockActionBar() {
     return;
   }
 
-  const activePanel = _ctx.getActivePanel();
+  const activePanel = getActivePanel();
   if (!activePanel) {
     litRender(nothing, view.blockActionBarEl);
     return;
   }
-  const el = _ctx.findCanvasElement(S.selection, activePanel.canvas);
+  const el = findCanvasElement(S.selection, activePanel.canvas);
   const node = el && getNodeAtPath(S.document, S.selection);
   if (!el || !node) {
     litRender(nothing, view.blockActionBarEl);