MindMap

1"use client";
2
3import "mind-elixir/style.css";
4import {
5  createContext,
6  useContext,
7  useEffect,
8  useId,
9  useRef,
10  useState,
11  forwardRef,
12  useImperativeHandle,
13  type ReactNode,
14} from "react";
15import {
16  Minus,
17  Plus,
18  Download,
19  Loader2,
20  Maximize,
21  ScanSearch,
22} from "lucide-react";
23
24import { cn } from "@/lib/utils";
25import {
26  type MindElixirInstance,
27  type MindElixirData,
28  type NodeObj,
29  type Options,
30  type Theme as MindElixirTheme,
31} from "mind-elixir";
32import MindElixir from "mind-elixir";
33import { plaintextToMindElixir } from "mind-elixir/plaintextConverter";
34import { domToBlob } from "@mind-elixir/export-mindmap";
35
36/** Custom markdown parser — same signature as Mind Elixir `Options.markdown`. */
37export type MindMapMarkdownParser = NonNullable<Options["markdown"]>;
38
39// Check document class for theme (works with next-themes, etc.)
40function getDocumentTheme(): Theme | null {
41  if (typeof document === "undefined") return null;
42  if (document.documentElement.classList.contains("dark")) return "dark";
43  if (document.documentElement.classList.contains("light")) return "light";
44  return null;
45}
46
47// Get system preference
48function getSystemTheme(): Theme {
49  if (typeof window === "undefined") return "light";
50  return window.matchMedia("(prefers-color-scheme: dark)").matches
51    ? "dark"
52    : "light";
53}
54
55function useResolvedTheme(themeProp?: "light" | "dark"): "light" | "dark" {
56  const [detectedTheme, setDetectedTheme] = useState<"light" | "dark">(
57    () => getDocumentTheme() ?? getSystemTheme(),
58  );
59
60  useEffect(() => {
61    if (themeProp) return; // Skip detection if theme is provided via prop
62
63    // Watch for document class changes (e.g., next-themes toggling dark class)
64    const observer = new MutationObserver(() => {
65      const docTheme = getDocumentTheme();
66      if (docTheme) {
67        setDetectedTheme(docTheme);
68      }
69    });
70    observer.observe(document.documentElement, {
71      attributes: true,
72      attributeFilter: ["class"],
73    });
74
75    // Also watch for system preference changes
76    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
77    const handleSystemChange = (e: MediaQueryListEvent) => {
78      // Only use system preference if no document class is set
79      if (!getDocumentTheme()) {
80        setDetectedTheme(e.matches ? "dark" : "light");
81      }
82    };
83// … truncated