@jxsuite/studio 0.32.0 → 0.34.0

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

package/src/editor/insertion-helper.ts

@@ -1,308 +0,0 @@
-/// <reference lib="dom" />
-/**
- * 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";
-import { activeTab } from "../workspace/workspace";
-import { mutateInsertNode, transactDoc } from "../tabs/transact";
-import type { CanvasPanel } from "../types";
-import type { JxPath } from "../state";
-import type { JxMutableNode } from "@jxsuite/schema/types";
-
-interface ObservableSubscription {
-  subscribe: ((observer: { next: (e: Event) => void }) => void) &
-    ((observer: { next: (e: MouseEvent) => void }) => void);
-}
-
-interface ObservableElement {
-  on: (event: string, options?: Record<string, unknown>) => ObservableSubscription;
-}
-
-interface InsertionHelperContext {
-  getCanvasMode: () => string; // Returns the active canvas mode.
-  withPanelPointerEvents: (fn: () => unknown) => unknown; // Executes fn with pointer-events
-  effectiveZoom: () => number; // Returns the current zoom scale factor.
-  defaultDef: (tag: string) => JxMutableNode; // Creates a default element definition for a tag.
-  parentElementPath: (path: JxPath) => JxPath | null; // Returns the parent element path,
-  childIndex: (path: JxPath) => string | number; // Returns the child index within the
-  getNodeAtPath: (doc: JxMutableNode, path: JxPath) => JxMutableNode | null; // Retrieves
-  elToPath: WeakMap<Element, JxPath>; // Maps rendered DOM elements to their document
-  panel: CanvasPanel; // The active canvas panel.
-}
-
-// ─── Types ────────────────────────────────────────────────────────────────────
-
-// ─── State ───────────────────────────────────────────────────────────────────
-
-let _ctx: InsertionHelperContext | null = null;
-
-let _helper: HTMLElement | null = null;
-
-let _currentAnchor: HTMLElement | null = null;
-
-let _insertionPoint: {
-  edge: string;
-  path: JxPath;
-  parentPath: JxPath;
-  idx: number;
-} | null = null;
-
-let _abort: AbortController | null = null;
-
-let _hideTimer: ReturnType<typeof setTimeout> | null = 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: InsertionHelperContext) {
-  _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.append(_helper);
-
-  _abort = new AbortController();
-
-  // Listen on viewport — overlayClk gets pointer-events:none during editing/selection
-  const viewport = panel.viewport as HTMLElement & ObservableElement;
-  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: MouseEvent) {
-  if (!_ctx || !_helper) {
-    return;
-  }
-
-  const { getCanvasMode } = _ctx;
-  const mode = getCanvasMode();
-  if (mode !== "design" && mode !== "edit") {
-    hide();
-    return;
-  }
-
-  const { panel, withPanelPointerEvents, elToPath } = _ctx;
-  const el = withPanelPointerEvents(() =>
-    document.elementFromPoint(e.clientX, e.clientY),
-  ) as HTMLElement | null;
-
-  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;
-  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 = _ctx.childIndex(path) as number;
-
-  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 {JxPath} path
- * @param {JxPath} parentPath
- * @param {number} idx
- */
-function showAt(el: HTMLElement, edge: string, path: JxPath, parentPath: JxPath, idx: number) {
-  if (!_helper) {
-    return;
-  }
-
-  // Set CSS anchor on target element
-  if (_currentAnchor !== el) {
-    clearAnchor();
-    (el.style as CSSStyleDeclaration & Record<string, string>).anchorName = "--jx-insert";
-    _currentAnchor = el;
-  }
-
-  _helper.dataset.edge = edge;
-  _helper.classList.add("visible");
-  _insertionPoint = { edge, idx, parentPath, path };
-  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 as CSSStyleDeclaration & Record<string, string>).anchorName = "";
-    _currentAnchor = null;
-  }
-}
-
-// ─── Insertion ───────────────────────────────────────────────────────────────
-
-function onHelperClick(e: MouseEvent) {
-  e.stopPropagation();
-  e.preventDefault();
-
-  if (!_ctx || !_helper || !_insertionPoint) {
-    return;
-  }
-
-  const captured = _insertionPoint;
-  showSlashMenu(_helper, "", {
-    onSelect: (cmd) => onSlashSelect(cmd, captured),
-    showFilter: true,
-  });
-}
-
-/**
- * @param {{ label: string; tag: string; description?: string }} cmd
- * @param {{ edge: string; path: JxPath; parentPath: JxPath; idx: number }} point
- */
-function onSlashSelect(
-  cmd: { label: string; tag: string; description?: string },
-  point: { edge: string; path: JxPath; parentPath: JxPath; idx: number },
-) {
-  if (!_ctx) {
-    return;
-  }
-
-  const { defaultDef } = _ctx;
-  const { parentPath, idx, edge } = point;
-
-  const newDef = defaultDef(cmd.tag);
-  const insertPath = edge === "center" ? point.path : parentPath;
-  const insertIdx = edge === "center" ? 0 : idx;
-  const newPath = [...insertPath, "children", insertIdx];
-
-  transactDoc(activeTab.value, (t) => {
-    mutateInsertNode(t, insertPath, insertIdx, newDef);
-    t.session.selection = newPath;
-  });
-
-  hide();
-}