@bendyline/squisq-editor-react 1.2.2 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bendyline/squisq-editor-react",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "React editor shell with raw/WYSIWYG/preview modes for Squisq documents",
   "license": "MIT",
   "author": "Bendyline",
@@ -31,8 +31,8 @@
   ],
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
     },
     "./styles": "./src/styles/editor.css"
   },
@@ -46,11 +46,12 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@bendyline/squisq": "1.2.2",
-    "@bendyline/squisq-formats": "1.2.2",
-    "@bendyline/squisq-react": "1.1.2",
+    "@bendyline/squisq": "1.3.0",
+    "@bendyline/squisq-formats": "1.2.3",
+    "@bendyline/squisq-react": "1.2.0",
     "@monaco-editor/react": "4.7.0",
     "@tiptap/extension-image": "2.27.2",
+    "@tiptap/extension-mention": "2.27.2",
     "@tiptap/extension-placeholder": "2.27.2",
     "@tiptap/extension-table": "2.27.2",
     "@tiptap/extension-table-cell": "2.27.2",
@@ -60,7 +61,8 @@
     "@tiptap/extension-task-list": "2.27.2",
     "@tiptap/pm": "2.27.2",
     "@tiptap/react": "2.27.2",
-    "@tiptap/starter-kit": "2.27.2"
+    "@tiptap/starter-kit": "2.27.2",
+    "@tiptap/suggestion": "2.27.2"
   },
   "devDependencies": {
     "@types/react": "18.3.28",

package/src/EditorContext.tsx

@@ -24,14 +24,47 @@ import { markdownToDoc } from '@bendyline/squisq/doc';
 import type { Editor as TiptapEditor } from '@tiptap/core';
 import type { editor as MonacoEditorNs } from 'monaco-editor';
 import { markdownToTiptap } from './tiptapBridge';
+import { resolveFileKind } from './fileKind';
 
 /** Monaco standalone code editor instance type */
 type MonacoEditor = MonacoEditorNs.IStandaloneCodeEditor;
 
+/**
+ * One candidate returned by a {@link MentionProvider}. Shown in the editor's
+ * `@` popover. `id` is the stable identifier (serialized into the mention
+ * wire format); `label` is what the reader sees; `scheme` is the namespace
+ * (e.g. `'user'`, `'issue'`) written into the markdown as `@[label](scheme:id)`;
+ * `description` and `group` are optional hints for richer suggestion UIs.
+ *
+ * Different candidates in the same result set may carry different schemes —
+ * a provider that returns both users and issues, for example, tags each
+ * candidate with its own namespace and the editor emits mentions accordingly.
+ */
+export interface MentionCandidate {
+  id: string;
+  label: string;
+  scheme: string;
+  description?: string;
+  group?: string;
+}
+
+/**
+ * Looks up mention candidates matching a query. Called as the user types
+ * after `@`. The provider is free to do server-side or client-side filtering;
+ * the editor only cares that candidates come back in relevance order.
+ */
+export type MentionProvider = (query: string) => Promise<MentionCandidate[]>;
+
 // ─── Types ───────────────────────────────────────────────
 
 export type EditorView = 'raw' | 'wysiwyg' | 'preview';
 export type EditorTheme = 'light' | 'dark';
+/**
+ * Editor operating mode. `markdown` is the full experience (WYSIWYG +
+ * Preview tabs, formatting toolbar). `code` is a Monaco-only view used
+ * when the content represents a non-markdown file like `foo.ts`.
+ */
+export type EditorMode = 'markdown' | 'code';
 
 export interface EditorState {
   /** Raw markdown source string */
@@ -48,6 +81,10 @@ export interface EditorState {
   isParsing: boolean;
   /** Current color theme */
   theme: EditorTheme;
+  /** Operating mode — 'markdown' for the full shell, 'code' for Monaco-only. */
+  editorMode: EditorMode;
+  /** Monaco language ID for the Raw editor. */
+  language: string;
 }
 
 export interface EditorActions {
@@ -76,8 +113,25 @@ export interface EditorContextValue extends EditorState, EditorActions {
   monacoEditor: MonacoEditor | null;
   /** MediaProvider for resolving image URLs in the WYSIWYG editor */
   mediaProvider: MediaProvider | null;
+  /**
+   * How pasted/inserted images should be displayed in the WYSIWYG view.
+   * `'inline'` (default) lets them flow at natural size up to the editor
+   * width; `'thumbnail'` constrains them to a 100×100 box so chat
+   * composers and other dense surfaces don't get dominated by a single
+   * pasted screenshot. The stored image bytes are unchanged — this is a
+   * pure render-time decision.
+   */
+  imageDisplayMode: ImageDisplayMode;
+  /**
+   * Optional provider for `@`-mention suggestions. When set, both the
+   * WYSIWYG (Tiptap) and Raw (Monaco) editors show a mention popover as
+   * the user types `@<query>`. When unset, `@` is just a literal character.
+   */
+  mentionProvider: MentionProvider | null;
 }
 
+export type ImageDisplayMode = 'inline' | 'thumbnail';
+
 // ─── Context ─────────────────────────────────────────────
 
 const EditorContext = createContext<EditorContextValue | null>(null);
@@ -107,6 +161,20 @@ export interface EditorProviderProps {
   theme?: EditorTheme;
   /** MediaProvider for resolving image URLs */
   mediaProvider?: MediaProvider | null;
+  /** Display mode for images in the WYSIWYG view. Defaults to `'inline'`. */
+  imageDisplayMode?: ImageDisplayMode;
+  /**
+   * Async provider for `@`-mention suggestions. Omit to disable mentions
+   * entirely — typing `@` becomes just a literal character again.
+   */
+  mentionProvider?: MentionProvider | null;
+  /**
+   * File name (e.g. `foo.ts`) or bare extension — used to pick a Monaco
+   * language and decide between markdown vs. code mode.
+   */
+  fileName?: string;
+  /** Explicit Monaco language ID — wins over the fileName-derived one. */
+  language?: string;
   children: ReactNode;
 }
 
@@ -120,12 +188,34 @@ export function EditorProvider({
   articleId = 'untitled',
   theme: initialTheme = 'light',
   mediaProvider = null,
+  imageDisplayMode = 'inline',
+  mentionProvider = null,
+  fileName,
+  language,
   children,
 }: EditorProviderProps) {
+  // Resolve once per provider mount. Changing fileName/language after mount
+  // would require recreating the Monaco model anyway, so treat it as static.
+  const { mode: editorMode, language: resolvedLanguage } = useMemo(
+    () => resolveFileKind(fileName, language),
+    [fileName, language],
+  );
+  // In code mode, WYSIWYG and Preview aren't rendered — force the starting
+  // view to 'raw' so we don't boot into an unmounted surface.
   const [markdownSource, setMarkdownSourceRaw] = useState(initialMarkdown);
   const [markdownDoc, setMarkdownDocState] = useState<MarkdownDocument | null>(null);
   const [doc, setDoc] = useState<Doc | null>(null);
-  const [activeView, setActiveView] = useState<EditorView>(initialView);
+  const [activeView, setActiveViewRaw] = useState<EditorView>(
+    editorMode === 'code' ? 'raw' : initialView,
+  );
+  const setActiveView = useCallback(
+    (view: EditorView) => {
+      // In code mode only the raw view is valid; ignore any other requests.
+      if (editorMode === 'code' && view !== 'raw') return;
+      setActiveViewRaw(view);
+    },
+    [editorMode],
+  );
   const [parseError, setParseError] = useState<string | null>(null);
   const [isParsing, setIsParsing] = useState(false);
   const [theme, setTheme] = useState<EditorTheme>(initialTheme);
@@ -170,8 +260,12 @@ export function EditorProvider({
     }
   }, []);
 
-  // Parse on source changes with debounce
+  // Parse on source changes with debounce. Skipped in code mode — the
+  // WYSIWYG/Preview surfaces that consume markdownDoc/doc aren't mounted,
+  // so there's nothing to feed and no reason to run the markdown parser on
+  // TypeScript / JSON / etc.
   useEffect(() => {
+    if (editorMode === 'code') return;
     if (parseTimeoutRef.current) {
       clearTimeout(parseTimeoutRef.current);
     }
@@ -183,10 +277,11 @@ export function EditorProvider({
         clearTimeout(parseTimeoutRef.current);
       }
     };
-  }, [markdownSource, doParse]);
+  }, [markdownSource, doParse, editorMode]);
 
   // Initial parse
   useEffect(() => {
+    if (editorMode === 'code') return;
     if (initialMarkdown) {
       doParse(initialMarkdown);
     }
@@ -276,9 +371,13 @@ export function EditorProvider({
       parseError,
       isParsing,
       theme,
+      editorMode,
+      language: resolvedLanguage,
       tiptapEditor,
       monacoEditor,
       mediaProvider,
+      imageDisplayMode,
+      mentionProvider,
       setMarkdownSource,
       setMarkdownDoc,
       setActiveView,
@@ -296,9 +395,13 @@ export function EditorProvider({
       parseError,
       isParsing,
       theme,
+      editorMode,
+      resolvedLanguage,
       tiptapEditor,
       monacoEditor,
       mediaProvider,
+      imageDisplayMode,
+      mentionProvider,
       setMarkdownSource,
       setMarkdownDoc,
       setActiveView,

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';
 
@@ -59,6 +66,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;
 }
 
 /**
@@ -80,29 +186,58 @@ export function EditorShell({
   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}
+        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 +248,20 @@ interface EditorShellInnerProps {
   onChange?: (source: string) => void;
   className?: string;
   height: 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 +269,25 @@ function EditorShellInner({
   onChange,
   className,
   height,
+  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 } =
+    useEditorContext();
   const isPreview = activeView === 'preview';
+  const isCodeMode = editorMode === 'code';
   const [showFiles, setShowFiles] = useState(false);
   const [mediaRefreshKey, setMediaRefreshKey] = useState(0);
   const isDark = theme === 'dark';
@@ -200,6 +353,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 +362,24 @@ function EditorShellInner({
     };
     window.addEventListener('keydown', handler);
     return () => window.removeEventListener('keydown', handler);
-  }, []);
+  }, [showPlayTab]);
 
   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',
+        // 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,15 +388,16 @@ 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>
 
@@ -245,17 +407,32 @@ function EditorShellInner({
           style={{ flex: 1, overflow: 'hidden', 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} />}
+            {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 && (
+          {!isCodeMode && showFiles && (
             <MediaBin mediaProvider={mediaProvider} isDark={isDark} refreshKey={mediaRefreshKey} />
           )}
 
-          {/* Drop zone overlay */}
-          {isDragging && (
+          {/* Drop zone overlay — image / text drop UX is markdown-specific. */}
+          {!isCodeMode && isDragging && (
             <DropZoneOverlay
               dragContentType={dragContentType}
               zoneProps={zoneProps}
@@ -264,9 +441,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
@@ -186,16 +187,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>
               )}