@bendyline/squisq-editor-react 1.0.1 → 1.1.0

package/src/hooks/useFileDrop.ts

@@ -0,0 +1,226 @@
+/**
+ * useFileDrop
+ *
+ * React hook that manages HTML5 drag-and-drop state for file uploads.
+ * Tracks whether files are being dragged over the target element,
+ * classifies dragged file types (media vs text), and dispatches
+ * drop events to callers.
+ */
+
+import { useCallback, useRef, useState } from 'react';
+
+// ─── File classification ────────────────────────────────
+
+const MEDIA_EXTENSIONS = new Set([
+  'png',
+  'jpg',
+  'jpeg',
+  'gif',
+  'webp',
+  'svg',
+  'avif',
+  'ico',
+  'mp4',
+  'webm',
+  'mov',
+  'avi',
+  'mp3',
+  'wav',
+  'ogg',
+  'aac',
+  'm4a',
+  'flac',
+]);
+
+const TEXT_EXTENSIONS = new Set(['md', 'txt', 'docx']);
+
+export type FileCategory = 'media' | 'text' | 'unknown';
+export type DragContentType = 'media' | 'text' | 'mixed' | null;
+export type DropTarget = 'media' | 'insert' | 'replace';
+
+function extensionOf(name: string): string {
+  const dot = name.lastIndexOf('.');
+  return dot >= 0 ? name.slice(dot + 1).toLowerCase() : '';
+}
+
+export function classifyFile(file: { name: string; type: string }): FileCategory {
+  const ext = extensionOf(file.name);
+  if (MEDIA_EXTENSIONS.has(ext)) return 'media';
+  if (TEXT_EXTENSIONS.has(ext)) return 'text';
+
+  // Fallback to MIME type
+  if (
+    file.type.startsWith('image/') ||
+    file.type.startsWith('video/') ||
+    file.type.startsWith('audio/')
+  ) {
+    return 'media';
+  }
+  if (file.type === 'text/plain' || file.type === 'text/markdown') {
+    return 'text';
+  }
+  return 'unknown';
+}
+
+/**
+ * Classify dragged items from a DataTransfer during dragenter/dragover.
+ * Browsers restrict full file access during drag — only MIME types are
+ * available via DataTransferItem.type.
+ */
+function classifyDataTransferItems(items: DataTransferItemList): DragContentType {
+  let hasMedia = false;
+  let hasText = false;
+
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i];
+    if (item.kind !== 'file') continue;
+
+    const mime = item.type.toLowerCase();
+    if (mime.startsWith('image/') || mime.startsWith('video/') || mime.startsWith('audio/')) {
+      hasMedia = true;
+    } else if (
+      mime === 'text/plain' ||
+      mime === 'text/markdown' ||
+      mime === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
+    ) {
+      hasText = true;
+    } else {
+      // Unknown MIME — browsers often report '' for many file types during drag.
+      // We can't classify, so assume mixed to show all drop zones.
+      hasMedia = true;
+      hasText = true;
+    }
+  }
+
+  if (hasMedia && hasText) return 'mixed';
+  if (hasMedia) return 'media';
+  if (hasText) return 'text';
+  return null;
+}
+
+// ─── Hook ────────────────────────────────────────────────
+
+export interface UseFileDropOptions {
+  /** Called when files are dropped on a specific target zone. */
+  onDrop: (files: File[], target: DropTarget) => void;
+  /** Whether drop is enabled (default: true) */
+  enabled?: boolean;
+}
+
+export interface UseFileDropResult {
+  /** Whether a drag-with-files is currently hovering over the container */
+  isDragging: boolean;
+  /** Classification of the dragged content */
+  dragContentType: DragContentType;
+  /** Attach these to the container element */
+  containerProps: {
+    onDragEnter: (e: React.DragEvent) => void;
+    onDragOver: (e: React.DragEvent) => void;
+    onDragLeave: (e: React.DragEvent) => void;
+    onDrop: (e: React.DragEvent) => void;
+  };
+  /** Create props for an individual drop zone target */
+  zoneProps: (target: DropTarget) => {
+    onDragOver: (e: React.DragEvent) => void;
+    onDrop: (e: React.DragEvent) => void;
+  };
+}
+
+export function useFileDrop({ onDrop, enabled = true }: UseFileDropOptions): UseFileDropResult {
+  const [isDragging, setIsDragging] = useState(false);
+  const [dragContentType, setDragContentType] = useState<DragContentType>(null);
+
+  // Counter-based tracking: dragenter/dragleave fire on child elements,
+  // so we track a count rather than a boolean.
+  const dragCounterRef = useRef(0);
+
+  const handleDragEnter = useCallback(
+    (e: React.DragEvent) => {
+      if (!enabled) return;
+      e.preventDefault();
+      dragCounterRef.current++;
+
+      if (dragCounterRef.current === 1) {
+        setIsDragging(true);
+        if (e.dataTransfer.items) {
+          setDragContentType(classifyDataTransferItems(e.dataTransfer.items));
+        } else {
+          // Fallback: can't classify, show all zones
+          setDragContentType('mixed');
+        }
+      }
+    },
+    [enabled],
+  );
+
+  const handleDragOver = useCallback(
+    (e: React.DragEvent) => {
+      if (!enabled) return;
+      e.preventDefault();
+      // Required to allow drop
+      e.dataTransfer.dropEffect = 'copy';
+    },
+    [enabled],
+  );
+
+  const handleDragLeave = useCallback(
+    (e: React.DragEvent) => {
+      if (!enabled) return;
+      e.preventDefault();
+      dragCounterRef.current = Math.max(0, dragCounterRef.current - 1);
+
+      if (dragCounterRef.current === 0) {
+        setIsDragging(false);
+        setDragContentType(null);
+      }
+    },
+    [enabled],
+  );
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      if (!enabled) return;
+      e.preventDefault();
+      dragCounterRef.current = 0;
+      setIsDragging(false);
+      setDragContentType(null);
+      // Actual file handling is done by zone-specific onDrop
+    },
+    [enabled],
+  );
+
+  const zoneProps = useCallback(
+    (target: DropTarget) => ({
+      onDragOver: (e: React.DragEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        e.dataTransfer.dropEffect = 'copy';
+      },
+      onDrop: (e: React.DragEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        dragCounterRef.current = 0;
+        setIsDragging(false);
+        setDragContentType(null);
+
+        const files = Array.from(e.dataTransfer.files);
+        if (files.length > 0) {
+          onDrop(files, target);
+        }
+      },
+    }),
+    [onDrop],
+  );
+
+  return {
+    isDragging,
+    dragContentType,
+    containerProps: {
+      onDragEnter: handleDragEnter,
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+    },
+    zoneProps,
+  };
+}

package/src/index.ts

@@ -48,9 +48,32 @@ export type { ViewSwitcherProps } from './ViewSwitcher.js';
 export { Toolbar } from './Toolbar.js';
 export type { ToolbarProps } from './Toolbar.js';
 
+export { MediaBin } from './MediaBin.js';
+export type { MediaBinProps } from './MediaBin.js';
+
 export { StatusBar } from './StatusBar.js';
 export type { StatusBarProps } from './StatusBar.js';
 
+// Drag-and-drop
+export { DropZoneOverlay } from './DropZoneOverlay.js';
+export type { DropZoneOverlayProps } from './DropZoneOverlay.js';
+
+export { useFileDrop, classifyFile } from './hooks/useFileDrop.js';
+export type {
+  FileCategory,
+  DragContentType,
+  DropTarget,
+  UseFileDropOptions,
+  UseFileDropResult,
+} from './hooks/useFileDrop.js';
+
+export {
+  partitionFiles,
+  processMediaFiles,
+  processTextFile,
+  processTextFiles,
+} from './utils/dropUtils.js';
+
 // Bridge utilities
 export { markdownToTiptap, tiptapToMarkdown } from './tiptapBridge.js';
 

package/src/styles/editor.css

@@ -613,3 +613,321 @@
     padding-top: 2px;
   }
 }
+
+/* ─── Media Bin ──────────────────────────────────────── */
+
+.squisq-media-bin {
+  width: 220px;
+  border-left: 1px solid #e5e7eb;
+  background: #f9fafb;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.squisq-media-bin-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 10px;
+  border-bottom: 1px solid #e5e7eb;
+  flex-shrink: 0;
+}
+
+.squisq-media-bin-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: #374151;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.squisq-media-bin-upload {
+  font-size: 11px;
+  padding: 2px 8px;
+  cursor: pointer;
+  background: #e5e7eb;
+  color: #374151;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+}
+
+.squisq-media-bin-upload:hover {
+  background: #d1d5db;
+}
+
+.squisq-media-bin-upload:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.squisq-media-bin-list {
+  flex: 1;
+  overflow: auto;
+  padding: 4px 0;
+}
+
+.squisq-media-bin-empty {
+  padding: 20px 10px;
+  font-size: 12px;
+  color: #9ca3af;
+  text-align: center;
+  line-height: 1.5;
+}
+
+.squisq-media-bin-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  cursor: default;
+  font-size: 11px;
+  color: #374151;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.squisq-media-bin-thumb {
+  width: 32px;
+  height: 32px;
+  object-fit: cover;
+  border-radius: 2px;
+  flex-shrink: 0;
+  background: #e5e7eb;
+}
+
+.squisq-media-bin-icon {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  flex-shrink: 0;
+  background: #f3f4f6;
+  border-radius: 2px;
+}
+
+.squisq-media-bin-meta {
+  min-width: 0;
+  flex: 1;
+}
+
+.squisq-media-bin-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.squisq-media-bin-size {
+  font-size: 10px;
+  color: #9ca3af;
+}
+
+/* ─── Media Bin (dark) ───────────────────────────────── */
+
+.squisq-media-bin--dark,
+.squisq-editor-shell[data-theme='dark'] .squisq-media-bin {
+  background: #1e293b;
+  border-left-color: #374151;
+}
+
+.squisq-media-bin--dark .squisq-media-bin-header,
+.squisq-editor-shell[data-theme='dark'] .squisq-media-bin .squisq-media-bin-header {
+  border-bottom-color: #374151;
+}
+
+.squisq-media-bin--dark .squisq-media-bin-title,
+.squisq-editor-shell[data-theme='dark'] .squisq-media-bin .squisq-media-bin-title {
+  color: #d1d5db;
+}
+
+.squisq-media-bin--dark .squisq-media-bin-upload,
+.squisq-editor-shell[data-theme='dark'] .squisq-media-bin .squisq-media-bin-upload {
+  background: #374151;
+  color: #d1d5db;
+  border-color: #4b5563;
+}
+
+.squisq-media-bin--dark .squisq-media-bin-upload:hover,
+.squisq-editor-shell[data-theme='dark'] .squisq-media-bin .squisq-media-bin-upload:hover {
+  background: #4b5563;
+}
+
+.squisq-media-bin--dark .squisq-media-bin-item,
+.squisq-editor-shell[data-theme='dark'] .squisq-media-bin .squisq-media-bin-item {
+  color: #d1d5db;
+  border-bottom-color: #2d3748;
+}
+
+.squisq-media-bin--dark .squisq-media-bin-icon,
+.squisq-editor-shell[data-theme='dark'] .squisq-media-bin .squisq-media-bin-icon {
+  background: #374151;
+}
+
+.squisq-media-bin--dark .squisq-media-bin-thumb,
+.squisq-editor-shell[data-theme='dark'] .squisq-media-bin .squisq-media-bin-thumb {
+  background: #374151;
+}
+
+.squisq-media-bin--dark .squisq-media-bin-size,
+.squisq-editor-shell[data-theme='dark'] .squisq-media-bin .squisq-media-bin-size {
+  color: #6b7280;
+}
+
+.squisq-media-bin--dark .squisq-media-bin-empty,
+.squisq-editor-shell[data-theme='dark'] .squisq-media-bin .squisq-media-bin-empty {
+  color: #6b7280;
+}
+
+/* ============================================
+   Drop Zone Overlay
+   ============================================ */
+
+.squisq-drop-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(4px);
+}
+
+.squisq-drop-overlay-inner {
+  display: flex;
+  gap: 24px;
+  padding: 32px;
+  max-width: 90%;
+}
+
+.squisq-drop-zone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 200px;
+  min-height: 180px;
+  padding: 24px 16px;
+  border: 2px dashed #94a3b8;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.9);
+  cursor: default;
+  transition:
+    border-color 0.15s,
+    background-color 0.15s,
+    transform 0.15s;
+  text-align: center;
+  user-select: none;
+}
+
+.squisq-drop-zone--active {
+  transform: scale(1.04);
+}
+
+.squisq-drop-zone--disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+/* Variant colors */
+.squisq-drop-zone--media {
+  border-color: #60a5fa;
+}
+.squisq-drop-zone--media.squisq-drop-zone--active {
+  border-color: #3b82f6;
+  background: rgba(219, 234, 254, 0.9);
+}
+
+.squisq-drop-zone--insert {
+  border-color: #34d399;
+}
+.squisq-drop-zone--insert.squisq-drop-zone--active {
+  border-color: #10b981;
+  background: rgba(209, 250, 229, 0.9);
+}
+
+.squisq-drop-zone--replace {
+  border-color: #f97316;
+}
+.squisq-drop-zone--replace.squisq-drop-zone--active {
+  border-color: #ea580c;
+  background: rgba(255, 237, 213, 0.9);
+}
+
+/* Zone content */
+.squisq-drop-zone-icon {
+  font-size: 32px;
+  line-height: 1;
+}
+
+.squisq-drop-zone-label {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.squisq-drop-zone-desc {
+  font-size: 12px;
+  color: #64748b;
+  line-height: 1.4;
+}
+
+/* Dark mode */
+.squisq-editor-shell[data-theme='dark'] .squisq-drop-overlay {
+  background: rgba(17, 24, 39, 0.88);
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-drop-zone {
+  border-color: #4b5563;
+  background: rgba(31, 41, 55, 0.9);
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-drop-zone--media {
+  border-color: #3b82f6;
+}
+.squisq-editor-shell[data-theme='dark'] .squisq-drop-zone--media.squisq-drop-zone--active {
+  border-color: #60a5fa;
+  background: rgba(30, 58, 138, 0.6);
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-drop-zone--insert {
+  border-color: #10b981;
+}
+.squisq-editor-shell[data-theme='dark'] .squisq-drop-zone--insert.squisq-drop-zone--active {
+  border-color: #34d399;
+  background: rgba(6, 78, 59, 0.6);
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-drop-zone--replace {
+  border-color: #ea580c;
+}
+.squisq-editor-shell[data-theme='dark'] .squisq-drop-zone--replace.squisq-drop-zone--active {
+  border-color: #f97316;
+  background: rgba(124, 45, 18, 0.6);
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-drop-zone-label {
+  color: #e2e8f0;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-drop-zone-desc {
+  color: #94a3b8;
+}
+
+/* Responsive */
+@media (max-width: 640px) {
+  .squisq-drop-overlay-inner {
+    flex-direction: column;
+    gap: 16px;
+    align-items: center;
+  }
+
+  .squisq-drop-zone {
+    width: 100%;
+    max-width: 240px;
+    min-height: 120px;
+  }
+}

package/src/utils/dropUtils.ts

@@ -0,0 +1,88 @@
+/**
+ * Drop Utilities
+ *
+ * File processing pipeline for dropped files. Classifies files by type,
+ * processes media files into a MediaProvider, and converts text files
+ * (.md, .txt, .docx) to markdown strings.
+ */
+
+import type { MediaProvider } from '@bendyline/squisq/schemas';
+import { stringifyMarkdown } from '@bendyline/squisq/markdown';
+import { docxToMarkdownDoc } from '@bendyline/squisq-formats/docx';
+import { classifyFile, type FileCategory } from '../hooks/useFileDrop';
+
+export type { FileCategory };
+export { classifyFile };
+
+/**
+ * Partition an array of files into media and text categories.
+ * Files with unknown type are skipped.
+ */
+export function partitionFiles(files: File[]): { media: File[]; text: File[] } {
+  const media: File[] = [];
+  const text: File[] = [];
+
+  for (const file of files) {
+    const cat = classifyFile(file);
+    if (cat === 'media') media.push(file);
+    else if (cat === 'text') text.push(file);
+  }
+
+  return { media, text };
+}
+
+/**
+ * Add media files to a MediaProvider. Returns the relative paths
+ * assigned by the provider.
+ */
+export async function processMediaFiles(
+  files: File[],
+  mediaProvider: MediaProvider,
+): Promise<string[]> {
+  const paths: string[] = [];
+
+  for (const file of files) {
+    const buffer = await file.arrayBuffer();
+    const mimeType = file.type || 'application/octet-stream';
+    const path = await mediaProvider.addMedia(file.name, buffer, mimeType);
+    paths.push(path);
+  }
+
+  return paths;
+}
+
+/**
+ * Read a text-content file and return its content as a markdown string.
+ *
+ * - `.md` and `.txt` files are read as UTF-8 text directly
+ * - `.docx` files are converted to markdown via `@bendyline/squisq-formats/docx`
+ */
+export async function processTextFile(file: File): Promise<string> {
+  const ext = file.name.split('.').pop()?.toLowerCase() ?? '';
+
+  if (ext === 'md' || ext === 'txt') {
+    return await file.text();
+  }
+
+  if (ext === 'docx') {
+    const buffer = await file.arrayBuffer();
+    const markdownDoc = await docxToMarkdownDoc(buffer);
+    return stringifyMarkdown(markdownDoc);
+  }
+
+  return await file.text();
+}
+
+/**
+ * Process multiple text files and concatenate their content.
+ */
+export async function processTextFiles(files: File[]): Promise<string> {
+  const results: string[] = [];
+
+  for (const file of files) {
+    const content = await processTextFile(file);
+    results.push(content);
+  }
+
+  return results.join('\n\n');
+}