@bendyline/squisq-editor-react 1.6.1 → 2.0.0

package/src/ImageEditor.tsx

@@ -19,7 +19,7 @@ import { exportImageEditDoc, type ImageEditExportFormat } from '@bendyline/squis
 import type { SurfaceScheme, Theme } from '@bendyline/squisq/schemas';
 import { CanvasSurface } from './imageEditor/CanvasSurface.js';
 import { ImageVersionHistoryDropdown } from './imageEditor/ImageVersionHistoryDropdown.js';
-import { LayersPanel } from './imageEditor/LayersPanel.js';
+import { LayersPanel, type AddableLayerKind } from './imageEditor/LayersPanel.js';
 import { PropertiesPanel } from './imageEditor/PropertiesPanel.js';
 import { Toolbar } from './imageEditor/Toolbar.js';
 import { useImageEditor } from './imageEditor/useImageEditor.js';
@@ -115,6 +115,7 @@ export function ImageEditor(props: ImageEditorProps) {
   const [historyRefreshKey, setHistoryRefreshKey] = useState(0);
 
   const surfaceRef = useRef<HTMLDivElement>(null);
+  const imageInputRef = useRef<HTMLInputElement>(null);
   const [zoom, setZoom] = useState(1.0);
 
   const handleZoomIn = useCallback(() => {
@@ -276,6 +277,24 @@ export function ImageEditor(props: ImageEditorProps) {
     [dispatch, shapeKind],
   );
 
+  const handleAddLayer = useCallback(
+    (kind: AddableLayerKind) => {
+      if (!state) return;
+      if (kind === 'image') {
+        imageInputRef.current?.click();
+        return;
+      }
+
+      const { width, height } = state.doc.canvas;
+      if (kind === 'text') {
+        handleCreateTextAt(Math.max(0, (width - 240) / 2), Math.max(0, (height - 48) / 2));
+        return;
+      }
+      handleCreateShapeAt(width / 2, height / 2);
+    },
+    [handleCreateShapeAt, handleCreateTextAt, state],
+  );
+
   if (error) {
     return (
       <div
@@ -312,6 +331,7 @@ export function ImageEditor(props: ImageEditorProps) {
         shapeKind={state.shapeKind}
         dispatch={dispatch}
         uploadAsset={uploadAsset}
+        imageInputRef={imageInputRef}
         onExport={handleExport}
         onSave={saveBehavior === 'export' ? handleSaveAndClose : flush}
         saveLabel={saveLabel ?? (saveBehavior === 'export' ? 'Save and close' : 'Save')}
@@ -361,6 +381,7 @@ export function ImageEditor(props: ImageEditorProps) {
             doc={state.doc}
             selectedLayerId={state.selectedLayerId}
             dispatch={dispatch}
+            onAddLayer={handleAddLayer}
           />
           <PropertiesPanel
             doc={state.doc}

package/src/InlinePreviewGutter.tsx

@@ -8,7 +8,7 @@
  *
  * The gutter consumes the parsed `Doc` from `useEditorContext()` and reuses
  * the same template-resolution path as `LinearDocView` (heading text →
- * template defaults → `getLayers()` → `BlockRenderer`).
+ * template defaults → `materializeBlockLayers()` → `BlockRenderer`).
  *
  * Auto-hides via container queries when the surrounding container is too
  * narrow (see `.squisq-editor-with-gutter` rules in `styles/editor.css`).
@@ -31,10 +31,10 @@ import type { Block, DocBlock, ViewportConfig } from '@bendyline/squisq/schemas'
 import { VIEWPORT_PRESETS } from '@bendyline/squisq/schemas';
 import {
   flattenBlocks,
-  getLayers,
-  hasTemplate,
+  materializeBlockLayers,
   DEFAULT_THEME,
-  type RenderContext,
+  deriveTemplateInputs,
+  type MaterializeBlockLayersOptions,
 } from '@bendyline/squisq/doc';
 import { extractPlainText, getChildren } from '@bendyline/squisq/markdown';
 import { usePreviewSettingsOptional } from './PreviewControls';
@@ -56,7 +56,7 @@ import { useHeadingLayout } from './useHeadingLayout';
 function isAnnotated(block: Block): boolean {
   const annotation = block.sourceHeading?.templateAnnotation;
   if (!annotation) return false;
-  return !!annotation.template && hasTemplate(annotation.template);
+  return !!annotation.template;
 }
 
 function extractBodyPlainText(contents?: MarkdownBlockNode[]): string {
@@ -188,7 +188,12 @@ function getTemplateDefaults(
 ): Record<string, unknown> {
   switch (templateName) {
     case 'statHighlight':
-      return { stat: headingText, description: bodyText || headingText };
+      return (
+        deriveTemplateInputs(templateName, headingText, contents, { placeholders: true }) ?? {
+          stat: headingText,
+          description: bodyText || headingText,
+        }
+      );
     case 'quote':
     case 'fullBleedQuote':
     case 'pullQuote':
@@ -334,6 +339,8 @@ export function InlinePreviewGutter({
         duration: 1,
         audioSegment: 0,
         title: headingText,
+        contents: block.contents,
+        children: block.children,
         ...getTemplateDefaults(
           template,
           headingText,
@@ -345,15 +352,16 @@ export function InlinePreviewGutter({
         ...block.templateOverrides,
       };
 
-      const ctx: RenderContext = {
+      const ctx: MaterializeBlockLayersOptions = {
         blockIndex: index,
         totalBlocks,
         theme: activeTheme,
         viewport,
+        customTemplates: doc.customTemplates,
       };
 
       try {
-        const layers = getLayers(templateBlock as unknown as DocBlock, ctx);
+        const { layers } = materializeBlockLayers(templateBlock as unknown as DocBlock, ctx);
         const visualBlock = {
           ...block,
           layers,

package/src/MediaBin.tsx

@@ -9,6 +9,7 @@
 import { useState, useEffect, useRef, useCallback } from 'react';
 import type { MediaProvider, MediaEntry } from '@bendyline/squisq/schemas';
 import { SQUISQ_MEDIA_MIME } from './mediaDragMime';
+import { filterVisibleMediaEntries } from './mediaEntries';
 
 // ============================================
 // Types
@@ -21,9 +22,11 @@ export interface MediaBinProps {
   isDark: boolean;
   /** Incremented externally to signal a re-scan of the media list */
   refreshKey?: number;
+  /** Relative media paths currently referenced by the document. */
+  usedMediaPaths?: ReadonlySet<string>;
   /**
-   * Fired after a successful upload via the MediaBin's own "+ Upload"
-   * button. `relativePath` is what the provider returned (the same
+   * Fired after a successful upload via the MediaBin's "+ Upload"
+   * button or image drop target. `relativePath` is what the provider returned (the same
    * value embedded in markdown refs, e.g. `attachments/xyz.png`);
    * `name` is the uploader-chosen filename before storage renamed
    * it. Consumers typically use this to insert a markdown image ref
@@ -32,6 +35,13 @@ export interface MediaBinProps {
    * else, leaving the message body empty when the user hit Send.
    */
   onMediaUploaded?: (relativePath: string, name: string, mimeType: string) => void | Promise<void>;
+  /**
+   * Fired after a file is removed through the MediaBin context menu.
+   * Hosts use this to remove matching markdown refs from the document.
+   */
+  onMediaRemoved?: (relativePath: string, entry: MediaEntry) => void | Promise<void>;
+  /** Fired whenever the panel scans media and knows the current entry count. */
+  onCountChange?: (count: number) => void;
 }
 
 // ============================================
@@ -57,21 +67,111 @@ function isImageMime(mimeType: string): boolean {
   return mimeType.startsWith('image/');
 }
 
+const IMAGE_EXTENSIONS = new Set(['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg', 'avif', 'ico']);
+
+function isImageFile(file: Pick<File, 'name' | 'type'>): boolean {
+  if (isImageMime(file.type)) return true;
+  const dot = file.name.lastIndexOf('.');
+  return dot >= 0 && IMAGE_EXTENSIONS.has(file.name.slice(dot + 1).toLowerCase());
+}
+
+/** During drag-over browsers expose item MIME types but often not filenames. */
+function dataTransferMayContainImage(dataTransfer: DataTransfer): boolean {
+  if (dataTransfer.items.length > 0) {
+    return Array.from(dataTransfer.items).some(
+      (item) => item.kind === 'file' && (item.type === '' || isImageMime(item.type)),
+    );
+  }
+  return Array.from(dataTransfer.files).some(isImageFile);
+}
+
+function sortMediaEntries(entries: MediaEntry[]): MediaEntry[] {
+  return entries.sort((a, b) => {
+    const aImg = isImageMime(a.mimeType) ? 0 : 1;
+    const bImg = isImageMime(b.mimeType) ? 0 : 1;
+    if (aImg !== bImg) return aImg - bImg;
+    return a.name.localeCompare(b.name);
+  });
+}
+
 // ============================================
 // Component
 // ============================================
 
-export function MediaBin({ mediaProvider, isDark, refreshKey, onMediaUploaded }: MediaBinProps) {
+export function MediaBin({
+  mediaProvider,
+  isDark,
+  refreshKey,
+  usedMediaPaths,
+  onMediaUploaded,
+  onMediaRemoved,
+  onCountChange,
+}: MediaBinProps) {
   const [entries, setEntries] = useState<MediaEntry[]>([]);
   const [thumbUrls, setThumbUrls] = useState<Record<string, string>>({});
   const [loading, setLoading] = useState(false);
+  const [isDropActive, setIsDropActive] = useState(false);
+  const [contextMenu, setContextMenu] = useState<{
+    entry: MediaEntry;
+    x: number;
+    y: number;
+  } | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const contextMenuRef = useRef<HTMLDivElement>(null);
+  const dropDepthRef = useRef(0);
+
+  const updateEntries = useCallback(
+    async (provider: MediaProvider) => {
+      const list = sortMediaEntries(filterVisibleMediaEntries(await provider.listMedia()));
+      setEntries(list);
+      onCountChange?.(list.length);
+
+      const urls: Record<string, string> = {};
+      for (const entry of list) {
+        if (isImageMime(entry.mimeType)) {
+          try {
+            urls[entry.name] = await provider.resolveUrl(entry.name);
+          } catch {
+            // skip failed resolve
+          }
+        }
+      }
+      setThumbUrls(urls);
+    },
+    [onCountChange],
+  );
+
+  useEffect(() => {
+    if (!contextMenu) return;
+
+    const handlePointerDown = (event: MouseEvent) => {
+      if (contextMenuRef.current?.contains(event.target as Node)) return;
+      setContextMenu(null);
+    };
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') setContextMenu(null);
+    };
+    const close = () => setContextMenu(null);
+
+    document.addEventListener('mousedown', handlePointerDown);
+    document.addEventListener('keydown', handleKeyDown);
+    window.addEventListener('scroll', close, true);
+    window.addEventListener('resize', close);
+
+    return () => {
+      document.removeEventListener('mousedown', handlePointerDown);
+      document.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener('scroll', close, true);
+      window.removeEventListener('resize', close);
+    };
+  }, [contextMenu]);
 
   // Scan media entries whenever the provider changes or refreshKey bumps
   useEffect(() => {
     if (!mediaProvider) {
       setEntries([]);
       setThumbUrls({});
+      onCountChange?.(0);
       return;
     }
 
@@ -80,16 +180,12 @@ export function MediaBin({ mediaProvider, isDark, refreshKey, onMediaUploaded }:
     async function scan() {
       setLoading(true);
       try {
-        const list = await mediaProvider!.listMedia();
+        const list = filterVisibleMediaEntries(await mediaProvider!.listMedia());
         if (cancelled) return;
 
-        list.sort((a, b) => {
-          const aImg = isImageMime(a.mimeType) ? 0 : 1;
-          const bImg = isImageMime(b.mimeType) ? 0 : 1;
-          if (aImg !== bImg) return aImg - bImg;
-          return a.name.localeCompare(b.name);
-        });
+        sortMediaEntries(list);
         setEntries(list);
+        onCountChange?.(list.length);
 
         const urls: Record<string, string> = {};
         for (const entry of list) {
@@ -111,7 +207,7 @@ export function MediaBin({ mediaProvider, isDark, refreshKey, onMediaUploaded }:
     return () => {
       cancelled = true;
     };
-  }, [mediaProvider, refreshKey]);
+  }, [mediaProvider, refreshKey, onCountChange]);
 
   // ---- Upload ----
 
@@ -119,16 +215,12 @@ export function MediaBin({ mediaProvider, isDark, refreshKey, onMediaUploaded }:
     fileInputRef.current?.click();
   }, []);
 
-  const handleFileChange = useCallback(
-    async (e: React.ChangeEvent<HTMLInputElement>) => {
-      const files = e.target.files;
-      if (!files || !mediaProvider) return;
-
+  const uploadFiles = useCallback(
+    async (files: readonly File[]) => {
+      if (files.length === 0 || !mediaProvider) return;
       setLoading(true);
       try {
-        for (let i = 0; i < files.length; i++) {
-          const file = files[i];
-          if (!file) continue;
+        for (const file of files) {
           const buffer = await file.arrayBuffer();
           const mimeType = file.type || 'application/octet-stream';
           const relativePath = await mediaProvider.addMedia(file.name, buffer, mimeType);
@@ -141,36 +233,138 @@ export function MediaBin({ mediaProvider, isDark, refreshKey, onMediaUploaded }:
           }
         }
         // Re-scan
-        const list = await mediaProvider.listMedia();
-        list.sort((a, b) => {
-          const aImg = isImageMime(a.mimeType) ? 0 : 1;
-          const bImg = isImageMime(b.mimeType) ? 0 : 1;
-          if (aImg !== bImg) return aImg - bImg;
-          return a.name.localeCompare(b.name);
-        });
-        setEntries(list);
+        await updateEntries(mediaProvider);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [mediaProvider, onMediaUploaded, updateEntries],
+  );
 
-        const urls: Record<string, string> = {};
-        for (const entry of list) {
-          if (isImageMime(entry.mimeType)) {
-            try {
-              urls[entry.name] = await mediaProvider.resolveUrl(entry.name);
-            } catch {
-              // skip
-            }
+  const handleFileChange = useCallback(
+    async (e: React.ChangeEvent<HTMLInputElement>) => {
+      try {
+        await uploadFiles(Array.from(e.target.files ?? []));
+      } finally {
+        if (fileInputRef.current) fileInputRef.current.value = '';
+      }
+    },
+    [uploadFiles],
+  );
+
+  const handleDragEnter = useCallback(
+    (event: React.DragEvent<HTMLDivElement>) => {
+      if (!mediaProvider || loading || !dataTransferMayContainImage(event.dataTransfer)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      dropDepthRef.current += 1;
+      setIsDropActive(true);
+    },
+    [loading, mediaProvider],
+  );
+
+  const handleDragOver = useCallback(
+    (event: React.DragEvent<HTMLDivElement>) => {
+      if (!mediaProvider || loading || !dataTransferMayContainImage(event.dataTransfer)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      event.dataTransfer.dropEffect = 'copy';
+    },
+    [loading, mediaProvider],
+  );
+
+  const handleDragLeave = useCallback(
+    (event: React.DragEvent<HTMLDivElement>) => {
+      if (!isDropActive) return;
+      event.preventDefault();
+      event.stopPropagation();
+      dropDepthRef.current = Math.max(0, dropDepthRef.current - 1);
+      if (dropDepthRef.current === 0) setIsDropActive(false);
+    },
+    [isDropActive],
+  );
+
+  const handleDrop = useCallback(
+    (event: React.DragEvent<HTMLDivElement>) => {
+      const imageFiles = Array.from(event.dataTransfer.files).filter(isImageFile);
+      if (!mediaProvider || (!isDropActive && imageFiles.length === 0)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      dropDepthRef.current = 0;
+      setIsDropActive(false);
+      if (imageFiles.length > 0) void uploadFiles(imageFiles);
+    },
+    [isDropActive, mediaProvider, uploadFiles],
+  );
+
+  const handleRemoveEntry = useCallback(
+    async (entry: MediaEntry) => {
+      if (!mediaProvider) return;
+      setContextMenu(null);
+      setLoading(true);
+      try {
+        await mediaProvider.removeMedia(entry.name);
+        if (onMediaRemoved) {
+          try {
+            await onMediaRemoved(entry.name, entry);
+          } catch (err: unknown) {
+            console.warn(
+              '[squisq-editor] Failed to remove media reference from document:',
+              err instanceof Error ? err.message : err,
+            );
           }
         }
-        setThumbUrls(urls);
+        await updateEntries(mediaProvider);
       } finally {
         setLoading(false);
-        if (fileInputRef.current) fileInputRef.current.value = '';
       }
     },
-    [mediaProvider, onMediaUploaded],
+    [mediaProvider, onMediaRemoved, updateEntries],
+  );
+
+  const openContextMenu = useCallback((entry: MediaEntry, x: number, y: number) => {
+    setContextMenu({ entry, x, y });
+  }, []);
+
+  const removeLabel = contextMenu
+    ? isImageMime(contextMenu.entry.mimeType)
+      ? 'Remove image'
+      : 'Remove file'
+    : 'Remove file';
+
+  const menuLeft = contextMenu ? Math.min(contextMenu.x, Math.max(8, window.innerWidth - 168)) : 0;
+  const menuTop = contextMenu ? Math.min(contextMenu.y, Math.max(8, window.innerHeight - 48)) : 0;
+
+  const contextMenuStyle = {
+    left: menuLeft,
+    top: menuTop,
+  };
+
+  const handleItemKeyDown = useCallback(
+    (entry: MediaEntry, event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key !== 'ContextMenu' && !(event.shiftKey && event.key === 'F10')) return;
+      event.preventDefault();
+      const rect = event.currentTarget.getBoundingClientRect();
+      openContextMenu(entry, rect.left + 16, rect.top + 16);
+    },
+    [openContextMenu],
   );
 
   return (
-    <div className={`squisq-media-bin${isDark ? ' squisq-media-bin--dark' : ''}`}>
+    <div
+      className={[
+        'squisq-media-bin',
+        isDark ? 'squisq-media-bin--dark' : '',
+        isDropActive ? 'squisq-media-bin--drop-active' : '',
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      onDragEnter={handleDragEnter}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+      aria-busy={loading}
+    >
       {/* Header */}
       <div className="squisq-media-bin-header">
         <span className="squisq-media-bin-title">
@@ -208,6 +402,7 @@ export function MediaBin({ mediaProvider, isDark, refreshKey, onMediaUploaded }:
           const basename = entry.name.includes('/') ? entry.name.split('/').pop()! : entry.name;
           const isImage = isImageMime(entry.mimeType);
           const altText = basename.replace(/\.[^.]+$/, '').replace(/[-_]/g, ' ');
+          const isUnused = !!usedMediaPaths && !usedMediaPaths.has(entry.name);
 
           const handleDragStart = (e: React.DragEvent<HTMLDivElement>) => {
             if (!isImage) return;
@@ -227,7 +422,13 @@ export function MediaBin({ mediaProvider, isDark, refreshKey, onMediaUploaded }:
               className="squisq-media-bin-item"
               title={`${entry.name}\n${entry.mimeType}\n${formatSize(entry.size)}`}
               draggable={isImage}
+              tabIndex={0}
+              onContextMenu={(e) => {
+                e.preventDefault();
+                openContextMenu(entry, e.clientX, e.clientY);
+              }}
               onDragStart={handleDragStart}
+              onKeyDown={(e) => handleItemKeyDown(entry, e)}
             >
               {/* Thumbnail or icon */}
               {thumb ? (
@@ -244,13 +445,48 @@ export function MediaBin({ mediaProvider, isDark, refreshKey, onMediaUploaded }:
               {/* Name + size */}
               <div className="squisq-media-bin-meta">
                 <div className="squisq-media-bin-name">{basename}</div>
-                <div className="squisq-media-bin-size">{formatSize(entry.size)}</div>
+                <div className="squisq-media-bin-detail-row">
+                  <span className="squisq-media-bin-size">{formatSize(entry.size)}</span>
+                  {isUnused && (
+                    <span className="squisq-media-bin-unused-badge" title="Not used in document">
+                      Unused
+                    </span>
+                  )}
+                </div>
               </div>
             </div>
           );
         })}
       </div>
 
+      {isDropActive && (
+        <div className="squisq-media-bin-drop-target" aria-hidden="true">
+          <span className="squisq-media-bin-drop-target-icon">+</span>
+          <strong>Drop images here</strong>
+          <span>Add to Files</span>
+        </div>
+      )}
+
+      {contextMenu && (
+        <div
+          ref={contextMenuRef}
+          className="squisq-media-bin-context-menu"
+          role="menu"
+          aria-label={`${contextMenu.entry.name} actions`}
+          style={contextMenuStyle}
+        >
+          <button
+            type="button"
+            role="menuitem"
+            className="squisq-media-bin-context-menu-item squisq-media-bin-context-menu-item--danger"
+            onClick={() => handleRemoveEntry(contextMenu.entry)}
+            disabled={!mediaProvider || loading}
+          >
+            {removeLabel}
+          </button>
+        </div>
+      )}
+
       {/* Hidden file input */}
       <input
         ref={fileInputRef}