@bendyline/squisq-editor-react 1.5.2 → 1.6.0

package/src/scene/tools/ShapeTool.ts

@@ -0,0 +1,144 @@
+/**
+ * ShapeTool — drag to draw a rectangle or circle as a new ShapeLayer.
+ *
+ * Exposed as a factory so a host can pre-bind the shape kind and
+ * stroke/fill defaults. Returns a fresh SceneTool instance — the
+ * factory pattern lets multiple Scene instances coexist without
+ * sharing module-level drag state.
+ */
+
+import { createElement, type JSX } from 'react';
+import type { ShapeLayer } from '@bendyline/squisq/schemas';
+import type { SceneTool } from './SceneTool';
+
+interface ShapeToolOptions {
+  /** Shape kind. Default 'rect'. */
+  shape?: 'rect' | 'circle' | 'line';
+  /** Stroke color. Default '#1e293b'. */
+  stroke?: string;
+  /** Fill color (or 'none' for an outline-only shape). Default 'none'. */
+  fill?: string;
+  /** Stroke width in viewport units. Default 2. */
+  strokeWidth?: number;
+  /** Corner radius for rects. Default 6. */
+  borderRadius?: number;
+  /** Override the tool id (default 'shape'). */
+  id?: string;
+  /** Override the tool label. */
+  label?: string;
+  /** Keyboard shortcut (single char, lowercase). */
+  shortcut?: string;
+}
+
+export function createShapeTool(options: ShapeToolOptions = {}): SceneTool {
+  const shape = options.shape ?? 'rect';
+  const stroke = options.stroke ?? '#1e293b';
+  const fill = options.fill ?? 'none';
+  const strokeWidth = options.strokeWidth ?? 2;
+  const borderRadius = options.borderRadius ?? 6;
+
+  interface DragState {
+    startV: { x: number; y: number };
+    currentV: { x: number; y: number };
+  }
+  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 };
+  }
+
+  return {
+    id: options.id ?? `shape-${shape}`,
+    label: options.label ?? `${shape[0].toUpperCase()}${shape.slice(1)}`,
+    cursor: 'crosshair',
+    shortcut: options.shortcut,
+
+    onPointerDown(e, ctx) {
+      if (e.button !== 0) return;
+      const { sx, sy } = pointer(e);
+      const v = ctx.screenToViewport(sx, sy);
+      drag = { startV: v, currentV: v };
+      (e.currentTarget as Element).setPointerCapture?.(e.pointerId);
+    },
+
+    onPointerMove(e, ctx) {
+      if (!drag) return;
+      const { sx, sy } = pointer(e);
+      drag.currentV = ctx.screenToViewport(sx, sy);
+    },
+
+    onPointerUp(e, ctx) {
+      if (!drag) return;
+      const box = boxFromCorners(drag.startV, drag.currentV);
+      drag = null;
+      (e.currentTarget as Element).releasePointerCapture?.(e.pointerId);
+      // Ignore micro-drags that are probably an accidental click.
+      if (box.width < 4 || box.height < 4) return;
+      const layer: ShapeLayer = {
+        id: `shape-${Date.now().toString(36)}-${Math.floor(Math.random() * 1e6).toString(36)}`,
+        type: 'shape',
+        position: { x: box.x, y: box.y, width: box.width, height: box.height },
+        content: {
+          shape,
+          fill,
+          stroke,
+          strokeWidth,
+          ...(shape === 'rect' ? { borderRadius } : {}),
+        },
+      };
+      ctx.dispatch({ kind: 'addLayer', layer });
+      // Switch back to Select so the user can immediately move the new shape.
+      ctx.setActiveTool?.('select');
+    },
+
+    renderOverlay(): JSX.Element | null {
+      if (!drag) return null;
+      const box = boxFromCorners(drag.startV, drag.currentV);
+      if (shape === 'circle') {
+        const r = Math.min(box.width, box.height) / 2;
+        return createElement('circle', {
+          key: 'shape-preview',
+          cx: box.x + box.width / 2,
+          cy: box.y + box.height / 2,
+          r,
+          className: 'squisq-scene-connect-preview',
+          fill: 'none',
+        });
+      }
+      if (shape === 'line') {
+        return createElement('line', {
+          key: 'shape-preview',
+          x1: drag.startV.x,
+          y1: drag.startV.y,
+          x2: drag.currentV.x,
+          y2: drag.currentV.y,
+          className: 'squisq-scene-connect-preview',
+        });
+      }
+      return createElement('rect', {
+        key: 'shape-preview',
+        x: box.x,
+        y: box.y,
+        width: box.width,
+        height: box.height,
+        rx: borderRadius,
+        ry: borderRadius,
+        className: 'squisq-scene-connect-preview',
+        fill: 'none',
+      });
+    },
+  };
+}
+
+function boxFromCorners(
+  a: { x: number; y: number },
+  b: { x: number; y: number },
+): { x: number; y: number; width: number; height: number } {
+  return {
+    x: Math.min(a.x, b.x),
+    y: Math.min(a.y, b.y),
+    width: Math.abs(b.x - a.x),
+    height: Math.abs(b.y - a.y),
+  };
+}

package/src/scene/tools/TextTool.ts

@@ -0,0 +1,72 @@
+/**
+ * TextTool — click to place a new TextLayer; the host can hook the
+ * `prompt` option to swap the default `window.prompt` for an inline
+ * editing UI (Tiptap, contenteditable, etc.) when one is available.
+ */
+
+import type { TextLayer } from '@bendyline/squisq/schemas';
+import type { SceneTool } from './SceneTool';
+
+interface TextToolOptions {
+  /** Default font size in viewport units. Default 24. */
+  fontSize?: number;
+  /** Default text color. Default '#1e293b'. */
+  color?: string;
+  /** Default text alignment. Default 'left'. */
+  textAlign?: 'left' | 'center' | 'right';
+  /**
+   * Prompt the user for the text content. Returns null to cancel.
+   * Default uses `window.prompt`.
+   */
+  prompt?: () => string | null;
+  /** Override id / label / shortcut. */
+  id?: string;
+  label?: string;
+  shortcut?: string;
+}
+
+export function createTextTool(options: TextToolOptions = {}): SceneTool {
+  const fontSize = options.fontSize ?? 24;
+  const color = options.color ?? '#1e293b';
+  const textAlign = options.textAlign ?? 'left';
+  const prompt = options.prompt ?? (() => window.prompt('Text:'));
+
+  return {
+    id: options.id ?? 'text',
+    label: options.label ?? 'Text',
+    cursor: 'text',
+    shortcut: options.shortcut ?? 't',
+
+    onPointerDown(e, ctx) {
+      if (e.button !== 0) return;
+      const rect = (e.currentTarget as Element).getBoundingClientRect();
+      const sx = e.clientX - rect.left;
+      const sy = e.clientY - rect.top;
+      const v = ctx.screenToViewport(sx, sy);
+      const text = prompt();
+      if (text == null || text.length === 0) {
+        ctx.setActiveTool?.('select');
+        return;
+      }
+      const layer: TextLayer = {
+        id: `text-${Date.now().toString(36)}-${Math.floor(Math.random() * 1e6).toString(36)}`,
+        type: 'text',
+        position: {
+          x: v.x,
+          y: v.y,
+          // No explicit width — hit-test will treat the bounding box as
+          // measured at render time. Provide a generous default so the
+          // hit-test stub finds something.
+          width: Math.max(fontSize * text.length * 0.6, 80),
+          height: fontSize * 1.4,
+        },
+        content: {
+          text,
+          style: { fontSize, color, textAlign },
+        },
+      };
+      ctx.dispatch({ kind: 'addLayer', layer });
+      ctx.setActiveTool?.('select');
+    },
+  };
+}

package/src/scene/tools/TokenTool.ts

@@ -0,0 +1,95 @@
+/**
+ * TokenTool — pointer-down on the canvas drops a pre-filled
+ * placeholder layer at the click position. Used by the template
+ * designer's Add bin so the user can place `{title}`,
+ * `{content}`, `{children}`, or `{image:N}` in a single click instead
+ * of typing the placeholder string into a generic TextTool.
+ *
+ * Factory pattern (`createTokenTool`) lets the palette build a
+ * separate tool instance per token, each with its own id / label /
+ * default layer shape.
+ */
+
+import type { ImageLayer, TextLayer } from '@bendyline/squisq/schemas';
+import type { SceneTool } from './SceneTool';
+import { createPlaceTool } from './PlaceTool';
+
+export type TokenKind = 'text' | 'image';
+
+export interface TokenToolOptions {
+  /** Stable tool id (e.g. `'token-title'`). */
+  id: string;
+  /** Label shown in the toolbar / palette button. */
+  label: string;
+  /** Optional keyboard shortcut. */
+  shortcut?: string;
+  /**
+   * The placeholder string to substitute at render time, e.g.
+   * `'{title}'` or `'{image:0}'`. The designer drops this literal
+   * value into the new layer; the resolver replaces it later.
+   */
+  token: string;
+  /**
+   * Which layer kind to insert. `'text'` creates a TextLayer with
+   * `content.text = token`; `'image'` creates an ImageLayer with
+   * `content.src = token`.
+   */
+  kind: TokenKind;
+  /** Default font size for text tokens. Default 36. */
+  fontSize?: number;
+  /** Default text color for text tokens. Default '#0f172a'. */
+  color?: string;
+  /** Default width (pixels) for the placed layer. Default 480. */
+  width?: number;
+  /** Default height (pixels) for the placed layer. Default for text: 72; for image: 320. */
+  height?: number;
+}
+
+/**
+ * Build a placeholder layer for `options` with its top-left corner at
+ * the given viewport point. Shared by the click-to-place TokenTool and
+ * the template designer's drag-and-drop drop handler so both produce
+ * identical layers.
+ */
+export function buildTokenLayer(
+  options: TokenToolOptions,
+  point: { x: number; y: number },
+): TextLayer | ImageLayer {
+  const width = options.width ?? 480;
+  const height = options.height ?? (options.kind === 'image' ? 320 : 72);
+  const fontSize = options.fontSize ?? 36;
+  const color = options.color ?? '#0f172a';
+  const id = nextLayerId(options.kind);
+  if (options.kind === 'text') {
+    return {
+      id,
+      type: 'text',
+      position: { x: point.x, y: point.y, width, height },
+      content: {
+        text: options.token,
+        style: { fontSize, color, textAlign: 'left' },
+      },
+    };
+  }
+  return {
+    id,
+    type: 'image',
+    position: { x: point.x, y: point.y, width, height },
+    content: { src: options.token, alt: 'Placeholder image', fit: 'cover' },
+  };
+}
+
+export function createTokenTool(options: TokenToolOptions): SceneTool {
+  return createPlaceTool({
+    id: options.id,
+    label: options.label,
+    shortcut: options.shortcut,
+    build: (point) => buildTokenLayer(options, point),
+  });
+}
+
+let counter = 0;
+function nextLayerId(kind: TokenKind): string {
+  counter += 1;
+  return `${kind}-token-${Date.now().toString(36)}-${counter}`;
+}

package/src/scene/tools/createDrawShapeTool.ts

@@ -0,0 +1,82 @@
+/**
+ * createDrawShapeTool — drag to draw the currently-pending shape kind.
+ *
+ * Generalizes `ShapeTool` to any kind in the drawing vocabulary. The pending
+ * kind is read on demand (set by the ShapePalette), and committing calls back
+ * to the host with the kind + bounding box so the adapter can insert a
+ * `{[kind …]}` heading. The live preview renders the actual shape geometry.
+ */
+
+import { createElement, type JSX } from 'react';
+import { shapePath } from '@bendyline/squisq/doc';
+import type { SceneTool } from './SceneTool';
+
+export interface DrawShapeOptions {
+  /** The kind to draw, or null when none is pending (tool is inert). */
+  getKind: () => string | null;
+  /** Commit a drawn shape. */
+  onDraw: (kind: string, box: { x: number; y: number; width: number; height: number }) => void;
+}
+
+export function createDrawShapeTool(options: DrawShapeOptions): SceneTool {
+  let drag: { start: { x: number; y: number }; current: { x: number; y: number } } | 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 box(): { x: number; y: number; width: number; height: number } {
+    const a = drag!.start;
+    const b = drag!.current;
+    return {
+      x: Math.min(a.x, b.x),
+      y: Math.min(a.y, b.y),
+      width: Math.abs(b.x - a.x),
+      height: Math.abs(b.y - a.y),
+    };
+  }
+
+  return {
+    id: 'draw',
+    label: 'Shape',
+    cursor: 'crosshair',
+
+    onPointerDown(e, ctx) {
+      if (e.button !== 0 || !options.getKind()) return;
+      const { sx, sy } = pointer(e);
+      const v = ctx.screenToViewport(sx, sy);
+      drag = { start: v, current: v };
+      (e.currentTarget as Element).setPointerCapture?.(e.pointerId);
+    },
+
+    onPointerMove(e, ctx) {
+      if (!drag) return;
+      const { sx, sy } = pointer(e);
+      drag.current = ctx.screenToViewport(sx, sy);
+    },
+
+    onPointerUp(e, ctx) {
+      if (!drag) return;
+      const b = box();
+      const kind = options.getKind();
+      drag = null;
+      (e.currentTarget as Element).releasePointerCapture?.(e.pointerId);
+      if (kind && b.width >= 4 && b.height >= 4) options.onDraw(kind, b);
+      ctx.setActiveTool?.('select');
+    },
+
+    renderOverlay(): JSX.Element | null {
+      if (!drag) return null;
+      const b = box();
+      const kind = options.getKind();
+      const d = kind ? shapePath(kind, b.x, b.y, b.width, b.height) : null;
+      return createElement('path', {
+        key: 'draw-preview',
+        d: d ?? `M ${b.x} ${b.y} h ${b.width} v ${b.height} h ${-b.width} Z`,
+        className: 'squisq-scene-connect-preview',
+        fill: 'none',
+      });
+    },
+  };
+}

package/src/styles/diagram.css

@@ -0,0 +1,183 @@
+/**
+ * Diagram editor styles.
+ *
+ * `.squisq-diagram-widget-host`: the wrapper ProseMirror inserts after a
+ *   `### Foo {[diagram]}` heading. Hosts a React-Flow canvas at a fixed
+ *   inline height; flipping the `maximized` state portals the canvas out
+ *   to an overlay (`.squisq-diagram-maximized-overlay`) instead.
+ *
+ * `[data-squisq-diagram-child]`: ProseMirror marks each direct sub-heading
+ *   of a diagram parent. CSS hides those headings (and the body content
+ *   between them) so the diagram canvas is the only visual representation
+ *   of the section in the WYSIWYG view. Authors can still edit them
+ *   through the canvas, or via the Raw / Linear views.
+ */
+
+.squisq-diagram-widget-host {
+  margin: 0.75rem 0 1.25rem;
+}
+
+.squisq-diagram-inline {
+  position: relative;
+  width: 100%;
+  height: 420px;
+  border: 1px solid var(--squisq-border, #e2e8f0);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--squisq-surface, #ffffff);
+}
+
+.squisq-diagram-canvas {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+/* Drag bar along the bottom edge — pins the canvas to a fixed pixel
+ * height (persisted as `height=` on the `{[diagram …]}` heading). Sits
+ * above the Scene so the gesture is captured by the handle, not the
+ * canvas. Double-click reverts to the default height. */
+.squisq-diagram-resize-handle {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: ns-resize;
+  z-index: 11;
+  touch-action: none;
+}
+.squisq-diagram-resize-handle::before {
+  content: '';
+  width: 44px;
+  height: 4px;
+  border-radius: 2px;
+  background: var(--squisq-border, #cbd5e1);
+  transition: background 0.12s;
+}
+.squisq-diagram-resize-handle:hover::before {
+  background: var(--squisq-text-muted, #94a3b8);
+}
+
+.squisq-diagram-canvas .react-flow {
+  width: 100%;
+  height: 100%;
+}
+
+.squisq-diagram-empty {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  pointer-events: none;
+  text-align: center;
+  padding: 24px;
+}
+
+.squisq-diagram-empty-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--squisq-text, #1e293b);
+}
+
+.squisq-diagram-empty-hint {
+  font-size: 12px;
+  color: var(--squisq-text-muted, #64748b);
+  max-width: 320px;
+  line-height: 1.45;
+}
+
+.squisq-diagram-empty-btn {
+  pointer-events: auto;
+  margin-top: 4px;
+  padding: 6px 12px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #ffffff;
+  background: #6366f1;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.1s;
+}
+
+.squisq-diagram-empty-btn:hover {
+  background: #4f46e5;
+}
+
+.squisq-diagram-maximize-btn {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 10;
+  width: 32px;
+  height: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--squisq-surface, #ffffff);
+  border: 1px solid var(--squisq-border, #e2e8f0);
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 1;
+  color: var(--squisq-text, #1e293b);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+}
+.squisq-diagram-maximize-btn:hover {
+  background: var(--squisq-surface-hover, #f8fafc);
+}
+
+.squisq-diagram-maximized-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background: rgba(15, 23, 42, 0.6);
+  display: flex;
+  align-items: stretch;
+  justify-content: stretch;
+}
+
+.squisq-diagram-maximized-content {
+  position: relative;
+  flex: 1;
+  margin: 24px;
+  background: var(--squisq-surface, #ffffff);
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+}
+
+.squisq-diagram-maximized-content .squisq-diagram-canvas {
+  width: 100%;
+  height: 100%;
+}
+
+/* Child headings owned by a diagram are hidden in the WYSIWYG.
+ * They still exist in the doc (and in markdown) — the diagram canvas
+ * is the editing surface for them. */
+[data-squisq-diagram-child='true'] {
+  display: none;
+}
+
+.squisq-diagram-inline-placeholder {
+  /* Reserved space so the document layout doesn't jump when the canvas
+   * portals into the maximize overlay. */
+  height: 420px;
+  border: 1px dashed var(--squisq-border, #e2e8f0);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--squisq-text-muted, #64748b);
+  font-size: 14px;
+}
+.squisq-diagram-inline-placeholder::before {
+  content: 'Diagram open in full screen — press Esc to return';
+}