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 non-https iframes and forms with content', () => {
    const out = sanitizeHtml(
      '<iframe src="x"></iframe><form><input></form><p>ok</p>'
    );
    expect(out).to.equal('<p>ok</p>');
  });

  it('keeps <style> blocks and sanitizes their CSS', () => {
    const out = sanitizeHtml(
      '<style>@import url("http://evil/x.css"); p{color:red} a{behavior:url(x.htc)} ' +
        'b{width:expression(alert(1))} c{background:url(http://evil/x.png)}</style><p>ok</p>'
    );
    expect(out).to.include('<style>');
    expect(out).to.include('color:red');
    expect(out).to.include('<p>ok</p>');
    expect(out).to.not.match(/@import/i);
    expect(out).to.not.match(/expression\s*\(/i);
    expect(out).to.not.match(/behavior\s*:/i);
    expect(out).to.not.match(/url\(\s*['"]?http/i);
  });

  it('keeps safe data-image and #fragment url() in <style>', () => {
    const out = sanitizeHtml(
      '<style>a{background:url(data:image/png;base64,AAAA)} b{clip-path:url(#f)}</style>'
    );
    expect(out).to.include('url(data:image/png');
    expect(out).to.include('url(#f)');
  });
});

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('round-trips an author <style> block through the schema', () => {
    const doc = htmlToDoc(defaultSchema, '<style>p{color:red}</style><p>hi</p>');
    expect(doc.firstChild!.type.name).to.equal('styleBlock');
    const out = docToHtml(doc);
    expect(out).to.include('<style>');
    expect(out).to.match(/color:\s*red/i);
    expect(out).to.include('<p>hi</p>');
    // Malicious CSS is neutralized on the round-trip, not just at the surface.
    const evil = docToHtml(
      htmlToDoc(defaultSchema, '<style>@import url(http://evil);x{color:blue}</style><p>ok</p>')
    );
    expect(evil).to.include('<style>');
    expect(evil).to.not.match(/@import/i);
  });

  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('accepts any https URL as a generic embed, rejects non-https', () => {
    expect(toEmbedUrl('https://example.com/player/x')).to.deep.equal({
      src: 'https://example.com/player/x',
      provider: 'generic',
    });
    // Lookalike hosts are no longer canonicalized as a provider, just generic.
    expect(toEmbedUrl('https://youtube.com.evil.com/watch?v=x')!.provider).to.equal('generic');
    // Non-https is still refused.
    expect(toEmbedUrl('http://www.youtube.com/watch?v=dQw4w9WgXcQ')).to.equal(null);
    expect(toEmbedUrl('javascript:alert(1)')).to.equal(null);
    expect(isAllowedEmbedSrc('https://example.com/player/x')).to.equal(true);
    expect(isAllowedEmbedSrc('http://example.com/x')).to.equal(false);
  });

  it('keeps any https iframe through sanitization but force-sandboxes it', () => {
    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');
    expect(good).to.include('sandbox=');
    // A non-provider https iframe is kept, but sandboxed and cannot navigate the top.
    const generic = sanitizeHtml('<iframe src="https://example.com/player"></iframe><p>ok</p>');
    expect(generic).to.include('example.com/player');
    expect(generic).to.include('sandbox=');
    expect(generic).to.not.include('allow-top-navigation');
    // Non-https iframes are still dropped entirely.
    const evil = sanitizeHtml('<iframe src="http://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');
  });
});