Markmap

"use client"

import { useEffect, useState, useRef } from "react"
import { Transformer } from "markmap-lib"
import { Markmap } from "markmap-view"

const markdownContent = `
# Eidos

## core

### Table

- Field
  - Base
    - Text
    - Number
    - Select
    - Multi select
    - Checkbox
    - URL
    - Rating
    - Date
    - Files
  - Compute
    - Formula
    - Link/Relation
    - Lookup
  - System
    - Last Edited By
    - Last Edited Time
    - Created By
    - Created Time
- View
  - Grid
  - Gallery
  - Kanban
  - Calendar
  - Chart

### Document

- Block
  - markdown
  - advanced
    - audio
    - bookmark
    - chart
    - micro block
    - file
    - image
    - video
    - mention
    - mermaid
    - toc

### Extension

- Script
  - Javascript
  - Python
- Micro Block
- UDF

### Files Manager

### AI

- LLM provider
  - models
  - task

## service

- sync
- publish
- service kit
  - API forwarding
- extension marketplace

`

export default function MarkmapVisualization(props) {
  const svgRef = useRef < SVGSVGElement > (null)
  const [value, setValue] = useState(markdownContent)

  useEffect(() => {
    const { currentNode } = props.__context__ || {};
    if (currentNode?.type === "doc") {
      const fetchMarkdown = async () => {
        try {
          const markdown = await eidos.currentSpace.getDocMarkdown(currentNode.id, {
            withTitle: true
          });
          setValue(markdown);
        } catch (error) {
          console.error("Failed to fetch markdown:", error);
        }
      };
      fetchMarkdown();
    }
  }, [props.__context__?.currentNode?.id]);

  useEffect(() => {
    if (!svgRef.current) return

    // Clear any existing content
    svgRef.current.innerHTML = ""

    // Create the transformer and transform the markdown
    const transformer = new Transformer()
    const { root } = transformer.transform(value)

    // Create the markmap
    Markmap.create(svgRef.current, undefined, root)
  }, [value])

  return (
    <div className="w-full h-full overflow-auto p-4">
      <svg ref={svgRef} className="w-full h-full" />
    </div>
  )
}