@bendyline/squisq-editor-react 1.6.2 → 2.0.0

package/src/scene/text/sceneTextChannel.ts

@@ -1,13 +1,13 @@
 /**
- * sceneTextChannel — a module singleton that bridges the canvas's inline
+ * 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`. Singleton because only one
- * canvas textbox can be focused at a time.
+ * 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';
@@ -20,21 +20,27 @@ export interface SceneTextHandle {
 
 type Listener = (handle: SceneTextHandle | null) => void;
 
-let current: SceneTextHandle | null = null;
-const listeners = new Set<Listener>();
+export interface SceneTextChannel {
+  set(handle: SceneTextHandle | null): void;
+  get(): SceneTextHandle | null;
+  subscribe(listener: Listener): () => void;
+}
 
-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);
-  },
-};
+/** 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

@@ -5,9 +5,13 @@
  * 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

package/src/scene/tools/ConnectTool.ts

@@ -32,7 +32,13 @@ interface ConnectState {
   hoveredTargetId: string | null;
 }
 
-let state: ConnectState | null = 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();
@@ -126,18 +132,19 @@ export const ConnectTool: SceneTool = {
     const sourceBox = nodeBoxFromCard(ctx, nodeId);
     if (!sourceBox) return;
     const preview = updatePreview(sourceBox, v, null);
-    state = {
+    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);
@@ -152,16 +159,18 @@ export const ConnectTool: SceneTool = {
   },
 
   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);
-    state = null;
+    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', {

package/src/scene/tools/SceneTool.ts

@@ -14,7 +14,15 @@ import type { SceneCommand, SceneEdge } from '../commands/SceneCommand';
 import type { HitTestable } from '../hooks/useSceneHitTest';
 import type { SceneTransform } from '../hooks/useScenePanZoom';
 
+/** Mutable gesture storage owned by one Scene instance. */
+export interface SceneInteractionState {
+  selectDrag?: unknown;
+  connect?: unknown;
+}
+
 export interface SceneToolContext {
+  /** Gesture state private to the owning Scene instance. */
+  interaction: SceneInteractionState;
   /** Current viewport size in viewport units. */
   viewport: { width: number; height: number };
   /** Current pan/zoom transform. */

package/src/scene/tools/SelectTool.ts

@@ -18,7 +18,7 @@
  */
 
 import { createElement, type JSX } from 'react';
-import type { SceneTool, SceneToolContext } from './SceneTool';
+import type { SceneInteractionState, SceneTool, SceneToolContext } from './SceneTool';
 import type { SceneCommand } from '../commands/SceneCommand';
 import type { ResizeCorner } from '../SceneSelection';
 
@@ -53,7 +53,13 @@ type DragState = MoveDragState | MarqueeDragState | ResizeDragState;
 const DRAG_THRESHOLD_PX = 3;
 const MIN_LAYER_SIZE = 8;
 
-let dragState: DragState | null = null;
+function getDragState(interaction: SceneInteractionState): DragState | null {
+  return (interaction.selectDrag as DragState | undefined) ?? null;
+}
+
+function setDragState(interaction: SceneInteractionState, state: DragState | null): void {
+  interaction.selectDrag = state ?? undefined;
+}
 
 function pointerCoords(e: React.PointerEvent): { sx: number; sy: number } {
   const rect = (e.currentTarget as Element).getBoundingClientRect();
@@ -90,20 +96,23 @@ function applyResize(
 }
 
 /** Begin a handle-initiated resize drag. Called by the Scene when a corner is pressed. */
-export function beginHandleDrag(args: {
-  layerId: string;
-  corner: ResizeCorner;
-  startV: { x: number; y: number };
-  startBounds: { x: number; y: number; width: number; height: number };
-}): void {
-  dragState = {
+export function beginHandleDrag(
+  args: {
+    layerId: string;
+    corner: ResizeCorner;
+    startV: { x: number; y: number };
+    startBounds: { x: number; y: number; width: number; height: number };
+  },
+  interaction: SceneInteractionState,
+): void {
+  setDragState(interaction, {
     kind: 'resize',
     layerId: args.layerId,
     corner: args.corner,
     startV: args.startV,
     startBounds: args.startBounds,
     currentBounds: args.startBounds,
-  };
+  });
 }
 
 export const SelectTool: SceneTool = {
@@ -135,29 +144,30 @@ export const SelectTool: SceneTool = {
         const origin = getLayerOrigin(ctx, id);
         if (origin) layerStarts.set(id, origin);
       }
-      dragState = {
+      setDragState(ctx.interaction, {
         kind: 'move',
         startV: v,
         startS: { x: sx, y: sy },
         layerStarts,
         currentV: v,
         movedPastThreshold: false,
-      };
+      });
     } else {
       if (!e.shiftKey) ctx.setSelection([]);
-      dragState = {
+      setDragState(ctx.interaction, {
         kind: 'marquee',
         startV: v,
         startS: { x: sx, y: sy },
         currentV: v,
         movedPastThreshold: false,
-      };
+      });
     }
 
     (e.currentTarget as Element).setPointerCapture?.(e.pointerId);
   },
 
   onPointerMove(e, ctx) {
+    const dragState = getDragState(ctx.interaction);
     if (!dragState) return;
     const { sx, sy } = pointerCoords(e);
     const v = ctx.screenToViewport(sx, sy);
@@ -182,6 +192,7 @@ export const SelectTool: SceneTool = {
   },
 
   onPointerUp(e, ctx) {
+    const dragState = getDragState(ctx.interaction);
     if (!dragState) return;
     if (
       dragState.kind === 'move' &&
@@ -208,7 +219,7 @@ export const SelectTool: SceneTool = {
       ctx.dispatch({ kind: 'resizeLayer', id: dragState.layerId, width, height });
     }
     (e.currentTarget as Element).releasePointerCapture?.(e.pointerId);
-    dragState = null;
+    setDragState(ctx.interaction, null);
   },
 
   onDoubleClick(e, ctx) {
@@ -232,7 +243,8 @@ export const SelectTool: SceneTool = {
     }
   },
 
-  renderOverlay(): JSX.Element | null {
+  renderOverlay(ctx): JSX.Element | null {
+    const dragState = getDragState(ctx.interaction);
     if (!dragState || dragState.kind !== 'marquee' || !dragState.movedPastThreshold) return null;
     const box = boxFromCorners(dragState.startV, dragState.currentV);
     return createElement('rect', {
@@ -247,7 +259,10 @@ export const SelectTool: SceneTool = {
 };
 
 /** Return the active move-drag offset (viewport units). Null if no drag, or if the drag is a marquee/resize. */
-export function getActiveMoveOffset(): { dx: number; dy: number } | null {
+export function getActiveMoveOffset(
+  interaction: SceneInteractionState,
+): { dx: number; dy: number } | null {
+  const dragState = getDragState(interaction);
   if (!dragState || dragState.kind !== 'move' || !dragState.movedPastThreshold) return null;
   return {
     dx: dragState.currentV.x - dragState.startV.x,
@@ -256,10 +271,11 @@ export function getActiveMoveOffset(): { dx: number; dy: number } | null {
 }
 
 /** Return the live bounds for the layer currently being resized. */
-export function getActiveResize(): {
+export function getActiveResize(interaction: SceneInteractionState): {
   layerId: string;
   bounds: { x: number; y: number; width: number; height: number };
 } | null {
+  const dragState = getDragState(interaction);
   if (!dragState || dragState.kind !== 'resize') return null;
   return { layerId: dragState.layerId, bounds: dragState.currentBounds };
 }

package/src/scene/tools/ShapeTool.ts

@@ -2,9 +2,8 @@
  * 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.
+ * stroke/fill defaults. Returns a fresh SceneTool instance so hosts can bind
+ * independent tool identities and defaults; gesture state belongs to Scene.
  */
 
 import { createElement, type JSX } from 'react';

package/src/styles/ascii-diagram.css

@@ -0,0 +1,79 @@
+/* ASCII diagram fences in the WYSIWYG editor.
+ *
+ * A qualifying code fence is hidden behind its interactive canvas
+ * (AsciiDiagramWidget); toggling "Source" on the widget swaps the hide
+ * class for a monospace, non-wrapping view of the raw art. */
+
+.squisq-wysiwyg-editor pre.squisq-ascii-fence-hidden {
+  display: none;
+}
+
+.squisq-wysiwyg-editor pre.squisq-ascii-fence-source {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
+  /* prosemirror.css sets `.ProseMirror pre { white-space: pre-wrap }`,
+     which soft-wraps and visually scrambles column-aligned art. */
+  white-space: pre;
+  overflow-x: auto;
+  line-height: 1.2;
+  tab-size: 4;
+}
+
+.squisq-ascii-diagram-widget-host {
+  margin: 0.75rem 0 1.25rem;
+}
+
+.squisq-ascii-diagram-warnings {
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--squisq-theme-text-muted, #6b7280);
+}
+
+.squisq-ascii-diagram-warnings summary {
+  cursor: pointer;
+  user-select: none;
+}
+
+.squisq-ascii-diagram-warnings ul {
+  margin: 4px 0 0;
+  padding-left: 18px;
+}
+
+/* "Repair as diagram" affordance on broken box-art fences. The fence stays
+ * visible above this banner; clicking rewrites it to clean diagram art. */
+.squisq-repair-banner {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin: 4px 0 1rem;
+  padding: 8px 12px;
+  border: 1px dashed var(--squisq-border, #d1d5db);
+  border-radius: 8px;
+  background: var(--squisq-input-bg, #f9fafb);
+  font-size: 13px;
+}
+
+.squisq-repair-banner-text {
+  color: var(--squisq-text-muted, #6b7280);
+}
+
+.squisq-repair-banner-btn {
+  cursor: pointer;
+  border: 1px solid var(--squisq-accent, #6366f1);
+  border-radius: 6px;
+  background: var(--squisq-accent, #6366f1);
+  color: #fff;
+  padding: 4px 12px;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.4;
+  white-space: nowrap;
+}
+
+.squisq-repair-banner-btn:hover {
+  filter: brightness(1.05);
+}
+
+.squisq-repair-banner-btn:active {
+  filter: brightness(0.95);
+}