@tnotesjs/ui 0.1.4 → 0.2.0

package/src/excalidraw/fonts.test.ts

@@ -0,0 +1,66 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import {
+  getExcalidrawAssetPath,
+  inlineExcalidrawFonts,
+  resolveFontUrl,
+  setExcalidrawAssetPath
+} from './fonts'
+
+const SVG = `<svg><style>@font-face{src:url(https://esm.sh/@excalidraw/excalidraw@0.18.1/dist/prod/fonts/Virgil/Virgil-Regular.woff2)}</style></svg>`
+
+function fetchReturning(bytes: number[], ok = true) {
+  return vi.fn(async () => ({
+    ok,
+    status: ok ? 200 : 404,
+    arrayBuffer: async () => new Uint8Array(bytes).buffer
+  })) as unknown as typeof fetch
+}
+
+describe('画布字体自包含', () => {
+  it('把字体基址换成配置的本地目录', () => {
+    expect(
+      resolveFontUrl(
+        'https://esm.sh/@excalidraw/excalidraw@0.18.1/dist/prod/fonts/Virgil/Virgil-Regular.woff2',
+        '/excalidraw/'
+      )
+    ).toBe('/excalidraw/fonts/Virgil/Virgil-Regular.woff2')
+    expect(resolveFontUrl('/fonts/Virgil/x.woff2')).toBe('/fonts/Virgil/x.woff2')
+  })
+
+  it('把 SVG 里的字体内联成 data URL，不再有外链', async () => {
+    const result = await inlineExcalidrawFonts(SVG, {
+      base: '/excalidraw/',
+      fetchImpl: fetchReturning([1, 2, 3, 4])
+    })
+
+    expect(result.inlined).toBe(1)
+    expect(result.remaining).toEqual([])
+    expect(result.svg).toContain('data:font/woff2;base64,')
+    expect(result.svg).not.toContain('esm.sh')
+  })
+
+  it('取不到字体时如实报告 remaining，不静默失败', async () => {
+    const result = await inlineExcalidrawFonts(SVG, {
+      base: '/excalidraw/',
+      fetchImpl: fetchReturning([], false)
+    })
+
+    expect(result.inlined).toBe(0)
+    expect(result.remaining).toEqual(['/excalidraw/fonts/Virgil/Virgil-Regular.woff2'])
+    expect(result.svg).toBe(SVG)
+  })
+
+  it('没有字体引用时不做任何事', async () => {
+    const result = await inlineExcalidrawFonts('<svg></svg>', {
+      fetchImpl: fetchReturning([1])
+    })
+    expect(result.inlined).toBe(0)
+    expect(result.remaining).toEqual([])
+  })
+
+  it('资产基址可设置与读取（离线必需）', () => {
+    setExcalidrawAssetPath('/excalidraw/')
+    expect(getExcalidrawAssetPath()).toBe('/excalidraw/')
+  })
+})

package/src/excalidraw/fonts.ts

@@ -0,0 +1,92 @@
+/**
+ * 字体自包含。
+ *
+ * 背景：`@excalidraw/excalidraw` 官方 npm 包把资源基址硬编码为
+ * `https://esm.sh/@excalidraw/excalidraw@<version>/dist/prod/`（源码里的
+ * `ASSETS_FALLBACK_URL`），导出的 SVG 会引用 CDN 字体：
+ * - 离线 Desk / 离线站点会掉字体；
+ * - 用 `<img>` 渲染 SVG 时浏览器禁止加载外部资源，字体一定不生效。
+ *
+ * 因此只读路径必须把 SVG 实际引用到的字体内联成 data URL；同时用
+ * `EXCALIDRAW_ASSET_PATH` 让编辑器与导出时的文本度量走本地字体目录。
+ */
+
+export interface InlineFontsOptions {
+  /** 本地资源基址（与 window.EXCALIDRAW_ASSET_PATH 同一口径），如 '/excalidraw/' */
+  base?: string
+  /** 便于测试注入 */
+  fetchImpl?: typeof fetch
+}
+
+export interface InlineFontsResult {
+  svg: string
+  /** 成功内联的字体文件数 */
+  inlined: number
+  /** 内联失败仍是外链的 URL（调用方应记录，不能静默） */
+  remaining: string[]
+}
+
+const FONT_URL_PATTERN = /url\((?:'|")?([^'")]+\.woff2?)(?:'|")?\)/g
+
+/** 把 CDN / 相对基址统一成本地基址下的字体路径。 */
+export function resolveFontUrl(rawUrl: string, base?: string): string {
+  const fileName = rawUrl.split('/fonts/').pop() ?? rawUrl.split('/').pop() ?? rawUrl
+  if (!base) return rawUrl
+  const prefix = base.endsWith('/') ? base : `${base}/`
+  return `${prefix}fonts/${fileName}`
+}
+
+function toBase64(bytes: Uint8Array): string {
+  // 纯浏览器实现：这个包不依赖 node 类型（Buffer 在 SSG/Desk 浏览器侧不存在）
+  let binary = ''
+  const chunk = 0x8000
+  for (let offset = 0; offset < bytes.length; offset += chunk) {
+    binary += String.fromCharCode(...bytes.subarray(offset, offset + chunk))
+  }
+  return btoa(binary)
+}
+
+function mimeFor(url: string): string {
+  return url.endsWith('.woff') ? 'font/woff' : 'font/woff2'
+}
+
+export async function inlineExcalidrawFonts(
+  svg: string,
+  options: InlineFontsOptions = {}
+): Promise<InlineFontsResult> {
+  const fetchImpl = options.fetchImpl ?? (typeof fetch === 'function' ? fetch : undefined)
+  const urls = [...new Set([...svg.matchAll(FONT_URL_PATTERN)].map((match) => match[1]))]
+  if (urls.length === 0) return { svg, inlined: 0, remaining: [] }
+  if (!fetchImpl) return { svg, inlined: 0, remaining: urls }
+
+  const replacements = new Map<string, string>()
+  const remaining: string[] = []
+  for (const original of urls) {
+    const target = resolveFontUrl(original, options.base)
+    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)}`)
+    } catch {
+      remaining.push(target)
+    }
+  }
+
+  let next = svg
+  for (const [from, to] of replacements) {
+    next = next.split(from).join(to)
+  }
+  return { svg: next, inlined: replacements.size, remaining }
+}
+
+/** 告知 Excalidraw 从本地目录取字体（离线必需）。 */
+export function setExcalidrawAssetPath(base: string): void {
+  if (typeof window === 'undefined') return
+  ;(window as { EXCALIDRAW_ASSET_PATH?: string }).EXCALIDRAW_ASSET_PATH = base
+}
+
+export function getExcalidrawAssetPath(): string | undefined {
+  if (typeof window === 'undefined') return undefined
+  return (window as { EXCALIDRAW_ASSET_PATH?: string }).EXCALIDRAW_ASSET_PATH
+}

package/src/excalidraw/renderer.test.ts

@@ -0,0 +1,148 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { createExcalidrawSvgRenderer } from './renderer'
+import { SvgCache } from './scene'
+
+const scene = (extra: Record<string, unknown> = {}) =>
+  JSON.stringify({
+    type: 'excalidraw',
+    elements: [{ id: 'rect-1' }],
+    appState: {},
+    files: {},
+    ...extra
+  })
+
+function setup(options: {
+  content: string
+  theme?: 'light' | 'dark'
+  render?: () => Promise<string>
+}) {
+  const renderCalls: Array<{ dark: boolean }> = []
+  const cache = new SvgCache(4)
+  const renderer = createExcalidrawSvgRenderer({
+    getContent: () => options.content,
+    getTheme: () => options.theme ?? 'light',
+    cache,
+    loadExporter: async () => ({
+      renderExcalidrawSvg: async (_scene, exportOptions) => {
+        renderCalls.push(exportOptions)
+        if (options.render) return await options.render()
+        return `<svg data-dark="${exportOptions.dark}">ok</svg>`
+      }
+    })
+  })
+  return { renderer, renderCalls, cache }
+}
+
+beforeEach(() => {
+  vi.restoreAllMocks()
+})
+
+describe('只读画布渲染器', () => {
+  it('渲染成功的 SVG 变成 data URL，不触碰文件系统', async () => {
+    const { renderer, renderCalls } = setup({ content: scene() })
+    await renderer.render()
+
+    expect(renderer.state.value).toBe('ready')
+    expect(renderer.dataUrl.value).toMatch(/^data:image\/svg\+xml;charset=utf-8,/)
+    expect(decodeURIComponent(renderer.dataUrl.value)).toContain('<svg')
+    expect(renderCalls).toHaveLength(1)
+  })
+
+  it('相同内容与主题命中缓存，不重复导出', async () => {
+    const cache = new SvgCache(4)
+    const calls: number[] = []
+    const make = () =>
+      createExcalidrawSvgRenderer({
+        getContent: () => scene(),
+        getTheme: () => 'light',
+        cache,
+        loadExporter: async () => ({
+          renderExcalidrawSvg: async () => {
+            calls.push(1)
+            return '<svg>once</svg>'
+          }
+        })
+      })
+    await make().render()
+    await make().render()
+    expect(calls).toHaveLength(1)
+  })
+
+  it('深色主题单独缓存，导出选项跟随主题', async () => {
+    const { renderer, renderCalls, cache } = setup({ content: scene(), theme: 'dark' })
+    await renderer.render()
+    expect(renderCalls[0]).toEqual({ dark: true })
+    expect(cache.size).toBe(1)
+    expect(decodeURIComponent(renderer.dataUrl.value)).toContain('data-dark="true"')
+  })
+
+  it('非法 JSON 与空场景进入错误态，且不调用导出器', async () => {
+    const broken = setup({ content: '{ nope' })
+    await broken.renderer.render()
+    expect(broken.renderer.state.value).toBe('error')
+    expect(broken.renderer.errorReason.value).toContain('合法 JSON')
+    expect(broken.renderCalls).toHaveLength(0)
+
+    const empty = setup({ content: JSON.stringify({ type: 'excalidraw', elements: [] }) })
+    await empty.renderer.render()
+    expect(empty.renderer.state.value).toBe('error')
+    expect(empty.renderer.errorReason.value).toBe('空画布')
+  })
+
+  it('导出抛错时进入错误态而不是崩掉', async () => {
+    const { renderer } = setup({
+      content: scene(),
+      render: async () => {
+        throw new Error('导出失败')
+      }
+    })
+    await renderer.render()
+    expect(renderer.state.value).toBe('error')
+    expect(renderer.errorReason.value).toBe('导出失败')
+    expect(renderer.dataUrl.value).toBe('')
+  })
+
+  it('在途结果过期时被丢弃（内容已变化）', async () => {
+    let release: ((svg: string) => void) | undefined
+    const calls: string[] = []
+    let content = scene()
+    const renderer = createExcalidrawSvgRenderer({
+      getContent: () => content,
+      getTheme: () => 'light',
+      cache: new SvgCache(4),
+      loadExporter: async () => ({
+        renderExcalidrawSvg: async () => {
+          calls.push(content)
+          if (calls.length === 1) {
+            return await new Promise<string>((resolve) => {
+              release = resolve
+            })
+          }
+          return '<svg>new</svg>'
+        }
+      })
+    })
+
+    const first = renderer.render()
+    content = scene({ elements: [{ id: 'newer' }] })
+    const second = renderer.render()
+    // 等两次 render 都进入 exporter（动态 import 需要一个微任务）
+    for (let tick = 0; tick < 5 && !release; tick += 1) await Promise.resolve()
+    release?.('<svg>stale</svg>')
+    await Promise.all([first, second])
+
+    expect(decodeURIComponent(renderer.dataUrl.value)).toContain('new')
+    expect(decodeURIComponent(renderer.dataUrl.value)).not.toContain('stale')
+  })
+
+  it('释放后清空 data URL，之后再渲染不再产生输出', async () => {
+    const { renderer } = setup({ content: scene() })
+    await renderer.render()
+    renderer.dispose()
+    expect(renderer.dataUrl.value).toBe('')
+    await renderer.render()
+    expect(renderer.state.value).toBe('idle')
+    expect(renderer.dataUrl.value).toBe('')
+  })
+})

package/src/excalidraw/renderer.ts

@@ -0,0 +1,105 @@
+/**
+ * 只读画布渲染器的纯逻辑：与 Vue 组件解耦，便于单测。
+ *
+ * 职责：解析场景 → 命中缓存或懒加载导出 → 产出可直接给 <img> 的 data URL。
+ * 不做文件写入；过期结果一律丢弃；释放时清空 data URL。
+ */
+import { ref, type Ref } from 'vue'
+
+import { parseExcalidrawScene, sceneCacheKey, svgCache, type SvgCache } from './scene'
+
+export type ExcalidrawViewState = 'idle' | 'loading' | 'ready' | 'error'
+
+export interface ExcalidrawSvgRenderer {
+  state: Ref<ExcalidrawViewState>
+  errorReason: Ref<string>
+  dataUrl: Ref<string>
+  render(): Promise<void>
+  dispose(): void
+}
+
+export interface ExcalidrawSvgRendererOptions {
+  getContent: () => string
+  /** undefined 表示跟随宿主（由组件解析 .dark 后回传） */
+  getTheme: () => 'light' | 'dark'
+  /** 引擎版本进缓存键：升级 Excalidraw 后旧缓存自动失效 */
+  engine?: string
+  cache?: SvgCache
+  /** 便于测试注入；默认动态 import 真实导出器 */
+  loadExporter?: () => Promise<{
+    renderExcalidrawSvg: (scene: unknown, options: { dark: boolean }) => Promise<string>
+  }>
+}
+
+export function toSvgDataUrl(svg: string): string {
+  // encodeURIComponent：中文文本与特殊字符在 data URL 里都安全
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`
+}
+
+export function createExcalidrawSvgRenderer(
+  options: ExcalidrawSvgRendererOptions
+): ExcalidrawSvgRenderer {
+  const state = ref<ExcalidrawViewState>('idle')
+  const errorReason = ref('')
+  const dataUrl = ref('')
+  const cache = options.cache ?? svgCache
+  const engine = options.engine ?? 'excalidraw-0.18.1'
+  const loadExporter = options.loadExporter ?? (() => import('./exporter') as Promise<never>)
+  let generation = 0
+  let disposed = false
+
+  function fail(reason: string): void {
+    state.value = 'error'
+    errorReason.value = reason
+    dataUrl.value = ''
+  }
+
+  async function render(): Promise<void> {
+    if (disposed) return
+    const current = (generation += 1)
+    const content = options.getContent()
+    const dark = options.getTheme() === 'dark'
+
+    const parsed = parseExcalidrawScene(content)
+    if (!parsed.ok) {
+      fail(parsed.reason)
+      return
+    }
+    if (parsed.scene.elements.length === 0) {
+      fail('空画布')
+      return
+    }
+
+    const key = sceneCacheKey(content, dark, engine)
+    const cached = cache.get(key)
+    if (cached !== undefined) {
+      dataUrl.value = toSvgDataUrl(cached)
+      errorReason.value = ''
+      state.value = 'ready'
+      return
+    }
+
+    state.value = 'loading'
+    try {
+      const exporter = await loadExporter()
+      const svg = await exporter.renderExcalidrawSvg(parsed.scene, { dark })
+      if (disposed || current !== generation) return // 过期结果：内容或主题已更新
+      cache.set(key, svg)
+      dataUrl.value = toSvgDataUrl(svg)
+      errorReason.value = ''
+      state.value = 'ready'
+    } catch (error) {
+      if (disposed || current !== generation) return
+      fail(error instanceof Error ? error.message : String(error))
+    }
+  }
+
+  function dispose(): void {
+    disposed = true
+    generation += 1
+    dataUrl.value = ''
+    state.value = 'idle'
+  }
+
+  return { state, errorReason, dataUrl, render, dispose }
+}

package/src/excalidraw/scene.ts

@@ -0,0 +1,93 @@
+/**
+ * 只读画布场景的解析与缓存键。
+ *
+ * 不写任何文件：只读视图只把 JSON 解析成场景，导出结果只进内存缓存。
+ */
+
+export interface ExcalidrawScene {
+  elements: unknown[]
+  appState: Record<string, unknown>
+  files: Record<string, unknown>
+}
+
+export type SceneParseResult = { ok: true; scene: ExcalidrawScene } | { ok: false; reason: string }
+
+export function parseExcalidrawScene(content: string): SceneParseResult {
+  let parsed: unknown
+  try {
+    parsed = JSON.parse(content)
+  } catch {
+    return { ok: false, reason: '画布内容不是合法 JSON' }
+  }
+  if (!parsed || typeof parsed !== 'object') {
+    return { ok: false, reason: '画布内容不是场景对象' }
+  }
+  const candidate = parsed as Partial<ExcalidrawScene> & { type?: unknown }
+  if (candidate.type !== 'excalidraw' || !Array.isArray(candidate.elements)) {
+    return { ok: false, reason: '不是 Excalidraw 场景' }
+  }
+  return {
+    ok: true,
+    scene: {
+      elements: candidate.elements,
+      appState:
+        candidate.appState && typeof candidate.appState === 'object'
+          ? (candidate.appState as Record<string, unknown>)
+          : {},
+      files:
+        candidate.files && typeof candidate.files === 'object'
+          ? (candidate.files as Record<string, unknown>)
+          : {}
+    }
+  }
+}
+
+/** FNV-1a：浏览器里不需要 node:crypto，仅用于内存缓存键。 */
+export function sceneCacheKey(content: string, dark: boolean, engine: string): string {
+  let hash = 0x811c9dc5
+  for (let index = 0; index < content.length; index += 1) {
+    hash ^= content.charCodeAt(index)
+    hash = Math.imul(hash, 0x01000193) >>> 0
+  }
+  return `${engine}:${dark ? 'dark' : 'light'}:${hash.toString(16)}:${content.length}`
+}
+
+/**
+ * 有界内存缓存：画布越大缓存越值钱，但不能无上限。
+ * 只存字符串，卸载后由组件负责释放 Blob/data URL。
+ */
+export class SvgCache {
+  private readonly entries = new Map<string, string>()
+
+  constructor(private readonly limit = 24) {}
+
+  get(key: string): string | undefined {
+    const value = this.entries.get(key)
+    if (value === undefined) return undefined
+    // 命中后移到末尾，实现 LRU 淘汰
+    this.entries.delete(key)
+    this.entries.set(key, value)
+    return value
+  }
+
+  set(key: string, value: string): void {
+    this.entries.delete(key)
+    this.entries.set(key, value)
+    while (this.entries.size > this.limit) {
+      const oldest = this.entries.keys().next().value
+      if (oldest === undefined) break
+      this.entries.delete(oldest)
+    }
+  }
+
+  clear(): void {
+    this.entries.clear()
+  }
+
+  get size(): number {
+    return this.entries.size
+  }
+}
+
+/** 模块级共享缓存：同一篇笔记的多个入口（卡片/全屏）复用同一份导出结果。 */
+export const svgCache = new SvgCache()

package/src/index.ts

@@ -1,43 +1,35 @@
-export { default as BilibiliVideo } from "./components/BilibiliVideo/BilibiliVideo.vue";
-export { default as WordList } from "./components/WordList/WordList.vue";
-export { default as Mermaid } from "./components/Mermaid/Mermaid.vue";
-export { default as Mindmap } from "./components/Mindmap/Mindmap.vue";
-export { default as FocusBreadcrumbs } from "./components/Mindmap/FocusBreadcrumbs.vue";
-export { default as NotesTable } from "./components/NotesTable/NotesTable.vue";
-export { default as Footprints } from "./components/Footprints/Footprints.vue";
+export { default as BilibiliVideo } from './components/BilibiliVideo/BilibiliVideo.vue'
+export { default as WordList } from './components/WordList/WordList.vue'
+export { default as Mermaid } from './components/Mermaid/Mermaid.vue'
+export { default as Mindmap } from './components/Mindmap/Mindmap.vue'
+export { default as FocusBreadcrumbs } from './components/Mindmap/FocusBreadcrumbs.vue'
+export { default as NotesTable } from './components/NotesTable/NotesTable.vue'
+export { default as Footprints } from './components/Footprints/Footprints.vue'
 export {
   WORD_LIST_FEATURES_FULL,
   WORD_LIST_FEATURES_STATIC,
-  resolveWordListFeatures,
-} from "./components/WordList/wordListFeatures";
-export type { WordListFeatures } from "./components/WordList/wordListFeatures";
-export {
-  normalizeMindmapMarkdown,
-  parseMindmapFence,
-  parseMindmapReference,
-} from "./components/Mindmap/markdown";
-export type {
-  MindmapFenceOptions,
-  MindmapReference,
-  NormalizeMindmapOptions,
-} from "./components/Mindmap/markdown";
-export type { NotesTableRow } from "./components/NotesTable/types";
+  resolveWordListFeatures
+} from './components/WordList/wordListFeatures'
+export type { WordListFeatures } from './components/WordList/wordListFeatures'
+export { normalizeMindmapMarkdown, parseMindmapFence } from './components/Mindmap/markdown'
+export type { MindmapFenceOptions, NormalizeMindmapOptions } from './components/Mindmap/markdown'
+export type { NotesTableRow } from './components/NotesTable/types'
 export {
   parseFootprintsSource,
   rebuildFootprintsSource,
-  parseFootprintsDatetime,
-} from "./components/Footprints/parse";
-export type { FootprintsPayload } from "./components/Footprints/parse";
-export { default as Badge } from "./components/Badge/Badge.vue";
-export { default as CodeBlock } from "./components/CodeBlock/CodeBlock.vue";
-export { default as CodeGroup } from "./components/CodeGroup/CodeGroup.vue";
-export { default as ImagePreview } from "./components/ImagePreview/ImagePreview.vue";
-export * from "./browser/clipboard";
-export * from "./browser/theme";
-export * from "./code/highlight";
+  parseFootprintsDatetime
+} from './components/Footprints/parse'
+export type { FootprintsPayload } from './components/Footprints/parse'
+export { default as Badge } from './components/Badge/Badge.vue'
+export { default as CodeBlock } from './components/CodeBlock/CodeBlock.vue'
+export { default as CodeGroup } from './components/CodeGroup/CodeGroup.vue'
+export { default as ImagePreview } from './components/ImagePreview/ImagePreview.vue'
+export * from './browser/clipboard'
+export * from './browser/theme'
+export * from './code/highlight'
 export {
   hydrateTnSwipers,
   applySwiperTabsPadding,
   createSwiperTabNav,
-  wrapSlideIndex,
-} from "./swiper/hydrate";
+  wrapSlideIndex
+} from './swiper/hydrate'

package/src/markdown/image.test.ts

@@ -51,9 +51,7 @@ describe('image markdown helpers', () => {
       rest: ''
     })
     expect(normalizeImageAlign('middle')).toBe('center')
-    expect(formatImageAttrs({ width: '400px', align: 'center' })).toBe(
-      '{w=400px align=center}'
-    )
+    expect(formatImageAttrs({ width: '400px', align: 'center' })).toBe('{w=400px align=center}')
     expect(formatImageAttrs({ align: 'left' })).toBe('')
   })
 

package/src/markdown/image.ts

@@ -76,13 +76,9 @@ export function normalizeImageWidth(raw: string): string {
 }
 
 /** Logical CSS px for a pasted bitmap, folding device pixel ratio (4K/retina). */
-export function pasteDisplayWidthPx(
-  naturalWidth: number,
-  devicePixelRatio = 1
-): string {
+export function pasteDisplayWidthPx(naturalWidth: number, devicePixelRatio = 1): string {
   if (!Number.isFinite(naturalWidth) || naturalWidth <= 0) return ''
-  const dpr =
-    Number.isFinite(devicePixelRatio) && devicePixelRatio > 0 ? devicePixelRatio : 1
+  const dpr = Number.isFinite(devicePixelRatio) && devicePixelRatio > 0 ? devicePixelRatio : 1
   return normalizeImageWidth(`${Math.round(naturalWidth / dpr)}px`)
 }
 
@@ -90,10 +86,7 @@ export function formatImageWidthAttr(width: string): string {
   return formatImageAttrs({ width, align: 'left' })
 }
 
-export function formatImageAttrs(attrs: {
-  width?: string
-  align?: ImageAlign | string
-}): string {
+export function formatImageAttrs(attrs: { width?: string; align?: ImageAlign | string }): string {
   const width = normalizeImageWidth(attrs.width ?? '')
   const align = normalizeImageAlign(attrs.align ?? '')
   const parts: string[] = []
@@ -104,9 +97,7 @@ export function formatImageAttrs(attrs: {
 
 export function serializeImageMarkdown(image: ImageMarkdown): string {
   const alt = image.alt.replaceAll('[', '').replaceAll(']', '')
-  const title = image.title?.trim()
-    ? ` "${image.title.replaceAll('"', '')}"`
-    : ''
+  const title = image.title?.trim() ? ` "${image.title.replaceAll('"', '')}"` : ''
   const suffix = formatImageAttrs({
     width: image.width ?? '',
     align: image.align ?? 'left'

package/src/styles/code.css

@@ -105,13 +105,13 @@
   color: var(--shiki-light);
   background-color: transparent;
 }
-html.dark:not([data-theme="light"]) .tn-code-highlight,
-html[data-theme="dark"] .tn-code-highlight {
+html.dark:not([data-theme='light']) .tn-code-highlight,
+html[data-theme='dark'] .tn-code-highlight {
   color: var(--shiki-dark);
   background-color: var(--tn-c-bg-soft);
 }
-html.dark:not([data-theme="light"]) .tn-code-highlight span:not(.line),
-html[data-theme="dark"] .tn-code-highlight span:not(.line) {
+html.dark:not([data-theme='light']) .tn-code-highlight span:not(.line),
+html[data-theme='dark'] .tn-code-highlight span:not(.line) {
   color: var(--shiki-dark);
   background-color: transparent;
 }
@@ -151,7 +151,7 @@ html[data-theme="dark"] .tn-code-highlight span:not(.line) {
   border-bottom: 2px solid transparent;
   padding: 4px 10px;
 }
-.tn-code-group__tabs button[aria-selected="true"] {
+.tn-code-group__tabs button[aria-selected='true'] {
   color: var(--tn-c-brand);
   border-bottom-color: var(--tn-c-brand);
 }

package/src/styles/prose.css

@@ -104,7 +104,7 @@
 :is(.tn-prose, .vp-doc) :where(hr) {
   margin: 16px 0;
   border: 0;
-  border-top: 1px solid var(--tn-c-text-2);
+  border-top: 1px solid var(--tn-c-divider);
 }
 :is(.tn-prose, .vp-doc) :where(img) {
   max-width: 100%;
@@ -198,7 +198,7 @@
   display: none;
 }
 :is(.tn-prose, .vp-doc) :where(details.tn-custom-block > summary::before) {
-  content: "";
+  content: '';
   flex: none;
   box-sizing: border-box;
   width: 0.42em;

package/src/styles/swiper.css

@@ -101,7 +101,7 @@
   z-index: 1;
   height: 2px;
   border-radius: 2px;
-  content: "";
+  content: '';
   background-color: transparent;
   transition: background-color 0.2s ease;
 }