@bendyline/squisq-editor-react 1.0.1 → 1.1.1

package/src/WysiwygEditor.tsx

@@ -21,6 +21,7 @@ import TaskList from '@tiptap/extension-task-list';
 import TaskItem from '@tiptap/extension-task-item';
 import Placeholder from '@tiptap/extension-placeholder';
 import { HeadingWithTemplate } from './TemplateAnnotation';
+import { ImageWithMediaProvider } from './ImageNodeView';
 import { useEditorContext } from './EditorContext';
 import { markdownToTiptap, tiptapToMarkdown } from './tiptapBridge';
 
@@ -73,6 +74,7 @@ export function WysiwygEditor({
       TableHeader,
       TaskList,
       TaskItem.configure({ nested: true }),
+      ImageWithMediaProvider.configure({ inline: false }),
       Placeholder.configure({ placeholder }),
     ],
     content: markdownToTiptap(stripFrontmatter(markdownSource).body),
@@ -117,7 +119,7 @@ export function WysiwygEditor({
 
   return (
     <div
-      className={className}
+      className={`squisq-wysiwyg-container${className ? ` ${className}` : ''}`}
       style={{ width: '100%', height: '100%', overflow: 'auto' }}
       data-testid="wysiwyg-container"
     >

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

@@ -40,6 +40,12 @@ export type { WysiwygEditorProps } from './WysiwygEditor.js';
 
 export { PreviewPanel } from './PreviewPanel.js';
 export type { PreviewPanelProps } from './PreviewPanel.js';
+export {
+  PreviewSettingsProvider,
+  PreviewToolbarControls,
+  usePreviewSettings,
+} from './PreviewControls.js';
+export type { PreviewSettings } from './PreviewControls.js';
 
 // Chrome (for custom layouts)
 export { ViewSwitcher } from './ViewSwitcher.js';
@@ -48,9 +54,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

@@ -58,7 +58,7 @@
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  padding: 4px 12px;
+  padding: 0 12px 0 0;
   gap: 2px;
 }
 
@@ -67,7 +67,12 @@
 .squisq-toolbar-view-tabs {
   display: flex;
   gap: 0;
-  margin-right: 2px;
+  margin-right: 12px;
+  padding: 0 16px 0 12px;
+  background: rgba(0, 0, 0, 0.07);
+  border-right: 1px solid rgba(0, 0, 0, 0.12);
+  align-self: stretch;
+  align-items: center;
 }
 
 .squisq-toolbar-actions {
@@ -80,7 +85,7 @@
   padding: 4px 14px;
   border: none;
   background: transparent;
-  color: #6b7280;
+  color: #4b5563;
   cursor: pointer;
   font-size: 13px;
   font-weight: 500;
@@ -91,11 +96,12 @@
 }
 
 .squisq-toolbar-view-tab:hover {
-  color: #1f2937;
+  color: #111827;
 }
 
 .squisq-toolbar-view-tab--active {
-  color: #2563eb;
+  color: #1d4ed8;
+  font-weight: 600;
   border-bottom-color: #2563eb;
 }
 
@@ -237,12 +243,18 @@
 
 /* ─── WYSIWYG Editor ─────────────────────────────────── */
 
+.squisq-wysiwyg-container {
+  background: #eeecea;
+}
+
 .squisq-wysiwyg-editor {
   padding: 16px 24px;
   max-width: 800px;
   margin: 0 auto;
   outline: none;
   min-height: 100%;
+  background: #fff;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.06);
 }
 
 .squisq-wysiwyg-editor h1 {
@@ -437,17 +449,22 @@
   /* no border-top — sits directly in header */
 }
 
+.squisq-editor-shell[data-theme='dark'] .squisq-toolbar-view-tabs {
+  background: rgba(255, 255, 255, 0.08);
+  border-right-color: rgba(255, 255, 255, 0.15);
+}
+
 /* View tabs (dark) */
 .squisq-editor-shell[data-theme='dark'] .squisq-toolbar-view-tab {
-  color: #9ca3af;
+  color: #d1d5db;
 }
 
 .squisq-editor-shell[data-theme='dark'] .squisq-toolbar-view-tab:hover {
-  color: #e5e7eb;
+  color: #f9fafb;
 }
 
 .squisq-editor-shell[data-theme='dark'] .squisq-toolbar-view-tab--active {
-  color: #60a5fa;
+  color: #93c5fd;
   border-bottom-color: #60a5fa;
 }
 
@@ -516,8 +533,14 @@
 }
 
 /* WYSIWYG Editor */
+.squisq-editor-shell[data-theme='dark'] .squisq-wysiwyg-container {
+  background: #0f1219;
+}
+
 .squisq-editor-shell[data-theme='dark'] .squisq-wysiwyg-editor {
   color: #e5e7eb;
+  background: #111827;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
 }
 
 .squisq-editor-shell[data-theme='dark'] .squisq-wysiwyg-editor blockquote {
@@ -613,3 +636,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;
+  }
+}