@geminilight/mindos 0.6.72 → 0.6.73

package/_standalone/components/TableOfContents.tsx

@@ -0,0 +1,207 @@
+'use client';
+
+import { useEffect, useState, useRef, useCallback, useMemo } from 'react';
+import { ChevronRight } from 'lucide-react';
+import GithubSlugger from 'github-slugger';
+import { useLocale } from '@/lib/stores/locale-store';
+import { cn } from '@/lib/utils';
+
+interface Heading {
+  id: string;
+  text: string;
+  level: number;
+}
+
+function parseHeadings(content: string): Heading[] {
+  const slugger = new GithubSlugger();
+  const lines = content.split('\n');
+  const headings: Heading[] = [];
+  let inCodeBlock = false;
+  for (const line of lines) {
+    if (/^(`{3,}|~{3,})/.test(line)) {
+      inCodeBlock = !inCodeBlock;
+      continue;
+    }
+    if (inCodeBlock) continue;
+    const match = line.match(/^(#{1,4})\s+(.+)/);
+    if (match) {
+      const level = match[1].length;
+      const text = match[2].trim();
+      const id = slugger.slug(text);
+      headings.push({ id, text, level });
+    }
+  }
+  return headings;
+}
+
+const TOPBAR_H = 46;
+const SCROLL_OFFSET = TOPBAR_H + 12;
+const NAV_W = 212;
+
+interface TableOfContentsProps {
+  content: string;
+}
+
+export default function TableOfContents({ content }: TableOfContentsProps) {
+  const { t } = useLocale();
+  const { headings, minLevel } = useMemo(() => {
+    const h = parseHeadings(content);
+    return { headings: h, minLevel: h.length > 0 ? Math.min(...h.map(x => x.level)) : 1 };
+  }, [content]);
+  const [activeId, setActiveId] = useState<string>('');
+  const [collapsed, setCollapsed] = useState(false);
+
+  // Broadcast TOC width to content area via CSS variables
+  useEffect(() => {
+    const root = document.documentElement.style;
+    root.setProperty('--toc-width', collapsed ? '0px' : `${NAV_W}px`);
+    if (collapsed) {
+      root.removeProperty('--toc-margin');
+    } else {
+      root.setProperty('--toc-margin', `${NAV_W + 8}px`);
+    }
+    return () => { root.removeProperty('--toc-width'); root.removeProperty('--toc-margin'); };
+  }, [collapsed]);
+  const observerRef = useRef<IntersectionObserver | null>(null);
+  const navRef = useRef<HTMLElement | null>(null);
+  const linkRefs = useRef<Map<string, HTMLAnchorElement>>(new Map());
+
+  const scrollActiveIntoView = useCallback((id: string) => {
+    const link = linkRefs.current.get(id);
+    const nav = navRef.current;
+    if (!link || !nav || !link.isConnected) return;
+    const navRect = nav.getBoundingClientRect();
+    const linkRect = link.getBoundingClientRect();
+    const isAbove = linkRect.top < navRect.top + 40;
+    const isBelow = linkRect.bottom > navRect.bottom - 40;
+    if (isAbove || isBelow) {
+      link.scrollIntoView({ block: 'center', behavior: 'auto' });
+    }
+  }, []);
+
+  useEffect(() => {
+    if (headings.length === 0) return;
+    const timer = setTimeout(() => {
+      const elements = headings
+        .map(h => document.getElementById(h.id))
+        .filter(Boolean) as HTMLElement[];
+      if (elements.length === 0) return;
+      observerRef.current?.disconnect();
+      observerRef.current = new IntersectionObserver(
+        (entries) => {
+          for (const entry of entries) {
+            if (entry.isIntersecting) {
+              setActiveId(entry.target.id);
+              scrollActiveIntoView(entry.target.id);
+              break;
+            }
+          }
+        },
+        { rootMargin: `-${SCROLL_OFFSET}px 0% -70% 0%`, threshold: 0 }
+      );
+      elements.forEach(el => observerRef.current?.observe(el));
+    }, 150);
+    return () => { clearTimeout(timer); observerRef.current?.disconnect(); };
+  // headings is derived from content via useMemo; scrollActiveIntoView is stable (no deps)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [headings]);
+
+  if (headings.length < 2) return null;
+
+  const handleClick = (e: React.MouseEvent, id: string) => {
+    e.preventDefault();
+    const el = document.getElementById(id);
+    if (!el) return;
+    const top = el.getBoundingClientRect().top + window.scrollY - SCROLL_OFFSET;
+    window.scrollTo({ top, behavior: 'smooth' });
+    setActiveId(id);
+  };
+
+  return (
+    <>
+      {/* Collapse / expand toggle — separate from aside so it stays visible */}
+      <button
+        onClick={() => setCollapsed(v => !v)}
+        className="hidden xl:flex fixed z-10 top-[46px] flex items-center justify-center w-5 h-8 rounded-l-md border border-r-0 border-border hover:bg-muted transition-colors"
+        style={{
+          right: `calc(var(--right-panel-width, 0px) + ${collapsed ? 0 : NAV_W}px)`,
+          background: 'var(--background)',
+          transition: 'right 200ms ease-in-out',
+        }}
+        title={collapsed ? t.view.tocExpand : t.view.tocCollapse}
+      >
+        <ChevronRight
+          size={11}
+          className="text-muted-foreground/60 transition-transform duration-200"
+          style={{ transform: collapsed ? 'rotate(180deg)' : 'rotate(0deg)' }}
+        />
+      </button>
+
+      {/* TOC panel */}
+      <aside
+        className="hidden xl:flex flex-col fixed z-10 overflow-hidden"
+        style={{
+          top: TOPBAR_H,
+          height: `calc(100vh - ${TOPBAR_H}px)`,
+          width: NAV_W,
+          right: 'var(--right-panel-width, 0px)',
+          transform: collapsed ? `translateX(${NAV_W}px)` : 'translateX(0)',
+          transition: 'transform 200ms ease-in-out, right 200ms ease-out',
+        }}
+      >
+      <div className="flex items-center h-[46px] px-4 border-l border-b border-border" style={{ background: 'var(--background)' }}>
+        <p className="text-2xs font-semibold uppercase tracking-wider text-muted-foreground/55 shrink-0">
+          {t.view.tocTitle}
+        </p>
+      </div>
+      <nav
+        ref={navRef}
+        aria-label={t.view.tocTitle}
+        className="flex flex-col gap-0.5 overflow-y-auto min-h-0 flex-1 pt-3 pb-5 pl-2 pr-3 border-l border-border"
+        style={{ background: 'var(--background)' }}
+      >
+        {headings.map((heading, i) => {
+          const indent = (heading.level - minLevel) * 14;
+          const isActive = activeId === heading.id;
+          const isNested = heading.level > minLevel;
+          return (
+            <a
+              key={`${heading.id}-${i}`}
+              ref={el => {
+                if (el) linkRefs.current.set(heading.id, el);
+                else linkRefs.current.delete(heading.id);
+              }}
+              href={`#${heading.id}`}
+              onClick={(e) => handleClick(e, heading.id)}
+              className={cn(
+                'block text-xs py-1 rounded transition-colors duration-100 leading-snug shrink-0 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+                isActive && 'font-medium',
+              )}
+              style={{
+                paddingLeft: `${8 + indent}px`,
+                paddingRight: '8px',
+                borderLeft: '2px solid',
+                borderLeftColor: isActive
+                  ? 'var(--amber)'
+                  : isNested
+                    ? 'var(--border)'
+                    : 'transparent',
+                marginLeft: isNested ? '7px' : '0',
+                ...(isActive
+                  ? { color: 'var(--amber)', background: 'var(--amber-dim)' }
+                  : { color: 'var(--muted-foreground)' }
+                ),
+              }}
+              title={heading.text}
+            >
+              <span className="block truncate" suppressHydrationWarning>
+                {heading.text}
+              </span>
+            </a>
+          );
+        })}
+      </nav>
+    </aside>
+    </>
+  );
+}

package/_standalone/components/ThemeToggle.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { useSyncExternalStore } from 'react';
+import { Sun, Moon } from 'lucide-react';
+
+export default function ThemeToggle() {
+  const dark = useSyncExternalStore(
+    (onStoreChange) => {
+      const listener = () => onStoreChange();
+      window.addEventListener('mindos-theme-change', listener);
+      return () => window.removeEventListener('mindos-theme-change', listener);
+    },
+    () => {
+      const stored = localStorage.getItem('theme');
+      return stored && stored !== 'system' ? stored === 'dark' : window.matchMedia('(prefers-color-scheme: dark)').matches;
+    },
+    () => document.documentElement.classList.contains('dark'),
+  );
+
+  const toggle = () => {
+    const next = !dark;
+    document.documentElement.classList.toggle('dark', next);
+    localStorage.setItem('theme', next ? 'dark' : 'light');
+    window.dispatchEvent(new Event('mindos-theme-change'));
+  };
+
+  return (
+    <button
+      onClick={toggle}
+      className="p-1.5 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+      title={dark ? 'Switch to light mode' : 'Switch to dark mode'}
+    >
+      {dark ? <Sun size={15} /> : <Moon size={15} />}
+    </button>
+  );
+}

package/_standalone/components/WysiwygEditor.tsx

@@ -0,0 +1,165 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { useEditor, EditorContent } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import Placeholder from '@tiptap/extension-placeholder';
+import TaskList from '@tiptap/extension-task-list';
+import TaskItem from '@tiptap/extension-task-item';
+import Link from '@tiptap/extension-link';
+import Image from '@tiptap/extension-image';
+import { Table } from '@tiptap/extension-table';
+import { TableRow } from '@tiptap/extension-table';
+import { TableCell } from '@tiptap/extension-table';
+import { TableHeader } from '@tiptap/extension-table';
+import { Markdown } from 'tiptap-markdown';
+import { useEditorImageUpload } from '@/hooks/useEditorImageUpload';
+import { resolveImagePath } from '@/lib/image';
+import { toast } from '@/lib/toast';
+
+/**
+ * Custom Image extension that resolves `/.media/` paths to API URLs in the DOM,
+ * while keeping the raw path in the markdown serialization.
+ */
+const ResolvedImage = Image.extend({
+  renderHTML({ HTMLAttributes }) {
+    const src = HTMLAttributes.src;
+    const resolvedSrc = typeof src === 'string' ? resolveImagePath(src) : src;
+    return ['img', { ...HTMLAttributes, src: resolvedSrc }];
+  },
+});
+
+interface WysiwygEditorProps {
+  value: string;
+  onChange: (markdown: string) => void;
+}
+
+export default function WysiwygEditor({ value, onChange }: WysiwygEditorProps) {
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+
+  const { uploadToMedia, isUploading } = useEditorImageUpload();
+  const uploadRef = useRef(uploadToMedia);
+  uploadRef.current = uploadToMedia;
+
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({
+        codeBlock: { HTMLAttributes: { class: 'not-prose' } },
+      }),
+      Markdown.configure({
+        html: true,
+        transformPastedText: true,
+        transformCopiedText: true,
+      }),
+      Placeholder.configure({ placeholder: 'Start writing…' }),
+      TaskList,
+      TaskItem.configure({ nested: true }),
+      Link.configure({ openOnClick: false, autolink: true }),
+      ResolvedImage.configure({
+        HTMLAttributes: { class: 'rounded-md max-w-full' },
+      }),
+      Table.configure({ resizable: false }),
+      TableRow,
+      TableHeader,
+      TableCell,
+    ],
+    content: value,
+    editorProps: {
+      attributes: {
+        class: 'prose max-w-none focus:outline-none wysiwyg-editor',
+      },
+    },
+    onUpdate({ editor }) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const md = (editor.storage as any).markdown?.getMarkdown?.() ?? editor.getText();
+      onChangeRef.current(md);
+    },
+    immediatelyRender: false,
+  });
+
+  // Set up drag/drop and paste handlers on editor mount
+  useEffect(() => {
+    if (!editor) return;
+
+    const editorDom = editor.view.dom;
+
+    const handleImageInsert = async (files: File[]) => {
+      if (!editor) return;
+      try {
+        const uploadedPaths = await uploadRef.current(files);
+        for (const p of uploadedPaths) {
+          editor.chain().focus().setImage({ src: p }).run();
+        }
+        toast.success('Images inserted');
+      } catch (err) {
+        toast.error('Failed to insert images');
+        console.error(err);
+      }
+    };
+
+    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();
+        handleImageInsert(files);
+      }
+    };
+
+    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();
+        handleImageInsert(files);
+      }
+    };
+
+    editorDom.addEventListener('drop', handleDrop as EventListener);
+    editorDom.addEventListener('paste', handlePaste as EventListener);
+
+    return () => {
+      editorDom.removeEventListener('drop', handleDrop as EventListener);
+      editorDom.removeEventListener('paste', handlePaste as EventListener);
+    };
+  }, [editor]);
+
+  // Sync external value changes (e.g. cancel → revert) without full re-mount
+  const lastMd = useRef(value);
+  useEffect(() => {
+    if (!editor || value === lastMd.current) return;
+    lastMd.current = value;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const current = (editor.storage as any).markdown?.getMarkdown?.() ?? '';
+    if (current !== value) {
+      editor.commands.setContent(value);
+    }
+  }, [editor, value]);
+
+  return (
+    <div className="wysiwyg-wrapper h-full overflow-y-auto px-8 py-6">
+      {isUploading && (
+        <div className="fixed inset-0 overlay-backdrop flex items-center justify-center z-50">
+          <div className="bg-card border border-border rounded-lg px-6 py-4 text-center shadow-lg">
+            <div className="animate-spin inline-block w-5 h-5 border-2 border-primary border-t-transparent rounded-full" />
+            <p className="mt-2 text-sm text-muted-foreground">Uploading images...</p>
+          </div>
+        </div>
+      )}
+      <EditorContent editor={editor} />
+    </div>
+  );
+}