Skip to content
sdlc

T-TUIL-json-canvas-vue-async-renderer-seam

State: closed/done · Impact: medium · Complexity: medium

Goal

Section titled “Goal”

json-canvas-vue bundles marked behind a synchronous MarkdownRenderer seam, so the obsidian pipeline (async) cannot be plugged in and notes had to bypass the seam. This task widens the seam to async, makes plain text the default, deletes marked, and ships the obsidian adapter in markdown-ui.

Today

Section titled “Today”
LocationRole today
packages/ts/json-canvas-vue/src/markdown.tsMarkdownRenderer.render(): string; markedRenderer (default) and plainTextRenderer; registry; renderedMarkdown() sanitizes with DOMPurify unless sanitized
packages/ts/json-canvas-vue/src/components/CanvasNode/index.vuemarkedText computed over renderedMarkdown(props.node.text) into v-html
packages/ts/json-canvas-vue/src/components/DatasetPanel/index.vuerenderers: MarkdownRenderer[] prop
packages/ts/json-canvas-vue/src/index.tsRe-exports the registry API and MarkdownRenderer
packages/ts/json-canvas-vue/src/markdown.test.tsRegistry and sanitize tests
packages/ts/json-canvas-vue/demo/components/FullPageDemo.vueCalls setActiveRenderer
packages/ts/json-canvas-vue/package.jsonDepends on marked and dompurify
solutions/determined/experiences/notes/app/components/NotesCanvasView.vueRenders text nodes with ObsidianMarkdown directly, bypassing the seam

Proposed

Section titled “Proposed”

MarkdownRenderer.render returns string | Promise<string>. CanvasNode/index.vue replaces the computed with a watch on node.text and the renderer version that awaits the result and writes it only if a monotonic token still matches. plainTextRenderer is the default and markedRenderer is deleted with the marked dependency; dompurify stays for the seam’s fallback sanitize. markdown-ui gains app/utils/mdCanvasRenderer.ts: an async MarkdownRenderer over renderToHtml with sanitized: true, for hosts that mount JsonCanvas and want the Obsidian dialect.

Approach

Section titled “Approach”
  1. markdown.ts: widen the type; delete markedRenderer and the marked.use block; default activeRendererId to plaintext; renderedMarkdown returns Promise<string> after awaiting and sanitizing.
  2. CanvasNode/index.vue: watch([() => props.node.text, version], ...) with a per-instance token; drop stale results; keep the v-html sites.
  3. Update DatasetPanel/index.vue types, index.ts exports and FullPageDemo.vue.
  4. Tests in markdown.test.ts: an async renderer resolves into the node; a slower earlier render does not overwrite a newer one.
  5. packages/ts/markdown-ui/app/utils/mdCanvasRenderer.ts: the obsidian adapter plus a test.
  6. Root bun install; bun install --frozen-lockfile; bun run test:run and bun run typecheck in packages/ts/json-canvas-vue; moon run product-workbench:check (notes canvas unaffected); the demo builds; moon run :check :test --affected. Flip the canvas row of the duplicates ledger in docs/LIBRARIES.md.

Files to touch

Section titled “Files to touch”
LocationKindChange
packages/ts/json-canvas-vue/src/markdown.tsmodifyAsync seam; plaintext default; delete markedRenderer
packages/ts/json-canvas-vue/src/components/CanvasNode/index.vuemodifyWatch plus token instead of computed
packages/ts/json-canvas-vue/src/components/DatasetPanel/index.vuemodifyType follow-through
packages/ts/json-canvas-vue/src/index.tsmodifyExport follow-through
packages/ts/json-canvas-vue/src/markdown.test.tsmodifyAsync and ordering tests
packages/ts/json-canvas-vue/demo/components/FullPageDemo.vuemodifyRenderer picker without marked
packages/ts/json-canvas-vue/package.jsonmodifyDelete marked
packages/ts/json-canvas-vue/README.mdmodifyDocument the async seam and default
packages/ts/markdown-ui/app/utils/mdCanvasRenderer.tsnewObsidian adapter
packages/ts/markdown-ui/tests/mdCanvasRenderer.test.tsnewAdapter test
docs/LIBRARIES.mdmodifyCanvas node markdown row flips to resolved
bun.lockmodifyRoot lockfile regen

Acceptance criteria

Section titled “Acceptance criteria”
  • AC-1: packages/ts/json-canvas-vue/package.json has no marked entry and grep -rn "from 'marked'" packages/ts/json-canvas-vue/src returns nothing.
  • AC-2: MarkdownRenderer.render is typed string | Promise<string> and getActiveRendererId() returns plaintext with no registration.
  • AC-3: A test in markdown.test.ts shows an earlier, slower render resolving after a newer one does not replace the newer output.
  • AC-4: bun run test:run and bun run typecheck pass in packages/ts/json-canvas-vue; moon run product-workbench:check passes.
  • AC-5: mdCanvasRenderer.ts exists in packages/ts/markdown-ui/app/utils/ with a passing test that renders a wikilink through the adapter.
  • AC-6: bun install --frozen-lockfile passes at the root.

Out of scope

Section titled “Out of scope”
  • Moving NotesCanvasView.vue onto the seam; it keeps its direct ObsidianMarkdown render.
  • Deleting dompurify from the package; the seam still sanitizes non-sanitizing renderers.
  • Editing canvas node text through MdSurface.

Dependencies

Section titled “Dependencies”
  • T-A0HT-md-ui-layer-skeleton hosts the adapter.
  • D-7VMX-markdown-ecosystem-strategy d.7 and d.10: peer content rides the extension seam and the bundled marked implementation is deleted.

Discovery context

Section titled “Discovery context”

Member of milestone M-931L; wave 6a of D-K3EM-markdown-editor-chrome-and-plugin-environment.

Depends on

Section titled “Depends on”

T-A0HT-md-ui-layer-skeleton

← Back to Tasks