@bendyline/squisq-editor-react 1.6.2 → 2.0.1

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' &&
@@ -201,14 +212,14 @@ export const SelectTool: SceneTool = {
       }
     } else if (dragState.kind === 'resize') {
       const { x, y, width, height } = dragState.currentBounds;
-      // Resize translates into a move (if origin shifted) + a size change.
-      // We dispatch both so a single grab on a corner can change all four
-      // fields atomically from the host's point of view.
-      ctx.dispatch({ kind: 'moveLayer', id: dragState.layerId, x, y });
-      ctx.dispatch({ kind: 'resizeLayer', id: dragState.layerId, width, height });
+      // Keep the final origin + size in one command. In particular, the ASCII
+      // diagram adapter must render/reparse only once: committing a move and
+      // then a resize used to normalize the art between the two halves of one
+      // pointer gesture and could snap the node to a different grid position.
+      ctx.dispatch({ kind: 'resizeLayer', id: dragState.layerId, x, y, 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/selectionConversions.ts

@@ -0,0 +1,155 @@
+/**
+ * Plain-text selection conversions used by the toolbar's Convert menu.
+ * Keeping delimiter detection separate from the editor integrations makes
+ * the behavior identical in Monaco and Tiptap.
+ */
+
+export type SelectionTableDelimiter = 'pipe' | 'comma' | 'tab' | 'multispace' | null;
+
+export interface SelectionTable {
+  delimiter: SelectionTableDelimiter;
+  rows: string[][];
+}
+
+export interface SelectionTaskItem {
+  checked: boolean;
+  text: string;
+}
+
+type CandidateDelimiter = Exclude<SelectionTableDelimiter, null>;
+
+/** Non-empty selected lines, trimmed without changing their order. */
+export function selectionLines(text: string): string[] {
+  return text
+    .replace(/\r\n?/g, '\n')
+    .split('\n')
+    .map((line) => line.trim())
+    .filter((line) => line.length > 0);
+}
+
+function splitPipeLine(line: string): string[] {
+  let value = line.trim();
+  if (value.startsWith('|')) value = value.slice(1);
+  if (value.endsWith('|') && !value.endsWith('\\|')) value = value.slice(0, -1);
+
+  const cells: string[] = [];
+  let cell = '';
+  for (let i = 0; i < value.length; i++) {
+    const char = value[i];
+    if (char === '\\' && value[i + 1] === '|') {
+      cell += '|';
+      i++;
+    } else if (char === '|') {
+      cells.push(cell.trim());
+      cell = '';
+    } else {
+      cell += char;
+    }
+  }
+  cells.push(cell.trim());
+  return cells;
+}
+
+/** A small CSV-row parser so quoted commas remain inside their cell. */
+function splitCommaLine(line: string): string[] {
+  const cells: string[] = [];
+  let cell = '';
+  let quoted = false;
+
+  for (let i = 0; i < line.length; i++) {
+    const char = line[i];
+    if (char === '"' && !quoted && cell.trim().length === 0) {
+      // A quote only opens CSV quoting at the start of a field. Literal
+      // quotes elsewhere (for example 5" screen) remain part of the value.
+      quoted = true;
+      cell = '';
+    } else if (char === '"' && quoted) {
+      if (line[i + 1] === '"') {
+        cell += '"';
+        i++;
+      } else {
+        quoted = false;
+      }
+    } else if (char === ',' && !quoted) {
+      cells.push(cell.trim());
+      cell = '';
+    } else {
+      cell += char;
+    }
+  }
+  if (quoted) return line.split(',').map((value) => value.trim());
+  cells.push(cell.trim());
+  return cells;
+}
+
+function splitLine(line: string, delimiter: CandidateDelimiter): string[] {
+  switch (delimiter) {
+    case 'pipe':
+      return splitPipeLine(line);
+    case 'comma':
+      return splitCommaLine(line);
+    case 'tab':
+      return line
+        .trim()
+        .split('\t')
+        .map((cell) => cell.trim());
+    case 'multispace':
+      return line
+        .trim()
+        .split(/[ \u00a0]{2,}/)
+        .map((cell) => cell.trim());
+  }
+}
+
+/**
+ * Detect a delimiter only when at least two lines use it and every line
+ * produces the same number of columns. Inconsistent prose therefore falls
+ * back to a useful one-column table instead of losing text.
+ */
+export function selectionToTable(text: string): SelectionTable {
+  const lines = selectionLines(text);
+  const candidates: CandidateDelimiter[] = ['pipe', 'comma', 'tab', 'multispace'];
+
+  if (lines.length >= 2) {
+    for (const delimiter of candidates) {
+      const rows = lines.map((line) => splitLine(line, delimiter));
+      const columnCount = rows[0]?.length ?? 0;
+      if (columnCount >= 2 && rows.every((row) => row.length === columnCount)) {
+        return { delimiter, rows };
+      }
+    }
+  }
+
+  return { delimiter: null, rows: lines.map((line) => [line]) };
+}
+
+function escapeTableCell(cell: string): string {
+  return cell.replace(/\|/g, '\\|');
+}
+
+/** Render a selection as a GFM table, using its first row as the header. */
+export function selectionToTableMarkdown(text: string): string {
+  const { rows } = selectionToTable(text);
+  if (rows.length === 0) return '';
+
+  const formatRow = (row: string[]) => `| ${row.map(escapeTableCell).join(' | ')} |`;
+  const separator = rows[0].map(() => '---');
+  return [formatRow(rows[0]), formatRow(separator), ...rows.slice(1).map(formatRow)].join('\n');
+}
+
+/** Convert selected lines to task items, normalizing existing list markers. */
+export function selectionToTaskItems(text: string): SelectionTaskItem[] {
+  return selectionLines(text).map((line) => {
+    const task = /^[-*+]\s+\[([ xX])\]\s*(.*)$/.exec(line);
+    if (task) return { checked: task[1].toLowerCase() === 'x', text: task[2].trim() };
+
+    const withoutListMarker = line.replace(/^(?:[-*+]\s+|\d+[.)]\s+)/, '');
+    return { checked: false, text: withoutListMarker.trim() };
+  });
+}
+
+export function selectionToTaskListMarkdown(text: string): string {
+  return selectionToTaskItems(text)
+    .map((item) => `- [${item.checked ? 'x' : ' '}] ${item.text}`)
+    .join('\n');
+}

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