@bendyline/squisq-editor-react 1.2.2 → 1.4.0

package/src/EditorShell.tsx

@@ -7,7 +7,13 @@
  */
 
 import { useEffect, useState, useCallback } from 'react';
-import { EditorProvider, useEditorContext, type EditorView } from './EditorContext';
+import {
+  EditorProvider,
+  useEditorContext,
+  type EditorView,
+  type ImageDisplayMode,
+  type MentionProvider,
+} from './EditorContext';
 import { Toolbar } from './Toolbar';
 import { StatusBar } from './StatusBar';
 import { RawEditor } from './RawEditor';
@@ -16,6 +22,7 @@ import { PreviewPanel } from './PreviewPanel';
 import { PreviewSettingsProvider, PreviewToolbarControls } from './PreviewControls';
 import { MediaBin } from './MediaBin';
 import { DropZoneOverlay } from './DropZoneOverlay';
+import { TooltipLayer } from './Tooltip';
 import { useFileDrop, type DropTarget } from './hooks/useFileDrop';
 import {
   partitionFiles,
@@ -25,7 +32,7 @@ import {
 } from './utils/dropUtils';
 import type { MediaProvider } from '@bendyline/squisq/schemas';
 import type { ContentContainer } from '@bendyline/squisq/storage';
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 
 export type { EditorTheme } from './EditorContext';
 
@@ -47,6 +54,17 @@ export interface EditorShellProps {
   className?: string;
   /** CSS height for the shell container (default: '100vh') */
   height?: string;
+  /**
+   * Minimum CSS height for the shell. When either `minHeight` or
+   * `maxHeight` is set, the shell switches to **auto-grow mode**:
+   * `height` is ignored, the root becomes `height: auto` between the
+   * bounds, and the content area scrolls internally when content
+   * exceeds `maxHeight`. Useful for chat composers that should grow
+   * with content up to some cap.
+   */
+  minHeight?: string;
+  /** See `minHeight`. Upper bound of the auto-grow range. */
+  maxHeight?: string;
   /** Optional MediaProvider for the Files panel. When set (even to null), a Files toggle appears in the toolbar. */
   mediaProvider?: MediaProvider | null;
   /** Optional ContentContainer for audio mapping (MP3 discovery + timing.json reading). */
@@ -59,6 +77,105 @@ export interface EditorShellProps {
   toolbarSlotAfterActions?: ReactNode;
   /** Content rendered at the rightmost end of the toolbar, after all other elements. */
   toolbarSlotRight?: ReactNode;
+  /**
+   * Whether to show the "Play" (preview) tab in the toolbar. When false, the
+   * tab and its preview panel are hidden, and ⌘3 becomes a no-op. Use this
+   * when embedding the editor somewhere the slideshow preview doesn't make
+   * sense (e.g. editing free-form prompt documents). Defaults to true.
+   */
+  showPlayTab?: boolean;
+  /**
+   * Optional "submit on Enter" callback. When provided, a plain Enter
+   * keypress fires this callback instead of inserting a newline, and
+   * Cmd/Ctrl+Enter inserts a newline instead. Matches chat-composer UX
+   * (Slack, Discord). When omitted, the editor behaves normally.
+   */
+  submitOnEnter?: () => void;
+  /**
+   * Let the WYSIWYG editing surface fill its container instead of rendering
+   * as a centered 800px "page" column. Useful when embedding in chat
+   * composers, side panels, or any layout where the page metaphor doesn't
+   * fit. Defaults to false (page mode).
+   */
+  fullWidth?: boolean;
+  /**
+   * Font-family stack applied to the editor **chrome** — toolbar buttons,
+   * tabs, status bar, and control surfaces. The actual editing areas
+   * (Tiptap / Monaco) keep their own fonts so document editing isn't
+   * affected. Use this when the editor is embedded in a larger product
+   * that has its own UX type system and you want the controls to blend in.
+   *
+   * @example
+   * ```tsx
+   * <EditorShell uxFont="'Hanken Grotesk', system-ui, sans-serif" ... />
+   * ```
+   */
+  uxFont?: string;
+  /**
+   * Drop the editor's generous page-style padding in favor of a tight
+   * layout that hugs its container. The default WYSIWYG surface uses
+   * 16×24px padding suitable for editing long-form documents; chat
+   * composers want much less. Applies to the editing area only — the
+   * toolbar, tabs, and status bar keep their normal sizing.
+   */
+  thinMargins?: boolean;
+  /**
+   * Render the bottom status bar (word / character / line / block counts
+   * and parse-state indicator). Defaults to `true`. Set to `false` in
+   * embedded surfaces — chat composers and other short-form inputs —
+   * where the stats are noise.
+   */
+  showStatusBar?: boolean;
+  /**
+   * How images should be displayed in the WYSIWYG view. `'inline'`
+   * (default) flows them at natural size up to the container width;
+   * `'thumbnail'` constrains each image to a 100×100 box with
+   * aspect-preserving containment — useful for chat composers and other
+   * dense surfaces where a full-resolution paste would dominate the
+   * layout. Storage bytes are unchanged either way.
+   */
+  imageDisplayMode?: ImageDisplayMode;
+  /**
+   * File name (e.g. `foo.ts`) or bare extension that the content
+   * represents. When set to a non-markdown/text extension, the shell
+   * enters **code mode**: Monaco picks the right language based on the
+   * extension, the WYSIWYG and Preview tabs disappear, and the toolbar
+   * drops its markdown-specific formatting buttons. Markdown-ish
+   * extensions (`.md`, `.markdown`, `.mdown`, `.txt`) keep the full
+   * experience. Omit to get today's markdown behavior unchanged.
+   */
+  fileName?: string;
+  /**
+   * Explicit Monaco language ID override (e.g. `'typescript'`,
+   * `'python'`, `'json'`). Wins over the language derived from
+   * `fileName`. Anything other than `'markdown'` or `'plaintext'`
+   * switches the shell into code mode.
+   */
+  language?: string;
+  /**
+   * Optional async provider for `@`-mention suggestions. When supplied,
+   * typing `@` inside the editor opens a popover of candidates; selecting
+   * one inserts a `@[Label](scheme:id)` mention token. Used by chat
+   * composers and any other surface that wants to address named entities
+   * inline. Omit to disable mentions entirely.
+   */
+  mentionProvider?: MentionProvider | null;
+  /**
+   * Placeholder text shown in the WYSIWYG editor while the document is
+   * empty. When omitted, the editor rotates through its own generic
+   * "start typing…" prompts; pass a value here to override with copy
+   * that fits the embedding surface (e.g. a chat composer knows who
+   * the message is going to and can say so).
+   */
+  placeholder?: string;
+  /**
+   * When true, both editing surfaces become non-editable: Monaco runs in
+   * `readOnly` mode and Tiptap is set to `editable: false`. The toolbar
+   * still renders — hide it from the host side if you want a pure preview.
+   * Useful for reference panels that show file content without inviting
+   * accidental edits.
+   */
+  readOnly?: boolean;
 }
 
 /**
@@ -74,35 +191,68 @@ export function EditorShell({
   theme = 'light',
   className,
   height = '100vh',
+  minHeight,
+  maxHeight,
   mediaProvider,
   container,
   showFilesToggle,
   toolbarSlotLeft,
   toolbarSlotAfterActions,
   toolbarSlotRight,
+  showPlayTab = true,
+  submitOnEnter,
+  fullWidth = false,
+  uxFont,
+  thinMargins = false,
+  showStatusBar = true,
+  imageDisplayMode = 'inline',
+  fileName,
+  language,
+  mentionProvider,
+  placeholder,
+  readOnly = false,
 }: EditorShellProps) {
   // Show the toggle when explicitly opted in, or when mediaProvider prop was passed at all
   const filesToggleEnabled = showFilesToggle ?? mediaProvider !== undefined;
 
+  // If the host hides the Play tab but asked for it as the initial view,
+  // fall back to wysiwyg so we don't boot into a tab the user can't leave.
+  const effectiveInitialView: EditorView =
+    !showPlayTab && initialView === 'preview' ? 'wysiwyg' : initialView;
+
   return (
     <EditorProvider
       initialMarkdown={initialMarkdown}
-      initialView={initialView}
+      initialView={effectiveInitialView}
       articleId={articleId}
       theme={theme}
       mediaProvider={mediaProvider}
+      imageDisplayMode={imageDisplayMode}
+      mentionProvider={mentionProvider}
+      fileName={fileName}
+      language={language}
     >
       <EditorShellInner
         basePath={basePath}
         onChange={onChange}
         className={className}
         height={height}
+        minHeight={minHeight}
+        maxHeight={maxHeight}
+        placeholder={placeholder}
         mediaProvider={mediaProvider ?? null}
         container={container}
         filesToggleEnabled={filesToggleEnabled}
         toolbarSlotLeft={toolbarSlotLeft}
         toolbarSlotAfterActions={toolbarSlotAfterActions}
         toolbarSlotRight={toolbarSlotRight}
+        showPlayTab={showPlayTab}
+        submitOnEnter={submitOnEnter}
+        fullWidth={fullWidth}
+        uxFont={uxFont}
+        thinMargins={thinMargins}
+        showStatusBar={showStatusBar}
+        readOnly={readOnly}
       />
     </EditorProvider>
   );
@@ -113,12 +263,22 @@ interface EditorShellInnerProps {
   onChange?: (source: string) => void;
   className?: string;
   height: string;
+  minHeight?: string;
+  maxHeight?: string;
+  placeholder?: string;
   mediaProvider: MediaProvider | null;
   container?: ContentContainer | null;
   filesToggleEnabled: boolean;
   toolbarSlotLeft?: ReactNode;
   toolbarSlotAfterActions?: ReactNode;
   toolbarSlotRight?: ReactNode;
+  showPlayTab: boolean;
+  submitOnEnter?: () => void;
+  fullWidth: boolean;
+  uxFont?: string;
+  thinMargins: boolean;
+  showStatusBar: boolean;
+  readOnly: boolean;
 }
 
 function EditorShellInner({
@@ -126,15 +286,37 @@ function EditorShellInner({
   onChange,
   className,
   height,
+  minHeight,
+  maxHeight,
+  placeholder,
   mediaProvider,
   container,
   filesToggleEnabled,
   toolbarSlotLeft,
   toolbarSlotAfterActions,
   toolbarSlotRight,
+  showPlayTab,
+  submitOnEnter,
+  fullWidth,
+  uxFont,
+  thinMargins,
+  showStatusBar,
+  readOnly,
 }: EditorShellInnerProps) {
-  const { activeView, markdownSource, doc, theme, insertAtCursor, replaceAll } = useEditorContext();
+  const {
+    activeView,
+    markdownSource,
+    doc,
+    theme,
+    editorMode,
+    insertAtCursor,
+    replaceAll,
+    tiptapEditor,
+    monacoEditor,
+    setMarkdownSource,
+  } = useEditorContext();
   const isPreview = activeView === 'preview';
+  const isCodeMode = editorMode === 'code';
   const [showFiles, setShowFiles] = useState(false);
   const [mediaRefreshKey, setMediaRefreshKey] = useState(0);
   const isDark = theme === 'dark';
@@ -145,6 +327,57 @@ function EditorShellInner({
 
   // ── Drag-and-drop file handling ──
 
+  /**
+   * Insert an uploaded media file at the editor's current cursor.
+   *
+   * - In **WYSIWYG** mode, insert an actual tiptap image node via
+   *   `setImage({src, alt})` (images) or a link mark (non-images).
+   *   Going through `setImage` directly mirrors the Toolbar's image
+   *   button and avoids the round-trip through `markdownToTiptap`
+   *   that historically lost `<img>` tags to tag-strip passes.
+   * - In **raw (Monaco)** or **preview** mode, fall back to
+   *   `insertAtCursor` which emits the markdown snippet.
+   *
+   * Without this, upload-via-MediaBin and upload-via-drop both
+   * added the file to the bin and nowhere else — the composer sent
+   * an empty body and the downstream gezel reported "nothing came
+   * through."
+   */
+  const insertMediaRef = useCallback(
+    (relativePath: string, name: string, mimeType: string) => {
+      const alt = name.replace(/\.[^.]+$/, '').replace(/[-_]/g, ' ');
+      const isImage = mimeType.startsWith('image/');
+      const snippet = isImage ? `![${alt}](${relativePath})` : `[${alt}](${relativePath})`;
+
+      if (activeView === 'wysiwyg' && tiptapEditor) {
+        if (isImage) {
+          tiptapEditor.chain().focus().setImage({ src: relativePath, alt }).run();
+        } else {
+          tiptapEditor
+            .chain()
+            .focus()
+            .insertContent([
+              {
+                type: 'text',
+                marks: [{ type: 'link', attrs: { href: relativePath } }],
+                text: alt,
+              },
+            ])
+            .run();
+        }
+        return;
+      }
+      if (activeView === 'raw' && monacoEditor) {
+        insertAtCursor(snippet);
+        return;
+      }
+      // Preview mode — no interactive editor to insert into. Append
+      // to markdown source so the ref is still in the buffer.
+      setMarkdownSource(markdownSource ? `${markdownSource}\n\n${snippet}` : snippet);
+    },
+    [activeView, tiptapEditor, monacoEditor, insertAtCursor, markdownSource, setMarkdownSource],
+  );
+
   const handleFileDrop = useCallback(
     async (files: File[], target: DropTarget) => {
       try {
@@ -152,10 +385,21 @@ function EditorShellInner({
 
         // Process media files
         if (media.length > 0 && mediaProvider) {
-          await processMediaFiles(media, mediaProvider);
+          const paths = await processMediaFiles(media, mediaProvider);
           setMediaRefreshKey((k) => k + 1);
           // Auto-open the media bin so the user sees the new files
           if (!showFiles) setShowFiles(true);
+          // Insert each uploaded file as a markdown ref at the cursor so
+          // the body actually contains the attachment. Without this the
+          // bin holds the file but the serialized markdown stays empty,
+          // and anything downstream (chat send, document save) sees no
+          // reference to the upload.
+          for (let i = 0; i < media.length; i++) {
+            const file = media[i];
+            const path = paths[i];
+            if (!file || !path) continue;
+            insertMediaRef(path, file.name, file.type || 'application/octet-stream');
+          }
         }
 
         // Process text files
@@ -174,7 +418,7 @@ function EditorShellInner({
         console.error('Failed to process dropped files:', err instanceof Error ? err.message : err);
       }
     },
-    [mediaProvider, showFiles, replaceAll, insertAtCursor],
+    [mediaProvider, showFiles, replaceAll, insertAtCursor, insertMediaRef],
   );
 
   const { isDragging, dragContentType, containerProps, zoneProps } = useFileDrop({
@@ -200,6 +444,7 @@ function EditorShellInner({
             document.querySelector<HTMLButtonElement>('[data-view="raw"]')?.click();
             break;
           case '3':
+            if (!showPlayTab) return;
             e.preventDefault();
             document.querySelector<HTMLButtonElement>('[data-view="preview"]')?.click();
             break;
@@ -208,17 +453,26 @@ function EditorShellInner({
     };
     window.addEventListener('keydown', handler);
     return () => window.removeEventListener('keydown', handler);
-  }, []);
+  }, [showPlayTab]);
+
+  const autoGrow = minHeight !== undefined || maxHeight !== undefined;
 
   return (
     <div
       className={`squisq-editor-shell ${className || ''}`}
       data-theme={theme}
+      data-full-width={fullWidth ? 'true' : undefined}
+      data-thin-margins={thinMargins ? 'true' : undefined}
       style={{
         display: 'flex',
         flexDirection: 'column',
-        height,
         overflow: 'hidden',
+        ...(autoGrow ? { minHeight, maxHeight } : { height }),
+        // When a consumer supplies a UX font stack, expose it to the
+        // editor CSS via this custom property. Chrome elements (toolbar,
+        // tabs, status bar) consume `--squisq-ux-font` as their
+        // `font-family`, falling back to the system stack when unset.
+        ...(uxFont ? ({ '--squisq-ux-font': uxFont } as CSSProperties) : {}),
       }}
       {...containerProps}
     >
@@ -227,35 +481,70 @@ function EditorShellInner({
         <div className="squisq-editor-header">
           <Toolbar
             showFiles={showFiles}
-            onToggleFiles={filesToggleEnabled ? handleToggleFiles : undefined}
+            onToggleFiles={!isCodeMode && filesToggleEnabled ? handleToggleFiles : undefined}
             slotLeft={toolbarSlotLeft}
             slotAfterActions={
               <>
                 {toolbarSlotAfterActions}
-                {isPreview && <PreviewToolbarControls />}
+                {!isCodeMode && isPreview && <PreviewToolbarControls />}
               </>
             }
             slotRight={toolbarSlotRight}
+            showPlayTab={showPlayTab}
           />
         </div>
 
         {/* Main content area */}
         <div
           className="squisq-editor-content"
-          style={{ flex: 1, overflow: 'hidden', position: 'relative', display: 'flex' }}
+          style={{
+            flex: autoGrow ? '1 1 auto' : 1,
+            overflowY: autoGrow ? 'auto' : 'hidden',
+            overflowX: 'hidden',
+            minHeight: 0,
+            position: 'relative',
+            display: 'flex',
+          }}
         >
-          <div style={{ flex: 1, overflow: 'hidden', position: 'relative' }}>
-            {activeView === 'raw' && <RawEditor theme={theme === 'dark' ? 'vs-dark' : 'vs'} />}
-            {activeView === 'wysiwyg' && <WysiwygEditor />}
-            {isPreview && <PreviewPanel basePath={basePath} container={container} />}
+          <div
+            style={{
+              flex: autoGrow ? '1 1 auto' : 1,
+              overflow: autoGrow ? 'visible' : 'hidden',
+              minHeight: 0,
+              position: 'relative',
+            }}
+          >
+            {activeView === 'raw' && (
+              <RawEditor
+                theme={theme === 'dark' ? 'vs-dark' : 'vs'}
+                submitOnEnter={submitOnEnter}
+                readOnly={readOnly}
+              />
+            )}
+            {/* WYSIWYG + Preview are markdown-only surfaces — skip them
+                entirely in code mode so Tiptap never initializes and the
+                preview pipeline stays idle. */}
+            {!isCodeMode && activeView === 'wysiwyg' && (
+              <WysiwygEditor
+                submitOnEnter={submitOnEnter}
+                placeholder={placeholder}
+                readOnly={readOnly}
+              />
+            )}
+            {!isCodeMode && isPreview && <PreviewPanel basePath={basePath} container={container} />}
           </div>
 
-          {showFiles && (
-            <MediaBin mediaProvider={mediaProvider} isDark={isDark} refreshKey={mediaRefreshKey} />
+          {!isCodeMode && showFiles && (
+            <MediaBin
+              mediaProvider={mediaProvider}
+              isDark={isDark}
+              refreshKey={mediaRefreshKey}
+              onMediaUploaded={insertMediaRef}
+            />
           )}
 
-          {/* Drop zone overlay */}
-          {isDragging && (
+          {/* Drop zone overlay — image / text drop UX is markdown-specific. */}
+          {!isCodeMode && isDragging && (
             <DropZoneOverlay
               dragContentType={dragContentType}
               zoneProps={zoneProps}
@@ -264,9 +553,12 @@ function EditorShellInner({
           )}
         </div>
 
-        {/* Status bar */}
-        <StatusBar />
+        {/* Status bar — word / char / line / block counts. Host can
+            suppress via `showStatusBar={false}` for embedded chat-style
+            composers where the stats are noise. */}
+        {showStatusBar && <StatusBar />}
       </PreviewSettingsProvider>
+      <TooltipLayer />
     </div>
   );
 }

package/src/ImageNodeView.tsx

@@ -16,8 +16,9 @@ import { useEditorContext } from './EditorContext';
 
 function ImageComponent({ node }: NodeViewProps) {
   const { src, alt, title } = node.attrs as { src: string; alt: string; title: string };
-  const { mediaProvider } = useEditorContext();
+  const { mediaProvider, imageDisplayMode } = useEditorContext();
   const [resolvedSrc, setResolvedSrc] = useState(src);
+  const isThumbnail = imageDisplayMode === 'thumbnail';
 
   const isRelative =
     src &&
@@ -53,7 +54,19 @@ function ImageComponent({ node }: NodeViewProps) {
         src={resolvedSrc}
         alt={alt || ''}
         title={title || undefined}
-        style={{ maxWidth: '100%', height: 'auto', display: 'block' }}
+        className={isThumbnail ? 'squisq-image squisq-image--thumbnail' : 'squisq-image'}
+        style={
+          isThumbnail
+            ? {
+                maxWidth: '100px',
+                maxHeight: '100px',
+                width: 'auto',
+                height: 'auto',
+                objectFit: 'contain',
+                display: 'block',
+              }
+            : { maxWidth: '100%', height: 'auto', display: 'block' }
+        }
       />
     </NodeViewWrapper>
   );

package/src/MediaBin.tsx

@@ -8,6 +8,7 @@
 
 import { useState, useEffect, useRef, useCallback } from 'react';
 import type { MediaProvider, MediaEntry } from '@bendyline/squisq/schemas';
+import { SQUISQ_MEDIA_MIME } from './mediaDragMime';
 
 // ============================================
 // Types
@@ -20,6 +21,17 @@ export interface MediaBinProps {
   isDark: boolean;
   /** Incremented externally to signal a re-scan of the media list */
   refreshKey?: number;
+  /**
+   * Fired after a successful upload via the MediaBin's own "+ Upload"
+   * button. `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
+   * at the editor's cursor so the file actually participates in the
+   * outgoing message — previously files went to the bin and nowhere
+   * else, leaving the message body empty when the user hit Send.
+   */
+  onMediaUploaded?: (relativePath: string, name: string, mimeType: string) => void | Promise<void>;
 }
 
 // ============================================
@@ -49,7 +61,7 @@ function isImageMime(mimeType: string): boolean {
 // Component
 // ============================================
 
-export function MediaBin({ mediaProvider, isDark, refreshKey }: MediaBinProps) {
+export function MediaBin({ mediaProvider, isDark, refreshKey, onMediaUploaded }: MediaBinProps) {
   const [entries, setEntries] = useState<MediaEntry[]>([]);
   const [thumbUrls, setThumbUrls] = useState<Record<string, string>>({});
   const [loading, setLoading] = useState(false);
@@ -116,9 +128,17 @@ export function MediaBin({ mediaProvider, isDark, refreshKey }: MediaBinProps) {
       try {
         for (let i = 0; i < files.length; i++) {
           const file = files[i];
+          if (!file) continue;
           const buffer = await file.arrayBuffer();
           const mimeType = file.type || 'application/octet-stream';
-          await mediaProvider.addMedia(file.name, buffer, mimeType);
+          const relativePath = await mediaProvider.addMedia(file.name, buffer, mimeType);
+          if (onMediaUploaded) {
+            try {
+              await onMediaUploaded(relativePath, file.name, mimeType);
+            } catch {
+              /* callback is a nice-to-have; don't abort the upload batch */
+            }
+          }
         }
         // Re-scan
         const list = await mediaProvider.listMedia();
@@ -146,7 +166,7 @@ export function MediaBin({ mediaProvider, isDark, refreshKey }: MediaBinProps) {
         if (fileInputRef.current) fileInputRef.current.value = '';
       }
     },
-    [mediaProvider],
+    [mediaProvider, onMediaUploaded],
   );
 
   return (
@@ -186,16 +206,37 @@ export function MediaBin({ mediaProvider, isDark, refreshKey }: MediaBinProps) {
         {entries.map((entry) => {
           const thumb = thumbUrls[entry.name];
           const basename = entry.name.includes('/') ? entry.name.split('/').pop()! : entry.name;
+          const isImage = isImageMime(entry.mimeType);
+          const altText = basename.replace(/\.[^.]+$/, '').replace(/[-_]/g, ' ');
+
+          const handleDragStart = (e: React.DragEvent<HTMLDivElement>) => {
+            if (!isImage) return;
+            const payload = JSON.stringify({
+              name: entry.name,
+              mimeType: entry.mimeType,
+              alt: altText,
+            });
+            e.dataTransfer.setData(SQUISQ_MEDIA_MIME, payload);
+            e.dataTransfer.setData('text/plain', `![${altText}](${entry.name})`);
+            e.dataTransfer.effectAllowed = 'copy';
+          };
 
           return (
             <div
               key={entry.name}
               className="squisq-media-bin-item"
               title={`${entry.name}\n${entry.mimeType}\n${formatSize(entry.size)}`}
+              draggable={isImage}
+              onDragStart={handleDragStart}
             >
               {/* Thumbnail or icon */}
               {thumb ? (
-                <img src={thumb} alt={basename} className="squisq-media-bin-thumb" />
+                <img
+                  src={thumb}
+                  alt={basename}
+                  className="squisq-media-bin-thumb"
+                  draggable={false}
+                />
               ) : (
                 <span className="squisq-media-bin-icon">{iconForMime(entry.mimeType)}</span>
               )}