@bendyline/squisq-editor-react 1.6.0 → 1.6.2

package/src/jsonEditor/useJsonEditorTokens.ts

@@ -6,15 +6,9 @@
 
 import { useMemo } from 'react';
 import type { CSSProperties } from 'react';
-import {
-  applySurface,
-  resolveFontFamily,
-  type SurfaceScheme,
-  type Theme,
-  DEFAULT_THEME,
-  DARK_SURFACE,
-  LIGHT_SURFACE,
-} from '@bendyline/squisq/schemas';
+import { type SurfaceScheme, type Theme } from '@bendyline/squisq/schemas';
+import { buildJsonFormTokens, resolveJsonFormTheme } from '@bendyline/squisq/jsonForm';
+import { useAutoSurface } from '@bendyline/squisq-react';
 
 export interface JsonEditorTokens {
   style: CSSProperties;
@@ -25,39 +19,15 @@ export function useJsonEditorTokens(
   theme: Theme | undefined,
   surface: SurfaceScheme | 'auto' | undefined,
 ): JsonEditorTokens {
-  return useMemo(() => {
-    const baseTheme = theme ?? DEFAULT_THEME;
-    const resolvedSurface =
-      surface === 'auto'
-        ? typeof window !== 'undefined' &&
-          window.matchMedia?.('(prefers-color-scheme: dark)').matches
-          ? DARK_SURFACE
-          : LIGHT_SURFACE
-        : (surface ?? undefined);
-    const finalTheme = resolvedSurface ? applySurface(baseTheme, resolvedSurface) : baseTheme;
-
-    const titleFont = resolveFontFamily(finalTheme.typography.titleFont, 'system-ui, sans-serif');
-    const bodyFont = resolveFontFamily(finalTheme.typography.bodyFont, 'system-ui, sans-serif');
-    const monoFont = resolveFontFamily(
-      finalTheme.typography.monoFont,
-      'ui-monospace, Consolas, monospace',
-    );
+  // Reactive `prefers-color-scheme` tracking (matches `<JsonView>`), so the
+  // editor re-themes live when the OS switches light/dark under `'auto'`.
+  const auto = useAutoSurface(surface === 'auto');
+  const effectiveSurface = surface === 'auto' ? auto : (surface ?? undefined);
 
-    const style: CSSProperties = {
-      ['--squisq-jsonform-bg' as string]: finalTheme.colors.background,
-      ['--squisq-jsonform-text' as string]: finalTheme.colors.text,
-      ['--squisq-jsonform-muted' as string]: finalTheme.colors.textMuted,
-      ['--squisq-jsonform-primary' as string]: finalTheme.colors.primary,
-      ['--squisq-jsonform-accent' as string]: finalTheme.colors.secondary,
-      ['--squisq-jsonform-warning' as string]: finalTheme.colors.warning,
-      ['--squisq-jsonform-border' as string]: `color-mix(in srgb, ${finalTheme.colors.textMuted} 35%, transparent)`,
-      ['--squisq-jsonform-input-bg' as string]: finalTheme.colors.backgroundLight,
-      ['--squisq-jsonform-title-font' as string]: titleFont,
-      ['--squisq-jsonform-body-font' as string]: bodyFont,
-      ['--squisq-jsonform-mono-font' as string]: monoFont,
-      ['--squisq-jsonform-radius' as string]: `${finalTheme.style.borderRadius ?? 8}px`,
-    };
-
-    return { style, theme: finalTheme };
-  }, [theme, surface]);
+  return useMemo(() => {
+    const style = buildJsonFormTokens(theme, effectiveSurface, {
+      prefix: '--squisq-jsonform',
+    }) as unknown as CSSProperties;
+    return { style, theme: resolveJsonFormTheme(theme, effectiveSurface) };
+  }, [theme, effectiveSurface]);
 }

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/recorder/hooks/useMediaRecorder.ts

@@ -35,8 +35,8 @@ export type RecorderState =
   | 'error';
 
 export interface UseMediaRecorderOptions {
-  /** Which capture pipeline to use. */
-  source: RecorderSource;
+  /** Which capture pipeline to use (default: `'mic'`). */
+  source?: RecorderSource;
   /**
    * Preferred MIME type override. When the browser supports it, this
    * wins over the default candidate list. When unset (or unsupported),
@@ -115,9 +115,10 @@ export interface UseMediaRecorderResult {
  * resources (e.g. the screen+mic AudioContext mixer).
  */
 async function acquireStream(
+  source: RecorderSource,
   opts: UseMediaRecorderOptions,
 ): Promise<{ stream: MediaStream; dispose: () => void }> {
-  switch (opts.source) {
+  switch (source) {
     case 'mic': {
       const audio = typeof opts.audioConstraints === 'object' ? opts.audioConstraints : undefined;
       const stream = await requestMicStream(audio);
@@ -135,7 +136,7 @@ async function acquireStream(
       const handle: ScreenStreamHandle = await requestScreenStream({
         video: opts.videoConstraints ?? true,
         systemAudio: opts.systemAudio ?? false,
-        includeMicrophone: opts.source === 'screen+mic',
+        includeMicrophone: source === 'screen+mic',
         microphoneConstraints:
           typeof opts.audioConstraints === 'object' ? opts.audioConstraints : undefined,
       });
@@ -158,7 +159,7 @@ export function getCaptureKind(source: RecorderSource): CaptureKind {
   return captureKindFor(source);
 }
 
-export function useMediaRecorder(options: UseMediaRecorderOptions): UseMediaRecorderResult {
+export function useMediaRecorder(options: UseMediaRecorderOptions = {}): UseMediaRecorderResult {
   const [state, setState] = useState<RecorderState>('idle');
   const [stream, setStream] = useState<MediaStream | null>(null);
   const [blob, setBlob] = useState<Blob | null>(null);
@@ -256,11 +257,9 @@ export function useMediaRecorder(options: UseMediaRecorderOptions): UseMediaReco
     setError(null);
     setState('requesting');
     try {
-      const { stream: nextStream, dispose } = await acquireStream(optionsRef.current);
-      const resolved = resolveFormat(
-        captureKindFor(optionsRef.current.source),
-        optionsRef.current.mimeType,
-      );
+      const source = optionsRef.current.source ?? 'mic';
+      const { stream: nextStream, dispose } = await acquireStream(source, optionsRef.current);
+      const resolved = resolveFormat(captureKindFor(source), optionsRef.current.mimeType);
       const recorderOptions: MediaRecorderOptions = {};
       if (resolved.mimeType) recorderOptions.mimeType = resolved.mimeType;
       if (optionsRef.current.bitsPerSecond) {

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