@bendyline/squisq-editor-react 1.5.2 → 1.6.0

package/src/scene/text/SceneTextOverlay.tsx

@@ -0,0 +1,161 @@
+/**
+ * SceneTextOverlay — the shared inline rich-text editor for canvas
+ * textboxes. An absolutely-positioned HTML Tiptap instance laid over the
+ * edited layer's on-screen box (so it tracks pan/zoom), rendered inside
+ * `.squisq-scene-root`. Real HTML over the SVG (not a transformed
+ * foreignObject) to avoid SVG focus/IME quirks.
+ *
+ * Lifecycle: focuses on mount, publishes its editor to `sceneTextChannel`
+ * (so the top toolbar can format it), commits on blur/Enter(inline)/
+ * Cmd+Enter and cancels on Escape. Clears the channel on unmount.
+ */
+
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useEditor, EditorContent } from '@tiptap/react';
+import type { Layer } from '@bendyline/squisq/schemas';
+import { DEFAULT_DOC_FONT } from '@bendyline/squisq/schemas';
+import { plainTextFromInlineHtml } from '@bendyline/squisq/markdown';
+import { layerBounds } from '../hooks/useSceneHitTest';
+import type { SceneTransform } from '../hooks/useScenePanZoom';
+import type { SceneTextEditConfig } from './sceneTextConfig';
+import { buildSceneTextExtensions } from './sceneTiptap';
+import { sceneTextChannel } from './sceneTextChannel';
+
+interface SceneTextOverlayProps {
+  config: SceneTextEditConfig;
+  /** The layer being edited (for box geometry + base text style). */
+  layer: Layer;
+  editableId: string;
+  viewport: { width: number; height: number };
+  transform: SceneTransform;
+  viewportToScreen: (vx: number, vy: number) => { x: number; y: number };
+  onClose: () => void;
+}
+
+export function SceneTextOverlay({
+  config,
+  layer,
+  editableId,
+  viewport,
+  transform,
+  viewportToScreen,
+  onClose,
+}: SceneTextOverlayProps) {
+  const initialHtml = useMemo(() => config.getHtml(editableId), [config, editableId]);
+  const style = layer.type === 'text' ? layer.content.style : undefined;
+
+  // Stable commit/cancel via refs so the editor's keydown closure (bound
+  // once at creation) always calls the latest handlers.
+  const committedRef = useRef(false);
+  const commitRef = useRef<() => void>(() => {});
+  const cancelRef = useRef<() => void>(() => {});
+
+  const editor = useEditor({
+    extensions: buildSceneTextExtensions(config.level),
+    content: initialHtml,
+    autofocus: 'end',
+    editorProps: {
+      handleKeyDown: (_view, event) => {
+        if (event.key === 'Escape') {
+          event.preventDefault();
+          cancelRef.current();
+          return true;
+        }
+        // Inline labels: Enter commits (Shift+Enter = hard break). Rich
+        // textboxes: Enter is a paragraph; commit on Cmd/Ctrl+Enter.
+        const enterCommits =
+          config.level === 'inline' ? !event.shiftKey : event.metaKey || event.ctrlKey;
+        if (event.key === 'Enter' && enterCommits) {
+          event.preventDefault();
+          commitRef.current();
+          return true;
+        }
+        return false;
+      },
+    },
+  });
+
+  commitRef.current = useCallback(() => {
+    if (committedRef.current || !editor) return;
+    committedRef.current = true;
+    const html = editor.getHTML();
+    config.commit(editableId, { html, text: plainTextFromInlineHtml(html) });
+    onClose();
+  }, [editor, config, editableId, onClose]) as () => void;
+
+  cancelRef.current = useCallback(() => {
+    committedRef.current = true; // suppress the blur-commit that follows
+    onClose();
+  }, [onClose]) as () => void;
+
+  // Publish to the toolbar channel while mounted; clear on unmount.
+  useEffect(() => {
+    if (!editor) return;
+    sceneTextChannel.set({ editor, level: config.level });
+    return () => {
+      if (sceneTextChannel.get()?.editor === editor) sceneTextChannel.set(null);
+    };
+  }, [editor, config.level]);
+
+  // Commit when focus leaves the editor — unless it went to the toolbar
+  // (the user clicking Bold) or stayed within the overlay.
+  const onBlur = useCallback((e: React.FocusEvent) => {
+    const next = e.relatedTarget as HTMLElement | null;
+    if (next && next.closest('.squisq-toolbar, .squisq-scene-text-overlay')) return;
+    commitRef.current();
+  }, []);
+
+  const bounds = layerBounds(layer, viewport);
+  if (!bounds) return null;
+  const tl = viewportToScreen(bounds.x, bounds.y);
+  const scale = transform.scale;
+  const fontSize = (style?.fontSize ?? 18) * scale;
+  const pad = (style?.padding ?? 0) * scale;
+  // Mirror the layer's vertical alignment so changing it (via the toolbar)
+  // updates the editor live, matching what the committed box will look like.
+  const justifyContent =
+    style?.verticalAlign === 'middle'
+      ? 'center'
+      : style?.verticalAlign === 'bottom'
+        ? 'flex-end'
+        : 'flex-start';
+
+  return (
+    <div
+      className="squisq-scene-text-overlay"
+      onBlur={onBlur}
+      // Keep clicks inside the editor from reaching the SVG (which would
+      // focus the canvas and blur us mid-edit).
+      onPointerDown={(e) => e.stopPropagation()}
+      onMouseDown={(e) => e.stopPropagation()}
+      onDoubleClick={(e) => e.stopPropagation()}
+      style={{
+        position: 'absolute',
+        left: tl.x,
+        top: tl.y,
+        width: bounds.width * scale,
+        height: bounds.height * scale,
+        zIndex: 20,
+        boxSizing: 'border-box',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent,
+        padding: pad,
+        fontSize,
+        fontFamily: style?.fontFamily || DEFAULT_DOC_FONT,
+        color: style?.color ?? '#1e293b',
+        lineHeight: style?.lineHeight || 1.4,
+        textAlign: style?.textAlign ?? 'left',
+        background: '#ffffff',
+        border: '2px solid #6366f1',
+        borderRadius: 4,
+        overflow: 'auto',
+        cursor: 'text',
+      }}
+    >
+      <EditorContent editor={editor} className="squisq-scene-text-editor" />
+    </div>
+  );
+}
+
+export default SceneTextOverlay;

package/src/scene/text/sceneTextChannel.ts

@@ -0,0 +1,40 @@
+/**
+ * sceneTextChannel — a module singleton that bridges the canvas's inline
+ * text editor (which renders in a **detached React root** created by the
+ * Diagram/SceneBlock ProseMirror extensions, outside `<EditorProvider>`)
+ * to the provider, so the top formatting toolbar can target it.
+ *
+ * The active textbox's `SceneTextOverlay` publishes its Tiptap editor here
+ * on focus and clears it on blur/unmount; `EditorProvider` subscribes and
+ * mirrors the handle into `activeSceneText`. Singleton because only one
+ * canvas textbox can be focused at a time.
+ */
+
+import type { Editor as TiptapEditor } from '@tiptap/core';
+import type { SceneTextLevel } from './sceneTextConfig';
+
+export interface SceneTextHandle {
+  editor: TiptapEditor;
+  level: SceneTextLevel;
+}
+
+type Listener = (handle: SceneTextHandle | null) => void;
+
+let current: SceneTextHandle | null = null;
+const listeners = new Set<Listener>();
+
+export const sceneTextChannel = {
+  /** Publish (or clear with `null`) the focused canvas textbox editor. */
+  set(handle: SceneTextHandle | null): void {
+    current = handle;
+    for (const listener of listeners) listener(handle);
+  },
+  get(): SceneTextHandle | null {
+    return current;
+  },
+  /** Subscribe to handle changes. Returns an unsubscribe function. */
+  subscribe(listener: Listener): () => void {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+  },
+};

package/src/scene/text/sceneTextConfig.ts

@@ -0,0 +1,27 @@
+/**
+ * Configuration a Scene host (diagram / drawing / layout widget) supplies
+ * so the shared inline text editor knows how to read and write the text of
+ * a given layer. The Scene owns the editing UI (overlay + positioning);
+ * the host owns persistence (markdown heading vs. layout JSON blob).
+ */
+
+export type SceneTextLevel = 'inline' | 'block' | 'rich';
+
+export interface SceneTextEditConfig {
+  /**
+   * Map a hit layer id (what the pointer landed on) to the layer id whose
+   * on-screen box the editor should cover, or `null` when that layer isn't
+   * text-editable. e.g. a diagram card hit (`node-card-x`) maps to itself;
+   * a non-text drawing shape maps to `null`.
+   */
+  resolveEditableId: (layerId: string) => string | null;
+  /** Seed HTML for the editor (e.g. `content.html` or `markdownToTiptap(label)`). */
+  getHtml: (editableId: string) => string;
+  /** Persist the edited content. The host serializes per its storage model. */
+  commit: (editableId: string, content: { html: string; text: string }) => void;
+  /**
+   * Toolbar capability gate: `inline` = marks only; `block` = marks + lists +
+   * blockquote (no headings, for layout textboxes); `rich` = also headings.
+   */
+  level: SceneTextLevel;
+}

package/src/scene/text/sceneTiptap.ts

@@ -0,0 +1,36 @@
+/**
+ * Slim Tiptap presets for the canvas inline text editor.
+ *
+ * Deliberately NOT the document editor's extension set: a textbox must not
+ * recursively mount canvases (no `DiagramExtension`/`SceneBlockExtension`)
+ * or carry block-template annotations (no `HeadingWithTemplate`).
+ *
+ * - `inline`  → paragraph + marks (bold/italic/strike/code) + link. Used for
+ *   single-label text (diagram nodes, drawing shapes).
+ * - `block`   → also lists, blockquote, code block — but NO headings. Used for
+ *   layout textboxes, whose content is stored as the child sub-block's
+ *   markdown body (a heading there would re-parse as a sibling sub-block).
+ * - `rich`    → also headings. (Currently unused by shipping surfaces.)
+ */
+
+import type { Extensions } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
+import Link from '@tiptap/extension-link';
+import type { SceneTextLevel } from './sceneTextConfig';
+
+export function buildSceneTextExtensions(level: SceneTextLevel): Extensions {
+  const starter =
+    level === 'inline'
+      ? StarterKit.configure({
+          heading: false,
+          bulletList: false,
+          orderedList: false,
+          blockquote: false,
+          codeBlock: false,
+          horizontalRule: false,
+        })
+      : level === 'block'
+        ? StarterKit.configure({ heading: false, horizontalRule: false })
+        : StarterKit.configure({ horizontalRule: false });
+  return [starter, Link.configure({ openOnClick: false })];
+}

package/src/scene/text/useSceneTextEditing.ts

@@ -0,0 +1,39 @@
+/**
+ * useSceneTextEditing — Scene-level state for "which layer is being text
+ * edited". The Scene wires `begin` into the tool context (`beginTextEdit`)
+ * so SelectTool's double-click can open the editor, and renders
+ * `<SceneTextOverlay>` while `editingId` is set.
+ */
+
+import { useCallback, useRef, useState } from 'react';
+import type { SceneTextEditConfig } from './sceneTextConfig';
+
+export interface SceneTextEditing {
+  /** The editable layer id currently being edited, or null. */
+  editingId: string | null;
+  /** Open the editor for the layer the pointer hit (resolved via config). */
+  begin: (hitLayerId: string) => void;
+  /** Close the editor (after commit/cancel). */
+  close: () => void;
+  /** Ref mirror of whether an edit is active — for non-React event handlers. */
+  activeRef: React.MutableRefObject<boolean>;
+}
+
+export function useSceneTextEditing(config?: SceneTextEditConfig): SceneTextEditing {
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const activeRef = useRef(false);
+  activeRef.current = editingId != null;
+
+  const begin = useCallback(
+    (hitLayerId: string) => {
+      if (!config) return;
+      const id = config.resolveEditableId(hitLayerId);
+      if (id) setEditingId(id);
+    },
+    [config],
+  );
+
+  const close = useCallback(() => setEditingId(null), []);
+
+  return { editingId, begin, close, activeRef };
+}

package/src/scene/tools/ConnectTool.ts

@@ -0,0 +1,111 @@
+/**
+ * ConnectTool — drag from a diagram node to another to create an edge.
+ *
+ * Press on a node-card layer to anchor the connection start. While
+ * dragging, render a dashed preview path from the source node's center
+ * to the pointer. On release over a different node-card layer, dispatch
+ * an `addEdge` command. Release elsewhere cancels.
+ *
+ * The tool reads the node descriptors from `ctx.edges`/`ctx.layers` —
+ * not from a parallel data store — so it stays in sync with whatever
+ * the DiagramAdapter just produced.
+ */
+
+import { createElement, type JSX } from 'react';
+import type { SceneTool, SceneToolContext } from './SceneTool';
+import { nodeIdFromCardLayerId, NODE_WIDTH, NODE_HEIGHT } from '../layers/nodeCard';
+
+interface ConnectState {
+  sourceNodeId: string;
+  /** Source node center in viewport units (cached at drag start). */
+  sourceCenter: { x: number; y: number };
+  /** Current pointer position in viewport units. */
+  current: { x: number; y: number };
+  /** Currently-hovered target node id, if any (for highlight + drop). */
+  hoveredTargetId: string | null;
+}
+
+let state: ConnectState | null = null;
+
+function pointerFromEvent(e: React.PointerEvent): { sx: number; sy: number } {
+  const rect = (e.currentTarget as Element).getBoundingClientRect();
+  return { sx: e.clientX - rect.left, sy: e.clientY - rect.top };
+}
+
+function nodeCenterFromCard(
+  ctx: SceneToolContext,
+  nodeId: string,
+): { x: number; y: number } | null {
+  const card = ctx.hitItems.find((it) => it.id === `node-card-${nodeId}`);
+  if (!card) return null;
+  return { x: card.bounds.x + NODE_WIDTH / 2, y: card.bounds.y + NODE_HEIGHT / 2 };
+}
+
+export const ConnectTool: SceneTool = {
+  id: 'connect',
+  label: 'Connect',
+  cursor: 'crosshair',
+  shortcut: 'c',
+
+  onPointerDown(e, ctx) {
+    if (e.button !== 0) return;
+    const { sx, sy } = pointerFromEvent(e);
+    const v = ctx.screenToViewport(sx, sy);
+    const hitId = ctx.hit(v);
+    if (!hitId) return;
+    const nodeId = nodeIdFromCardLayerId(hitId);
+    if (!nodeId) return;
+    const center = nodeCenterFromCard(ctx, nodeId);
+    if (!center) return;
+    state = {
+      sourceNodeId: nodeId,
+      sourceCenter: center,
+      current: v,
+      hoveredTargetId: null,
+    };
+    (e.currentTarget as Element).setPointerCapture?.(e.pointerId);
+    e.stopPropagation();
+  },
+
+  onPointerMove(e, ctx) {
+    if (!state) return;
+    const { sx, sy } = pointerFromEvent(e);
+    const v = ctx.screenToViewport(sx, sy);
+    state.current = v;
+    const hitId = ctx.hit(v);
+    const nodeId = hitId ? nodeIdFromCardLayerId(hitId) : null;
+    state.hoveredTargetId = nodeId && nodeId !== state.sourceNodeId ? nodeId : null;
+  },
+
+  onPointerUp(e, ctx) {
+    if (!state) return;
+    const target = state.hoveredTargetId;
+    if (target) {
+      ctx.dispatch({ kind: 'addEdge', source: state.sourceNodeId, target });
+    }
+    (e.currentTarget as Element).releasePointerCapture?.(e.pointerId);
+    state = null;
+  },
+
+  renderOverlay(): JSX.Element | null {
+    if (!state) return null;
+    const { sourceCenter: a, current: b } = state;
+    const dx = b.x - a.x;
+    const cp = Math.max(40, Math.abs(dx) / 2);
+    // Cubic bezier matching diagramBlock.ts's `curved` edge style so the
+    // preview previews exactly what will render after commit.
+    const d = `M ${a.x} ${a.y} C ${a.x + cp} ${a.y}, ${b.x - cp} ${b.y}, ${b.x} ${b.y}`;
+    return createElement(
+      'g',
+      { key: 'connect-preview' },
+      createElement('path', { d, className: 'squisq-scene-connect-preview' }),
+      // Optional: a dot at the endpoint so the user sees the snap target.
+      createElement('circle', {
+        cx: b.x,
+        cy: b.y,
+        r: 4,
+        className: 'squisq-scene-connect-preview',
+      }),
+    );
+  },
+};

package/src/scene/tools/DrawingConnectTool.ts

@@ -0,0 +1,161 @@
+/**
+ * DrawingConnectTool — create and re-target connectors between shapes.
+ *
+ * Mirrors `ConnectTool` but works on drawing shape layers (`dshape-<id>`)
+ * and supports two gestures:
+ *  - Press empty-on a shape, drag to another shape, release → `addEdge`.
+ *  - Press on a selected connector's endpoint handle, drag to a shape,
+ *    release → re-target that endpoint (via the `onRetarget` callback,
+ *    since the generic SceneCommand vocabulary has no retarget command).
+ *
+ * Current edges / selection / shape boxes change every render, so the
+ * host passes `endpointAt` (reads the live selected-edge handles) rather
+ * than baking them into the memoized tool.
+ */
+
+import { createElement, type JSX } from 'react';
+import type { SceneTool, SceneToolContext } from './SceneTool';
+import { shapeIdFromLayerId, isPrimaryShapeLayer } from '../layers/shapeLayers';
+
+/** A grab on the selected connector's endpoint handle. */
+export interface EndpointHit {
+  connectorId: string;
+  /** Which end the handle controls. */
+  end: 'from' | 'to';
+  /** The shape id of the *other* (fixed) endpoint — anchors the drag. */
+  fixedShapeId: string;
+}
+
+export interface DrawingConnectOptions {
+  /** Endpoint handle (of the selected connector) near `point`, if any. */
+  endpointAt?: (point: { x: number; y: number }) => EndpointHit | null;
+  /** Commit an endpoint re-target. */
+  onRetarget?: (connectorId: string, end: 'from' | 'to', newTargetId: string) => void;
+}
+
+type DragState =
+  | {
+      mode: 'new';
+      sourceId: string;
+      anchor: { x: number; y: number };
+      current: { x: number; y: number };
+      hovered: string | null;
+    }
+  | {
+      mode: 'retarget';
+      connectorId: string;
+      end: 'from' | 'to';
+      fixedShapeId: string;
+      anchor: { x: number; y: number };
+      current: { x: number; y: number };
+      hovered: string | null;
+    };
+
+export function createDrawingConnectTool(options: DrawingConnectOptions = {}): SceneTool {
+  let drag: DragState | null = null;
+
+  function pointer(e: React.PointerEvent): { sx: number; sy: number } {
+    const rect = (e.currentTarget as Element).getBoundingClientRect();
+    return { sx: e.clientX - rect.left, sy: e.clientY - rect.top };
+  }
+
+  function shapeCenter(ctx: SceneToolContext, shapeId: string): { x: number; y: number } | null {
+    const it = ctx.hitItems.find((h) => h.id === `dshape-${shapeId}`);
+    if (!it) return null;
+    return { x: it.bounds.x + it.bounds.width / 2, y: it.bounds.y + it.bounds.height / 2 };
+  }
+
+  function shapeAt(ctx: SceneToolContext, v: { x: number; y: number }): string | null {
+    const hitId = ctx.hit(v);
+    if (!hitId || !isPrimaryShapeLayer(hitId)) return null;
+    return shapeIdFromLayerId(hitId);
+  }
+
+  return {
+    id: 'connect',
+    label: 'Connect',
+    cursor: 'crosshair',
+    shortcut: 'c',
+
+    onPointerDown(e, ctx) {
+      if (e.button !== 0) return;
+      const { sx, sy } = pointer(e);
+      const v = ctx.screenToViewport(sx, sy);
+
+      // Endpoint handle of the selected connector → re-target gesture.
+      const ep = options.endpointAt?.(v);
+      if (ep) {
+        const anchor = shapeCenter(ctx, ep.fixedShapeId) ?? v;
+        drag = {
+          mode: 'retarget',
+          connectorId: ep.connectorId,
+          end: ep.end,
+          fixedShapeId: ep.fixedShapeId,
+          anchor,
+          current: v,
+          hovered: null,
+        };
+        (e.currentTarget as Element).setPointerCapture?.(e.pointerId);
+        e.stopPropagation();
+        return;
+      }
+
+      // Otherwise start a new connection from the shape under the pointer.
+      const src = shapeAt(ctx, v);
+      if (!src) return;
+      drag = {
+        mode: 'new',
+        sourceId: src,
+        anchor: shapeCenter(ctx, src) ?? v,
+        current: v,
+        hovered: null,
+      };
+      (e.currentTarget as Element).setPointerCapture?.(e.pointerId);
+      e.stopPropagation();
+    },
+
+    onPointerMove(e, ctx) {
+      if (!drag) return;
+      const { sx, sy } = pointer(e);
+      const v = ctx.screenToViewport(sx, sy);
+      drag.current = v;
+      const tgt = shapeAt(ctx, v);
+      const exclude = drag.mode === 'new' ? drag.sourceId : drag.fixedShapeId;
+      drag.hovered = tgt && tgt !== exclude ? tgt : null;
+    },
+
+    onPointerUp(e, ctx) {
+      if (!drag) return;
+      const finished = drag;
+      drag = null;
+      (e.currentTarget as Element).releasePointerCapture?.(e.pointerId);
+      if (!finished.hovered) return;
+      if (finished.mode === 'new') {
+        ctx.dispatch({ kind: 'addEdge', source: finished.sourceId, target: finished.hovered });
+      } else {
+        options.onRetarget?.(finished.connectorId, finished.end, finished.hovered);
+      }
+    },
+
+    renderOverlay(): JSX.Element | null {
+      if (!drag) return null;
+      const a = drag.anchor;
+      const b = drag.current;
+      return createElement(
+        'g',
+        { key: 'drawing-connect-preview' },
+        createElement('path', {
+          d: `M ${a.x} ${a.y} L ${b.x} ${b.y}`,
+          className: 'squisq-scene-connect-preview',
+          fill: 'none',
+        }),
+        createElement('circle', {
+          cx: b.x,
+          cy: b.y,
+          r: 4,
+          className: 'squisq-scene-connect-preview',
+        }),
+      );
+    },
+  };
+}