@bendyline/squisq-editor-react 1.0.0 → 1.1.0

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

@@ -23,6 +23,7 @@ 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 {
@@ -187,6 +192,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
@@ -227,6 +279,8 @@ export function EditorProvider({
       setTiptapEditor,
       setMonacoEditor,
       setTheme,
+      insertAtCursor,
+      replaceAll,
     }),
     [
       markdownSource,
@@ -244,6 +298,8 @@ export function EditorProvider({
       setTiptapEditor,
       setMonacoEditor,
       setTheme,
+      insertAtCursor,
+      replaceAll,
     ],
   );
 

package/src/EditorShell.tsx

@@ -6,13 +6,23 @@
  * 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 { 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';
 
 export type { EditorTheme } from './EditorContext';
 
@@ -34,6 +44,10 @@ 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;
+  /** Show the Files toggle in the toolbar. Defaults to true when mediaProvider is passed. */
+  showFilesToggle?: boolean;
 }
 
 /**
@@ -49,7 +63,12 @@ export function EditorShell({
   theme = 'light',
   className,
   height = '100vh',
+  mediaProvider,
+  showFilesToggle,
 }: 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}
@@ -62,6 +81,8 @@ export function EditorShell({
         onChange={onChange}
         className={className}
         height={height}
+        mediaProvider={mediaProvider ?? null}
+        filesToggleEnabled={filesToggleEnabled}
       />
     </EditorProvider>
   );
@@ -72,10 +93,64 @@ interface EditorShellInnerProps {
   onChange?: (source: string) => void;
   className?: string;
   height: string;
+  mediaProvider: MediaProvider | null;
+  filesToggleEnabled: boolean;
 }
 
-function EditorShellInner({ basePath, onChange, className, height }: EditorShellInnerProps) {
-  const { activeView, markdownSource, theme } = useEditorContext();
+function EditorShellInner({
+  basePath,
+  onChange,
+  className,
+  height,
+  mediaProvider,
+  filesToggleEnabled,
+}: EditorShellInnerProps) {
+  const { activeView, markdownSource, theme, insertAtCursor, replaceAll } = useEditorContext();
+  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,20 +191,39 @@ function EditorShellInner({ basePath, onChange, className, height }: EditorShell
         height,
         overflow: 'hidden',
       }}
+      {...containerProps}
     >
       {/* Header: Toolbar (includes view tabs) */}
       <div className="squisq-editor-header">
-        <Toolbar />
+        <Toolbar
+          showFiles={showFiles}
+          onToggleFiles={filesToggleEnabled ? handleToggleFiles : undefined}
+        />
       </div>
 
       {/* Main content area */}
       <div
         className="squisq-editor-content"
-        style={{ flex: 1, overflow: 'hidden', position: 'relative' }}
+        style={{ flex: 1, overflow: 'hidden', position: 'relative', display: 'flex' }}
       >
-        {activeView === 'raw' && <RawEditor theme={theme === 'dark' ? 'vs-dark' : 'vs'} />}
-        {activeView === 'wysiwyg' && <WysiwygEditor />}
-        {activeView === 'preview' && <PreviewPanel basePath={basePath} />}
+        <div 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>
+
+        {showFiles && (
+          <MediaBin mediaProvider={mediaProvider} isDark={isDark} refreshKey={mediaRefreshKey} />
+        )}
+
+        {/* Drop zone overlay */}
+        {isDragging && (
+          <DropZoneOverlay
+            dragContentType={dragContentType}
+            zoneProps={zoneProps}
+            hasMediaProvider={mediaProvider !== null}
+          />
+        )}
       </div>
 
       {/* Status bar */}

package/src/MediaBin.tsx

@@ -0,0 +1,223 @@
+/**
+ * MediaBin
+ *
+ * Toggleable side panel that displays files associated with the current
+ * content. Shows image thumbnails, icons for other types, file sizes,
+ * and provides an upload button to add new media.
+ */
+
+import { useState, useEffect, useRef, useCallback } from 'react';
+import type { MediaProvider, MediaEntry } from '@bendyline/squisq/schemas';
+
+// ============================================
+// Types
+// ============================================
+
+export interface MediaBinProps {
+  /** The active MediaProvider (null when no media context is available) */
+  mediaProvider: MediaProvider | null;
+  /** Whether the editor is in dark mode */
+  isDark: boolean;
+  /** Incremented externally to signal a re-scan of the media list */
+  refreshKey?: number;
+}
+
+// ============================================
+// Helpers
+// ============================================
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function iconForMime(mimeType: string): string {
+  if (mimeType.startsWith('image/')) return '\u{1F5BC}';
+  if (mimeType.startsWith('audio/')) return '\u{1F50A}';
+  if (mimeType.startsWith('video/')) return '\u{1F3AC}';
+  if (mimeType.includes('json')) return '{ }';
+  if (mimeType.includes('xml') || mimeType.includes('ssml')) return '\u{2329}/\u{232A}';
+  return '\u{1F4C4}';
+}
+
+function isImageMime(mimeType: string): boolean {
+  return mimeType.startsWith('image/');
+}
+
+// ============================================
+// Component
+// ============================================
+
+export function MediaBin({ mediaProvider, isDark, refreshKey }: MediaBinProps) {
+  const [entries, setEntries] = useState<MediaEntry[]>([]);
+  const [thumbUrls, setThumbUrls] = useState<Record<string, string>>({});
+  const [loading, setLoading] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // Scan media entries whenever the provider changes or refreshKey bumps
+  useEffect(() => {
+    if (!mediaProvider) {
+      setEntries([]);
+      setThumbUrls({});
+      return;
+    }
+
+    let cancelled = false;
+
+    async function scan() {
+      setLoading(true);
+      try {
+        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);
+        });
+        setEntries(list);
+
+        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 failed resolve
+            }
+          }
+        }
+        if (!cancelled) setThumbUrls(urls);
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+
+    scan();
+    return () => {
+      cancelled = true;
+    };
+  }, [mediaProvider, refreshKey]);
+
+  // ---- Upload ----
+
+  const handleUploadClick = useCallback(() => {
+    fileInputRef.current?.click();
+  }, []);
+
+  const handleFileChange = useCallback(
+    async (e: React.ChangeEvent<HTMLInputElement>) => {
+      const files = e.target.files;
+      if (!files || !mediaProvider) return;
+
+      setLoading(true);
+      try {
+        for (let i = 0; i < files.length; i++) {
+          const file = files[i];
+          const buffer = await file.arrayBuffer();
+          const mimeType = file.type || 'application/octet-stream';
+          await mediaProvider.addMedia(file.name, buffer, mimeType);
+        }
+        // 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);
+
+        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
+            }
+          }
+        }
+        setThumbUrls(urls);
+      } finally {
+        setLoading(false);
+        if (fileInputRef.current) fileInputRef.current.value = '';
+      }
+    },
+    [mediaProvider],
+  );
+
+  return (
+    <div className={`squisq-media-bin${isDark ? ' squisq-media-bin--dark' : ''}`}>
+      {/* Header */}
+      <div className="squisq-media-bin-header">
+        <span className="squisq-media-bin-title">
+          Files {entries.length > 0 && `(${entries.length})`}
+        </span>
+
+        <button
+          className="squisq-media-bin-upload"
+          onClick={handleUploadClick}
+          disabled={!mediaProvider || loading}
+          title={
+            mediaProvider ? 'Upload files' : 'Load a content zip or select a storage slot first'
+          }
+        >
+          + Upload
+        </button>
+      </div>
+
+      {/* File list */}
+      <div className="squisq-media-bin-list">
+        {!mediaProvider && (
+          <div className="squisq-media-bin-empty">
+            No media context.
+            <br />
+            Load a content zip or select a storage slot.
+          </div>
+        )}
+
+        {mediaProvider && entries.length === 0 && !loading && (
+          <div className="squisq-media-bin-empty">No files yet.</div>
+        )}
+
+        {entries.map((entry) => {
+          const thumb = thumbUrls[entry.name];
+          const basename = entry.name.includes('/') ? entry.name.split('/').pop()! : entry.name;
+
+          return (
+            <div
+              key={entry.name}
+              className="squisq-media-bin-item"
+              title={`${entry.name}\n${entry.mimeType}\n${formatSize(entry.size)}`}
+            >
+              {/* Thumbnail or icon */}
+              {thumb ? (
+                <img src={thumb} alt={basename} className="squisq-media-bin-thumb" />
+              ) : (
+                <span className="squisq-media-bin-icon">{iconForMime(entry.mimeType)}</span>
+              )}
+
+              {/* 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>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Hidden file input */}
+      <input
+        ref={fileInputRef}
+        type="file"
+        multiple
+        style={{ display: 'none' }}
+        onChange={handleFileChange}
+      />
+    </div>
+  );
+}

package/src/Toolbar.tsx

@@ -21,6 +21,10 @@ const VIEWS: { id: EditorView; label: string; shortcut: string }[] = [
 export interface ToolbarProps {
   /** Additional class name */
   className?: string;
+  /** Whether the Files panel is currently shown */
+  showFiles?: boolean;
+  /** Toggle the Files panel. When provided, a "Files" button appears in the toolbar. */
+  onToggleFiles?: () => void;
 }
 
 interface ToolbarButton {
@@ -113,7 +117,7 @@ function isTiptapActive(editor: TiptapEditor, id: string): boolean {
  * - WYSIWYG: calls Tiptap chain commands (toggleBold, etc.)
  * - Raw: appends markdown syntax to the source
  */
-export function Toolbar({ className }: ToolbarProps) {
+export function Toolbar({ className, showFiles, onToggleFiles }: ToolbarProps) {
   const {
     activeView,
     setActiveView,
@@ -465,6 +469,22 @@ export function Toolbar({ className }: ToolbarProps) {
           )}
         </div>
       )}
+
+      {/* Spacer pushes right-side buttons to the end */}
+      {onToggleFiles && <div style={{ flex: 1 }} />}
+
+      {/* Files toggle — visible when callback is provided */}
+      {onToggleFiles && (
+        <button
+          className={`squisq-toolbar-button squisq-toolbar-files-toggle${showFiles ? ' squisq-toolbar-button--active' : ''}`}
+          onClick={onToggleFiles}
+          title={showFiles ? 'Hide Files panel' : 'Show Files panel'}
+          aria-pressed={showFiles}
+          aria-label="Toggle Files panel"
+        >
+          {'\u{1F4CE}'}
+        </button>
+      )}
     </div>
   );
 }