@tnotesjs/ui 0.2.0 → 0.3.0

package/src/entries/mindmap-editor.ts

@@ -0,0 +1,37 @@
+/**
+ * 思维导图编辑器外壳入口：Web 与 VS Code 扩展共用同一套三视图 UI。
+ *
+ * 与 `./mindmap` 的分工：`./mindmap` 是 SSG / Desk 笔记里内嵌的「预览 + 可选编辑」块
+ * （`components/Mindmap/Mindmap.vue`，自带 `--mm-*` 主题变量与只读渲染）；本入口导出它
+ * 内部复用的编辑器组件，供自带页面外壳的宿主（Web 整页、VS Code webview）直接组装。
+ *
+ * 宿主职责：`MindmapSession` 归属、`--mm-*` 变量定义、落盘 / 剪贴板 / 图片写入
+ * （`apps/mindmap-web`、`apps/mindmap-vscode`）。浮层默认不 teleport，嵌入笔记的宿主
+ * 保持默认即可；整页宿主传 `teleport-to="body"`。
+ */
+export { default as AppIcon } from '../components/Mindmap/editor/AppIcon.vue'
+export { default as CanvasContextMenu } from '../components/Mindmap/editor/CanvasContextMenu.vue'
+export { default as CollapseMenu } from '../components/Mindmap/editor/CollapseMenu.vue'
+export { default as IconButton } from '../components/Mindmap/editor/IconButton.vue'
+export { default as LinkPopover } from '../components/Mindmap/editor/LinkPopover.vue'
+export { default as MarkdownView } from '../components/Mindmap/editor/MarkdownView.vue'
+export { default as MindmapView } from '../components/Mindmap/editor/MindmapView.vue'
+export { default as OutlineView } from '../components/Mindmap/editor/OutlineView.vue'
+export { default as RichInlineEditor } from '../components/Mindmap/editor/RichInlineEditor.vue'
+export { default as SearchBar } from '../components/Mindmap/editor/SearchBar.vue'
+export { default as SelectionToolbar } from '../components/Mindmap/editor/SelectionToolbar.vue'
+export { default as FocusBreadcrumbs } from '../components/Mindmap/FocusBreadcrumbs.vue'
+
+export { insertImageIntoSource } from '../components/Mindmap/editor/imagePaste'
+export {
+  pasteCanvasOutline,
+  readMindmapClipboard,
+  writeMindmapClipboard
+} from '../components/Mindmap/editor/mindmapClipboard'
+export { resolveAfterDropLevel } from '../components/Mindmap/editor/outlineDrag'
+export type { DropLevel } from '../components/Mindmap/editor/outlineDrag'
+export {
+  altShortcut,
+  isApplePlatform,
+  primaryShortcut
+} from '../components/Mindmap/editor/platform'

package/src/excalidraw/exporter.ts

@@ -37,6 +37,7 @@ export async function renderExcalidrawSvg(
     },
     files: (scene.files ?? {}) as never
   })
+
   // 只读路径必须自包含：把 CDN/相对字体换成 data URL，离线与 <img> 渲染才不掉字体
   const inlined = await inlineExcalidrawFonts(svg.outerHTML, {
     base: options.fontBase ?? getExcalidrawAssetPath(),

package/src/excalidraw/fonts.ts

@@ -28,6 +28,19 @@ export interface InlineFontsResult {
 
 const FONT_URL_PATTERN = /url\((?:'|")?([^'")]+\.woff2?)(?:'|")?\)/g
 
+/**
+ * 字体 data URL 缓存。
+ *
+ * 派生产物是「编辑期间反复重导出」的热路径，每 200ms 重新 fetch + base64 一遍
+ * 字体文件（Excalifont/Xiaolai 等十几 KB）纯属浪费；字体在进程生命周期内不会变。
+ */
+const fontDataUrlCache = new Map<string, string>()
+
+/** 便于测试与部署后换基址：清掉缓存 */
+export function clearExcalidrawFontCache(): void {
+  fontDataUrlCache.clear()
+}
+
 /** 把 CDN / 相对基址统一成本地基址下的字体路径。 */
 export function resolveFontUrl(rawUrl: string, base?: string): string {
   const fileName = rawUrl.split('/fonts/').pop() ?? rawUrl.split('/').pop() ?? rawUrl
@@ -63,11 +76,18 @@ export async function inlineExcalidrawFonts(
   const remaining: string[] = []
   for (const original of urls) {
     const target = resolveFontUrl(original, options.base)
+    const cached = fontDataUrlCache.get(target)
+    if (cached !== undefined) {
+      replacements.set(original, cached)
+      continue
+    }
     try {
       const response = await fetchImpl(target)
       if (!response.ok) throw new Error(`HTTP ${response.status}`)
       const bytes = new Uint8Array(await response.arrayBuffer())
-      replacements.set(original, `data:${mimeFor(target)};base64,${toBase64(bytes)}`)
+      const dataUrl = `data:${mimeFor(target)};base64,${toBase64(bytes)}`
+      fontDataUrlCache.set(target, dataUrl)
+      replacements.set(original, dataUrl)
     } catch {
       remaining.push(target)
     }

package/src/styles/code.css

@@ -5,6 +5,10 @@
   background: var(--tn-c-bg-soft);
   color: var(--tn-c-text);
   overflow: hidden;
+  /* 宽度只由正文容器决定：长行走块内横向滚动，永远不把页面撑宽 */
+  box-sizing: border-box;
+  max-width: 100%;
+  min-width: 0;
 }
 .tn-code-block__header,
 .tn-code-fullscreen > header {
@@ -18,6 +22,19 @@
   border-bottom: 1px solid var(--tn-c-divider);
   font: 13px/24px var(--tn-font-sans);
 }
+.tn-code-block__collapse-btn,
+.tn-code-group__collapse-btn {
+  flex: none;
+}
+.tn-code-block__collapse-btn svg,
+.tn-code-group__collapse-btn svg {
+  display: block;
+  transition: transform 0.15s ease;
+}
+.tn-code-block__collapse-btn.is-collapsed svg,
+.tn-code-group__collapse-btn.is-collapsed svg {
+  transform: rotate(-90deg);
+}
 .tn-code-block__title,
 .tn-code-fullscreen > header > span {
   flex: 1;
@@ -67,12 +84,20 @@
   outline: 2px solid var(--tn-c-brand);
   outline-offset: -2px;
 }
+/*
+ * 默认（VitePress 同款宽高处理）：不管多少行都由内容撑开，不设 max-height、
+ * 不出现内部纵向滚动；宽度不超出容器，超长单行在代码块内横向滚动；
+ * 原始换行与缩进原样保留。「收起」是页面内的视图状态（见文件末尾 .is-collapsed）。
+ */
 .tn-code-block pre {
   background: transparent;
   margin: 0;
   padding: 8px 0;
-  max-height: 480px;
-  overflow: auto;
+  max-height: none;
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: pre;
   font: 14px/24px var(--tn-font-mono);
   tab-size: 2;
 }
@@ -155,12 +180,49 @@ html[data-theme='dark'] .tn-code-highlight span:not(.line) {
   color: var(--tn-c-brand);
   border-bottom-color: var(--tn-c-brand);
 }
+/*
+ * 代码分组：折叠 Icon 放在 tab 行最左侧——面板自带的那个会被 tab 行盖住，
+ * 所以带 tab 的分组统一用 tab 行里这颗（点它作用于**当前**面板）。
+ */
+.tn-code-group__tabs .tn-code-group__collapse-btn {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 4px;
+  border: 0;
+  border-radius: 4px;
+  background: var(--tn-c-bg-soft);
+  color: var(--tn-c-text-2);
+}
+.tn-code-group__tabs .tn-code-group__collapse-btn:hover {
+  background: var(--tn-c-hover);
+  color: var(--tn-c-text);
+}
+.tn-code-group__collapse-btn[hidden] {
+  display: none;
+}
+.tn-code-group.has-tabs .tn-code-block__collapse-btn {
+  display: none;
+}
 .tn-code-group .tn-code-block__title {
   visibility: hidden;
 }
 .tn-code-group__panel > .tn-code-block {
   margin: 0;
 }
+/*
+ * tab 行是绝对定位（叠在面板头部上）。面板里代码块收起后只剩标题栏那 38px，
+ * 这里兜一个下限：万一头部被隐藏，tab 行也不会压住后面的正文。
+ */
+.tn-code-group__panels > .tn-code-group__panel {
+  min-height: 38px;
+}
 .tn-code-fullscreen {
   position: fixed;
   inset: 0;
@@ -182,3 +244,13 @@ html[data-theme='dark'] .tn-code-highlight span:not(.line) {
 .tn-code-fullscreen .tn-code-block pre {
   max-height: none;
 }
+
+/* -------------------------- 收起（视图状态，不落库） -------------------------- */
+
+/*
+ * 收起 = 代码内容整体隐藏，只剩标题栏（跟折叠标题一样），不是「露出前几行」。
+ * 展开态完全不做高度限制。
+ */
+.tn-code-block.is-collapsed .tn-code-block__content {
+  display: none;
+}

package/src/styles/prose.css

@@ -70,6 +70,41 @@
 :is(.tn-prose, .vp-doc) :where(li > ul, li > ol) {
   margin: 0;
 }
+/* 任务列表复选框：对齐语雀的方框（16px / 圆角 4px / 选中填充品牌绿 + 白色对勾 /
+   `transition: all .3s`）。markdown-it-task-lists 只输出原生 `input`，这里用
+   `appearance: none` 自绘；同时去掉 `.task-list-item` 的项目符号，避免出现
+   「◦ ☐ 文本」两层符号。对勾用 data-URI 而不是 `::after`：`input` 是替换元素，
+   Firefox 不生成伪元素。 */
+:is(.tn-prose, .vp-doc) :where(.task-list-item) {
+  list-style: none;
+}
+:is(.tn-prose, .vp-doc) :where(.task-list-item-checkbox) {
+  appearance: none;
+  -webkit-appearance: none;
+  box-sizing: border-box;
+  position: relative;
+  top: 0.2em;
+  width: 16px;
+  height: 16px;
+  margin: 0 4px 0 0;
+  border: 1px solid var(--tn-c-task-check-border);
+  border-radius: 4px;
+  background-color: var(--tn-c-task-check-bg);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.3 6.35 4.85 8.9 9.7 3.1' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 0 0;
+  transition: all 0.3s;
+  cursor: pointer;
+}
+:is(.tn-prose, .vp-doc) :where(.task-list-item-checkbox:hover) {
+  border-color: var(--tn-c-task-check);
+}
+:is(.tn-prose, .vp-doc) :where(.task-list-item-checkbox:checked) {
+  border-color: var(--tn-c-task-check);
+  background-color: var(--tn-c-task-check);
+  background-size: 12px 12px;
+}
 :is(.tn-prose, .vp-doc) :where(:not(pre) > code) {
   color: var(--tn-c-brand);
   background: var(--tn-c-default-soft);
@@ -86,6 +121,11 @@
 :is(.tn-prose, .vp-doc) :where(table) {
   border-collapse: collapse;
   margin: 16px 0;
+  /* 铺满内容列：与 Desk 可视化编辑器里的表格宽度一致（编辑器里表格宽度 = 内容列宽）。
+     不加这条时站点表格按内容收缩（实测 3 列表只有 182px，挤在 892px 的阅读列里），
+     两边观感不一致。列宽仍由 table-layout: auto 按内容分配。 */
+  width: 100%;
+  max-width: 100%;
 }
 :is(.tn-prose, .vp-doc) :where(th, td) {
   border: 1px solid var(--tn-c-divider);
@@ -96,6 +136,11 @@
 :is(.tn-prose, .vp-doc) :where(th) {
   font-weight: 600;
   background: var(--tn-c-bg-soft);
+  /* 表头默认左对齐：浏览器对 <th> 的 UA 默认是居中，而编辑器里 Milkdown 给单元格写了
+     内联 `text-align: left`，于是「站点表头居中 / 编辑器左对齐」两边不一致。
+     表格里显式写的 `:---:` / `:---:` / `---:` 会渲染成单元格内联样式，优先级高于本规则，
+     因此显式对齐不受影响（实测保留 left / center / right）。 */
+  text-align: left;
 }
 :is(.tn-prose, .vp-doc) :where(td p, th p) {
   margin: 0;

package/src/styles/tokens.css

@@ -22,6 +22,10 @@
   --tn-c-warning-soft: rgba(234, 179, 8, 0.14);
   --tn-c-danger-soft: rgba(244, 63, 94, 0.14);
   --tn-c-default-soft: #e8e8e9;
+  /* 任务列表复选框（对齐语雀）：16px 方框、圆角 4px、选中填充品牌绿 + 白色对勾。 */
+  --tn-c-task-check: #00b96b;
+  --tn-c-task-check-border: #d9d9d9;
+  --tn-c-task-check-bg: #ffffff;
   --tn-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.12);
   --tn-font-sans:
     'Punctuation SC', Inter, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
@@ -65,6 +69,8 @@
   --tn-c-warning-soft: rgba(234, 179, 8, 0.16);
   --tn-c-danger-soft: rgba(244, 63, 94, 0.14);
   --tn-c-default-soft: #2e2e32;
+  --tn-c-task-check-border: #4a4d54;
+  --tn-c-task-check-bg: transparent;
   --tn-shadow-2: 0 4px 12px rgb(0 0 0 / 0.35);
   color-scheme: dark;
 }

package/src/code/highlight.test.ts

@@ -1,72 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import {
-  highlightCode,
-  highlightCodeSync,
-  parseCodeMeta,
-  prepareCodeHighlighter
-} from './highlight'
-
-describe('shared code rendering', () => {
-  it('parses titles, line offsets, highlight ranges and per-block overrides', () => {
-    expect(parseCodeMeta('ts:line-numbers=12 {1,3-5} [demo.ts]')).toEqual({
-      language: 'ts',
-      title: 'demo.ts',
-      startLine: 12,
-      lineNumbers: true,
-      highlightedLines: [1, 3, 4, 5]
-    })
-    expect(parseCodeMeta('js {1-2} [setup.js]')).toEqual({
-      language: 'js',
-      title: 'setup.js',
-      startLine: 1,
-      lineNumbers: true,
-      highlightedLines: [1, 2]
-    })
-    expect(parseCodeMeta('txt {3}')).toEqual({
-      language: 'txt',
-      title: '',
-      startLine: 1,
-      lineNumbers: true,
-      highlightedLines: [3]
-    })
-    expect(parseCodeMeta('text:no-line-numbers').lineNumbers).toBe(false)
-    expect(parseCodeMeta('text {0,-1,8-3,1-9999999}').highlightedLines).toEqual([])
-  })
-  it('shares one lazy engine and matches build-time/browser output byte for byte', async () => {
-    const [a, b] = await Promise.all([
-      prepareCodeHighlighter(['js']),
-      prepareCodeHighlighter(['typescript'])
-    ])
-    expect(a).toBe(b)
-    const source = 'const answer = 42\nconsole.log(answer)\n'
-    const runtime = await highlightCode(source, 'js {2}')
-    expect(runtime).toBe(highlightCodeSync(source, 'js {2}'))
-    expect(runtime).toContain('--shiki-light:')
-    expect(runtime).toContain('--shiki-dark:')
-    expect(runtime).toContain('class="line highlighted"')
-    expect(runtime).toContain('data-line="2"')
-    expect(a.getLoadedLanguages()).not.toContain('cobol')
-  })
-  it('escapes unknown-language code instead of executing HTML', async () => {
-    const html = await highlightCode('<script>alert(1)</script> {{ injected }}', 'unknown-label')
-    expect(html).not.toContain('<script>')
-    const host = document.createElement('div')
-    host.innerHTML = html
-    expect(host.querySelector('script')).toBeNull()
-    expect(host.textContent).toBe('<script>alert(1)</script> {{ injected }}')
-    expect(html).toContain('{{ injected }}')
-  })
-  it('applies fence line highlights and offsets without Shiki notation', async () => {
-    const withNotation = await highlightCode(
-      'const x = 1 // [!code ++]\nconst y = 2 // [!code focus]',
-      'js:line-numbers=5 {2}'
-    )
-    // Magic comments stay as source text; Desk has no annotation write path.
-    expect(withNotation).toContain('[!code ++]')
-    expect(withNotation).not.toContain('diff add')
-    expect(withNotation).not.toContain('focused')
-    expect(withNotation).toContain('data-line="5"')
-    expect(withNotation).toContain('data-line="6"')
-    expect(withNotation).toContain('class="line highlighted"')
-  })
-})

package/src/components/Mermaid/Mermaid.test.ts

@@ -1,54 +0,0 @@
-// @vitest-environment happy-dom
-
-import { createApp, defineComponent, h, nextTick, type Component } from 'vue'
-import { afterEach, describe, expect, it } from 'vitest'
-
-import Mermaid from './Mermaid.vue'
-
-const cleanups: Array<() => void> = []
-
-function mount(component: Component, props: Record<string, unknown> = {}): HTMLElement {
-  const host = document.createElement('div')
-  document.body.append(host)
-  const app = createApp(defineComponent({ render: () => h(component, props) }))
-  app.mount(host)
-  cleanups.push(() => {
-    app.unmount()
-    host.remove()
-  })
-  return host
-}
-
-afterEach(() => {
-  cleanups
-    .splice(0)
-    .reverse()
-    .forEach((cleanup) => cleanup())
-  document.body.innerHTML = ''
-})
-
-describe('Mermaid preview host', () => {
-  it('keeps the diagram host laid out while loading (note 0020 diagrams)', async () => {
-    const sources = [
-      `flowchart LR\n  Desk --> UI`,
-      `sequenceDiagram\n  participant Desk\n  participant Site\n  Desk->>Site: hi`,
-      `graph TD\n  A[Start] --> B{ok}`
-    ]
-    for (const source of sources) {
-      const host = mount(Mermaid, { source })
-      await nextTick()
-      const diagram = host.querySelector('.tn-mermaid__diagram')
-      expect(diagram).not.toBeNull()
-      // Mermaid 11 needs layout during mermaid.render(); do not visibility:hidden the host.
-      expect(diagram!.classList.contains('is-obscured')).toBe(false)
-    }
-  })
-
-  it('only obscures the host for empty or error states', async () => {
-    const emptyHost = mount(Mermaid, { source: '' })
-    await nextTick()
-    expect(emptyHost.querySelector('.tn-mermaid__diagram')!.classList.contains('is-obscured')).toBe(
-      true
-    )
-  })
-})

package/src/components/Mermaid/adoptLiveSvg.test.ts

@@ -1,16 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import { adoptLiveSvg } from './adoptLiveSvg'
-
-describe('adoptLiveSvg', () => {
-  it('renames the root svg id and scoped theme selectors', () => {
-    const svg = `<svg id="tn-mermaid-1" xmlns="http://www.w3.org/2000/svg"><style>#tn-mermaid-1{fill:#ccc;}#tn-mermaid-1 .node{stroke:#fff;}#tn-mermaid-1_flowchart-v2-pointEnd{fill:red;}</style><path id="tn-mermaid-1_flowchart-v2-pointEnd"/></svg>`
-    const out = adoptLiveSvg(svg, 'tn-mermaid-1')
-    expect(out).toContain('id="tn-mermaid-1-live"')
-    expect(out).toContain('#tn-mermaid-1-live{fill:#ccc;}')
-    expect(out).toContain('#tn-mermaid-1-live .node{stroke:#fff;}')
-    expect(out).toContain('id="tn-mermaid-1_flowchart-v2-pointEnd"')
-    expect(out).toContain('#tn-mermaid-1_flowchart-v2-pointEnd{fill:red;}')
-    expect(out).not.toMatch(/id="tn-mermaid-1"/)
-  })
-})