@bendyline/squisq-editor-react 1.6.1 → 1.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bendyline/squisq-editor-react",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "description": "React editor shell with raw/WYSIWYG/preview modes for Squisq documents",
   "license": "MIT",
   "author": "Bendyline",
@@ -52,9 +52,9 @@
     }
   },
   "dependencies": {
-    "@bendyline/squisq": "1.5.1",
-    "@bendyline/squisq-formats": "1.4.1",
-    "@bendyline/squisq-react": "1.4.1",
+    "@bendyline/squisq": "1.5.2",
+    "@bendyline/squisq-formats": "1.4.2",
+    "@bendyline/squisq-react": "1.4.2",
     "@fortawesome/fontawesome-free": "7.2.0",
     "@monaco-editor/react": "4.7.0",
     "@tiptap/extension-image": "2.27.2",

package/src/BlockPropertiesPopover.tsx

@@ -3,12 +3,11 @@
  *
  * The on-canvas "block properties" palette — the sibling of the block-template
  * badge. Anchored at the `.squisq-props-badge` chip on a heading, it edits the
- * block's playback/animation metadata, all stored in the heading's Pandoc `{…}`
- * attribute block (`dataBlockAttrs`):
+ * block's playback/animation metadata:
  *
- *   - Transition  (type / direction / duration) — reuses `TransitionPicker`
- *   - Duration    (`duration`)  — how long the block is shown
- *   - Start time  (`startTime`) — timeline position
+ *   - Transition  (type / direction / duration) — stored in `{[…]}` params
+ *   - Duration    (`duration`)  — stored in Pandoc `dataBlockAttrs`
+ *   - Start time  (`startTime`) — stored in Pandoc `dataBlockAttrs`
  *
  * The popover holds the `dataBlockAttrs` inner string as working state and
  * re-derives each control from it, so successive edits compose. Every change
@@ -23,6 +22,7 @@ import { TransitionPicker } from './TransitionPicker';
 import {
   readBlockAttrsTransition,
   setBlockAttrsTransition,
+  setHeadingAttrsTransition,
   type TransitionFields,
 } from './headingTransition';
 import { readBlockAttrsValue, setBlockAttrsValue } from './blockProperties';
@@ -36,6 +36,11 @@ export interface BlockPropertiesPopoverProps {
   templateParams: string | null;
   /** Apply a new `dataBlockAttrs` inner to the heading (null clears it). */
   onChange: (nextInner: string | null) => void;
+  /** Apply a paired `dataBlockAttrs` / `dataTemplateParams` transition rewrite. */
+  onAnnotationChange?: (next: {
+    blockAttrsInner: string | null;
+    templateParams: string | null;
+  }) => void;
   onClose: () => void;
 }
 
@@ -48,10 +53,12 @@ export function BlockPropertiesPopover({
   blockAttrs,
   templateParams,
   onChange,
+  onAnnotationChange,
   onClose,
 }: BlockPropertiesPopoverProps) {
   // Working copy of the Pandoc inner; successive edits compose off it.
   const [inner, setInner] = useState<string | null>(blockAttrs);
+  const [templateInner, setTemplateInner] = useState<string | null>(templateParams);
   const [style, setStyle] = useState<React.CSSProperties>(() => computeStyle(anchorRect));
 
   useEffect(() => {
@@ -84,11 +91,20 @@ export function BlockPropertiesPopover({
     onChange(next);
   };
 
-  const transition = readBlockAttrsTransition(inner, templateParams);
+  const transition = readBlockAttrsTransition(inner, templateInner);
   const duration = readBlockAttrsValue(inner, 'duration');
   const startTime = readBlockAttrsValue(inner, 'startTime');
 
-  const onTransition = (next: TransitionFields) => apply(setBlockAttrsTransition(inner, next));
+  const onTransition = (next: TransitionFields) => {
+    if (!onAnnotationChange) {
+      apply(setBlockAttrsTransition(inner, next));
+      return;
+    }
+    const updated = setHeadingAttrsTransition(inner, templateInner, next);
+    setInner(updated.blockAttrsInner);
+    setTemplateInner(updated.templateParams);
+    onAnnotationChange(updated);
+  };
   const onDuration = (v: string) => apply(setBlockAttrsValue(inner, 'duration', v));
   const onStartTime = (v: string) => apply(setBlockAttrsValue(inner, 'startTime', v));
 

package/src/EditorShell.tsx

@@ -34,8 +34,6 @@ import { ImageEditor } from './ImageEditor';
 import {
   PreviewSettingsProvider,
   PreviewToolbarControls,
-  PreviewModeSwitch,
-  PreviewFormatSwitch,
   ThemeDesignerDock,
 } from './PreviewControls';
 import { CustomThemeProvider, useDocCustomThemes } from './customThemes';
@@ -49,6 +47,10 @@ import {
   processTextFile,
   processTextFiles,
 } from './utils/dropUtils';
+import {
+  collectMediaReferencesFromMarkdown,
+  removeMediaReferencesFromMarkdown,
+} from './mediaReferences';
 import type { MediaProvider, Theme } from '@bendyline/squisq/schemas';
 import { DARK_SURFACE, LIGHT_SURFACE } from '@bendyline/squisq/schemas';
 import type { ContentContainer } from '@bendyline/squisq/storage';
@@ -614,6 +616,7 @@ function EditorShellInner({
     imageEditTarget,
     closeImageEdit,
     bumpMediaRevision,
+    mediaRevision,
   } = useEditorContext();
   // Dual-catalog custom themes (doc + browser library), mirroring how
   // CustomTemplateProvider is fed. Wraps the preview subtree so the theme
@@ -632,6 +635,12 @@ function EditorShellInner({
   const isTimelineMode = isMarkdownMode && layoutMode === 'timeline' && !isPreview;
   const [showFiles, setShowFiles] = useState(false);
   const [mediaRefreshKey, setMediaRefreshKey] = useState(0);
+  const [mediaCount, setMediaCount] = useState(0);
+  const mediaListRefreshKey = mediaRefreshKey + mediaRevision;
+  const usedMediaPaths = useMemo(
+    () => collectMediaReferencesFromMarkdown(markdownSource),
+    [markdownSource],
+  );
   // Persistent fallback container for image-edit sidecars when the host
   // didn't supply one. Lifted to shell scope so opening the same image
   // multiple times sees the same `.imageEdits/<sanitized>/.versions/...`
@@ -644,6 +653,33 @@ function EditorShellInner({
   const imageEditFallbackContainer = imageEditFallbackContainerRef.current;
   const isDark = colorScheme === 'dark';
 
+  useEffect(() => {
+    if (!mediaProvider) {
+      setMediaCount(0);
+      return;
+    }
+
+    let cancelled = false;
+    mediaProvider.listMedia().then(
+      (entries) => {
+        if (!cancelled) setMediaCount(entries.length);
+      },
+      (err: unknown) => {
+        if (!cancelled) {
+          setMediaCount(0);
+          console.warn(
+            '[squisq-editor] Failed to read media list:',
+            err instanceof Error ? err.message : err,
+          );
+        }
+      },
+    );
+
+    return () => {
+      cancelled = true;
+    };
+  }, [mediaProvider, mediaListRefreshKey]);
+
   const handleToggleFiles = useCallback(() => {
     setShowFiles((prev) => !prev);
   }, []);
@@ -701,6 +737,24 @@ function EditorShellInner({
     [activeView, tiptapEditor, monacoEditor, insertAtCursor, markdownSource, setMarkdownSource],
   );
 
+  const handleMediaUploaded = useCallback(
+    (relativePath: string, name: string, mimeType: string) => {
+      insertMediaRef(relativePath, name, mimeType);
+      setMediaRefreshKey((k) => k + 1);
+    },
+    [insertMediaRef],
+  );
+
+  const handleMediaRemoved = useCallback(
+    (relativePath: string) => {
+      const nextSource = removeMediaReferencesFromMarkdown(markdownSource, relativePath);
+      if (nextSource !== markdownSource) replaceAll(nextSource);
+      setMediaRefreshKey((k) => k + 1);
+      bumpMediaRevision();
+    },
+    [bumpMediaRevision, markdownSource, replaceAll],
+  );
+
   const handleFileDrop = useCallback(
     async (files: File[], target: DropTarget) => {
       try {
@@ -827,24 +881,11 @@ function EditorShellInner({
             <div className="squisq-editor-header">
               <Toolbar
                 showFiles={showFiles}
+                fileCount={mediaCount}
                 onToggleFiles={!isCodeMode && filesToggleEnabled ? handleToggleFiles : undefined}
                 slotLeft={toolbarSlotLeft}
-                slotAfterTabs={
-                  !isCodeMode &&
-                  isPreview && (
-                    <div className="squisq-preview-left-controls">
-                      <PreviewModeSwitch />
-                      <span className="squisq-preview-seg-divider" aria-hidden="true" />
-                      <PreviewFormatSwitch />
-                    </div>
-                  )
-                }
-                slotAfterActions={
-                  <>
-                    {toolbarSlotAfterActions}
-                    {!isCodeMode && isPreview && <PreviewToolbarControls />}
-                  </>
-                }
+                slotAfterTabs={!isCodeMode && isPreview && <PreviewToolbarControls />}
+                slotAfterActions={toolbarSlotAfterActions}
                 slotRight={toolbarSlotRight}
                 showPlayTab={showPlayTab}
               />
@@ -880,6 +921,7 @@ function EditorShellInner({
                     allowVersioning={allowVersioning}
                     versioningAutoSaveIdleMs={versioningAutoSaveIdleMs}
                     onExport={onImageExport}
+                    surface={colorScheme === 'dark' ? DARK_SURFACE : LIGHT_SURFACE}
                   />
                 ) : (
                   <ImageViewer src={imageSrc} alt={imageAlt} theme={colorScheme} />
@@ -993,8 +1035,11 @@ function EditorShellInner({
               <MediaBin
                 mediaProvider={mediaProvider}
                 isDark={isDark}
-                refreshKey={mediaRefreshKey}
-                onMediaUploaded={insertMediaRef}
+                refreshKey={mediaListRefreshKey}
+                usedMediaPaths={usedMediaPaths}
+                onMediaUploaded={handleMediaUploaded}
+                onMediaRemoved={handleMediaRemoved}
+                onCountChange={setMediaCount}
               />
             )}
 

package/src/MediaBin.tsx

@@ -21,6 +21,8 @@ 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
@@ -32,6 +34,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 +66,91 @@ function isImageMime(mimeType: string): boolean {
   return mimeType.startsWith('image/');
 }
 
+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 [contextMenu, setContextMenu] = useState<{
+    entry: MediaEntry;
+    x: number;
+    y: number;
+  } | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const contextMenuRef = useRef<HTMLDivElement>(null);
+
+  const updateEntries = useCallback(
+    async (provider: MediaProvider) => {
+      const list = sortMediaEntries(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;
     }
 
@@ -83,13 +162,9 @@ export function MediaBin({ mediaProvider, isDark, refreshKey, onMediaUploaded }:
         const list = 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 +186,7 @@ export function MediaBin({ mediaProvider, isDark, refreshKey, onMediaUploaded }:
     return () => {
       cancelled = true;
     };
-  }, [mediaProvider, refreshKey]);
+  }, [mediaProvider, refreshKey, onCountChange]);
 
   // ---- Upload ----
 
@@ -141,32 +216,66 @@ 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);
+        if (fileInputRef.current) fileInputRef.current.value = '';
+      }
+    },
+    [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 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 (
@@ -208,6 +317,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 +337,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 +360,40 @@ 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>
 
+      {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}