@bendyline/squisq-editor-react 1.6.0 → 1.6.2

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}

package/src/OutlinePanel.tsx

@@ -17,14 +17,30 @@ import { templateLabel } from './TemplatePicker';
 import { useHeadingLayout } from './useHeadingLayout';
 import { usePreviewSettingsOptional } from './PreviewControls';
 
+/**
+ * Responsive default width for the outline pane, used when no fixed `width`
+ * (or `--squisq-outline-width`) is supplied: never narrower than 260px, grows
+ * with the viewport so it stretches out to fill horizontal space when there's
+ * room, and caps at 460px so it never dominates the editor. A viewport unit
+ * (rather than
+ * a container unit) keeps the pane and the toolbar's view-tabs — which read the
+ * same value — resolving to an identical width, so their right edges stay
+ * aligned.
+ */
+export const OUTLINE_RESPONSIVE_WIDTH = 'clamp(260px, 30vw, 460px)';
+
 export interface OutlinePanelProps {
-  /** Width of the pane in pixels (default: 240). */
+  /**
+   * Fixed width of the pane in pixels. When omitted, the pane sizes
+   * responsively from `--squisq-outline-width` (falling back to
+   * {@link OUTLINE_RESPONSIVE_WIDTH}) so it stretches on wider screens.
+   */
   width?: number;
   /** Optional CSS class for the outer container. */
   className?: string;
 }
 
-export function OutlinePanel({ width = 240, className }: OutlinePanelProps) {
+export function OutlinePanel({ width, className }: OutlinePanelProps) {
   const {
     doc,
     markdownSource,
@@ -88,9 +104,15 @@ export function OutlinePanel({ width = 240, className }: OutlinePanelProps) {
   const accentColor = previewSettings?.activeTheme?.colors?.primary;
 
   const isEmpty = !doc || doc.blocks.length === 0 || !hasAnyHeading(doc.blocks);
+  // Fixed px when a width is supplied; otherwise size from the shared
+  // `--squisq-outline-width` variable (the shell sets it, and the toolbar's
+  // view-tabs read the same value so their right edges stay aligned). The
+  // clamp fallback lets a standalone OutlinePanel stretch on wide screens too.
+  const basis =
+    width != null ? `${width}px` : `var(--squisq-outline-width, ${OUTLINE_RESPONSIVE_WIDTH})`;
   const paneStyle: CSSProperties = {
-    width: `${width}px`,
-    flex: `0 0 ${width}px`,
+    width: basis,
+    flex: `0 0 ${basis}`,
     overflow: 'auto',
     ...(accentColor
       ? ({ ['--squisq-outline-accent' as string]: accentColor } as CSSProperties)