Playground · Docs & Review

Document review editor demo — comment threads, outline & versions

The review surface (new in 2.13): select any text and press ⌘⌥M to open the comment composer — threads live in the right rail with Open/Resolved filters, replies and one-click resolve. The rail also carries a live Outline and manual Versions. Hover a block for the ⠿ drag handle, type / for blocks, and paste code — the code block header detects the language automatically.

Comment threads (⌘⌥M), outline & versions rail, block drag handles, code blocks with language detection.

💡 The code shown imports from the CDN for copy-paste; here it runs against a pre-loaded core. Edit anything and hit Run.

docs-review.js

// All-in-one build (everything registered):
//   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@oix1987/yjd/lib/styles.min.css">
//   import yjd from 'https://cdn.jsdelivr.net/npm/@oix1987/yjd';

const editor = new yjd('#editor', {
  width: '100%',
  sidePanel: true,                       // Outline · Comments · Versions rail
  content: '<h1>Streaming diffs</h1>' +
    '<p>The core applies AI edits as a <b>word-level diff</b> so nothing overwrites text the author kept.</p>' +
    '<h2>Pipeline</h2><p>Every operation lands through one command pipeline.</p>' +
    '<pre>export function wordDiff(a, b) {\n  const A = tokenize(a), B = tokenize(b);\n  return lcs(A, B).map(op => ({ type: op.k }));\n}</pre>' +
    '<h2>Benchmarks</h2><p>Cost per patch is O(nm) in the worst case.</p>'
});

// Seed a review thread + a version snapshot:
editor.saveVersion('Draft 1');
const b = editor.editor.querySelector('b');
const r = document.createRange(); r.selectNodeContents(b);
const sel = getSelection(); sel.removeAllRanges(); sel.addRange(r);
const id = editor.addComment('Do we still re-parse in v3?', 'Linh');
editor.addReply(id, 'Yes — behind options.markdown.', 'Duc');
sel.removeAllRanges();

// Try it: select text → ⌘⌥M · click the amber mark · hover a block for ⠿ · type /

Live previewall-in-one