@bendyline/squisq-editor-react 2.1.0 → 2.2.0

package/src/scene/text/SceneTextOverlay.tsx

@@ -1,161 +0,0 @@
-/**
- * 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';
-
-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 || !config.channel) return;
-    const channel = config.channel;
-    channel.set({ editor, level: config.level });
-    return () => {
-      if (channel.get()?.editor === editor) channel.set(null);
-    };
-  }, [editor, config.level, config.channel]);
-
-  // 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

@@ -1,46 +0,0 @@
-/**
- * sceneTextChannel — an editor-owned channel 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`. Each EditorProvider creates its
- * own channel, preventing focus in one editor from mutating another editor.
- */
-
-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;
-
-export interface SceneTextChannel {
-  set(handle: SceneTextHandle | null): void;
-  get(): SceneTextHandle | null;
-  subscribe(listener: Listener): () => void;
-}
-
-/** Create a channel owned by one EditorProvider; no cross-editor singleton. */
-export function createSceneTextChannel(): SceneTextChannel {
-  let current: SceneTextHandle | null = null;
-  const listeners = new Set<Listener>();
-  return {
-    set(handle) {
-      current = handle;
-      for (const listener of listeners) listener(handle);
-    },
-    get() {
-      return current;
-    },
-    subscribe(listener) {
-      listeners.add(listener);
-      return () => listeners.delete(listener);
-    },
-  };
-}

package/src/scene/text/sceneTextConfig.ts

@@ -1,31 +0,0 @@
-/**
- * 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).
- */
-
-import type { SceneTextChannel } from './sceneTextChannel';
-
-export type SceneTextLevel = 'inline' | 'block' | 'rich';
-
-export interface SceneTextEditConfig {
-  /** Per-editor bridge to the formatting toolbar. */
-  channel?: SceneTextChannel;
-  /**
-   * 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

@@ -1,36 +0,0 @@
-/**
- * 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

@@ -1,39 +0,0 @@
-/**
- * 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

@@ -1,209 +0,0 @@
-/**
- * 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 } from '../layers/nodeCard';
-import {
-  curvedPath,
-  edgeEndpoints,
-  snapPointToward,
-  type EdgeNodeBox,
-} from '../layers/edgeGeometry';
-
-interface ConnectState {
-  sourceNodeId: string;
-  /** Source node/card box in viewport units (cached at drag start). */
-  sourceBox: EdgeNodeBox;
-  /** Preview start/end in viewport units. */
-  start: { x: number; y: number };
-  end: { x: number; y: number };
-  /** Currently-hovered target node id, if any (for highlight + drop). */
-  hoveredTargetId: string | null;
-}
-
-function getState(ctx: SceneToolContext): ConnectState | null {
-  return (ctx.interaction.connect as ConnectState | undefined) ?? null;
-}
-
-function setState(ctx: SceneToolContext, state: ConnectState | null): void {
-  ctx.interaction.connect = state ?? undefined;
-}
-
-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 nodeBoxFromCard(ctx: SceneToolContext, nodeId: string): EdgeNodeBox | null {
-  const card = ctx.hitItems.find((it) => it.id === `node-card-${nodeId}`);
-  if (!card) return null;
-  return {
-    id: nodeId,
-    x: card.bounds.x,
-    y: card.bounds.y,
-    width: card.bounds.width,
-    height: card.bounds.height,
-  };
-}
-
-function nodeBoxes(ctx: SceneToolContext): EdgeNodeBox[] {
-  const boxes: EdgeNodeBox[] = [];
-  for (const it of ctx.hitItems) {
-    if (!it.id.startsWith('node-card-')) continue;
-    const nodeId = nodeIdFromCardLayerId(it.id);
-    if (!nodeId) continue;
-    boxes.push({
-      id: nodeId,
-      x: it.bounds.x,
-      y: it.bounds.y,
-      width: it.bounds.width,
-      height: it.bounds.height,
-    });
-  }
-  return boxes;
-}
-
-function connectionPoints(box: EdgeNodeBox): Array<{ x: number; y: number }> {
-  const width = box.width ?? 0;
-  const height = box.height ?? 0;
-  const left = box.x;
-  const right = box.x + width;
-  const top = box.y;
-  const bottom = box.y + height;
-  const centerX = box.x + width / 2;
-  const centerY = box.y + height / 2;
-  return [
-    { x: centerX, y: top },
-    { x: right, y: centerY },
-    { x: centerX, y: bottom },
-    { x: left, y: centerY },
-    { x: left, y: top },
-    { x: right, y: top },
-    { x: right, y: bottom },
-    { x: left, y: bottom },
-  ];
-}
-
-function updatePreview(
-  sourceBox: EdgeNodeBox,
-  current: { x: number; y: number },
-  targetBox: EdgeNodeBox | null,
-): { start: { x: number; y: number }; end: { x: number; y: number } } {
-  if (targetBox) {
-    return (
-      edgeEndpoints([sourceBox, targetBox], sourceBox.id, targetBox.id) ?? {
-        start: current,
-        end: current,
-      }
-    );
-  }
-  return {
-    start: snapPointToward([sourceBox], sourceBox.id, current) ?? current,
-    end: current,
-  };
-}
-
-export const ConnectTool: SceneTool = {
-  id: 'connect',
-  label: 'Connect',
-  cursor: 'crosshair',
-  shortcut: 'c',
-  hideSelectionHandles: true,
-
-  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 sourceBox = nodeBoxFromCard(ctx, nodeId);
-    if (!sourceBox) return;
-    const preview = updatePreview(sourceBox, v, null);
-    setState(ctx, {
-      sourceNodeId: nodeId,
-      sourceBox,
-      start: preview.start,
-      end: preview.end,
-      hoveredTargetId: null,
-    });
-    (e.currentTarget as Element).setPointerCapture?.(e.pointerId);
-    e.stopPropagation();
-  },
-
-  onPointerMove(e, ctx) {
-    const state = getState(ctx);
-    if (!state) return;
-    const { sx, sy } = pointerFromEvent(e);
-    const v = ctx.screenToViewport(sx, sy);
-    const hitId = ctx.hit(v);
-    const nodeId = hitId ? nodeIdFromCardLayerId(hitId) : null;
-    const targetId = nodeId && nodeId !== state.sourceNodeId ? nodeId : null;
-    const targetBox = targetId ? nodeBoxFromCard(ctx, targetId) : null;
-    const preview = updatePreview(state.sourceBox, v, targetBox);
-    state.start = preview.start;
-    state.end = preview.end;
-    state.hoveredTargetId = targetBox?.id ?? null;
-  },
-
-  onPointerUp(e, ctx) {
-    const state = getState(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);
-    setState(ctx, null);
-  },
-
-  renderOverlay(ctx): JSX.Element | null {
-    const state = getState(ctx);
-    const points = nodeBoxes(ctx).flatMap((box) =>
-      connectionPoints(box).map((point, index) =>
-        createElement('circle', {
-          key: `${box.id}-${index}`,
-          cx: point.x,
-          cy: point.y,
-          r: 4,
-          className:
-            state?.hoveredTargetId === box.id
-              ? 'squisq-scene-connection-point squisq-scene-connection-point--active'
-              : 'squisq-scene-connection-point',
-        }),
-      ),
-    );
-
-    if (!state) {
-      return points.length ? createElement('g', { key: 'connection-points' }, ...points) : null;
-    }
-
-    const { start: a, end: b } = state;
-    const d = curvedPath(a, b);
-    return createElement(
-      'g',
-      { key: 'connect-preview' },
-      ...points,
-      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',
-      }),
-    );
-  },
-};