@geminilight/mindos 0.6.72 → 0.6.73

package/_standalone/components/Editor.tsx

@@ -0,0 +1,242 @@
+'use client';
+
+import { useEffect, useRef, useCallback, useState } from 'react';
+import { EditorView, basicSetup } from 'codemirror';
+import { markdown } from '@codemirror/lang-markdown';
+import { oneDark } from '@codemirror/theme-one-dark';
+import { EditorState } from '@codemirror/state';
+import { Image as ImageIcon } from 'lucide-react';
+import { useEditorImageUpload } from '@/hooks/useEditorImageUpload';
+import { toast } from '@/lib/toast';
+
+interface EditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  language?: 'markdown' | 'plain';
+}
+
+const darkTheme = EditorView.theme({
+  '&': {
+    backgroundColor: 'var(--background)',
+    height: '100%',
+    fontSize: '0.875rem',
+    fontFamily: 'var(--font-ibm-plex-mono), ui-monospace, monospace',
+  },
+  '.cm-scroller': {
+    overflow: 'auto',
+    lineHeight: '1.6',
+  },
+  '.cm-content': {
+    padding: '16px',
+    caretColor: 'var(--amber)',
+  },
+  '.cm-focused': {
+    outline: 'none',
+  },
+  '.cm-line': {
+    padding: '0 4px',
+  },
+  '.cm-gutters': {
+    backgroundColor: 'var(--card)',
+    borderRight: '1px solid var(--border)',
+    color: 'var(--muted-foreground)',
+  },
+  '.cm-activeLineGutter': {
+    backgroundColor: 'var(--muted)',
+  },
+  '.cm-activeLine': {
+    backgroundColor: 'color-mix(in srgb, var(--muted) 50%, transparent)',
+  },
+  '.cm-selectionBackground': {
+    backgroundColor: 'color-mix(in srgb, var(--amber) 25%, transparent)',
+  },
+  '&.cm-focused .cm-selectionBackground': {
+    backgroundColor: 'color-mix(in srgb, var(--amber) 38%, transparent)',
+  },
+  '.cm-cursor': {
+    borderLeftColor: 'var(--amber)',
+    borderLeftWidth: '2px',
+  },
+});
+
+export default function Editor({ value, onChange, language = 'markdown' }: EditorProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const viewRef = useRef<EditorView | null>(null);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+
+  // Track whether update is from external value change
+  const isExternalUpdate = useRef(false);
+
+  const { uploadToMedia, isUploading } = useEditorImageUpload();
+  const uploadRef = useRef(uploadToMedia);
+  uploadRef.current = uploadToMedia;
+  const [isMarkdown] = useState(language === 'markdown');
+
+  // Stable image insertion function via ref
+  const insertImagesRef = useRef(async (files: File[]) => {});
+  insertImagesRef.current = async (files: File[]) => {
+    const view = viewRef.current;
+    if (!view) return;
+
+    try {
+      const uploadedPaths = await uploadRef.current(files);
+
+      for (const p of uploadedPaths) {
+        const md = `![image](${p})\n`;
+        view.dispatch({
+          changes: {
+            from: view.state.selection.main.head,
+            insert: md,
+          },
+        });
+      }
+
+      toast.success('Images inserted');
+    } catch (err) {
+      toast.error('Failed to insert images');
+      console.error(err);
+    }
+  };
+
+  // Handle file picker (image button click)
+  const handlePickImages = useCallback(() => {
+    if (!isMarkdown) return;
+
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.multiple = true;
+    input.accept = 'image/*';
+    input.onchange = (e) => {
+      const files = Array.from((e.target as HTMLInputElement).files ?? []);
+      if (files.length > 0) {
+        insertImagesRef.current(files);
+      }
+    };
+    input.click();
+  }, [isMarkdown]);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    const updateListener = EditorView.updateListener.of((update) => {
+      if (update.docChanged && !isExternalUpdate.current) {
+        onChangeRef.current(update.state.doc.toString());
+      }
+    });
+
+    const state = EditorState.create({
+      doc: value,
+      extensions: [
+        basicSetup,
+        oneDark,
+        darkTheme,
+        language === 'markdown' ? markdown() : [],
+        updateListener,
+        EditorView.lineWrapping,
+      ],
+    });
+
+    const view = new EditorView({
+      state,
+      parent: containerRef.current,
+    });
+
+    viewRef.current = view;
+
+    return () => {
+      view.destroy();
+      viewRef.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Set up paste and drag/drop handlers
+  useEffect(() => {
+    if (!isMarkdown) return;
+
+    const container = containerRef.current;
+    if (!container) return;
+
+    const handlePaste = (e: ClipboardEvent) => {
+      const items = e.clipboardData?.items;
+      if (!items) return;
+
+      const files: File[] = [];
+      for (let i = 0; i < items.length; i++) {
+        const item = items[i];
+        if (item.kind === 'file' && item.type.startsWith('image/')) {
+          const file = item.getAsFile();
+          if (file) files.push(file);
+        }
+      }
+
+      if (files.length > 0) {
+        e.preventDefault();
+        insertImagesRef.current(files);
+      }
+    };
+
+    const handleDrop = (e: DragEvent) => {
+      const files = Array.from(e.dataTransfer?.files ?? []).filter((f) =>
+        f.type.startsWith('image/'),
+      );
+      if (files.length > 0) {
+        e.preventDefault();
+        e.stopPropagation();
+        insertImagesRef.current(files);
+      }
+    };
+
+    container.addEventListener('paste', handlePaste as EventListener);
+    container.addEventListener('drop', handleDrop as EventListener);
+
+    return () => {
+      container.removeEventListener('paste', handlePaste as EventListener);
+      container.removeEventListener('drop', handleDrop as EventListener);
+    };
+  }, [isMarkdown]);
+
+  // Sync external value changes to editor
+  useEffect(() => {
+    const view = viewRef.current;
+    if (!view) return;
+    const current = view.state.doc.toString();
+    if (current !== value) {
+      isExternalUpdate.current = true;
+      view.dispatch({
+        changes: { from: 0, to: current.length, insert: value },
+      });
+      isExternalUpdate.current = false;
+    }
+  }, [value]);
+
+  return (
+    <div className="relative h-full w-full flex flex-col">
+      {/* Image insert button for markdown mode */}
+      {isMarkdown && (
+        <div className="px-2 py-1.5 border-b border-border bg-card/50 flex items-center gap-1">
+          <button
+            onClick={handlePickImages}
+            disabled={isUploading}
+            className="p-1.5 rounded hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
+            title="Insert images (Ctrl+V or drag & drop)"
+          >
+            <ImageIcon size={14} />
+            <span>Images</span>
+          </button>
+          {isUploading && (
+            <span className="text-xs text-muted-foreground ml-2">Uploading...</span>
+          )}
+        </div>
+      )}
+
+      {/* Editor container */}
+      <div
+        ref={containerRef}
+        className="h-full w-full overflow-hidden rounded-lg border border-border"
+        style={{ minHeight: '400px' }}
+      />
+    </div>
+  );
+}

package/_standalone/components/EditorWrapper.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+const Editor = dynamic(() => import('./Editor'), {
+  ssr: false,
+  loading: () => (
+    <div className="h-full w-full min-h-[400px] rounded-lg border border-border bg-background flex items-center justify-center">
+      <div className="flex items-center gap-2 text-muted-foreground text-sm">
+        <div className="w-4 h-4 border-2 border-border border-t-foreground rounded-full animate-spin" />
+        <span>Loading editor...</span>
+      </div>
+    </div>
+  ),
+});
+
+export default Editor;

package/_standalone/components/ExportModal.tsx

@@ -0,0 +1,223 @@
+'use client';
+
+import { useState, useCallback, useRef } from 'react';
+import { X, Download, FileText, Globe, Archive, Check, Loader2 } from 'lucide-react';
+import { useLocale } from '@/lib/stores/locale-store';
+import { toast } from '@/lib/toast';
+
+type ExportFormat = 'md' | 'html' | 'zip' | 'zip-html';
+
+interface ExportModalProps {
+  open: boolean;
+  onClose: () => void;
+  filePath: string;
+  isDirectory: boolean;
+  fileName: string;
+}
+
+export default function ExportModal({ open, onClose, filePath, isDirectory, fileName }: ExportModalProps) {
+  const { t } = useLocale();
+  const [format, setFormat] = useState<ExportFormat>(isDirectory ? 'zip' : 'md');
+  const [state, setState] = useState<'idle' | 'exporting' | 'done' | 'error'>('idle');
+  const [error, setError] = useState('');
+  const abortRef = useRef<AbortController | null>(null);
+
+  const handleExport = useCallback(() => {
+    setState('exporting');
+    setError('');
+
+    const controller = new AbortController();
+    abortRef.current = controller;
+
+    const url = `/api/export?path=${encodeURIComponent(filePath)}&format=${format}`;
+
+    fetch(url, { signal: controller.signal })
+      .then(res => {
+        if (!res.ok) {
+          const ct = res.headers.get('content-type') ?? '';
+          if (ct.includes('json')) {
+            return res.json().then((data: { error?: string }) => { throw new Error(data.error || 'Export failed'); });
+          }
+          throw new Error(`Export failed (${res.status})`);
+        }
+        return res.blob().then(blob => ({ blob, res }));
+      })
+      .then(({ blob, res }) => {
+        const disposition = res.headers.get('Content-Disposition') ?? '';
+        const match = disposition.match(/filename="?([^"]+)"?/);
+        const downloadName = match ? decodeURIComponent(match[1]) : fileName;
+
+        const link = document.createElement('a');
+        link.href = URL.createObjectURL(blob);
+        link.download = downloadName;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        URL.revokeObjectURL(link.href);
+
+        setState('done');
+        toast.success(t.export?.downloaded ?? 'Downloaded');
+      })
+      .catch((err: Error) => {
+        if (err.name === 'AbortError') return; // user cancelled
+        setState('error');
+        setError(err.message ?? 'Export failed');
+      })
+      .finally(() => { abortRef.current = null; });
+  }, [filePath, format, fileName, t]);
+
+  const handleCancel = useCallback(() => {
+    if (abortRef.current) {
+      abortRef.current.abort();
+      abortRef.current = null;
+    }
+    setState('idle');
+    setError('');
+  }, []);
+
+  const handleRetry = useCallback(() => {
+    setState('idle');
+    setError('');
+  }, []);
+
+  const handleClose = useCallback(() => {
+    if (abortRef.current) abortRef.current.abort();
+    abortRef.current = null;
+    setState('idle');
+    setError('');
+    onClose();
+  }, [onClose]);
+
+  if (!open) return null;
+
+  const formats: { value: ExportFormat; label: string; desc: string; icon: React.ReactNode; disabled?: boolean }[] = isDirectory
+    ? [
+        { value: 'zip', label: t.export?.formatZipMd ?? 'Markdown ZIP', desc: t.export?.formatZipMdDesc ?? 'All files in original format', icon: <Archive size={14} /> },
+        { value: 'zip-html', label: t.export?.formatZipHtml ?? 'HTML ZIP', desc: t.export?.formatZipHtmlDesc ?? 'All files as webpages', icon: <Globe size={14} /> },
+      ]
+    : [
+        { value: 'md', label: t.export?.formatMd ?? 'Markdown (.md)', desc: t.export?.formatMdDesc ?? 'Original format, editable', icon: <FileText size={14} /> },
+        { value: 'html', label: t.export?.formatHtml ?? 'HTML (.html)', desc: t.export?.formatHtmlDesc ?? 'Static webpage, shareable', icon: <Globe size={14} /> },
+      ];
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center modal-backdrop" onClick={state === 'exporting' ? undefined : handleClose}>
+      <div
+        className="bg-card border border-border rounded-xl shadow-xl max-w-md w-full mx-4 animate-in fade-in-0 zoom-in-95 duration-200"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="export-modal-title"
+        onClick={e => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-5 py-4 border-b border-border">
+          <div className="flex items-center gap-2">
+            <Download size={15} className="text-[var(--amber)]" />
+            <h3 id="export-modal-title" className="text-sm font-semibold">
+              {isDirectory ? (t.export?.exportSpace ?? 'Export Space') : (t.export?.exportFile ?? 'Export File')}
+            </h3>
+          </div>
+          <button onClick={handleClose} className="p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" aria-label={t.export?.cancel ?? 'Close'}>
+            <X size={14} />
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="px-5 py-4">
+          {state === 'done' ? (
+            <div className="text-center py-6">
+              <div className="w-10 h-10 rounded-full bg-success/10 flex items-center justify-center mx-auto mb-3">
+                <Check size={20} className="text-success" />
+              </div>
+              <p className="text-sm font-medium">{t.export?.done ?? 'Export Complete'}</p>
+              <p className="text-xs text-muted-foreground mt-1">{fileName}</p>
+            </div>
+          ) : state === 'error' ? (
+            <div className="text-center py-6">
+              <p className="text-sm font-medium text-error">{t.export?.error ?? 'Export failed'}</p>
+              <p className="text-xs text-muted-foreground mt-1">{error}</p>
+            </div>
+          ) : (
+            <>
+              <p className="text-xs text-muted-foreground mb-3 truncate" title={filePath}>{filePath}</p>
+              <p className="text-xs font-medium text-foreground mb-2">{t.export?.chooseFormat ?? 'Choose format'}</p>
+              <div className="space-y-1.5">
+                {formats.map(f => (
+                  <label
+                    key={f.value}
+                    className={`flex items-start gap-3 p-3 rounded-lg border cursor-pointer transition-all ${
+                      format === f.value
+                        ? 'border-[var(--amber)]/40 bg-[var(--amber-dim)]'
+                        : 'border-border hover:border-border/80 hover:bg-muted/30'
+                    } ${f.disabled ? 'opacity-40 cursor-not-allowed' : ''}`}
+                  >
+                    <input
+                      type="radio"
+                      name="export-format"
+                      value={f.value}
+                      checked={format === f.value}
+                      onChange={() => !f.disabled && setFormat(f.value)}
+                      disabled={f.disabled}
+                      className="sr-only"
+                    />
+                    <span className={`mt-0.5 ${format === f.value ? 'text-[var(--amber)]' : 'text-muted-foreground'}`}>
+                      {f.icon}
+                    </span>
+                    <div>
+                      <span className="text-sm font-medium text-foreground">{f.label}</span>
+                      <span className="text-xs text-muted-foreground block mt-0.5">{f.desc}</span>
+                    </div>
+                  </label>
+                ))}
+              </div>
+            </>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-end gap-2 px-5 py-3 border-t border-border">
+          {state === 'done' ? (
+            <>
+              <button onClick={handleRetry} className="px-3 py-1.5 rounded-md text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-muted transition-colors">
+                {t.export?.downloadAgain ?? 'Download Again'}
+              </button>
+              <button onClick={handleClose} className="px-3 py-1.5 rounded-md text-xs font-medium bg-[var(--amber-dim)] text-[var(--amber-text)] hover:opacity-80 transition-colors">
+                {t.export?.close ?? 'Done'}
+              </button>
+            </>
+          ) : state === 'error' ? (
+            <>
+              <button onClick={handleClose} className="px-3 py-1.5 rounded-md text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-muted transition-colors">
+                {t.export?.cancel ?? 'Cancel'}
+              </button>
+              <button onClick={handleRetry} className="px-3 py-1.5 rounded-md text-xs font-medium bg-[var(--amber-dim)] text-[var(--amber-text)] hover:opacity-80 transition-colors">
+                {t.export?.retry ?? 'Retry'}
+              </button>
+            </>
+          ) : state === 'exporting' ? (
+            <>
+              <button onClick={handleCancel} className="px-3 py-1.5 rounded-md text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-muted transition-colors">
+                {t.export?.cancel ?? 'Cancel'}
+              </button>
+              <span className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium text-[var(--amber-text)] opacity-70">
+                <Loader2 size={12} className="animate-spin" /> {t.export?.exporting ?? 'Exporting...'}
+              </span>
+            </>
+          ) : (
+            <>
+              <button onClick={handleClose} className="px-3 py-1.5 rounded-md text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-muted transition-colors">
+                {t.export?.cancel ?? 'Cancel'}
+              </button>
+              <button
+                onClick={handleExport}
+                className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium bg-[var(--amber-dim)] text-[var(--amber-text)] hover:opacity-80 transition-colors"
+              >
+                <Download size={12} /> {t.export?.exportButton ?? 'Export'}
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}