@aquera/nile-elements 1.9.5 → 1.9.7

package/src/nile-wysiwyg-editor/engine/pm.test.ts

@@ -0,0 +1,1088 @@
+import { expect } from '@open-wc/testing';
+import { TextSelection, NodeSelection, AllSelection } from 'prosemirror-state';
+import {
+  defaultSchema,
+  htmlToDoc,
+  htmlToSlice,
+  docToHtml,
+  isOfficeHtml,
+  cleanOfficeHtml,
+  docToMarkdown,
+  sanitizeHtml,
+  createEditorState,
+  getCommand,
+  computeToolbarState,
+  isDocEmpty,
+  countWords,
+  getFindState,
+  searchTr,
+  findStepTr,
+  replaceActiveTr,
+  replaceAllTr,
+  plainTextSlice,
+  stripSliceFormatting,
+} from './index';
+import type { SuggestionMatch } from './plugins/suggestions';
+import { toEmbedUrl, isAllowedEmbedSrc } from './plugins/embeds';
+import { codeHighlightKey } from './plugins/code-highlight';
+
+/** Builds an editor state with the whole document selected. */
+function stateWithAllSelected(html: string) {
+  const doc = htmlToDoc(defaultSchema, html);
+  const state = createEditorState({ doc });
+  const selection = TextSelection.create(state.doc, 1, state.doc.content.size - 1);
+  return state.apply(state.tr.setSelection(selection));
+}
+
+describe('sanitizeHtml', () => {
+  it('removes script elements entirely', () => {
+    expect(sanitizeHtml('<p>hi</p><script>alert(1)</script>')).to.equal('<p>hi</p>');
+  });
+
+  it('removes inline event handlers', () => {
+    const out = sanitizeHtml('<p onclick="alert(1)" onmouseover="x()">hi</p>');
+    expect(out).to.not.include('onclick').and.to.not.include('onmouseover');
+  });
+
+  it('drops javascript: URLs', () => {
+    const out = sanitizeHtml('<a href="javascript:alert(1)">x</a>');
+    expect(out).to.not.include('javascript:');
+  });
+
+  it('keeps safe links and forces noopener on _blank', () => {
+    const out = sanitizeHtml('<a href="https://example.com" target="_blank">x</a>');
+    expect(out).to.include('https://example.com');
+    expect(out).to.include('noopener');
+  });
+
+  it('filters style declarations to the allowed set', () => {
+    const out = sanitizeHtml(
+      '<span style="color: red; position: fixed; background-image: url(x)">x</span>'
+    );
+    expect(out).to.include('color: red');
+    expect(out).to.not.include('position');
+    expect(out).to.not.include('url(');
+  });
+
+  it('unwraps unknown elements but keeps their content', () => {
+    expect(sanitizeHtml('<article><p>kept</p></article>')).to.equal('<p>kept</p>');
+  });
+
+  it('drops iframes, styles and forms with content', () => {
+    const out = sanitizeHtml(
+      '<iframe src="x"></iframe><style>p{}</style><form><input></form><p>ok</p>'
+    );
+    expect(out).to.equal('<p>ok</p>');
+  });
+});
+
+describe('serializer round-trip', () => {
+  const cases = [
+    '<p>plain text</p>',
+    '<h2>heading</h2><p>body</p>',
+    '<p><strong>bold</strong> and <em>italic</em> and <u>underlined</u></p>',
+    '<ul><li><p>one</p></li><li><p>two</p></li></ul>',
+    '<ol><li><p>first</p></li></ol>',
+    '<blockquote><p>quoted</p></blockquote>',
+    '<p><a href="https://example.com">link</a></p>',
+    '<p style="text-align: center">centered</p>',
+    '<p><span style="color: rgb(255, 0, 0)">red</span></p>',
+    '<p>line<br>break</p>',
+    '<hr>',
+  ];
+
+  for (const html of cases) {
+    it(`round-trips ${html.slice(0, 40)}`, () => {
+      const doc = htmlToDoc(defaultSchema, html);
+      const out = docToHtml(doc);
+      const reparsed = htmlToDoc(defaultSchema, out);
+      expect(reparsed.eq(doc), `stable parse for ${html}`).to.equal(true);
+    });
+  }
+
+  it('parses Word-style font-weight styles as bold', () => {
+    const doc = htmlToDoc(defaultSchema, '<p><span style="font-weight: 700">x</span></p>');
+    expect(docToHtml(doc)).to.include('<strong>');
+  });
+
+  it('detects empty documents', () => {
+    expect(isDocEmpty(htmlToDoc(defaultSchema, ''))).to.equal(true);
+    expect(isDocEmpty(htmlToDoc(defaultSchema, '<p></p>'))).to.equal(true);
+    expect(isDocEmpty(htmlToDoc(defaultSchema, '<p>x</p>'))).to.equal(false);
+  });
+});
+
+describe('commands', () => {
+  it('toggles bold over a selection', () => {
+    let state = stateWithAllSelected('<p>hello</p>');
+    const bold = getCommand(state, 'bold')!;
+    bold(state, tr => {
+      state = state.apply(tr);
+    });
+    expect(docToHtml(state.doc)).to.equal('<p><strong>hello</strong></p>');
+  });
+
+  it('sets and clears headings', () => {
+    let state = stateWithAllSelected('<p>title</p>');
+    getCommand(state, 'heading', { level: 2 })!(state, tr => {
+      state = state.apply(tr);
+    });
+    expect(docToHtml(state.doc)).to.equal('<h2>title</h2>');
+    getCommand(state, 'paragraph')!(state, tr => {
+      state = state.apply(tr);
+    });
+    expect(docToHtml(state.doc)).to.equal('<p>title</p>');
+  });
+
+  it('wraps and lifts bullet lists', () => {
+    let state = stateWithAllSelected('<p>item</p>');
+    getCommand(state, 'bulletList')!(state, tr => {
+      state = state.apply(tr);
+    });
+    expect(docToHtml(state.doc)).to.include('<ul>');
+    getCommand(state, 'bulletList')!(state, tr => {
+      state = state.apply(tr);
+    });
+    expect(docToHtml(state.doc)).to.equal('<p>item</p>');
+  });
+
+  it('converts between list types in place', () => {
+    let state = stateWithAllSelected('<ul><li><p>item</p></li></ul>');
+    getCommand(state, 'orderedList')!(state, tr => {
+      state = state.apply(tr);
+    });
+    expect(docToHtml(state.doc)).to.include('<ol>');
+    expect(docToHtml(state.doc)).to.not.include('<ul>');
+  });
+
+  it('sets alignment on textblocks', () => {
+    let state = stateWithAllSelected('<p>text</p>');
+    getCommand(state, 'align', { align: 'right' })!(state, tr => {
+      state = state.apply(tr);
+    });
+    expect(docToHtml(state.doc)).to.include('text-align: right');
+  });
+
+  it('applies and removes links', () => {
+    let state = stateWithAllSelected('<p>click</p>');
+    getCommand(state, 'link', { href: 'https://example.com' })!(state, tr => {
+      state = state.apply(tr);
+    });
+    expect(docToHtml(state.doc)).to.include('href="https://example.com"');
+    getCommand(state, 'unlink')!(state, tr => {
+      state = state.apply(tr);
+    });
+    expect(docToHtml(state.doc)).to.equal('<p>click</p>');
+  });
+
+  it('applies text color and clears formatting', () => {
+    let state = stateWithAllSelected('<p>color</p>');
+    getCommand(state, 'textColor', { color: '#ff0000' })!(state, tr => {
+      state = state.apply(tr);
+    });
+    // Browsers normalize hex colors to rgb() in style attributes.
+    expect(docToHtml(state.doc)).to.match(/color: (#ff0000|rgb\(255, 0, 0\))/);
+    getCommand(state, 'clearFormatting')!(state, tr => {
+      state = state.apply(tr);
+    });
+    expect(docToHtml(state.doc)).to.equal('<p>color</p>');
+  });
+});
+
+describe('phase 2: rich content', () => {
+  it('round-trips tables', () => {
+    const html =
+      '<table><tbody><tr><th><p>h1</p></th><th><p>h2</p></th></tr>' +
+      '<tr><td><p>a</p></td><td><p>b</p></td></tr></tbody></table>';
+    const doc = htmlToDoc(defaultSchema, html);
+    const out = docToHtml(doc);
+    expect(out).to.include('<table');
+    expect(out).to.include('<th');
+    expect(htmlToDoc(defaultSchema, out).eq(doc)).to.equal(true);
+  });
+
+  it('keeps colspan/rowspan through sanitization', () => {
+    const out = sanitizeHtml('<table><tr><td colspan="2" rowspan="3">x</td></tr></table>');
+    expect(out).to.include('colspan="2"');
+    expect(out).to.include('rowspan="3"');
+  });
+
+  it('round-trips inline images', () => {
+    const html = '<p>look: <img src="https://x.dev/a.png" alt="A"></p>';
+    const doc = htmlToDoc(defaultSchema, html);
+    const out = docToHtml(doc);
+    expect(out).to.include('src="https://x.dev/a.png"');
+    expect(out).to.include('alt="A"');
+    expect(htmlToDoc(defaultSchema, out).eq(doc)).to.equal(true);
+  });
+
+  it('parses bare pasted images', () => {
+    const doc = htmlToDoc(defaultSchema, '<p>before</p><img src="https://x.dev/a.png">');
+    expect(docToHtml(doc)).to.include('<img src="https://x.dev/a.png"');
+  });
+
+  it('drops images with unsafe URLs but allows raster data URLs', () => {
+    expect(sanitizeHtml('<img src="javascript:alert(1)">')).to.not.include('src');
+    expect(
+      sanitizeHtml('<img src="data:image/png;base64,iVBORw0KGgo=">')
+    ).to.include('data:image/png');
+    expect(
+      sanitizeHtml('<img src="data:image/svg+xml,<svg onload=alert(1)>">')
+    ).to.not.include('svg');
+  });
+
+  it('round-trips code blocks preserving whitespace', () => {
+    const doc = htmlToDoc(
+      defaultSchema,
+      '<pre data-language="js"><code>const a = 1;\n  indent();</code></pre>'
+    );
+    const out = docToHtml(doc);
+    expect(out).to.include('data-language="js"');
+    expect(out).to.include('const a = 1;\n  indent();');
+  });
+
+  it('toggles code blocks via the codeBlock command', () => {
+    let state = stateWithAllSelected('<p>snippet</p>');
+    getCommand(state, 'codeBlock')!(state, tr => {
+      state = state.apply(tr);
+    });
+    expect(docToHtml(state.doc)).to.include('<pre');
+    getCommand(state, 'codeBlock')!(state, tr => {
+      state = state.apply(tr);
+    });
+    expect(docToHtml(state.doc)).to.equal('<p>snippet</p>');
+  });
+
+  it('inserts tables and edits rows/columns', () => {
+    let state = stateWithAllSelected('<p></p>');
+    getCommand(state, 'insertTable', { rows: 2, cols: 2 })!(state, tr => {
+      state = state.apply(tr);
+    });
+    let table = state.doc.firstChild!;
+    expect(table.type.name).to.equal('table');
+    expect(table.childCount).to.equal(2);
+
+    // Put the cursor inside the first cell, then add a row.
+    const inside = TextSelection.near(state.doc.resolve(4));
+    state = state.apply(state.tr.setSelection(inside));
+    getCommand(state, 'addRowAfter')!(state, tr => {
+      state = state.apply(tr);
+    });
+    table = state.doc.firstChild!;
+    expect(table.childCount).to.equal(3);
+
+    getCommand(state, 'deleteTable')!(state, tr => {
+      state = state.apply(tr);
+    });
+    expect(docToHtml(state.doc)).to.not.include('<table');
+  });
+
+  it('inserts inline images via the insertImage command', () => {
+    let state = stateWithAllSelected('<p></p>');
+    getCommand(state, 'insertImage', { src: 'https://x.dev/i.png', alt: 'pic' })!(
+      state,
+      tr => {
+        state = state.apply(tr);
+      }
+    );
+    const out = docToHtml(state.doc);
+    expect(out).to.include('<img');
+    expect(out).to.include('alt="pic"');
+  });
+
+  it('reports inTable and inCodeBlock in toolbar state', () => {
+    let state = stateWithAllSelected('<p></p>');
+    getCommand(state, 'insertTable', { rows: 2, cols: 2 })!(state, tr => {
+      state = state.apply(tr);
+    });
+    state = state.apply(state.tr.setSelection(TextSelection.near(state.doc.resolve(4))));
+    expect(computeToolbarState(state).inTable).to.equal(true);
+
+    const codeState = stateWithAllSelected('<pre><code>x</code></pre>');
+    expect(computeToolbarState(codeState).inCodeBlock).to.equal(true);
+  });
+});
+
+describe('phase 3: productivity', () => {
+  it('round-trips mention nodes', () => {
+    const html =
+      '<p>ping <span data-mention-trigger="@" data-mention-key="u1" data-mention-label="Ada">@Ada</span> now</p>';
+    const doc = htmlToDoc(defaultSchema, html);
+    const out = docToHtml(doc);
+    expect(out).to.include('data-mention-key="u1"');
+    expect(out).to.include('data-mention-label="Ada"');
+    expect(out).to.include('@Ada');
+    expect(htmlToDoc(defaultSchema, out).eq(doc)).to.equal(true);
+  });
+
+  it('keeps mention data attributes through sanitization', () => {
+    const out = sanitizeHtml(
+      '<span data-mention-key="u1" data-mention-trigger="@" data-mention-label="Ada" onclick="x()">@Ada</span>'
+    );
+    expect(out).to.include('data-mention-key="u1"');
+    expect(out).to.not.include('onclick');
+  });
+
+  it('tracks trigger queries through the suggestion plugin', () => {
+    const seen: SuggestionMatch[] = [];
+    let state = createEditorState({
+      doc: htmlToDoc(defaultSchema, '<p></p>'),
+      mentions: {
+        getTriggers: () => ['@'],
+        onChange: match => seen.push(match),
+      },
+    });
+    state = state.apply(state.tr.insertText('hello @ad', 1));
+    const last = seen[seen.length - 1];
+    expect(last.active).to.equal(true);
+    expect(last.trigger).to.equal('@');
+    expect(last.query).to.equal('ad');
+
+    // A space ends the suggestion.
+    state = state.apply(state.tr.insertText(' '));
+    expect(seen[seen.length - 1].active).to.equal(false);
+  });
+
+  it('does not trigger suggestions mid-word', () => {
+    const seen: SuggestionMatch[] = [];
+    const state = createEditorState({
+      doc: htmlToDoc(defaultSchema, '<p></p>'),
+      mentions: { getTriggers: () => ['@'], onChange: m => seen.push(m) },
+    });
+    state.apply(state.tr.insertText('email@example', 1));
+    expect(seen.every(m => !m.active)).to.equal(true);
+  });
+
+  it('finds, steps through, and replaces matches', () => {
+    let state = createEditorState({
+      doc: htmlToDoc(defaultSchema, '<p>cat dog cat</p><p>Cat nap</p>'),
+    });
+    state = state.apply(searchTr(state, 'cat'));
+    expect(getFindState(state).matches.length).to.equal(3);
+    expect(getFindState(state).activeIndex).to.equal(0);
+
+    state = state.apply(findStepTr(state, 'next'));
+    expect(getFindState(state).activeIndex).to.equal(1);
+    state = state.apply(findStepTr(state, 'prev'));
+    expect(getFindState(state).activeIndex).to.equal(0);
+
+    state = state.apply(replaceActiveTr(state, 'ferret')!);
+    expect(docToHtml(state.doc)).to.include('ferret dog cat');
+    // Matches recompute after the doc change.
+    expect(getFindState(state).matches.length).to.equal(2);
+
+    state = state.apply(replaceAllTr(state, 'newt')!);
+    expect(getFindState(state).matches.length).to.equal(0);
+    expect(docToHtml(state.doc)).to.equal('<p>ferret dog newt</p><p>newt nap</p>');
+  });
+
+  it('respects case sensitivity in find', () => {
+    let state = createEditorState({
+      doc: htmlToDoc(defaultSchema, '<p>Cat cat CAT</p>'),
+    });
+    state = state.apply(searchTr(state, 'cat', true));
+    expect(getFindState(state).matches.length).to.equal(1);
+  });
+
+  it('counts words and characters', () => {
+    const doc = htmlToDoc(defaultSchema, '<p>one two</p><p>three</p>');
+    expect(countWords(doc)).to.deep.equal({ words: 3, characters: 12 });
+    expect(countWords(htmlToDoc(defaultSchema, ''))).to.deep.equal({
+      words: 0,
+      characters: 0,
+    });
+  });
+});
+
+describe('small features', () => {
+  it('round-trips checklists', () => {
+    const html =
+      '<ul data-task-list="true"><li data-task-item="true" data-checked="true"><p>done</p></li>' +
+      '<li data-task-item="true" data-checked="false"><p>todo</p></li></ul>';
+    const doc = htmlToDoc(defaultSchema, html);
+    expect(doc.firstChild!.type.name).to.equal('task_list');
+    expect(doc.firstChild!.firstChild!.attrs.checked).to.equal(true);
+    const out = docToHtml(doc);
+    expect(out).to.include('data-checked="true"');
+    expect(htmlToDoc(defaultSchema, out).eq(doc)).to.equal(true);
+  });
+
+  it('plain lists still parse as bullet lists', () => {
+    const doc = htmlToDoc(defaultSchema, '<ul><li><p>plain</p></li></ul>');
+    expect(doc.firstChild!.type.name).to.equal('bullet_list');
+  });
+
+  it('toggles checklists and converts bullet lists in place', () => {
+    let state = stateWithAllSelected('<p>task</p>');
+    getCommand(state, 'taskList')!(state, tr => {
+      state = state.apply(tr);
+    });
+    expect(state.doc.firstChild!.type.name).to.equal('task_list');
+
+    // Convert to bullet list: items must be remapped too.
+    getCommand(state, 'bulletList')!(state, tr => {
+      state = state.apply(tr);
+    });
+    expect(state.doc.firstChild!.type.name).to.equal('bullet_list');
+    expect(state.doc.firstChild!.firstChild!.type.name).to.equal('list_item');
+
+    // And back to a checklist.
+    getCommand(state, 'taskList')!(state, tr => {
+      state = state.apply(tr);
+    });
+    expect(state.doc.firstChild!.firstChild!.type.name).to.equal('task_item');
+  });
+
+  it('enforces maxLength but always allows shrinking', () => {
+    let state = createEditorState({
+      doc: htmlToDoc(defaultSchema, '<p>12345678</p>'),
+      getMaxLength: () => 10,
+    });
+    state = state.apply(state.tr.insertText('90', 9));
+    expect(state.doc.textContent).to.equal('1234567890');
+
+    // Growing past the limit is rejected: the state stays unchanged.
+    const attempted = state.apply(state.tr.insertText('x', 11));
+    expect(attempted.doc.textContent).to.equal('1234567890');
+
+    // Deleting is always allowed.
+    state = state.apply(state.tr.delete(1, 6));
+    expect(state.doc.textContent).to.equal('67890');
+  });
+
+  it('suggestion minQueryLength keeps short queries inactive', () => {
+    const seen: SuggestionMatch[] = [];
+    let state = createEditorState({
+      doc: htmlToDoc(defaultSchema, '<p></p>'),
+      emoji: { onChange: m => seen.push(m) },
+    });
+    state = state.apply(state.tr.insertText(':s', 1));
+    expect(seen.filter(m => m.active)).to.have.length(0);
+    state = state.apply(state.tr.insertText('mi'));
+    const last = seen[seen.length - 1];
+    expect(last.active).to.equal(true);
+    expect(last.query).to.equal('smi');
+  });
+});
+
+describe('embeds', () => {
+  it('converts provider share URLs to embed URLs', () => {
+    expect(toEmbedUrl('https://www.youtube.com/watch?v=dQw4w9WgXcQ')).to.deep.equal({
+      src: 'https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ',
+      provider: 'youtube',
+    });
+    expect(toEmbedUrl('https://youtu.be/dQw4w9WgXcQ')!.src).to.include('/embed/dQw4w9WgXcQ');
+    expect(toEmbedUrl('https://www.youtube.com/shorts/dQw4w9WgXcQ')!.provider).to.equal('youtube');
+    expect(toEmbedUrl('https://vimeo.com/123456789')).to.deep.equal({
+      src: 'https://player.vimeo.com/video/123456789',
+      provider: 'vimeo',
+    });
+    expect(
+      toEmbedUrl('https://www.loom.com/share/abcdef0123456789abcdef0123456789')!.provider
+    ).to.equal('loom');
+  });
+
+  it('rejects non-provider and non-https URLs', () => {
+    expect(toEmbedUrl('https://evil.example.com/embed/x')).to.equal(null);
+    expect(toEmbedUrl('http://www.youtube.com/watch?v=dQw4w9WgXcQ')).to.equal(null);
+    expect(toEmbedUrl('javascript:alert(1)')).to.equal(null);
+    expect(toEmbedUrl('https://youtube.com.evil.com/watch?v=x')).to.equal(null);
+    expect(isAllowedEmbedSrc('https://evil.com/embed/x')).to.equal(false);
+  });
+
+  it('keeps allowlisted iframes through sanitization, drops the rest', () => {
+    const good = sanitizeHtml(
+      '<div data-embed-provider="youtube"><iframe src="https://www.youtube-nocookie.com/embed/abc123xyz"></iframe></div>'
+    );
+    expect(good).to.include('youtube-nocookie.com/embed');
+    const evil = sanitizeHtml('<iframe src="https://evil.example.com/steal"></iframe><p>ok</p>');
+    expect(evil).to.equal('<p>ok</p>');
+  });
+
+  it('round-trips embed nodes', () => {
+    const html =
+      '<div data-embed-provider="youtube"><iframe src="https://www.youtube-nocookie.com/embed/abc123xyz" title="Demo"></iframe></div>';
+    const doc = htmlToDoc(defaultSchema, html);
+    expect(doc.firstChild!.type.name).to.equal('embed');
+    const out = docToHtml(doc);
+    expect(out).to.include('data-embed-provider="youtube"');
+    expect(htmlToDoc(defaultSchema, out).eq(doc)).to.equal(true);
+  });
+
+  it('inserts embeds via the insertEmbed command', () => {
+    let state = stateWithAllSelected('<p></p>');
+    getCommand(state, 'insertEmbed', {
+      src: 'https://player.vimeo.com/video/123456789',
+      provider: 'vimeo',
+    })!(state, tr => {
+      state = state.apply(tr);
+    });
+    expect(state.doc.firstChild!.type.name).to.equal('embed');
+  });
+});
+
+describe('code highlighting', () => {
+  it('produces token decorations for code blocks', () => {
+    const state = createEditorState({
+      doc: htmlToDoc(
+        defaultSchema,
+        '<pre data-language="javascript"><code>const answer = 42; // why</code></pre>'
+      ),
+    });
+    const set = codeHighlightKey.getState(state)!;
+    const decos = set.find();
+    expect(decos.length).to.be.greaterThan(2);
+  });
+
+  it('skips plaintext blocks and updates the language attr', () => {
+    let state = createEditorState({
+      doc: htmlToDoc(
+        defaultSchema,
+        '<pre data-language="plaintext"><code>const answer = 42;</code></pre>'
+      ),
+    });
+    expect(codeHighlightKey.getState(state)!.find().length).to.equal(0);
+
+    state = state.apply(state.tr.setSelection(TextSelection.near(state.doc.resolve(1))));
+    getCommand(state, 'setCodeBlockLanguage', { language: 'javascript' })!(state, tr => {
+      state = state.apply(tr);
+    });
+    expect(state.doc.firstChild!.attrs.language).to.equal('javascript');
+    expect(codeHighlightKey.getState(state)!.find().length).to.be.greaterThan(1);
+  });
+});
+
+describe('phase 4: subscript & superscript', () => {
+  it('round-trips sub and sup marks', () => {
+    for (const html of ['<p>H<sub>2</sub>O</p>', '<p>x<sup>2</sup></p>']) {
+      const doc = htmlToDoc(defaultSchema, html);
+      expect(docToHtml(doc)).to.equal(html);
+      expect(htmlToDoc(defaultSchema, docToHtml(doc)).eq(doc)).to.equal(true);
+    }
+  });
+
+  it('parses vertical-align styles pasted from Word/Docs', () => {
+    expect(
+      docToHtml(htmlToDoc(defaultSchema, '<p><span style="vertical-align: sub">2</span></p>'))
+    ).to.include('<sub>');
+    expect(
+      docToHtml(htmlToDoc(defaultSchema, '<p><span style="vertical-align: super">2</span></p>'))
+    ).to.include('<sup>');
+  });
+
+  it('toggles sub/sup and keeps them mutually exclusive', () => {
+    let state = stateWithAllSelected('<p>x</p>');
+    getCommand(state, 'subscript')!(state, tr => {
+      state = state.apply(tr);
+    });
+    expect(docToHtml(state.doc)).to.equal('<p><sub>x</sub></p>');
+    // Applying superscript over a subscript replaces it (excludes).
+    getCommand(state, 'superscript')!(state, tr => {
+      state = state.apply(tr);
+    });
+    expect(docToHtml(state.doc)).to.equal('<p><sup>x</sup></p>');
+  });
+
+  it('reports sub/sup in toolbar state', () => {
+    expect(computeToolbarState(stateWithAllSelected('<p><sub>x</sub></p>')).subscript).to.equal(
+      true
+    );
+    expect(
+      computeToolbarState(stateWithAllSelected('<p><sup>x</sup></p>')).superscript
+    ).to.equal(true);
+  });
+});
+
+describe('phase 4: paste as plain text', () => {
+  it('builds a plain-text slice splitting on newlines', () => {
+    const slice = plainTextSlice(defaultSchema, 'line1\nline2');
+    expect(slice.content.childCount).to.equal(2);
+    expect(slice.content.firstChild!.textContent).to.equal('line1');
+    expect(slice.content.lastChild!.textContent).to.equal('line2');
+  });
+
+  it('strips marks and block structure from a rich slice', () => {
+    const rich = htmlToSlice(defaultSchema, '<h2><strong>bold</strong> head</h2>');
+    const plain = stripSliceFormatting(defaultSchema, rich);
+    const para = plain.content.firstChild!;
+    expect(para.type.name).to.equal('paragraph');
+    expect(para.textContent).to.equal('bold head');
+    expect(para.firstChild!.marks.length).to.equal(0);
+  });
+
+  it('only strips when the toggle reads true', () => {
+    let force = false;
+    const state = createEditorState({ getForcePlainText: () => force });
+    const paste = state.plugins
+      .map(p => p.props?.transformPasted)
+      .find(Boolean) as unknown as (slice: unknown, ...rest: unknown[]) => any;
+    const rich = htmlToSlice(defaultSchema, '<p><strong>bold</strong></p>');
+    // Off: slice passes through unchanged.
+    expect(paste(rich).eq(rich)).to.equal(true);
+    // On: formatting is dropped.
+    force = true;
+    const out = paste(rich);
+    expect(out.content.firstChild.firstChild.marks.length).to.equal(0);
+  });
+});
+
+describe('phase 4: more code languages', () => {
+  it('highlights newly registered languages', () => {
+    for (const language of ['go', 'rust', 'ruby', 'csharp']) {
+      const state = createEditorState({
+        doc: htmlToDoc(
+          defaultSchema,
+          `<pre data-language="${language}"><code>fn main() { let x = 1; }</code></pre>`
+        ),
+      });
+      expect(codeHighlightKey.getState(state)!.find().length, language).to.be.greaterThan(0);
+    }
+  });
+});
+
+describe('phase 4: markdown export', () => {
+  const cases: [string, string][] = [
+    ['<h2>Title</h2><p>Hello <strong>bold</strong> and <em>it</em></p>', '## Title\n\nHello **bold** and *it*\n'],
+    ['<ul><li><p>one</p></li><li><p>two</p></li></ul>', '- one\n- two\n'],
+    ['<ol><li><p>a</p></li><li><p>b</p></li></ol>', '1. a\n2. b\n'],
+    ['<blockquote><p>quoted</p></blockquote>', '> quoted\n'],
+    ['<p><a href="https://x.dev">link</a></p>', '[link](https://x.dev)\n'],
+    ['<p><code>x()</code></p>', '`x()`\n'],
+    ['<pre data-language="js"><code>const a = 1;</code></pre>', '```js\nconst a = 1;\n```\n'],
+    ['<p><img src="https://x.dev/a.png" alt="A"></p>', '![A](https://x.dev/a.png)\n'],
+    ['<hr>', '---\n'],
+    ['<p>H<sub>2</sub>O and x<sup>2</sup></p>', 'H<sub>2</sub>O and x<sup>2</sup>\n'],
+  ];
+
+  for (const [input, expected] of cases) {
+    it(`serializes ${input.slice(0, 36)}`, () => {
+      expect(docToMarkdown(htmlToDoc(defaultSchema, input))).to.equal(expected);
+    });
+  }
+
+  it('serializes checklists with checked state', () => {
+    const html =
+      '<ul data-task-list="true"><li data-task-item="true" data-checked="true"><p>done</p></li>' +
+      '<li data-task-item="true" data-checked="false"><p>todo</p></li></ul>';
+    expect(docToMarkdown(htmlToDoc(defaultSchema, html))).to.equal('- [x] done\n- [ ] todo\n');
+  });
+
+  it('serializes a GitHub-flavored table', () => {
+    const html =
+      '<table><tbody><tr><th><p>h1</p></th><th><p>h2</p></th></tr>' +
+      '<tr><td><p>a</p></td><td><p>b</p></td></tr></tbody></table>';
+    expect(docToMarkdown(htmlToDoc(defaultSchema, html))).to.equal(
+      '| h1 | h2 |\n| --- | --- |\n| a | b |\n'
+    );
+  });
+
+  it('returns an empty string for an empty document', () => {
+    expect(docToMarkdown(htmlToDoc(defaultSchema, '<p></p>'))).to.equal('');
+  });
+});
+
+describe('computeToolbarState', () => {
+  it('reports active marks and block info', () => {
+    const state = stateWithAllSelected('<h3><strong>bold heading</strong></h3>');
+    const ts = computeToolbarState(state);
+    expect(ts.bold).to.equal(true);
+    expect(ts.italic).to.equal(false);
+    expect(ts.blockType).to.equal('heading');
+    expect(ts.headingLevel).to.equal(3);
+  });
+
+  it('reports list and link context', () => {
+    const state = stateWithAllSelected(
+      '<ul><li><p><a href="https://x.dev">in list</a></p></li></ul>'
+    );
+    const ts = computeToolbarState(state);
+    expect(ts.inBulletList).to.equal(true);
+    expect(ts.linkActive).to.equal(true);
+    expect(ts.linkHref).to.equal('https://x.dev');
+  });
+
+  it('reports block info for a Ctrl+A AllSelection', () => {
+    const doc = htmlToDoc(defaultSchema, '<h1>sdasd</h1>');
+    const base = createEditorState({ doc });
+    const state = base.apply(base.tr.setSelection(new AllSelection(base.doc)));
+    const ts = computeToolbarState(state);
+    expect(ts.blockType).to.equal('heading');
+    expect(ts.headingLevel).to.equal(1);
+  });
+});
+
+describe('indent & outdent', () => {
+  /** Cursor inside the second item of a two-item bullet list. */
+  function stateInSecondItem() {
+    const doc = htmlToDoc(
+      defaultSchema,
+      '<ul><li><p>one</p></li><li><p>two</p></li></ul>'
+    );
+    const state = createEditorState({ doc });
+    // Position inside "two" (after "one" paragraph + item boundaries).
+    const pos = state.doc.content.size - 4;
+    return state.apply(
+      state.tr.setSelection(TextSelection.create(state.doc, pos))
+    );
+  }
+
+  it('indent sinks a list item into the previous one', () => {
+    let state = stateInSecondItem();
+    const applied = getCommand(state, 'indent')!(state, tr => {
+      state = state.apply(tr);
+    });
+    expect(applied).to.equal(true);
+    expect(docToHtml(state.doc)).to.equal(
+      '<ul><li><p>one</p><ul><li><p>two</p></li></ul></li></ul>'
+    );
+  });
+
+  it('outdent lifts a nested item back out', () => {
+    let state = stateInSecondItem();
+    getCommand(state, 'indent')!(state, tr => {
+      state = state.apply(tr);
+    });
+    getCommand(state, 'outdent')!(state, tr => {
+      state = state.apply(tr);
+    });
+    expect(docToHtml(state.doc)).to.equal(
+      '<ul><li><p>one</p></li><li><p>two</p></li></ul>'
+    );
+  });
+
+  it('indent adds margin steps to plain paragraphs', () => {
+    let state = stateWithAllSelected('<p>text</p>');
+    getCommand(state, 'indent')!(state, tr => {
+      state = state.apply(tr);
+    });
+    // Browsers may serialize style attributes with a trailing semicolon.
+    expect(docToHtml(state.doc)).to.include('margin-inline-start: 40px');
+    getCommand(state, 'indent')!(state, tr => {
+      state = state.apply(tr);
+    });
+    expect(docToHtml(state.doc)).to.include('margin-inline-start: 80px');
+    getCommand(state, 'outdent')!(state, tr => {
+      state = state.apply(tr);
+    });
+    getCommand(state, 'outdent')!(state, tr => {
+      state = state.apply(tr);
+    });
+    expect(docToHtml(state.doc)).to.equal('<p>text</p>');
+  });
+
+  it('outdent at indent 0 outside lists and quotes does nothing', () => {
+    let state = stateWithAllSelected('<p>text</p>');
+    const applied = getCommand(state, 'outdent')!(state, tr => {
+      state = state.apply(tr);
+    });
+    expect(applied).to.equal(false);
+  });
+
+  it('outdent lifts a block out of a blockquote', () => {
+    let state = stateWithAllSelected('<blockquote><p>quoted</p></blockquote>');
+    const applied = getCommand(state, 'outdent')!(state, tr => {
+      state = state.apply(tr);
+    });
+    expect(applied).to.equal(true);
+    expect(docToHtml(state.doc)).to.equal('<p>quoted</p>');
+  });
+});
+
+describe('list properties', () => {
+  it('sets and clears bullet marker styles', () => {
+    let state = stateWithAllSelected('<ul><li><p>a</p></li></ul>');
+    getCommand(state, 'setListStyle', { style: 'square' })!(state, tr => {
+      state = state.apply(tr);
+    });
+    expect(docToHtml(state.doc)).to.include('list-style-type: square');
+    getCommand(state, 'setListStyle', { style: null })!(state, tr => {
+      state = state.apply(tr);
+    });
+    expect(docToHtml(state.doc)).to.equal('<ul><li><p>a</p></li></ul>');
+  });
+
+  it('sets numbering style as the HTML type attribute', () => {
+    let state = stateWithAllSelected('<ol><li><p>a</p></li></ol>');
+    getCommand(state, 'setListStyle', { style: 'lower-roman' })!(state, tr => {
+      state = state.apply(tr);
+    });
+    expect(docToHtml(state.doc)).to.equal('<ol type="i"><li><p>a</p></li></ol>');
+  });
+
+  it('sets the start number of an ordered list', () => {
+    let state = stateWithAllSelected('<ol><li><p>a</p></li></ol>');
+    getCommand(state, 'setListStart', { start: 5 })!(state, tr => {
+      state = state.apply(tr);
+    });
+    expect(docToHtml(state.doc)).to.equal('<ol start="5"><li><p>a</p></li></ol>');
+  });
+
+  it('round-trips ol type through parsing', () => {
+    const doc = htmlToDoc(defaultSchema, '<ol type="A" start="3"><li><p>x</p></li></ol>');
+    expect(docToHtml(doc)).to.equal('<ol start="3" type="A"><li><p>x</p></li></ol>');
+  });
+});
+
+describe('figure & image commands', () => {
+  /** State with a NodeSelection on the inline image. */
+  function stateWithImageSelected() {
+    const doc = htmlToDoc(defaultSchema, '<p><img src="https://x.co/i.png" alt="pic"></p>');
+    const state = createEditorState({ doc });
+    // Image node position: inside the paragraph at pos 1.
+    return state.apply(state.tr.setSelection(NodeSelection.create(state.doc, 1)));
+  }
+
+  it('parses and serializes a figure with caption', () => {
+    const html =
+      '<figure><img src="https://x.co/i.png" alt="pic"><figcaption>My caption</figcaption></figure>';
+    const doc = htmlToDoc(defaultSchema, html);
+    const out = docToHtml(doc);
+    expect(out).to.include('<figure');
+    expect(out).to.include('src="https://x.co/i.png"');
+    expect(out).to.include('<figcaption');
+    expect(out).to.include('My caption');
+  });
+
+  it('parses image width from inline style', () => {
+    const doc = htmlToDoc(defaultSchema, '<p><img src="https://x.co/i.png" style="width: 240px"></p>');
+    expect(docToHtml(doc)).to.include('width: 240px');
+  });
+
+  it('toggleImageCaption converts an inline image into a figure', () => {
+    let state = stateWithImageSelected();
+    const applied = getCommand(state, 'toggleImageCaption')!(state, tr => {
+      state = state.apply(tr);
+    });
+    expect(applied).to.equal(true);
+    const out = docToHtml(state.doc);
+    expect(out).to.include('<figure');
+    expect(out).to.include('pic'); // alt prefills the caption
+  });
+
+  it('toggleImageCaption converts a figure back to an inline image', () => {
+    let state = stateWithAllSelected(
+      '<figure><img src="https://x.co/i.png"><figcaption>cap</figcaption></figure>'
+    );
+    // Cursor is inside the caption — selectedImageInfo resolves the figure.
+    const applied = getCommand(state, 'toggleImageCaption')!(state, tr => {
+      state = state.apply(tr);
+    });
+    expect(applied).to.equal(true);
+    const out = docToHtml(state.doc);
+    expect(out).to.not.include('<figure');
+    expect(out).to.include('<img');
+  });
+
+  it('setImageAlign promotes an inline image to an aligned figure', () => {
+    let state = stateWithImageSelected();
+    getCommand(state, 'setImageAlign', { align: 'center' })!(state, tr => {
+      state = state.apply(tr);
+    });
+    expect(docToHtml(state.doc)).to.include('data-align="center"');
+  });
+
+  it('setImageWidth writes the width attr', () => {
+    let state = stateWithImageSelected();
+    getCommand(state, 'setImageWidth', { width: 320 })!(state, tr => {
+      state = state.apply(tr);
+    });
+    expect(docToHtml(state.doc)).to.include('width: 320px');
+  });
+
+  it('deleteImage removes the selected image', () => {
+    let state = stateWithImageSelected();
+    getCommand(state, 'deleteImage')!(state, tr => {
+      state = state.apply(tr);
+    });
+    expect(docToHtml(state.doc)).to.not.include('<img');
+  });
+});
+
+describe('paste from Office', () => {
+  it('detects Word and Google Docs clipboard HTML', () => {
+    expect(isOfficeHtml('<p class="MsoNormal">x</p>')).to.equal(true);
+    expect(isOfficeHtml('<b id="docs-internal-guid-abc"><p>x</p></b>')).to.equal(true);
+    expect(isOfficeHtml('<p>plain</p>')).to.equal(false);
+  });
+
+  it('converts Word list paragraphs into a real bullet list', () => {
+    const word =
+      '<p class="MsoListParagraph" style="mso-list:l0 level1 lfo1">' +
+      '<span style="mso-list:Ignore">·<span>&nbsp;</span></span>Alpha</p>' +
+      '<p class="MsoListParagraph" style="mso-list:l0 level1 lfo1">' +
+      '<span style="mso-list:Ignore">·<span>&nbsp;</span></span>Beta</p>';
+    const out = cleanOfficeHtml(word);
+    expect(out).to.include('<ul>');
+    expect(out).to.include('Alpha');
+    expect(out).to.include('Beta');
+    expect(out).to.not.include('mso-list');
+  });
+
+  it('converts numbered Word paragraphs into an ordered list with nesting', () => {
+    const word =
+      '<p style="mso-list:l0 level1 lfo1"><span style="mso-list:Ignore">1.</span>One</p>' +
+      '<p style="mso-list:l0 level2 lfo1"><span style="mso-list:Ignore">a.</span>Nested</p>' +
+      '<p style="mso-list:l0 level1 lfo1"><span style="mso-list:Ignore">2.</span>Two</p>';
+    const out = cleanOfficeHtml(word);
+    expect(out.indexOf('<ol>')).to.be.greaterThan(-1);
+    // Nested list sits inside the first item.
+    expect(out.indexOf('Nested')).to.be.greaterThan(out.indexOf('One'));
+    expect(out.indexOf('Two')).to.be.greaterThan(out.indexOf('Nested'));
+  });
+
+  it('unwraps the Google Docs bold guid wrapper', () => {
+    const gdocs =
+      '<b id="docs-internal-guid-x" style="font-weight:normal"><p>hello</p></b>';
+    const out = cleanOfficeHtml(gdocs);
+    expect(out).to.equal('<p>hello</p>');
+  });
+
+  it('drops conditional comments and o:p tags', () => {
+    // Downlevel-hidden conditional: the marker content is inside the comment.
+    const word = '<p><!--[if !supportLists]>junk<![endif]-->text<o:p></o:p></p>';
+    const out = cleanOfficeHtml(word);
+    expect(out).to.not.include('junk');
+    expect(out).to.include('text');
+  });
+});
+
+describe('line height', () => {
+  it('sets and clears line height on textblocks', () => {
+    let state = stateWithAllSelected('<p>hello</p>');
+    getCommand(state, 'lineHeight', { lineHeight: '1.5' })!(state, tr => {
+      state = state.apply(tr);
+    });
+    expect(docToHtml(state.doc)).to.include('line-height: 1.5');
+    expect(computeToolbarState(state).lineHeight).to.equal('1.5');
+    getCommand(state, 'lineHeight', { lineHeight: null })!(state, tr => {
+      state = state.apply(tr);
+    });
+    expect(docToHtml(state.doc)).to.equal('<p>hello</p>');
+  });
+
+  it('parses line-height styles, converting percentages', () => {
+    const doc = htmlToDoc(defaultSchema, '<p style="line-height: 150%">a</p>');
+    expect(docToHtml(doc)).to.include('line-height: 1.5');
+  });
+
+  it('survives the sanitizer', () => {
+    expect(sanitizeHtml('<p style="line-height: 2">a</p>')).to.include('line-height: 2');
+  });
+
+  it('is cleared by clearFormatting', () => {
+    let state = stateWithAllSelected('<p style="line-height: 2">hello</p>');
+    getCommand(state, 'clearFormatting')!(state, tr => {
+      state = state.apply(tr);
+    });
+    expect(docToHtml(state.doc)).to.equal('<p>hello</p>');
+  });
+});
+
+describe('bookmarks', () => {
+  it('inserts a bookmark anchor at the cursor', () => {
+    let state = createEditorState({ doc: htmlToDoc(defaultSchema, '<p>hello</p>') });
+    state = state.apply(
+      state.tr.setSelection(TextSelection.create(state.doc, 1))
+    );
+    getCommand(state, 'insertBookmark', { id: 'intro' })!(state, tr => {
+      state = state.apply(tr);
+    });
+    expect(docToHtml(state.doc)).to.equal('<p><a id="intro" data-bookmark="true"></a>hello</p>');
+  });
+
+  it('rejects empty ids', () => {
+    const state = createEditorState({ doc: htmlToDoc(defaultSchema, '<p>hello</p>') });
+    expect(getCommand(state, 'insertBookmark', { id: '  ' })!(state)).to.equal(false);
+  });
+
+  it('round-trips id and legacy name anchors, but not links', () => {
+    const doc = htmlToDoc(
+      defaultSchema,
+      '<p><a id="one"></a>x<a name="two"></a>y<a href="https://a.b">link</a></p>'
+    );
+    const out = docToHtml(doc);
+    expect(out).to.include('<a id="one" data-bookmark="true"></a>');
+    expect(out).to.include('<a id="two" data-bookmark="true"></a>');
+    expect(out).to.include('<a href="https://a.b">link</a>');
+  });
+});
+
+describe('layout tables', () => {
+  const table = '<table><tr><td><p>a</p></td></tr></table>';
+
+  function stateInTable(html: string) {
+    const doc = htmlToDoc(defaultSchema, html);
+    const state = createEditorState({ doc });
+    // Place the cursor inside the first cell's paragraph.
+    let pos = 0;
+    state.doc.descendants((node, p) => {
+      if (!pos && node.isTextblock) pos = p + 1;
+      return !pos;
+    });
+    return state.apply(state.tr.setSelection(TextSelection.create(state.doc, pos)));
+  }
+
+  it('toggles the surrounding table into layout mode and back', () => {
+    let state = stateInTable(table);
+    getCommand(state, 'toggleLayoutTable')!(state, tr => {
+      state = state.apply(tr);
+    });
+    expect(docToHtml(state.doc)).to.include('<table role="presentation" data-layout="true">');
+    expect(computeToolbarState(state).tableLayout).to.equal(true);
+    getCommand(state, 'toggleLayoutTable')!(state, tr => {
+      state = state.apply(tr);
+    });
+    expect(docToHtml(state.doc)).to.not.include('data-layout');
+  });
+
+  it('parses role="presentation" tables as layout tables', () => {
+    const doc = htmlToDoc(
+      defaultSchema,
+      '<table role="presentation"><tr><td><p>a</p></td></tr></table>'
+    );
+    expect(docToHtml(doc)).to.include('role="presentation"');
+  });
+
+  it('returns false outside a table', () => {
+    const state = stateWithAllSelected('<p>hello</p>');
+    expect(getCommand(state, 'toggleLayoutTable')!(state)).to.equal(false);
+  });
+});
+
+describe('multi-level lists', () => {
+  const nested =
+    '<ol data-list-style="multilevel"><li><p>one</p><ol><li><p>deep</p></li></ol></li></ol>';
+
+  it('round-trips the multilevel marker', () => {
+    const doc = htmlToDoc(defaultSchema, nested);
+    expect(docToHtml(doc)).to.include('data-list-style="multilevel"');
+  });
+
+  it('survives the sanitizer', () => {
+    expect(sanitizeHtml(nested)).to.include('data-list-style="multilevel"');
+  });
+
+  it('applies multilevel to the outermost ordered list from a nested item', () => {
+    const html = '<ol><li><p>one</p><ol><li><p>deep</p></li></ol></li></ol>';
+    let state = createEditorState({ doc: htmlToDoc(defaultSchema, html) });
+    let pos = 0;
+    state.doc.descendants((node, p) => {
+      if (node.isTextblock && node.textContent === 'deep') pos = p + 1;
+      return pos === 0;
+    });
+    state = state.apply(state.tr.setSelection(TextSelection.create(state.doc, pos)));
+    getCommand(state, 'setListStyle', { style: 'multilevel' })!(state, tr => {
+      state = state.apply(tr);
+    });
+    const out = docToHtml(state.doc);
+    // The outer list carries the marker, not the nested one.
+    expect(out.startsWith('<ol data-list-style="multilevel">')).to.equal(true);
+    expect(out.indexOf('data-list-style')).to.equal(out.lastIndexOf('data-list-style'));
+    // The toolbar reports it from the nested cursor, and clearing removes it.
+    expect(computeToolbarState(state).listStyle).to.equal('multilevel');
+    getCommand(state, 'setListStyle', { style: null })!(state, tr => {
+      state = state.apply(tr);
+    });
+    expect(docToHtml(state.doc)).to.not.include('data-list-style');
+  });
+});