Skip to content

[codex] add interactive Markmap view#11

Open
ryan-wong-coder wants to merge 3 commits into
text2future:mainfrom
ryan-wong-coder:feat/markmap-view-v2
Open

[codex] add interactive Markmap view#11
ryan-wong-coder wants to merge 3 commits into
text2future:mainfrom
ryan-wong-coder:feat/markmap-view-v2

Conversation

@ryan-wong-coder

Copy link
Copy Markdown

What

Add an interactive Markmap document view alongside the existing editor. The new view renders the complete Markdown structure, supports zooming, panning, folding, fullscreen presentation, and a reading-focused zoom shortcut. Clicking text nodes opens a right-side preview for rich content including prose, tables, code, Mermaid diagrams, and AI thread cards.

Why

Long documents are difficult to understand from the editor's linear view alone. This gives users a readable overview while preserving the original Markdown as the single source of truth. Long Chinese text is constrained to a comfortable node width with a two-line preview instead of collapsing into narrow columns or disappearing.

Closes #8.

Supersedes #9, which was closed after the upstream main history was rewritten for the 1.0.6 release. This branch is rebuilt directly on the new upstream root.

How tested

  • cargo test --workspace
  • cargo fmt --check
  • cargo clippy --workspace -- -D warnings
  • npm run lint (no lint script is defined)
  • npx vitest run app/flowix-web/features/document/components/markmap/markmap-data.test.ts — 6 tests passed
  • npm run build
  • npm run tauri:build:mac
  • Manual verification on macOS: switched between editor and map, inspected long text and table nodes, and exercised pan/zoom and reading-fit controls

Risks

  • Very large documents produce a correspondingly large SVG tree; lazy loading keeps the Markmap runtime out of the editor's initial bundle.
  • Rich previews reuse the existing Mermaid renderer and agent conversation store, so behavior follows those components' current loading and error states.

Checklist

  • No secrets / tokens / .env files touched
  • No force-push to main
  • If interface change: CHANGELOG / docs updated
  • If schema change: not applicable

Add a readable document map with rich block previews and focused navigation.\n\nCloses text2future#8
@ryan-wong-coder ryan-wong-coder marked this pull request as ready for review July 15, 2026 03:02
@ryan-wong-coder

Copy link
Copy Markdown
Author

补充修复 Markmap 预览面板关闭按钮被右上角“编辑 / 导图”视图切换器完全遮挡的问题。

根因是切换器位于外层叠放上下文,单纯提高预览面板 z-index 无法越过它。现在预览顶栏会为切换器预留右侧安全区域,文本、流程图和 AI 会话预览共用该顶栏,因此三种场景均生效;全屏模式下会恢复普通间距。

验证:

  • npx vitest run app/flowix-web/features/document/components/markmap/markmap-data.test.ts(6 项通过)
  • npm run build(通过)

修复提交:d19433d

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat(document): add interactive Markmap view

2 participants