@aquera/nile-elements 1.9.6 → 1.9.7

package/dist/src/nile-wysiwyg-editor/engine/pm.test.js

@@ -0,0 +1,883 @@
+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 { toEmbedUrl, isAllowedEmbedSrc } from './plugins/embeds';
+import { codeHighlightKey } from './plugins/code-highlight';
+/** Builds an editor state with the whole document selected. */
+function stateWithAllSelected(html) {
+    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 = [];
+        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 = [];
+        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 = [];
+        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);
+        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 = [
+        ['<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) {
+        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');
+    });
+});
+//# sourceMappingURL=pm.test.js.map