@jxsuite/studio 0.8.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/panels/canvas-dnd.js

@@ -0,0 +1,165 @@
+/**
+ * Canvas DnD — extracted from studio.js (Phase 4m). Registers canvas elements as drag-and-drop
+ * targets using @atlaskit/pragmatic-drag-and-drop.
+ */
+
+import {
+  dropTargetForElements,
+  monitorForElements,
+} from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+
+import {
+  getState,
+  elToPath,
+  canvasPanels,
+  getNodeAtPath,
+  VOID_ELEMENTS,
+  isAncestor,
+} from "../store.js";
+import { view } from "../view.js";
+import { applyDropInstruction } from "../panels/dnd.js";
+
+/** @type {any} */
+let _ctx = null;
+
+/**
+ * Initialize the canvas DnD module.
+ *
+ * @param {{ effectiveZoom: () => number }} ctx
+ */
+export function initCanvasDnD(ctx) {
+  _ctx = ctx;
+}
+
+/**
+ * Register all canvas elements in a panel as DnD drop targets.
+ *
+ * @param {any} panel
+ */
+export function registerPanelDnD(panel) {
+  const { canvas, dropLine } = panel;
+  const allEls = canvas.querySelectorAll("*");
+
+  const monitorCleanup = monitorForElements({
+    onDragStart() {
+      for (const el of canvas.querySelectorAll("*")) {
+        /** @type {any} */ (el).style.pointerEvents = "auto";
+      }
+      for (const p of canvasPanels) p.overlayClk.style.pointerEvents = "none";
+    },
+    onDrag({ location }) {
+      view.lastDragInput = location.current.input;
+    },
+    onDrop() {
+      for (const p of canvasPanels) p.dropLine.style.display = "none";
+      view.lastDragInput = null;
+      for (const el of canvas.querySelectorAll("*")) {
+        /** @type {any} */ (el).style.pointerEvents = "none";
+      }
+      for (const p of canvasPanels) p.overlayClk.style.pointerEvents = "";
+    },
+  });
+  view.canvasDndCleanups.push(monitorCleanup);
+
+  const S = getState();
+  for (const el of allEls) {
+    const elPath = elToPath.get(el);
+    if (!elPath) continue;
+
+    const node = getNodeAtPath(S.document, elPath);
+    const isVoid = VOID_ELEMENTS.has((node?.tagName || "div").toLowerCase());
+
+    const cleanup = dropTargetForElements({
+      element: el,
+      canDrop({ source }) {
+        const srcPath = source.data.path;
+        if (srcPath && isAncestor(/** @type {any} */ (srcPath), elPath)) return false;
+        return true;
+      },
+      getData() {
+        return { path: elPath, _isVoid: isVoid };
+      },
+      onDragEnter() {
+        showCanvasDropIndicator(el, elPath, isVoid, panel);
+      },
+      onDrag() {
+        showCanvasDropIndicator(el, elPath, isVoid, panel);
+      },
+      onDragLeave() {
+        dropLine.style.display = "none";
+        el.classList.remove("canvas-drop-target");
+      },
+      onDrop({ source }) {
+        dropLine.style.display = "none";
+        el.classList.remove("canvas-drop-target");
+        const instruction = getCanvasDropInstruction(el, elPath, isVoid);
+        if (!instruction) return;
+        applyDropInstruction(instruction, source.data, elPath);
+      },
+    });
+    view.canvasDndCleanups.push(cleanup);
+  }
+}
+
+/**
+ * @param {any} el
+ * @param {any} elPath
+ * @param {any} isVoid
+ */
+function getCanvasDropInstruction(el, elPath, isVoid) {
+  const rect = el.getBoundingClientRect();
+  if (!view.lastDragInput) return null;
+  const y = view.lastDragInput.clientY;
+  const relY = (y - rect.top) / rect.height;
+
+  if (elPath.length === 0) return { type: "make-child" };
+  if (isVoid) return relY < 0.5 ? { type: "reorder-above" } : { type: "reorder-below" };
+  if (relY < 0.25) return { type: "reorder-above" };
+  if (relY > 0.75) return { type: "reorder-below" };
+  return { type: "make-child" };
+}
+
+/**
+ * @param {any} el
+ * @param {any} elPath
+ * @param {any} isVoid
+ * @param {any} panel
+ */
+function showCanvasDropIndicator(el, elPath, isVoid, panel) {
+  const instruction = getCanvasDropInstruction(el, elPath, isVoid);
+  const { dropLine, viewport } = panel;
+  if (!instruction) {
+    dropLine.style.display = "none";
+    return;
+  }
+
+  const scale = _ctx.effectiveZoom();
+  const wrapRect = viewport.getBoundingClientRect();
+  const elRect = el.getBoundingClientRect();
+  const left = (elRect.left - wrapRect.left + viewport.scrollLeft) / scale;
+  const width = elRect.width / scale;
+
+  if (instruction.type === "make-child") {
+    dropLine.style.display = "block";
+    dropLine.style.top = `${(elRect.top - wrapRect.top + viewport.scrollTop) / scale}px`;
+    dropLine.style.left = `${left}px`;
+    dropLine.style.width = `${width}px`;
+    dropLine.style.height = `${elRect.height / scale}px`;
+    dropLine.className = "canvas-drop-indicator inside";
+    el.classList.add("canvas-drop-target");
+    return;
+  }
+
+  el.classList.remove("canvas-drop-target");
+  const top =
+    instruction.type === "reorder-above"
+      ? (elRect.top - wrapRect.top + viewport.scrollTop) / scale
+      : (elRect.bottom - wrapRect.top + viewport.scrollTop) / scale;
+
+  dropLine.style.display = "block";
+  dropLine.style.top = `${top}px`;
+  dropLine.style.left = `${left}px`;
+  dropLine.style.width = `${width}px`;
+  dropLine.style.height = "2px";
+  dropLine.className = "canvas-drop-indicator line";
+}

package/src/panels/panel-events.js

@@ -0,0 +1,263 @@
+/**
+ * Panel events — extracted from studio.js (Phase 4m). Unified event handler system for canvas
+ * panels: click-to-select, double-click inline edit, context menu, hover tracking, insertion
+ * helper.
+ */
+
+import {
+  update,
+  selectNode,
+  hoverNode,
+  elToPath,
+  pathsEqual,
+  insertNode,
+  parentElementPath,
+  childIndex,
+  getNodeAtPath,
+  renderOnly,
+} from "../store.js";
+import { view } from "../view.js";
+import { stopEditing, isEditing, isEditableBlock } from "../editor/inline-edit.js";
+import { showContextMenu } from "../editor/context-menu.js";
+import * as insertionHelper from "../editor/insertion-helper.js";
+import { defaultDef } from "../panels/shared.js";
+
+/** @type {any} */
+let _ctx = null;
+
+/**
+ * Initialize the panel events module.
+ *
+ * @param {{
+ *   getState: () => any;
+ *   setState: (s: any) => void;
+ *   getCanvasMode: () => string;
+ *   bubbleInlinePath: (doc: any, path: any) => any;
+ *   findCanvasElement: (path: any, canvasEl: any) => any;
+ *   enterInlineEdit: (el: any, path: any) => void;
+ *   navigateToComponent: (path: any) => void;
+ *   effectiveZoom: () => number;
+ * }} ctx
+ */
+export function initPanelEvents(ctx) {
+  _ctx = ctx;
+}
+
+/** @param {any} panel */
+export function registerPanelEvents(panel) {
+  const { canvas, overlayClk, mediaName } = panel;
+  const ac = new AbortController();
+  const opts = { signal: ac.signal };
+  view.canvasEventCleanups.push(() => ac.abort());
+
+  /** @param {any} fn */
+  function withPanelPointerEvents(fn) {
+    const els = canvas.querySelectorAll("*");
+    for (const el of els) el.style.pointerEvents = "auto";
+    overlayClk.style.display = "none";
+    const result = fn();
+    overlayClk.style.display = "";
+    for (const el of els) el.style.pointerEvents = "none";
+    return result;
+  }
+
+  overlayClk.addEventListener(
+    "click",
+    (/** @type {any} */ e) => {
+      const barInner = view.blockActionBarEl?.firstElementChild;
+      if (barInner) {
+        const r = barInner.getBoundingClientRect();
+        if (
+          e.clientX >= r.left &&
+          e.clientX <= r.right &&
+          e.clientY >= r.top &&
+          e.clientY <= r.bottom
+        )
+          return;
+      }
+      if (isEditing()) {
+        stopEditing();
+      }
+
+      const S = _ctx.getState();
+      const canvasMode = _ctx.getCanvasMode();
+
+      const elements = withPanelPointerEvents(() =>
+        document.elementsFromPoint(e.clientX, e.clientY),
+      );
+
+      for (const el of elements) {
+        if (canvas.contains(el) && el !== canvas) {
+          const originalPath = elToPath.get(el);
+          if (originalPath) {
+            let path = _ctx.bubbleInlinePath(S.document, originalPath);
+            const newMedia = mediaName === "base" ? null : (mediaName ?? null);
+            const withMedia = { ...S, ui: { ...S.ui, activeMedia: newMedia } };
+
+            const resolvedEl =
+              path === originalPath ? el : _ctx.findCanvasElement(path, canvas) || el;
+
+            if (
+              pathsEqual(path, S.selection) &&
+              isEditableBlock(resolvedEl) &&
+              (canvasMode === "edit" || S.mode === "content")
+            ) {
+              _ctx.setState(withMedia);
+              _ctx.enterInlineEdit(resolvedEl, path);
+              return;
+            }
+
+            if (canvasMode === "design" && S.mode !== "content") {
+              view.pendingInlineEdit = { path, mediaName };
+              update(selectNode(withMedia, path));
+              return;
+            }
+
+            update(selectNode(withMedia, path));
+            return;
+          }
+        }
+      }
+      update(selectNode(S, null));
+    },
+    opts,
+  );
+
+  overlayClk.addEventListener(
+    "dblclick",
+    (/** @type {any} */ e) => {
+      const barInner = view.blockActionBarEl?.firstElementChild;
+      if (barInner) {
+        const r = barInner.getBoundingClientRect();
+        if (
+          e.clientX >= r.left &&
+          e.clientX <= r.right &&
+          e.clientY >= r.top &&
+          e.clientY <= r.bottom
+        )
+          return;
+      }
+      const canvasMode = _ctx.getCanvasMode();
+      if (canvasMode !== "edit" && canvasMode !== "design") return;
+
+      const S = _ctx.getState();
+      const elements = withPanelPointerEvents(() =>
+        document.elementsFromPoint(e.clientX, e.clientY),
+      );
+
+      for (const el of elements) {
+        if (canvas.contains(el) && el !== canvas) {
+          const originalPath = elToPath.get(el);
+          if (originalPath) {
+            const path = _ctx.bubbleInlinePath(S.document, originalPath);
+            const resolvedEl =
+              path === originalPath ? el : _ctx.findCanvasElement(path, canvas) || el;
+            if (isEditableBlock(resolvedEl)) {
+              const newMedia = mediaName === "base" ? null : (mediaName ?? null);
+              const withMedia = { ...S, ui: { ...S.ui, activeMedia: newMedia } };
+              update(selectNode(withMedia, path));
+              _ctx.enterInlineEdit(resolvedEl, path);
+              return;
+            }
+          }
+        }
+      }
+    },
+    opts,
+  );
+
+  overlayClk.addEventListener(
+    "contextmenu",
+    (/** @type {any} */ e) => {
+      const barInner = view.blockActionBarEl?.firstElementChild;
+      if (barInner) {
+        const r = barInner.getBoundingClientRect();
+        if (
+          e.clientX >= r.left &&
+          e.clientX <= r.right &&
+          e.clientY >= r.top &&
+          e.clientY <= r.bottom
+        )
+          return;
+      }
+      const S = _ctx.getState();
+      const elements = withPanelPointerEvents(() =>
+        document.elementsFromPoint(e.clientX, e.clientY),
+      );
+      for (const el of elements) {
+        if (canvas.contains(el) && el !== canvas) {
+          let path = elToPath.get(el);
+          if (path) {
+            path = _ctx.bubbleInlinePath(S.document, path);
+            showContextMenu(e, path, S, { onEditComponent: _ctx.navigateToComponent });
+            return;
+          }
+        }
+      }
+      e.preventDefault();
+    },
+    opts,
+  );
+
+  overlayClk.addEventListener(
+    "mousemove",
+    (/** @type {any} */ e) => {
+      const barInner = view.blockActionBarEl?.firstElementChild;
+      if (barInner) {
+        const r = barInner.getBoundingClientRect();
+        if (
+          e.clientX >= r.left &&
+          e.clientX <= r.right &&
+          e.clientY >= r.top &&
+          e.clientY <= r.bottom
+        )
+          return;
+      }
+      let S = _ctx.getState();
+      const el = withPanelPointerEvents(() => document.elementFromPoint(e.clientX, e.clientY));
+      if (el && canvas.contains(el) && el !== canvas) {
+        let path = elToPath.get(el);
+        if (path) {
+          path = _ctx.bubbleInlinePath(S.document, path);
+          if (!pathsEqual(path, S.hover)) {
+            _ctx.setState(hoverNode(S, path));
+            renderOnly("overlays");
+          }
+        }
+      } else if (S.hover) {
+        _ctx.setState(hoverNode(S, null));
+        renderOnly("overlays");
+      }
+    },
+    opts,
+  );
+
+  overlayClk.addEventListener(
+    "mouseleave",
+    () => {
+      const S = _ctx.getState();
+      if (S.hover) {
+        _ctx.setState(hoverNode(S, null));
+        renderOnly("overlays");
+      }
+    },
+    opts,
+  );
+
+  insertionHelper.mount({
+    getState: _ctx.getState,
+    update,
+    getCanvasMode: _ctx.getCanvasMode,
+    withPanelPointerEvents,
+    effectiveZoom: _ctx.effectiveZoom,
+    defaultDef,
+    insertNode,
+    selectNode,
+    parentElementPath,
+    childIndex,
+    getNodeAtPath,
+    elToPath,
+    panel,
+  });
+  view.canvasEventCleanups.push(() => insertionHelper.unmount());
+}