@jxsuite/studio 0.7.0 → 0.9.0

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

@@ -0,0 +1,220 @@
+/**
+ * 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,
+  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";
+
+/** @type {any} */
+let _ctx = null;
+
+/**
+ * Initialize the content inline edit module.
+ *
+ * @param {{ findCanvasElement: Function; getActivePanel: Function }} ctx
+ */
+export function initContentInlineEdit(ctx) {
+  _ctx = ctx;
+}
+
+/**
+ * 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();
+      if (children) {
+        let s = updateProperty(S, commitPath, "textContent", undefined);
+        s = updateProperty(s, commitPath, "children", children);
+        update(s);
+      } else if (textContent != null) {
+        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 = _ctx.getActivePanel();
+        if (activePanel) {
+          const newEl = _ctx.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 = _ctx.getActivePanel();
+          if (activePanel) {
+            const el = _ctx.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 = _ctx.getActivePanel();
+        if (activePanel) {
+          const newEl = _ctx.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/editor/insertion-helper.js

@@ -0,0 +1,301 @@
+/**
+ * Insertion-helper.js — Single floating "+" button for element insertion on the canvas.
+ *
+ * Uses CSS Anchor Positioning to attach to sibling boundaries and empty containers. Uses Native
+ * Observables (Chrome 135+) for declarative event handling.
+ */
+
+import { showSlashMenu } from "./slash-menu.js";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+/**
+ * @typedef {Object} ObservableSubscription
+ * @property {(obj: { next: Function }) => void} subscribe - Subscribes to the observable stream.
+ */
+
+/**
+ * @typedef {Object} ObservableElement
+ * @property {(event: string, options?: Object) => ObservableSubscription} on - Creates an
+ *   observable for the given event.
+ */
+
+/**
+ * @typedef {Object} CanvasPanel
+ * @property {HTMLElement} canvas - The canvas content element.
+ * @property {HTMLElement & ObservableElement} overlayClk - The overlay click-capture layer.
+ * @property {HTMLElement} overlay - The overlay rendering layer.
+ * @property {HTMLElement} viewport - The viewport container (containing block for anchor
+ *   positioning).
+ */
+
+/**
+ * @typedef {Object} InsertionHelperContext
+ * @property {() => any} getState - Returns the current editor state.
+ * @property {(state: any) => void} update - Commits a new state.
+ * @property {() => string} getCanvasMode - Returns the active canvas mode.
+ * @property {(fn: Function) => any} withPanelPointerEvents - Executes fn with pointer-events
+ *   temporarily enabled on the canvas.
+ * @property {() => number} effectiveZoom - Returns the current zoom scale factor.
+ * @property {(tag: string) => Object} defaultDef - Creates a default element definition for a tag.
+ * @property {(s: any, path: any[], idx: number, def: Object) => any} insertNode - Inserts a node
+ *   into the document tree.
+ * @property {(s: any, path: any[]) => any} selectNode - Sets the selection to the given path.
+ * @property {(path: any[]) => any[] | null} parentElementPath - Returns the parent element path, or
+ *   null for root.
+ * @property {(path: any[]) => string | number} childIndex - Returns the child index within the
+ *   parent.
+ * @property {(doc: any, path: any[]) => any} getNodeAtPath - Retrieves the node at a document path.
+ * @property {WeakMap<any, any[]>} elToPath - Maps rendered DOM elements to their document paths.
+ * @property {CanvasPanel} panel - The active canvas panel.
+ */
+
+// ─── State ───────────────────────────────────────────────────────────────────
+
+/** @type {InsertionHelperContext | null} */
+let _ctx = null;
+
+/** @type {HTMLElement | null} */
+let _helper = null;
+
+/** @type {HTMLElement | null} */
+let _currentAnchor = null;
+
+/** @type {{ edge: string; path: any[]; parentPath: any[]; idx: number } | null} */
+let _insertionPoint = null;
+
+/** @type {AbortController | null} */
+let _abort = null;
+
+/** @type {ReturnType<typeof setTimeout> | null} */
+let _hideTimer = null;
+
+// Edge detection threshold in pixels
+const EDGE_THRESHOLD = 14;
+
+// Delay before hiding to allow cursor to reach the button
+const HIDE_DELAY = 300;
+
+// ─── Public API ──────────────────────────────────────────────────────────────
+
+/**
+ * Mount the insertion helper system.
+ *
+ * @param {InsertionHelperContext} ctx
+ */
+export function mount(ctx) {
+  _ctx = ctx;
+  const { panel } = ctx;
+
+  _helper = document.createElement("button");
+  _helper.className = "insertion-helper";
+  _helper.textContent = "+";
+  _helper.addEventListener("click", onHelperClick);
+  _helper.addEventListener("mouseenter", () => {
+    cancelHide();
+  });
+  _helper.addEventListener("mouseleave", () => {
+    scheduleHide();
+  });
+  panel.viewport.appendChild(_helper);
+
+  _abort = new AbortController();
+
+  // Listen on viewport — overlayClk gets pointer-events:none during editing/selection
+  const viewport = /** @type {HTMLElement & ObservableElement} */ (panel.viewport);
+  if (typeof viewport.on === "function") {
+    viewport.on("mousemove", { signal: _abort.signal }).subscribe({ next: onMouseMove });
+    viewport.on("mouseleave", { signal: _abort.signal }).subscribe({ next: hide });
+  } else {
+    panel.viewport.addEventListener("mousemove", onMouseMove, { signal: _abort.signal });
+    panel.viewport.addEventListener("mouseleave", hide, { signal: _abort.signal });
+  }
+}
+
+export function unmount() {
+  _abort?.abort();
+  _abort = null;
+  cancelHide();
+  if (_helper?.parentElement) _helper.remove();
+  clearAnchor();
+  _helper = null;
+  _ctx = null;
+  _insertionPoint = null;
+}
+
+// ─── Detection ───────────────────────────────────────────────────────────────
+
+/** @param {MouseEvent} e */
+function onMouseMove(e) {
+  if (!_ctx || !_helper) return;
+
+  const { getCanvasMode } = _ctx;
+  if (getCanvasMode() !== "design") {
+    hide();
+    return;
+  }
+
+  const { panel, withPanelPointerEvents, elToPath } = _ctx;
+  const el = withPanelPointerEvents(() => document.elementFromPoint(e.clientX, e.clientY));
+
+  if (!el || !panel.canvas.contains(el)) {
+    hide();
+    return;
+  }
+
+  const path = elToPath.get(el);
+  if (!path) {
+    hide();
+    return;
+  }
+
+  // Empty container: show centered "+"
+  if (el.classList.contains("empty-container-placeholder")) {
+    showAt(el, "center", path, path, 0);
+    return;
+  }
+
+  // Root element — can't insert siblings above/below root
+  if (path.length === 0) {
+    hide();
+    return;
+  }
+
+  // Determine layout direction of parent container
+  const parent = el.parentElement;
+  if (!parent) {
+    hide();
+    return;
+  }
+
+  const parentStyle = getComputedStyle(parent);
+  const display = parentStyle.display;
+  const isFlex = display === "flex" || display === "inline-flex";
+  const isGrid = display === "grid" || display === "inline-grid";
+  const isRow =
+    (isFlex && parentStyle.flexDirection.startsWith("row")) ||
+    (isGrid && parentStyle.gridAutoFlow?.startsWith("column"));
+
+  // Calculate relative position within element
+  const rect = el.getBoundingClientRect();
+  const parentPath = _ctx.parentElementPath(path);
+  if (!parentPath) {
+    hide();
+    return;
+  }
+  const childIdx = /** @type {number} */ (_ctx.childIndex(path));
+
+  if (isRow) {
+    const relX = e.clientX - rect.left;
+    if (relX < EDGE_THRESHOLD) {
+      showAt(el, "left", path, parentPath, childIdx);
+    } else if (rect.width - relX < EDGE_THRESHOLD) {
+      showAt(el, "right", path, parentPath, childIdx + 1);
+    } else {
+      hide();
+    }
+  } else {
+    const relY = e.clientY - rect.top;
+    if (relY < EDGE_THRESHOLD) {
+      showAt(el, "top", path, parentPath, childIdx);
+    } else if (rect.height - relY < EDGE_THRESHOLD) {
+      showAt(el, "bottom", path, parentPath, childIdx + 1);
+    } else {
+      hide();
+    }
+  }
+}
+
+// ─── Show / Hide ─────────────────────────────────────────────────────────────
+
+/**
+ * @param {HTMLElement} el
+ * @param {string} edge
+ * @param {any[]} path
+ * @param {any[]} parentPath
+ * @param {number} idx
+ */
+function showAt(el, edge, path, parentPath, idx) {
+  if (!_helper) return;
+
+  // Set CSS anchor on target element
+  if (_currentAnchor !== el) {
+    clearAnchor();
+    el.style.anchorName = "--jx-insert";
+    _currentAnchor = el;
+  }
+
+  _helper.dataset.edge = edge;
+  _helper.classList.add("visible");
+  _insertionPoint = { edge, path, parentPath, idx };
+  cancelHide();
+}
+
+function scheduleHide() {
+  cancelHide();
+  _hideTimer = setTimeout(hideNow, HIDE_DELAY);
+}
+
+function cancelHide() {
+  if (_hideTimer !== null) {
+    clearTimeout(_hideTimer);
+    _hideTimer = null;
+  }
+}
+
+function hide() {
+  scheduleHide();
+}
+
+function hideNow() {
+  _hideTimer = null;
+  if (!_helper) return;
+  _helper.classList.remove("visible");
+  clearAnchor();
+  _insertionPoint = null;
+}
+
+function clearAnchor() {
+  if (_currentAnchor) {
+    _currentAnchor.style.anchorName = "";
+    _currentAnchor = null;
+  }
+}
+
+// ─── Insertion ───────────────────────────────────────────────────────────────
+
+function onHelperClick(/** @type {MouseEvent} */ e) {
+  e.stopPropagation();
+  e.preventDefault();
+
+  if (!_ctx || !_helper || !_insertionPoint) return;
+
+  const captured = _insertionPoint;
+  showSlashMenu(_helper, "", {
+    showFilter: true,
+    onSelect: (cmd) => onSlashSelect(cmd, captured),
+  });
+}
+
+/**
+ * @param {any} cmd
+ * @param {{ edge: string; path: any[]; parentPath: any[]; idx: number }} point
+ */
+function onSlashSelect(cmd, point) {
+  if (!_ctx) return;
+
+  const { getState, update, defaultDef, insertNode, selectNode } = _ctx;
+  const S = getState();
+  const { parentPath, idx, edge } = point;
+
+  const newDef = defaultDef(cmd.tag);
+  const insertPath = edge === "center" ? point.path : parentPath;
+  const insertIdx = edge === "center" ? 0 : idx;
+
+  let s = insertNode(S, insertPath, insertIdx, newDef);
+  const newPath = [...insertPath, "children", insertIdx];
+  s = selectNode(s, newPath);
+  update(s);
+
+  hide();
+}