@allbluecn/web-app 0.6.3 → 0.7.0

package/src/components/tiptap/mindmap/mind-map.tsx

@@ -0,0 +1,579 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import "mind-elixir/style.css"
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  forwardRef,
+  useImperativeHandle,
+  type ReactNode,
+} from "react"
+import { Minus, Plus, Download, Loader2, Maximize, ScanSearch, X } from "lucide-react"
+import { GraphIcon, TreeStructureIcon } from "@phosphor-icons/react";
+import { snapdom } from "@zumer/snapdom"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui-shared/tooltip"
+import { Separator } from "@/components/ui-shared/separator"
+import { cn } from "../lib/utils.ts"
+import {
+  type MindElixirInstance,
+  type MindElixirData,
+  type NodeObj,
+  type Options,
+  type Theme as MindElixirTheme,
+} from "mind-elixir"
+import MindElixir from "mind-elixir"
+import { useTranslation } from "react-i18next"
+import { getClientI18n } from "@/i18n/client"
+
+type Theme = "light" | "dark"
+
+function getDocumentTheme(): Theme | null {
+  if (typeof document === "undefined") return null
+  return document.documentElement.classList.contains("dark") ? "dark" : "light"
+}
+
+function getSystemTheme(): Theme {
+  if (typeof window === "undefined") return "light"
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
+}
+
+function useResolvedTheme(themeProp?: Theme): Theme {
+  const [detectedTheme, setDetectedTheme] = useState<Theme>(
+    () => getDocumentTheme() ?? getSystemTheme(),
+  )
+  useEffect(() => {
+    if (themeProp) return
+    const observer = new MutationObserver(() => {
+      const docTheme = getDocumentTheme()
+      if (docTheme) setDetectedTheme(docTheme)
+    })
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] })
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
+    const handleSystemChange = (e: MediaQueryListEvent) => {
+      if (!getDocumentTheme()) setDetectedTheme(e.matches ? "dark" : "light")
+    }
+    mediaQuery.addEventListener("change", handleSystemChange)
+    return () => {
+      observer.disconnect()
+      mediaQuery.removeEventListener("change", handleSystemChange)
+    }
+  }, [themeProp])
+  return themeProp ?? detectedTheme
+}
+
+interface MindMapContextValue {
+  mind: MindElixirInstance | null
+  isLoaded: boolean
+  direction: 0 | 1 | 2
+  onDirectionChange: (direction: 0 | 1 | 2) => void
+}
+const MindMapContext = createContext<MindMapContextValue | null>(null)
+
+export function useMindMap() {
+  const context = useContext(MindMapContext)
+  if (!context) throw new Error(getClientI18n().t("errors.useMindMapContext", { ns: "mindmap" }))
+  return context
+}
+
+export interface MindMapRef {
+  instance: MindElixirInstance | null
+}
+
+export interface MindMapProps {
+  children?: ReactNode
+  data?: MindElixirData
+  className?: string
+  direction?: 0 | 1 | 2
+  contextMenu?: boolean
+  nodeMenu?: boolean
+  keypress?: boolean
+  locale?: "en" | "zh_CN" | "zh_TW" | "ja" | "pt"
+  overflowHidden?: boolean
+  mainLinkStyle?: number
+  theme?: Theme
+  monochrome?: boolean
+  fit?: boolean
+  readonly?: boolean
+  onChange?: (data: MindElixirData, operation: unknown) => void
+  onOperation?: (operation: unknown) => void
+  onSelectNodes?: (nodeObj: NodeObj[]) => void
+  loader?: ReactNode
+}
+
+function DefaultLoader() {
+  return (
+    <div className="absolute inset-0 flex items-center justify-center bg-background/80 backdrop-blur-sm">
+      <Loader2 className="size-8 animate-spin text-muted-foreground" />
+    </div>
+  )
+}
+
+const commonSpacing = {
+  "--node-gap-x": "48px",
+  "--node-gap-y": "16px",
+  "--main-gap-x": "24px",
+  "--main-gap-y": "32px",
+  "--root-radius": "0.625rem",
+  "--main-radius": "0.5rem",
+  "--topic-padding": "8px 16px",
+  "--map-padding": "48px",
+}
+
+function createTheme(
+  name: string,
+  type: Theme,
+  colors: Record<string, string>,
+  palette: string[],
+): MindElixirTheme {
+  return {
+    name,
+    type,
+    palette,
+    cssVar: {
+      ...commonSpacing,
+      "--main-color": colors.mainColor,
+      "--main-bgcolor": colors.mainBgcolor,
+      "--color": colors.color,
+      "--bgcolor": colors.bgcolor,
+      "--selected": colors.selected,
+      "--accent-color": colors.accentColor,
+      "--root-color": colors.rootColor,
+      "--root-bgcolor": colors.rootBgcolor,
+      "--root-border-color": colors.rootBorderColor,
+      "--panel-color": colors.panelColor,
+      "--panel-bgcolor": colors.panelBgcolor,
+      "--panel-border-color": colors.panelBorderColor,
+    },
+  }
+}
+
+const lightColors = {
+  mainColor: "oklch(0.145 0 0)",
+  mainBgcolor: "oklch(1 0 0)",
+  color: "oklch(0.145 0 0)",
+  bgcolor: "transparent",
+  selected: "oklch(0.205 0 0)",
+  rootColor: "oklch(0.985 0 0)",
+  rootBgcolor: "oklch(0.205 0 0)",
+  rootBorderColor: "oklch(0.205 0 0)",
+  panelColor: "oklch(0.145 0 0)",
+  panelBgcolor: "oklch(1 0 0)",
+  panelBorderColor: "oklch(0.922 0 0)",
+}
+const darkColors = {
+  mainColor: "oklch(0.985 0 0)",
+  mainBgcolor: "oklch(0.145 0 0)",
+  color: "oklch(0.985 0 0)",
+  bgcolor: "transparent",
+  selected: "oklch(0.922 0 0)",
+  rootColor: "oklch(0.205 0 0)",
+  rootBgcolor: "oklch(0.922 0 0)",
+  rootBorderColor: "oklch(0.922 0 0)",
+  panelColor: "oklch(0.985 0 0)",
+  panelBgcolor: "oklch(0.205 0 0)",
+  panelBorderColor: "oklch(1 0 0 / 10%)",
+}
+
+const lightTheme = createTheme(
+  "shadcn-light",
+  "light",
+  { ...lightColors, accentColor: "oklch(0.646 0.222 41.116)" },
+  [
+    "oklch(0.646 0.222 41.116)",
+    "oklch(0.6 0.118 184.704)",
+    "oklch(0.398 0.07 227.392)",
+    "oklch(0.828 0.189 84.429)",
+    "oklch(0.769 0.188 70.08)",
+    "oklch(0.488 0.243 264.376)",
+    "oklch(0.696 0.17 162.48)",
+  ],
+)
+const darkTheme = createTheme(
+  "shadcn-dark",
+  "dark",
+  { ...darkColors, accentColor: "oklch(0.488 0.243 264.376)" },
+  [
+    "oklch(0.488 0.243 264.376)",
+    "oklch(0.696 0.17 162.48)",
+    "oklch(0.769 0.188 70.08)",
+    "oklch(0.627 0.265 303.9)",
+    "oklch(0.645 0.246 16.439)",
+    "oklch(0.646 0.222 41.116)",
+    "oklch(0.6 0.118 184.704)",
+  ],
+)
+
+function getTheme(isDark: boolean): MindElixirTheme {
+  return isDark ? darkTheme : lightTheme
+}
+
+const SIDE = 2
+
+export const MindMap = forwardRef<MindMapRef, MindMapProps>(function MindMap(
+  {
+    children,
+    data,
+    className,
+    direction = SIDE,
+    contextMenu = true,
+    nodeMenu = true,
+    keypress = true,
+    locale = "zh_CN",
+    overflowHidden = false,
+    mainLinkStyle = 2,
+    theme: themeProp,
+    monochrome = false,
+    fit = true,
+    readonly = false,
+    onChange,
+    onOperation,
+    onSelectNodes,
+    loader,
+  }: MindMapProps,
+  ref,
+) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const mindRef = useRef<MindElixirInstance | null>(null)
+  const [isLoaded, setIsLoaded] = useState(false)
+  const [mindInstance, setMindInstance] = useState<MindElixirInstance | null>(null)
+  const [currentDirection, setCurrentDirection] = useState<0 | 1 | 2>(() => data?.direction ?? direction)
+  const resolvedTheme = useResolvedTheme(themeProp)
+  const id = useId()
+  const { t } = useTranslation("mindmap")
+
+  useImperativeHandle(ref, () => ({ instance: mindRef.current }), [])
+
+  const resolvedThemeRef = useRef(resolvedTheme)
+  useEffect(() => {
+    resolvedThemeRef.current = resolvedTheme
+  }, [resolvedTheme])
+
+  const onChangeRef = useRef(onChange)
+  const onOperationRef = useRef(onOperation)
+  const onSelectNodesRef = useRef(onSelectNodes)
+  useEffect(() => {
+    onChangeRef.current = onChange
+    onOperationRef.current = onOperation
+    onSelectNodesRef.current = onSelectNodes
+  }, [onChange, onOperation, onSelectNodes])
+
+  const isInternalChangeRef = useRef(false)
+  const initialDataRef = useRef(data)
+
+  useEffect(() => {
+    if (!containerRef.current || mindRef.current) return
+    let isSubscribed = true
+    const initialData = initialDataRef.current || MindElixir.new(t("defaultTopic"))
+    const themeToUse = getTheme(resolvedThemeRef.current === "dark")
+    const options = {
+      el: containerRef.current,
+      direction: data?.direction ?? direction,
+      contextMenu: contextMenu ? { locale: {
+        addChild: t("editor.insert-child"),
+        addParent: t("editor.insert-parent"),
+        addSibling: t("editor.insert-sibling"),
+        removeNode: t("editor.delete-node"),
+        focus: t("editor.focus"),
+        cancelFocus: t("editor.unfocus"),
+        moveUp: t("editor.move-up"),
+        moveDown: t("editor.move-down"),
+        link: t("editor.link"),
+        linkBidirectional: t("editor.bidirectional-link"),
+        clickTips: t("editor.click-target"),
+        summary: t("editor.summary"),
+      }} : false,
+      toolBar: false,
+      nodeMenu,
+      keypress,
+      locale,
+      overflowHidden,
+      mainLinkStyle,
+      editable: !readonly,
+      alignment: "nodes",
+      theme: themeToUse,
+      newTopicName: t("defaultNode"),
+    } as Options
+    try {
+      const mind = new MindElixir(options)
+      mind.init(initialData)
+      if (isSubscribed) {
+        mindRef.current = mind
+        setMindInstance(mind)
+        setIsLoaded(true)
+        if (fit) mind.scaleFit()
+        mind.bus.addListener("operation", (operation: unknown) => {
+          if (onOperationRef.current) onOperationRef.current(operation)
+          if (onChangeRef.current) {
+            isInternalChangeRef.current = true
+            onChangeRef.current(mind.getData(), operation)
+          }
+        })
+        if (onSelectNodesRef.current) {
+          mind.bus.addListener("selectNodes", (nodeObj: NodeObj[]) =>
+            onSelectNodesRef.current?.(nodeObj),
+          )
+        }
+      }
+    } catch (error) {
+      console.error(getClientI18n().t("errors.initFailed", { ns: "mindmap" }), error)
+    }
+    return () => {
+      isSubscribed = false
+      mindRef.current = null
+    }
+  }, [
+    direction,
+    contextMenu,
+    nodeMenu,
+    keypress,
+    locale,
+    overflowHidden,
+    mainLinkStyle,
+    monochrome,
+    readonly,
+    fit,
+  ])
+
+  useEffect(() => {
+    if (mindRef.current && data && isLoaded) {
+      if (isInternalChangeRef.current) {
+        isInternalChangeRef.current = false
+        return
+      }
+      mindRef.current.refresh(data)
+    }
+  }, [data, isLoaded])
+
+  useEffect(() => {
+    if (!mindRef.current || !isLoaded) return
+    mindRef.current.changeTheme(getTheme(resolvedTheme === "dark"))
+  }, [resolvedTheme, monochrome, isLoaded])
+
+  const handleDirectionChange = useCallback((newDir: 0 | 1 | 2) => {
+    if (!mindRef.current) return
+    if (newDir === 0) mindRef.current.initLeft()
+    else if (newDir === 1) mindRef.current.initRight()
+    else mindRef.current.initSide()
+    setCurrentDirection(newDir)
+    const updated = mindRef.current.getData()
+    updated.direction = newDir
+    if (onChangeRef.current) {
+      isInternalChangeRef.current = true
+      onChangeRef.current(updated, { action: "directionChange" })
+    }
+  }, [])
+
+  return (
+    <MindMapContext.Provider value={{ mind: mindInstance, isLoaded, direction: currentDirection, onDirectionChange: handleDirectionChange }}>
+      <div className={cn("relative w-full h-full min-w-0", className)}>
+        <div
+          key={id}
+          ref={containerRef}
+          id={`mindmap-${id}`}
+          className="w-full h-full rounded-lg overflow-hidden"
+        />
+        {!isLoaded ? loader || <DefaultLoader /> : null}
+        {children}
+      </div>
+    </MindMapContext.Provider>
+  )
+})
+
+export interface MindMapControlsProps {
+  position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
+  showZoom?: boolean
+  showFit?: boolean
+  showExport?: boolean
+  showFullscreen?: boolean
+  showDirection?: boolean
+  showClose?: boolean
+  className?: string
+  onFullscreen?: () => void
+  onClose?: () => void
+}
+
+export function MindMapControls({
+  position = "top-right",
+  showZoom = true,
+  showFit = true,
+  showExport = true,
+  showFullscreen = true,
+  showDirection = true,
+  showClose = false,
+  className,
+  onFullscreen,
+  onClose,
+}: MindMapControlsProps) {
+  const { mind, isLoaded, direction, onDirectionChange } = useMindMap()
+  const { t } = useTranslation("mindmap")
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => {
+    const t = setTimeout(() => setMounted(true), 0)
+    return () => clearTimeout(t)
+  }, [])
+
+  const handleZoomIn = () => {
+    if (mind) mind.scale((mind.scaleVal || 1) + 0.2)
+  }
+  const handleZoomOut = () => {
+    if (mind) mind.scale(Math.max(0.2, (mind.scaleVal || 1) - 0.2))
+  }
+  const handleFit = () => {
+    if (mind) mind.scaleFit()
+  }
+
+  const handleExport = async () => {
+    if (!mind) return
+    try {
+      const result = await snapdom(mind.nodes)
+      const rootTopic = mind.nodeData.topic || "mindmap"
+      await result.download({
+        type: "jpg",
+        filename: rootTopic,
+        quality: 1,
+        backgroundColor: mind.theme.cssVar["--bgcolor"],
+      })
+    } catch (error) {
+      console.error(getClientI18n().t("errors.exportFailed", { ns: "mindmap" }), error)
+    }
+  }
+
+  if (!mounted || !isLoaded) return null
+  const positionClasses = {
+    "top-left": "top-3 left-3",
+    "top-right": "top-3 right-3",
+    "bottom-left": "bottom-3 left-3",
+    "bottom-right": "bottom-3 right-3",
+  }
+  const btn =
+    "size-8 rounded-md bg-background/95 backdrop-blur-md border border-border/50 shadow-lg flex items-center justify-center hover:bg-accent transition-colors"
+
+  return (
+    <TooltipProvider>
+    <div className={cn("absolute z-10 flex flex-col gap-1", positionClasses[position], className)}>
+      {showClose && (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button onClick={onClose} className={btn} aria-label={t("toolbar.close")}>
+              <X className="size-4" />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent side="left">{t("toolbar.close")}</TooltipContent>
+        </Tooltip>
+      )}
+      {showZoom && (
+        <>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button onClick={handleZoomIn} className={btn} aria-label={t("toolbar.zoomIn")}>
+                <Plus className="size-4" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="left">{t("toolbar.zoomIn")}</TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button onClick={handleZoomOut} className={btn} aria-label={t("toolbar.zoomOut")}>
+                <Minus className="size-4" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="left">{t("toolbar.zoomOut")}</TooltipContent>
+          </Tooltip>
+        </>
+      )}
+      {showFit && (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button onClick={handleFit} className={btn} aria-label={t("toolbar.fit")}>
+              <ScanSearch className="size-4" />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent side="left">{t("toolbar.fit")}</TooltipContent>
+        </Tooltip>
+      )}
+      {showFullscreen && (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button onClick={onFullscreen} className={btn} aria-label={t("toolbar.fullscreen")}>
+              <Maximize className="size-4" />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent side="left">{t("toolbar.fullscreen")}</TooltipContent>
+        </Tooltip>
+      )}
+      {showExport && (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button onClick={handleExport} className={btn} aria-label={t("toolbar.export")}>
+              <Download className="size-4" />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent side="left">{t("toolbar.export")}</TooltipContent>
+        </Tooltip>
+      )}
+      <Separator />
+      {showDirection && (
+        <>
+          <div className="w-6 mx-auto border-b border-border/50" />
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                onClick={() => onDirectionChange(0)}
+                className={cn(btn, direction === 0 && "bg-accent text-accent-foreground")}
+                aria-label={t("toolbar.layoutLeft")}
+              >
+                <span className="size-4 -scale-x-100"><TreeStructureIcon /></span>
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="left">{t("toolbar.layoutLeft")}</TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                onClick={() => onDirectionChange(1)}
+                className={cn(btn, direction === 1 && "bg-accent text-accent-foreground")}
+                aria-label={t("toolbar.layoutRight")}
+              >
+                <span className="size-4"><TreeStructureIcon /></span>
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="left">{t("toolbar.layoutRight")}</TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                onClick={() => onDirectionChange(2)}
+                className={cn(btn, direction === 2 && "bg-accent text-accent-foreground")}
+                aria-label={t("toolbar.layoutBalance")}
+              >
+                <span className="size-4"><GraphIcon /></span>
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="left">{t("toolbar.layoutBalance")}</TooltipContent>
+          </Tooltip>
+        </>
+      )}
+    </div>
+    </TooltipProvider>
+  )
+}

package/src/components/tiptap/mindmap/mindmap-fullscreen-dialog.tsx

@@ -0,0 +1,52 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui-shared/dialog"
+import { useTranslation } from "react-i18next"
+import { MindMap, MindMapControls } from "./mind-map"
+import type { MindElixirData } from "mind-elixir"
+
+export interface MindmapFullscreenDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  data?: MindElixirData
+  direction?: 0 | 1 | 2
+  onChange?: (data: MindElixirData, operation: unknown) => void
+}
+
+export function MindmapFullscreenDialog({
+  open, onOpenChange, data, direction, onChange,
+}: MindmapFullscreenDialogProps) {
+  const { t } = useTranslation("mindmap")
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="w-[90vw] h-[90vh] max-w-none sm:max-w-none max-h-none p-0 gap-0 z-[100]" showCloseButton={false}>
+        <DialogTitle className="sr-only">{t("fullscreen.title")}</DialogTitle>
+        <div className="relative w-full h-full overflow-hidden">
+          <MindMap data={data} direction={direction} onChange={onChange} fit>
+            <MindMapControls
+              position="top-right"
+              showFullscreen={false}
+              showClose
+              onClose={() => onOpenChange(false)}
+            />
+          </MindMap>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/tiptap/node/annotation-node/annotation-extension.ts

@@ -0,0 +1,47 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { Node, mergeAttributes } from "@tiptap/core";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+import { AnnotationNodeView } from "./annotation-node-view";
+
+export const AnnotationNode = Node.create({
+  name: "annotation",
+  group: "block",
+  content: "block+",
+  defining: true,
+  isolating: true,
+
+  addAttributes() {
+    return {
+      componentId: { default: null },
+      componentType: { default: null },
+    };
+  },
+
+  parseHTML() {
+    return [{ tag: "div[data-type='annotation']" }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["div", mergeAttributes(HTMLAttributes, { "data-type": "annotation" }), 0];
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(AnnotationNodeView);
+  },
+});