@bendyline/squisq-editor-react 1.6.1 → 1.6.2

package/src/mediaReferences.ts

@@ -0,0 +1,299 @@
+import { splitKeyValueToken, tokenizeAttrTokens } from '@bendyline/squisq/markdown';
+
+interface MediaReferenceRange {
+  start: number;
+  end: number;
+}
+
+interface MarkdownReferenceMatch {
+  destination: string;
+  range: MediaReferenceRange;
+}
+
+const MEDIA_REFERENCE_PARAM_KEYS = new Set([
+  'audio',
+  'file',
+  'href',
+  'image',
+  'imagesrc',
+  'path',
+  'poster',
+  'src',
+  'url',
+  'video',
+]);
+
+const HTML_MEDIA_ATTRS = ['src', 'href', 'poster'] as const;
+
+/**
+ * Collect media references from the document source. Used by the Files panel
+ * to distinguish stored files that are actually referenced by the document
+ * from files that only exist in the bin.
+ */
+export function collectMediaReferencesFromMarkdown(source: string): ReadonlySet<string> {
+  const refs = new Set<string>();
+  collectMarkdownInlineReferences(source, refs);
+  collectHtmlAttributeReferences(source, refs);
+  collectAnnotationReferences(source, refs);
+  return refs;
+}
+
+/**
+ * Remove markdown/html references to a media asset without reparsing and
+ * reserializing the whole document. This targets the ref shapes the editor
+ * emits for uploaded files while preserving unrelated author formatting.
+ */
+export function removeMediaReferencesFromMarkdown(source: string, mediaPath: string): string {
+  if (!mediaPath) return source;
+  const withoutMarkdownRefs = removeMarkdownInlineReferences(source, mediaPath);
+  const withoutImageTags = removeHtmlTagsByAttribute(withoutMarkdownRefs, 'img', 'src', mediaPath);
+  return removeHtmlTagsByAttribute(withoutImageTags, 'a', 'href', mediaPath);
+}
+
+function removeMarkdownInlineReferences(source: string, mediaPath: string): string {
+  let result = '';
+  let cursor = 0;
+
+  while (cursor < source.length) {
+    const range = findNextMarkdownReference(source, cursor, mediaPath);
+    if (!range) break;
+    result += source.slice(cursor, range.start);
+    cursor = range.end;
+  }
+
+  return result + source.slice(cursor);
+}
+
+function findNextMarkdownReference(
+  source: string,
+  startIndex: number,
+  mediaPath: string,
+): MediaReferenceRange | null {
+  const match = findNextMarkdownReferenceMatch(source, startIndex, mediaPath);
+  return match?.range ?? null;
+}
+
+function collectMarkdownInlineReferences(source: string, refs: Set<string>): void {
+  let cursor = 0;
+  while (cursor < source.length) {
+    const match = findNextMarkdownReferenceMatch(source, cursor);
+    if (!match) return;
+    refs.add(match.destination);
+    cursor = Math.max(match.range.end, cursor + 1);
+  }
+}
+
+function findNextMarkdownReferenceMatch(
+  source: string,
+  startIndex: number,
+  mediaPath?: string,
+): MarkdownReferenceMatch | null {
+  let bracketIndex = source.indexOf('[', startIndex);
+
+  while (bracketIndex !== -1) {
+    const previous = source[bracketIndex - 1];
+    const isImage = previous === '!';
+    if (previous === '@') {
+      bracketIndex = source.indexOf('[', bracketIndex + 1);
+      continue;
+    }
+
+    const closeBracket = findClosingBracket(source, bracketIndex);
+    if (closeBracket === -1 || source[closeBracket + 1] !== '(') {
+      bracketIndex = source.indexOf('[', bracketIndex + 1);
+      continue;
+    }
+
+    const openParen = closeBracket + 1;
+    const closeParen = findClosingParen(source, openParen);
+    if (closeParen === -1) {
+      bracketIndex = source.indexOf('[', bracketIndex + 1);
+      continue;
+    }
+
+    const destination = readLinkDestination(source.slice(openParen + 1, closeParen));
+    if (destination && (mediaPath === undefined || destination === mediaPath)) {
+      const tokenStart = isImage ? bracketIndex - 1 : bracketIndex;
+      return {
+        destination,
+        range: expandStandaloneLine(source, tokenStart, closeParen + 1),
+      };
+    }
+
+    bracketIndex = source.indexOf('[', bracketIndex + 1);
+  }
+
+  return null;
+}
+
+function collectHtmlAttributeReferences(source: string, refs: Set<string>): void {
+  const tagPattern = /<[a-z][^>]*>/gi;
+  let match: RegExpExecArray | null;
+
+  while ((match = tagPattern.exec(source))) {
+    const tag = match[0];
+    for (const attrName of HTML_MEDIA_ATTRS) {
+      const value = readHtmlAttribute(tag, attrName);
+      if (value) refs.add(value);
+    }
+  }
+}
+
+function collectAnnotationReferences(source: string, refs: Set<string>): void {
+  const annotationPattern = /\{\[([^\]]*)\]\}/g;
+  let match: RegExpExecArray | null;
+
+  while ((match = annotationPattern.exec(source))) {
+    const inner = match[1];
+    if (!inner) continue;
+    const tokens = tokenizeAttrTokens(inner);
+    for (const token of tokens) {
+      const pair = splitKeyValueToken(token);
+      if (!pair) continue;
+      if (MEDIA_REFERENCE_PARAM_KEYS.has(pair.key.toLowerCase())) {
+        refs.add(pair.value);
+      }
+    }
+  }
+}
+
+function findClosingBracket(source: string, openIndex: number): number {
+  let depth = 0;
+  for (let i = openIndex; i < source.length; i++) {
+    if (source[i] === '\\') {
+      i += 1;
+      continue;
+    }
+    if (source[i] === '[') depth += 1;
+    if (source[i] === ']') {
+      depth -= 1;
+      if (depth === 0) return i;
+    }
+  }
+  return -1;
+}
+
+function findClosingParen(source: string, openIndex: number): number {
+  let depth = 0;
+  let inAngleDestination = false;
+
+  for (let i = openIndex; i < source.length; i++) {
+    const ch = source[i];
+    if (ch === '\\') {
+      i += 1;
+      continue;
+    }
+    if (inAngleDestination) {
+      if (ch === '>') inAngleDestination = false;
+      continue;
+    }
+    if (ch === '<') {
+      inAngleDestination = true;
+      continue;
+    }
+    if (ch === '(') {
+      depth += 1;
+      continue;
+    }
+    if (ch === ')') {
+      depth -= 1;
+      if (depth === 0) return i;
+    }
+  }
+
+  return -1;
+}
+
+function readLinkDestination(raw: string): string {
+  const content = raw.trimStart();
+  if (!content) return '';
+
+  if (content.startsWith('<')) {
+    const close = findUnescaped(content, '>', 1);
+    if (close === -1) return '';
+    return unescapeMarkdownUrl(content.slice(1, close));
+  }
+
+  let depth = 0;
+  for (let i = 0; i < content.length; i++) {
+    const ch = content[i];
+    if (ch === '\\') {
+      i += 1;
+      continue;
+    }
+    if (ch === '(') {
+      depth += 1;
+      continue;
+    }
+    if (ch === ')' && depth > 0) {
+      depth -= 1;
+      continue;
+    }
+    if (depth === 0 && /\s/.test(ch)) {
+      return unescapeMarkdownUrl(content.slice(0, i));
+    }
+  }
+
+  return unescapeMarkdownUrl(content);
+}
+
+function findUnescaped(source: string, needle: string, startIndex: number): number {
+  for (let i = startIndex; i < source.length; i++) {
+    if (source[i] === '\\') {
+      i += 1;
+      continue;
+    }
+    if (source[i] === needle) return i;
+  }
+  return -1;
+}
+
+function unescapeMarkdownUrl(value: string): string {
+  return value.replace(/\\([\\`*{}[\]()#+\-.!_>])/g, '$1');
+}
+
+function expandStandaloneLine(source: string, start: number, end: number): MediaReferenceRange {
+  const lineStart = source.lastIndexOf('\n', start - 1) + 1;
+  const nextNewline = source.indexOf('\n', end);
+  const lineEnd = nextNewline === -1 ? source.length : nextNewline;
+  const before = source.slice(lineStart, start);
+  const after = source.slice(end, lineEnd);
+
+  if (before.trim() === '' && after.trim() === '') {
+    return {
+      start: lineStart,
+      end: nextNewline === -1 ? lineEnd : lineEnd + 1,
+    };
+  }
+
+  return { start, end };
+}
+
+function removeHtmlTagsByAttribute(
+  source: string,
+  tagName: 'a' | 'img',
+  attrName: 'href' | 'src',
+  mediaPath: string,
+): string {
+  const tagPattern = tagName === 'img' ? /<img\b[^>]*>/gi : /<a\b[^>]*>[\s\S]*?<\/a>/gi;
+  return source.replace(tagPattern, (tag) => {
+    const value = readHtmlAttribute(tag, attrName);
+    return value === mediaPath ? '' : tag;
+  });
+}
+
+function readHtmlAttribute(tag: string, attrName: string): string | null {
+  const attrPattern = new RegExp(`\\b${attrName}\\s*=\\s*("([^"]*)"|'([^']*)'|([^\\s>]+))`, 'i');
+  const match = attrPattern.exec(tag);
+  if (!match) return null;
+  return unescapeHtmlAttribute(match[2] ?? match[3] ?? match[4] ?? '');
+}
+
+function unescapeHtmlAttribute(value: string): string {
+  return value
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;|&apos;/g, "'")
+    .replace(/&amp;/g, '&');
+}

package/src/scene/Scene.tsx

@@ -389,6 +389,7 @@ export function Scene(props: SceneProps) {
   // ── Render ──────────────────────────────────────────────────
   const liveOffset = activeId === 'select' ? getActiveMoveOffset() : null;
   const liveResize = activeId === 'select' ? getActiveResize() : null;
+  const showSelectionHandles = activeTool?.hideSelectionHandles !== true;
 
   // Per-layer transform applied during an in-flight drag or resize so
   // the user sees the layer move/stretch in real time, not just on commit.
@@ -415,6 +416,32 @@ export function Scene(props: SceneProps) {
     return {};
   };
 
+  // A text box's font size is independent of its box size — a wide box exists
+  // precisely so a small caption can left/center/right-align within it. So
+  // when a text box is directly resized we reshape the box and re-align its
+  // text at the *unchanged* font, rather than scaling the glyphs with the box
+  // (the generic matrix path in `wrapperFor`, which would stretch the text and
+  // then snap it back to its real size on commit). Returns a clone positioned
+  // at the live-resize box, or null when `layer` isn't a text box being
+  // directly resized. Follower labels (drawing/diagram, whose font is derived
+  // from box height) are resized via their shape, not directly, so they never
+  // match here and keep the scale-with-box preview.
+  const liveResizedTextBox = (layer: Layer): Layer | null => {
+    if (!liveResize || liveResize.layerId !== layer.id || layer.type !== 'text') return null;
+    const b = liveResize.bounds;
+    return {
+      ...layer,
+      position: {
+        ...layer.position,
+        x: b.x,
+        y: b.y,
+        width: b.width,
+        height: b.height,
+        anchor: 'top-left',
+      },
+    };
+  };
+
   const handleHandlePointerDown = (e: React.PointerEvent<SVGElement>, corner: ResizeCorner) => {
     const id = selection.selection.values().next().value as string | undefined;
     if (!id) return;
@@ -454,21 +481,40 @@ export function Scene(props: SceneProps) {
       >
         {/* Extras (e.g. diagram edges) render behind the layers so the
             cards visually clip edge endpoints. */}
-        {renderExtras?.(ctx)}
+        {renderExtras && <g className="squisq-scene-extras">{renderExtras(ctx)}</g>}
         {/* Layers — the Scene wraps each in a transformable <g> so a
             selected layer can show a live drag/resize preview without
             requiring the host to know about drag state. */}
-        {layers.map((layer) => (
-          <g key={layer.id} data-layer-id={layer.id} {...wrapperFor(layer)}>
-            {layerRenderer(layer, viewport)}
-          </g>
-        ))}
+        {layers.map((layer) => {
+          const layerClassName = `squisq-scene-layer squisq-scene-layer--${layer.type}`;
+          // Text boxes reshape (font-fixed) rather than scale during resize;
+          // everything else stretches via the group transform.
+          const resizedText = liveResizedTextBox(layer);
+          if (resizedText) {
+            return (
+              <g key={layer.id} className={layerClassName} data-layer-id={layer.id}>
+                {layerRenderer(resizedText, viewport)}
+              </g>
+            );
+          }
+          return (
+            <g
+              key={layer.id}
+              className={layerClassName}
+              data-layer-id={layer.id}
+              {...wrapperFor(layer)}
+            >
+              {layerRenderer(layer, viewport)}
+            </g>
+          );
+        })}
         <SceneSelection
           selection={selection.selection}
           hitItems={hitItems}
           liveOffset={liveOffset}
           liveResize={liveResize}
-          onHandlePointerDown={handleHandlePointerDown}
+          onHandlePointerDown={showSelectionHandles ? handleHandlePointerDown : undefined}
+          showHandles={showSelectionHandles}
         />
         {activeTool?.renderOverlay?.(ctx)}
       </SceneViewport>

package/src/scene/SceneBlockWidget.tsx

@@ -25,6 +25,7 @@ import { shapeIdFromLayerId } from './layers/shapeLayers';
 import { ShapePalette } from './ShapePalette';
 import { ScenePropsBar } from './ScenePropsBar';
 import { SceneBlockToolbar, type SceneBlockAction, type SceneAlignment } from './SceneBlockToolbar';
+import { SceneSideToolbar } from './SceneSideToolbar';
 import type { SceneTextEditConfig } from './text/sceneTextConfig';
 import { markdownToTiptap } from '../tiptapBridge';
 import { Icon } from '../Icon';
@@ -301,15 +302,15 @@ export function SceneBlockWidget({
   );
 
   const body = <div className="squisq-scene-stage">{canvas}</div>;
-  const sideToolbar = <div className="squisq-scene-side-toolbar">{toolbar}</div>;
 
   if (maximized) {
     return (
       <div className="squisq-scene-inline-placeholder">
         <DiagramMaximizedOverlay host={host ?? null} onClose={() => setMaximized(false)}>
+          {/* Maximized has a full screen for a static right column — no collapse. */}
           <div className="squisq-scene-block-max">
             {body}
-            {sideToolbar}
+            <div className="squisq-scene-side-toolbar">{toolbar}</div>
           </div>
         </DiagramMaximizedOverlay>
       </div>
@@ -318,8 +319,10 @@ export function SceneBlockWidget({
 
   return (
     <div className="squisq-scene-shell">
+      {/* Before the canvas so the narrow-width fallback bar sits above it; the
+        wide-width gutter column is absolute and unaffected by DOM order. */}
+      <SceneSideToolbar>{toolbar}</SceneSideToolbar>
       <div className="squisq-scene-inline">{body}</div>
-      {sideToolbar}
     </div>
   );
 }

package/src/scene/SceneSelection.tsx

@@ -28,6 +28,8 @@ interface SceneSelectionProps {
   } | null;
   /** Fired when the user presses a corner/edge handle. */
   onHandlePointerDown?: (e: React.PointerEvent<SVGElement>, corner: ResizeCorner) => void;
+  /** Whether to render resize handles in addition to the selection outline. */
+  showHandles?: boolean;
 }
 
 const HANDLE_SIZE = 8;
@@ -38,6 +40,7 @@ export function SceneSelection({
   liveOffset,
   liveResize,
   onHandlePointerDown,
+  showHandles = true,
 }: SceneSelectionProps) {
   if (selection.size === 0) return null;
   const selected = hitItems.filter((it) => selection.has(it.id));
@@ -84,21 +87,22 @@ export function SceneSelection({
               className="squisq-scene-selection-outline"
               pointerEvents="none"
             />
-            {corners.map(({ corner, cx, cy, cursor }) => (
-              <rect
-                key={corner}
-                x={cx - HANDLE_SIZE / 2}
-                y={cy - HANDLE_SIZE / 2}
-                width={HANDLE_SIZE}
-                height={HANDLE_SIZE}
-                className="squisq-scene-selection-handle"
-                style={{ cursor }}
-                onPointerDown={
-                  onHandlePointerDown ? (e) => onHandlePointerDown(e, corner) : undefined
-                }
-                data-corner={corner}
-              />
-            ))}
+            {showHandles &&
+              corners.map(({ corner, cx, cy, cursor }) => (
+                <rect
+                  key={corner}
+                  x={cx - HANDLE_SIZE / 2}
+                  y={cy - HANDLE_SIZE / 2}
+                  width={HANDLE_SIZE}
+                  height={HANDLE_SIZE}
+                  className="squisq-scene-selection-handle"
+                  style={{ cursor }}
+                  onPointerDown={
+                    onHandlePointerDown ? (e) => onHandlePointerDown(e, corner) : undefined
+                  }
+                  data-corner={corner}
+                />
+              ))}
           </g>
         );
       })}

package/src/scene/SceneSideToolbar.tsx

@@ -0,0 +1,89 @@
+/**
+ * SceneSideToolbar — placement wrapper for a `SceneBlockToolbar` beside an
+ * *inline* diagram / drawing / layout canvas.
+ *
+ * The toolbar normally floats as an always-open vertical column in the page's
+ * right gutter (`.squisq-scene-side-toolbar`, positioned at `left: 100%`). That
+ * only works when the gutter is wide enough to hold the 180px column; on a
+ * narrow editor — or in a host whose page fills most of the width — the column
+ * overhangs the editor's clipping edge and gets cut off.
+ *
+ * So we measure the real gutter (the gap between the canvas's right edge and
+ * the nearest horizontally-clipping ancestor) rather than guessing from a
+ * viewport breakpoint, since page width / centering / host chrome all move it:
+ *   • Fits  — render the column as-is (the common, wider case).
+ *   • Clips — render the toolbar as a compact horizontal bar in normal flow
+ *     above the canvas (`.squisq-scene-inline-toolbar`). It stays visible and
+ *     is never clipped; it just costs a small strip of vertical space.
+ *
+ * A normal-flow bar is used rather than an on-demand overlay popover because
+ * absolutely-positioned content overlapping the React Flow canvas fails to
+ * paint in some hosts (the diagram's own maximize overlay hits the same wall),
+ * whereas in-flow content always renders.
+ *
+ * Only the inline placement adapts. Maximized mode has a full screen to reserve
+ * a static right column, so the widgets render the bare
+ * `.squisq-scene-side-toolbar` there and never mount this wrapper.
+ */
+
+import { useLayoutEffect, useRef, useState, type ReactNode } from 'react';
+
+/**
+ * Horizontal room the gutter must have to host the open column, kept in sync
+ * with `.squisq-scene-side-toolbar` in scene.css (12px `margin-left` + 180px
+ * `width`) plus a few px of breathing room so we fall back to the bar just
+ * before the column would touch the clip edge.
+ */
+const SIDE_TOOLBAR_FIT_PX = 12 + 180 + 4;
+
+interface SceneSideToolbarProps {
+  /** The `SceneBlockToolbar` element built by the host widget. */
+  children: ReactNode;
+}
+
+export function SceneSideToolbar({ children }: SceneSideToolbarProps) {
+  const wrapRef = useRef<HTMLDivElement>(null);
+  const [collapsed, setCollapsed] = useState(false);
+
+  // Measure whether the right gutter can host the column. The column is
+  // absolutely positioned at the shell's right edge, so its clipping depends on
+  // `shellRight` vs. the nearest ancestor that clips horizontally — recomputed
+  // whenever the editor body resizes (window resize, outline toggle, etc.).
+  // Switching to the in-flow bar changes shell *height*, not `shellRight`, so
+  // there's no measure↔collapse loop.
+  useLayoutEffect(() => {
+    const wrap = wrapRef.current;
+    if (!wrap) return;
+    const shell = wrap.closest('.squisq-scene-shell') as HTMLElement | null;
+    const clip = wrap.closest('.squisq-editor-content') as HTMLElement | null;
+    const measure = () => {
+      if (!shell) return;
+      const shellRight = shell.getBoundingClientRect().right;
+      const clipRight = clip
+        ? clip.getBoundingClientRect().right
+        : document.documentElement.clientWidth;
+      setCollapsed(clipRight - shellRight < SIDE_TOOLBAR_FIT_PX);
+    };
+    measure();
+    const ro = new ResizeObserver(measure);
+    const target = clip ?? shell;
+    if (target) ro.observe(target);
+    if (shell && shell !== target) ro.observe(shell);
+    window.addEventListener('resize', measure);
+    return () => {
+      ro.disconnect();
+      window.removeEventListener('resize', measure);
+    };
+  }, []);
+
+  return (
+    <div
+      ref={wrapRef}
+      className={collapsed ? 'squisq-scene-inline-toolbar' : 'squisq-scene-side-toolbar'}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default SceneSideToolbar;

package/src/scene/layers/DiagramEdges.tsx

@@ -16,7 +16,7 @@
 import type { MarkerStyle } from '@bendyline/squisq/schemas';
 import { connectorPath, markerPath } from '@bendyline/squisq/doc';
 import type { SceneEdge } from '../commands/SceneCommand';
-import { boxesOf, edgePoint } from './edgeGeometry';
+import { boxesOf, edgeEndpoints } from './edgeGeometry';
 import type { EdgeNodeBox } from './edgeGeometry';
 
 interface DiagramEdgesProps {
@@ -81,8 +81,9 @@ export function DiagramEdges({
         const a = boxById.get(edge.source);
         const b = boxById.get(edge.target);
         if (!a || !b) return null;
-        const start = edgePoint(a, b);
-        const end = edgePoint(b, a);
+        const snapped = edgeEndpoints(nodes, edge.source, edge.target);
+        if (!snapped) return null;
+        const { start, end } = snapped;
         const d = connectorPath(edge.routing ?? defaultRouting, start, end);
         const startMarker = edge.startMarker ?? 'none';
         const endMarker = edge.endMarker ?? 'arrow';

package/src/scene/layers/edgeGeometry.ts

@@ -8,6 +8,11 @@
  */
 
 import { NODE_WIDTH, NODE_HEIGHT } from './nodeCard';
+import {
+  nearestSnapPoint as nearestCoreSnapPoint,
+  snapEndpoints as coreSnapEndpoints,
+  type ConnectorSnapPoint,
+} from '@bendyline/squisq/doc';
 
 /** Minimal box an edge needs from a node/shape (id + bounds). */
 export interface EdgeNodeBox {
@@ -49,21 +54,35 @@ export function edgePoint(from: NodeBox, to: NodeBox): { x: number; y: number }
   return { x: from.cx + dx * s, y: from.cy + dy * s };
 }
 
+function boxFor(nodes: readonly EdgeNodeBox[], id: string): NodeBox | null {
+  return boxesOf(nodes).get(id) ?? null;
+}
+
+/** Nearest stable connector port on the named node/shape to `point`. */
+export function snapPointToward(
+  nodes: readonly EdgeNodeBox[],
+  id: string,
+  point: { x: number; y: number },
+): ConnectorSnapPoint | null {
+  const box = boxFor(nodes, id);
+  return box ? nearestCoreSnapPoint(box, point) : null;
+}
+
 /**
- * Clipped start/end points of the edge `source`→`target`, or null when an
- * endpoint shape is missing. Used by the renderer and by a tool hit-testing
+ * Snapped start/end points of the edge `source`→`target`, or null when an
+ * endpoint shape is missing. Used by the renderer and by tool hit-testing
  * endpoint handles against the same geometry the renderer draws.
  */
 export function edgeEndpoints(
   nodes: readonly EdgeNodeBox[],
   source: string,
   target: string,
-): { start: { x: number; y: number }; end: { x: number; y: number } } | null {
+): { start: ConnectorSnapPoint; end: ConnectorSnapPoint } | null {
   const boxes = boxesOf(nodes);
   const a = boxes.get(source);
   const b = boxes.get(target);
   if (!a || !b) return null;
-  return { start: edgePoint(a, b), end: edgePoint(b, a) };
+  return coreSnapEndpoints(a, b);
 }
 
 export function straightPath(a: { x: number; y: number }, b: { x: number; y: number }): string {