@bendyline/squisq-editor-react 1.0.1 → 1.1.1

package/src/DropZoneOverlay.tsx

@@ -0,0 +1,137 @@
+/**
+ * DropZoneOverlay
+ *
+ * Full-editor overlay that appears when files are dragged over the editor.
+ * Shows contextual drop zones depending on the type of files being dragged:
+ * - Media files → single "Media" drop zone
+ * - Text files → two zones: "Insert" (at cursor) and "Replace" (all content)
+ * - Mixed files → all three zones
+ */
+
+import { useState } from 'react';
+import type { DragContentType, DropTarget, UseFileDropResult } from './hooks/useFileDrop';
+
+export interface DropZoneOverlayProps {
+  /** What kind of content is being dragged */
+  dragContentType: DragContentType;
+  /** Factory that creates event props for a specific drop target */
+  zoneProps: UseFileDropResult['zoneProps'];
+  /** Whether a MediaProvider is available (disables media zone when false) */
+  hasMediaProvider: boolean;
+}
+
+/**
+ * Full-size overlay with contextual drop targets for file uploads.
+ * Rendered conditionally by EditorShell when files are dragged over the editor.
+ */
+export function DropZoneOverlay({
+  dragContentType,
+  zoneProps,
+  hasMediaProvider,
+}: DropZoneOverlayProps) {
+  const showMedia = dragContentType === 'media' || dragContentType === 'mixed';
+  const showText = dragContentType === 'text' || dragContentType === 'mixed';
+
+  return (
+    <div className="squisq-drop-overlay">
+      <div className="squisq-drop-overlay-inner">
+        {showMedia && (
+          <DropZone
+            target="media"
+            zoneProps={zoneProps}
+            icon="📷"
+            label="Media"
+            description={hasMediaProvider ? 'Add to file bin' : 'No file storage configured'}
+            disabled={!hasMediaProvider}
+            variant="media"
+          />
+        )}
+        {showText && (
+          <>
+            <DropZone
+              target="insert"
+              zoneProps={zoneProps}
+              icon="📋"
+              label="Insert"
+              description="Insert content at cursor"
+              variant="insert"
+            />
+            <DropZone
+              target="replace"
+              zoneProps={zoneProps}
+              icon="🔄"
+              label="Replace"
+              description="Replace all editor content"
+              variant="replace"
+            />
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ─── Individual drop zone ────────────────────────────────
+
+interface DropZoneProps {
+  target: DropTarget;
+  zoneProps: UseFileDropResult['zoneProps'];
+  icon: string;
+  label: string;
+  description: string;
+  disabled?: boolean;
+  variant: 'media' | 'insert' | 'replace';
+}
+
+function DropZone({
+  target,
+  zoneProps,
+  icon,
+  label,
+  description,
+  disabled,
+  variant,
+}: DropZoneProps) {
+  const [isHovering, setIsHovering] = useState(false);
+  const props = zoneProps(target);
+
+  return (
+    <div
+      className={[
+        'squisq-drop-zone',
+        `squisq-drop-zone--${variant}`,
+        isHovering && !disabled ? 'squisq-drop-zone--active' : '',
+        disabled ? 'squisq-drop-zone--disabled' : '',
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      onDragOver={(e) => {
+        if (disabled) {
+          e.preventDefault();
+          return;
+        }
+        props.onDragOver(e);
+      }}
+      onDragEnter={(e) => {
+        e.preventDefault();
+        if (!disabled) setIsHovering(true);
+      }}
+      onDragLeave={(e) => {
+        e.preventDefault();
+        setIsHovering(false);
+      }}
+      onDrop={(e) => {
+        setIsHovering(false);
+        if (disabled) {
+          e.preventDefault();
+          return;
+        }
+        props.onDrop(e);
+      }}
+    >
+      <span className="squisq-drop-zone-icon">{icon}</span>
+      <span className="squisq-drop-zone-label">{label}</span>
+      <span className="squisq-drop-zone-desc">{description}</span>
+    </div>
+  );
+}

package/src/EditorContext.tsx

@@ -17,12 +17,13 @@ import {
   useEffect,
   type ReactNode,
 } from 'react';
-import type { Doc } from '@bendyline/squisq/schemas';
+import type { Doc, MediaProvider } from '@bendyline/squisq/schemas';
 import type { MarkdownDocument } from '@bendyline/squisq/markdown';
 import { parseMarkdown, stringifyMarkdown } from '@bendyline/squisq/markdown';
 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';
 
 /** Monaco standalone code editor instance type */
 type MonacoEditor = MonacoEditorNs.IStandaloneCodeEditor;
@@ -62,6 +63,10 @@ export interface EditorActions {
   setMonacoEditor: (editor: MonacoEditor | null) => void;
   /** Set the color theme */
   setTheme: (theme: EditorTheme) => void;
+  /** Insert text at the current cursor position in the active editor */
+  insertAtCursor: (text: string) => void;
+  /** Replace all editor content with the given text */
+  replaceAll: (text: string) => void;
 }
 
 export interface EditorContextValue extends EditorState, EditorActions {
@@ -69,6 +74,8 @@ export interface EditorContextValue extends EditorState, EditorActions {
   tiptapEditor: TiptapEditor | null;
   /** The live Monaco editor instance (null when Raw is not mounted) */
   monacoEditor: MonacoEditor | null;
+  /** MediaProvider for resolving image URLs in the WYSIWYG editor */
+  mediaProvider: MediaProvider | null;
 }
 
 // ─── Context ─────────────────────────────────────────────
@@ -98,6 +105,8 @@ export interface EditorProviderProps {
   articleId?: string;
   /** Color theme */
   theme?: EditorTheme;
+  /** MediaProvider for resolving image URLs */
+  mediaProvider?: MediaProvider | null;
   children: ReactNode;
 }
 
@@ -110,6 +119,7 @@ export function EditorProvider({
   initialView = 'raw',
   articleId = 'untitled',
   theme: initialTheme = 'light',
+  mediaProvider = null,
   children,
 }: EditorProviderProps) {
   const [markdownSource, setMarkdownSourceRaw] = useState(initialMarkdown);
@@ -187,6 +197,53 @@ export function EditorProvider({
     setMarkdownSourceRaw(source);
   }, []);
 
+  const insertAtCursor = useCallback(
+    (text: string) => {
+      if (activeView === 'wysiwyg' && tiptapEditor) {
+        // Insert as HTML so formatting is preserved
+        const html = markdownToTiptap(text);
+        tiptapEditor.chain().focus().insertContent(html).run();
+      } else if (activeView === 'raw' && monacoEditor) {
+        const position = monacoEditor.getPosition();
+        if (position) {
+          const model = monacoEditor.getModel();
+          if (model) {
+            const range = {
+              startLineNumber: position.lineNumber,
+              startColumn: position.column,
+              endLineNumber: position.lineNumber,
+              endColumn: position.column,
+            };
+            monacoEditor.executeEdits('drop', [{ range, text }]);
+          }
+        } else {
+          // No cursor — append
+          setMarkdownSourceRaw((prev) => prev + '\n\n' + text);
+        }
+      } else {
+        // Preview or no editor — append to end
+        setMarkdownSourceRaw((prev) => prev + '\n\n' + text);
+      }
+    },
+    [activeView, tiptapEditor, monacoEditor],
+  );
+
+  const replaceAll = useCallback(
+    (text: string) => {
+      setMarkdownSourceRaw(text);
+
+      // Push to editors if mounted
+      if (tiptapEditor) {
+        const html = markdownToTiptap(text);
+        tiptapEditor.commands.setContent(html);
+      }
+      if (monacoEditor) {
+        monacoEditor.setValue(text);
+      }
+    },
+    [tiptapEditor, monacoEditor],
+  );
+
   const setMarkdownDoc = useCallback((newDoc: MarkdownDocument) => {
     setMarkdownDocState(newDoc);
     // Stringify to update the raw source
@@ -221,12 +278,15 @@ export function EditorProvider({
       theme,
       tiptapEditor,
       monacoEditor,
+      mediaProvider,
       setMarkdownSource,
       setMarkdownDoc,
       setActiveView,
       setTiptapEditor,
       setMonacoEditor,
       setTheme,
+      insertAtCursor,
+      replaceAll,
     }),
     [
       markdownSource,
@@ -238,12 +298,15 @@ export function EditorProvider({
       theme,
       tiptapEditor,
       monacoEditor,
+      mediaProvider,
       setMarkdownSource,
       setMarkdownDoc,
       setActiveView,
       setTiptapEditor,
       setMonacoEditor,
       setTheme,
+      insertAtCursor,
+      replaceAll,
     ],
   );
 

package/src/EditorShell.tsx

@@ -6,13 +6,26 @@
  * in an EditorProvider for shared state.
  */
 
-import { useEffect } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 import { EditorProvider, useEditorContext, type EditorView } from './EditorContext';
 import { Toolbar } from './Toolbar';
 import { StatusBar } from './StatusBar';
 import { RawEditor } from './RawEditor';
 import { WysiwygEditor } from './WysiwygEditor';
 import { PreviewPanel } from './PreviewPanel';
+import { PreviewSettingsProvider, PreviewToolbarControls } from './PreviewControls';
+import { MediaBin } from './MediaBin';
+import { DropZoneOverlay } from './DropZoneOverlay';
+import { useFileDrop, type DropTarget } from './hooks/useFileDrop';
+import {
+  partitionFiles,
+  processMediaFiles,
+  processTextFile,
+  processTextFiles,
+} from './utils/dropUtils';
+import type { MediaProvider } from '@bendyline/squisq/schemas';
+import type { ContentContainer } from '@bendyline/squisq/storage';
+import type { ReactNode } from 'react';
 
 export type { EditorTheme } from './EditorContext';
 
@@ -34,6 +47,18 @@ export interface EditorShellProps {
   className?: string;
   /** CSS height for the shell container (default: '100vh') */
   height?: 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). */
+  container?: ContentContainer | null;
+  /** Show the Files toggle in the toolbar. Defaults to true when mediaProvider is passed. */
+  showFilesToggle?: boolean;
+  /** Content rendered at the left edge of the toolbar, before the view tabs. */
+  toolbarSlotLeft?: ReactNode;
+  /** Content rendered after the formatting controls (in the middle area of the toolbar). */
+  toolbarSlotAfterActions?: ReactNode;
+  /** Content rendered at the rightmost end of the toolbar, after all other elements. */
+  toolbarSlotRight?: ReactNode;
 }
 
 /**
@@ -49,19 +74,35 @@ export function EditorShell({
   theme = 'light',
   className,
   height = '100vh',
+  mediaProvider,
+  container,
+  showFilesToggle,
+  toolbarSlotLeft,
+  toolbarSlotAfterActions,
+  toolbarSlotRight,
 }: EditorShellProps) {
+  // Show the toggle when explicitly opted in, or when mediaProvider prop was passed at all
+  const filesToggleEnabled = showFilesToggle ?? mediaProvider !== undefined;
+
   return (
     <EditorProvider
       initialMarkdown={initialMarkdown}
       initialView={initialView}
       articleId={articleId}
       theme={theme}
+      mediaProvider={mediaProvider}
     >
       <EditorShellInner
         basePath={basePath}
         onChange={onChange}
         className={className}
         height={height}
+        mediaProvider={mediaProvider ?? null}
+        container={container}
+        filesToggleEnabled={filesToggleEnabled}
+        toolbarSlotLeft={toolbarSlotLeft}
+        toolbarSlotAfterActions={toolbarSlotAfterActions}
+        toolbarSlotRight={toolbarSlotRight}
       />
     </EditorProvider>
   );
@@ -72,10 +113,73 @@ interface EditorShellInnerProps {
   onChange?: (source: string) => void;
   className?: string;
   height: string;
+  mediaProvider: MediaProvider | null;
+  container?: ContentContainer | null;
+  filesToggleEnabled: boolean;
+  toolbarSlotLeft?: ReactNode;
+  toolbarSlotAfterActions?: ReactNode;
+  toolbarSlotRight?: ReactNode;
 }
 
-function EditorShellInner({ basePath, onChange, className, height }: EditorShellInnerProps) {
-  const { activeView, markdownSource, theme } = useEditorContext();
+function EditorShellInner({
+  basePath,
+  onChange,
+  className,
+  height,
+  mediaProvider,
+  container,
+  filesToggleEnabled,
+  toolbarSlotLeft,
+  toolbarSlotAfterActions,
+  toolbarSlotRight,
+}: EditorShellInnerProps) {
+  const { activeView, markdownSource, doc, theme, insertAtCursor, replaceAll } = useEditorContext();
+  const isPreview = activeView === 'preview';
+  const [showFiles, setShowFiles] = useState(false);
+  const [mediaRefreshKey, setMediaRefreshKey] = useState(0);
+  const isDark = theme === 'dark';
+
+  const handleToggleFiles = useCallback(() => {
+    setShowFiles((prev) => !prev);
+  }, []);
+
+  // ── Drag-and-drop file handling ──
+
+  const handleFileDrop = useCallback(
+    async (files: File[], target: DropTarget) => {
+      try {
+        const { media, text } = partitionFiles(files);
+
+        // Process media files
+        if (media.length > 0 && mediaProvider) {
+          await processMediaFiles(media, mediaProvider);
+          setMediaRefreshKey((k) => k + 1);
+          // Auto-open the media bin so the user sees the new files
+          if (!showFiles) setShowFiles(true);
+        }
+
+        // Process text files
+        if (text.length > 0) {
+          if (target === 'replace') {
+            // Replace with first text file
+            const content = await processTextFile(text[0]);
+            replaceAll(content);
+          } else {
+            // Insert all text files concatenated
+            const content = await processTextFiles(text);
+            insertAtCursor(content);
+          }
+        }
+      } catch (err: unknown) {
+        console.error('Failed to process dropped files:', err instanceof Error ? err.message : err);
+      }
+    },
+    [mediaProvider, showFiles, replaceAll, insertAtCursor],
+  );
+
+  const { isDragging, dragContentType, containerProps, zoneProps } = useFileDrop({
+    onDrop: handleFileDrop,
+  });
 
   // Notify parent of changes
   useEffect(() => {
@@ -116,24 +220,53 @@ function EditorShellInner({ basePath, onChange, className, height }: EditorShell
         height,
         overflow: 'hidden',
       }}
+      {...containerProps}
     >
-      {/* Header: Toolbar (includes view tabs) */}
-      <div className="squisq-editor-header">
-        <Toolbar />
-      </div>
-
-      {/* Main content area */}
-      <div
-        className="squisq-editor-content"
-        style={{ flex: 1, overflow: 'hidden', position: 'relative' }}
-      >
-        {activeView === 'raw' && <RawEditor theme={theme === 'dark' ? 'vs-dark' : 'vs'} />}
-        {activeView === 'wysiwyg' && <WysiwygEditor />}
-        {activeView === 'preview' && <PreviewPanel basePath={basePath} />}
-      </div>
-
-      {/* Status bar */}
-      <StatusBar />
+      <PreviewSettingsProvider doc={doc}>
+        {/* Header: Toolbar (includes view tabs + preview controls) */}
+        <div className="squisq-editor-header">
+          <Toolbar
+            showFiles={showFiles}
+            onToggleFiles={filesToggleEnabled ? handleToggleFiles : undefined}
+            slotLeft={toolbarSlotLeft}
+            slotAfterActions={
+              <>
+                {toolbarSlotAfterActions}
+                {isPreview && <PreviewToolbarControls />}
+              </>
+            }
+            slotRight={toolbarSlotRight}
+          />
+        </div>
+
+        {/* Main content area */}
+        <div
+          className="squisq-editor-content"
+          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} />}
+          </div>
+
+          {showFiles && (
+            <MediaBin mediaProvider={mediaProvider} isDark={isDark} refreshKey={mediaRefreshKey} />
+          )}
+
+          {/* Drop zone overlay */}
+          {isDragging && (
+            <DropZoneOverlay
+              dragContentType={dragContentType}
+              zoneProps={zoneProps}
+              hasMediaProvider={mediaProvider !== null}
+            />
+          )}
+        </div>
+
+        {/* Status bar */}
+        <StatusBar />
+      </PreviewSettingsProvider>
     </div>
   );
 }

package/src/ImageNodeView.tsx

@@ -0,0 +1,70 @@
+/**
+ * ImageNodeView — Custom Tiptap NodeView for images.
+ *
+ * Resolves image `src` attributes through the EditorContext's MediaProvider,
+ * converting relative paths (e.g. "images/hero.jpg") to displayable blob URLs.
+ *
+ * The ProseMirror node retains the original relative path so markdown roundtrip
+ * is preserved — only the rendered DOM uses the resolved URL.
+ */
+
+import { useEffect, useState } from 'react';
+import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react';
+import type { NodeViewProps } from '@tiptap/react';
+import Image from '@tiptap/extension-image';
+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 [resolvedSrc, setResolvedSrc] = useState(src);
+
+  const isRelative =
+    src &&
+    !src.startsWith('blob:') &&
+    !src.startsWith('http') &&
+    !src.startsWith('data:') &&
+    !src.startsWith('/');
+
+  useEffect(() => {
+    if (!mediaProvider || !isRelative) {
+      setResolvedSrc(src);
+      return;
+    }
+
+    let cancelled = false;
+    mediaProvider.resolveUrl(src).then(
+      (resolved) => {
+        if (!cancelled) setResolvedSrc(resolved);
+      },
+      () => {
+        if (!cancelled) setResolvedSrc(src);
+      },
+    );
+
+    return () => {
+      cancelled = true;
+    };
+  }, [src, mediaProvider, isRelative]);
+
+  return (
+    <NodeViewWrapper as="figure" style={{ margin: '0.5em 0' }}>
+      <img
+        src={resolvedSrc}
+        alt={alt || ''}
+        title={title || undefined}
+        style={{ maxWidth: '100%', height: 'auto', display: 'block' }}
+      />
+    </NodeViewWrapper>
+  );
+}
+
+/**
+ * Image extension with a custom React NodeView that resolves URLs
+ * through the EditorContext's MediaProvider.
+ */
+export const ImageWithMediaProvider = Image.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer(ImageComponent);
+  },
+});