@kubex/zinc 1.1.167 → 1.1.168

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.167",
+  "version": "1.1.168",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/src/components/remarkd-editor/paste.test.ts

@@ -0,0 +1,119 @@
+import {expect} from '@open-wc/testing';
+import {htmlToRemarkd, pastedRemarkd, plainTextToRemarkd} from './paste';
+import {parse} from 'remarkd-js';
+
+function clipboard(data: Record<string, string>): DataTransfer {
+  const transfer = new DataTransfer();
+  for (const [type, value] of Object.entries(data)) transfer.setData(type, value);
+  return transfer;
+}
+
+describe('htmlToRemarkd', () => {
+  it('should keep nested bullet and numbered lists', () => {
+    expect(htmlToRemarkd('<ul><li>a<ul><li>b<ul><li>c</li></ul></li></ul></li><li>d</li></ul>'))
+      .to.equal('- a\n-- b\n--- c\n- d');
+    expect(htmlToRemarkd('<ol><li>a</li><li>b<ol><li>c</li><li>d</li></ol></li><li>e</li></ol>'))
+      .to.equal('1. a\n2. b\n2.1. c\n2.2. d\n3. e');
+    expect(htmlToRemarkd('<ol start="4"><li>four</li></ol>')).to.equal('4. four');
+  });
+
+  it('should nest numbered and bullet lists inside each other', () => {
+    expect(htmlToRemarkd('<ol><li>a<ul><li>b</li></ul></li></ol>')).to.equal('1. a\n- b');
+    expect(htmlToRemarkd('<ul><li>a<ol><li>b</li></ol></li></ul>')).to.equal('- a\n1. b');
+  });
+
+  it('should keep a list item on one line', () => {
+    expect(htmlToRemarkd('<ul><li><p>first</p><p>second</p></li><li>line<br>break</li></ul>'))
+      .to.equal('- first second\n- line break');
+  });
+
+  it('should keep checkboxes in list items', () => {
+    expect(htmlToRemarkd('<ul><li><input type="checkbox" checked> done</li><li><input type="checkbox"> todo</li></ul>'))
+      .to.equal('- [x] done\n- [ ] todo');
+  });
+
+  it('should keep headings, paragraphs and inline formatting', () => {
+    expect(htmlToRemarkd('<h2>Title</h2><p>Some <b>bold</b>, <em>italic</em>, <code>code</code>, <s>gone</s> and '
+      + '<a href="https://example.com">a link</a>.</p><p>Next</p>'))
+      .to.equal('## Title\n\nSome **bold**, __italic__, `code`, ~~gone~~ and [a link](https://example.com).\n\nNext');
+  });
+
+  it('should keep the spaces around a mark outside it', () => {
+    expect(htmlToRemarkd('<p>a<b> bold </b>b</p>')).to.equal('a **bold** b');
+  });
+
+  it('should not nest a mark inside the same mark', () => {
+    expect(htmlToRemarkd('<p><b>a <strong>b</strong></b></p>')).to.equal('**a b**');
+  });
+
+  it('should drop links that are not web, mail or phone links', () => {
+    expect(htmlToRemarkd('<p><a href="javascript:alert(1)">x</a> <a href="#top">y</a> <b>z</b></p>')).to.equal('x y **z**');
+  });
+
+  it('should keep code blocks verbatim', () => {
+    expect(htmlToRemarkd('<pre><code>  indented\n- not a list\n</code></pre>'))
+      .to.equal('```\n  indented\n- not a list\n```');
+  });
+
+  it('should keep quotes, rules and tables', () => {
+    expect(htmlToRemarkd('<blockquote><p>quoted</p></blockquote><hr>'))
+      .to.equal('____\nquoted\n____\n\n---');
+    expect(htmlToRemarkd('<table><tr><th>Name</th><th>Value</th></tr><tr><td>Alpha</td><td><b>1</b></td></tr></table>'))
+      .to.equal('|===\n|Name |Value\n\n|Alpha |**1**\n|===');
+  });
+
+  it('should read Google Docs styling', () => {
+    const html = '<meta charset="utf-8"><b style="font-weight:normal;" id="docs-internal-guid-1">'
+      + '<p dir="ltr"><span style="font-weight:700;">Bold</span><span style="font-weight:400;"> and </span>'
+      + '<span style="font-style:italic;">italic</span></p>'
+      + '<ul><li dir="ltr" aria-level="1"><p dir="ltr"><span>one</span></p></li>'
+      + '<ul><li dir="ltr" aria-level="2"><p dir="ltr"><span>nested</span></p></li></ul>'
+      + '<li dir="ltr" aria-level="1"><p dir="ltr"><span>two</span></p></li></ul></b>';
+    expect(htmlToRemarkd(html)).to.equal('**Bold** and __italic__\n\n- one\n-- nested\n- two');
+  });
+
+  it('should read Word list paragraphs', () => {
+    const html = '<p class="MsoListParagraphCxSpFirst" style="mso-list:l0 level1 lfo1">'
+      + '<span style="mso-list:Ignore">1.<span>&nbsp;&nbsp;</span></span>First</p>'
+      + '<p class="MsoListParagraphCxSpMiddle" style="mso-list:l0 level2 lfo1">'
+      + '<span style="mso-list:Ignore">a.<span>&nbsp;</span></span>Sub</p>'
+      + '<p class="MsoListParagraphCxSpLast" style="mso-list:l0 level1 lfo1">'
+      + '<span style="mso-list:Ignore">2.<span>&nbsp;</span></span>Second</p>'
+      + '<p class="MsoNormal">After</p>'
+      + '<p class="MsoListParagraph" style="mso-list:l1 level1 lfo2">'
+      + '<span style="font-family:Symbol"><span style="mso-list:Ignore">·<span>&nbsp;</span></span></span>Bullet</p>';
+    expect(htmlToRemarkd(html)).to.equal('1. First\n1.1. Sub\n2. Second\n\nAfter\n\n- Bullet');
+  });
+
+  it('should produce source remarkd renders as the same structure', () => {
+    const source = htmlToRemarkd('<ol><li>a<ol><li>b</li></ol></li><li>c</li></ol>')!;
+    expect(parse(source)).to.contain('<ol><li><p>a</p>\n<ol><li><p>b</p></li></ol></li>\n<li><p>c</p></li></ol>');
+  });
+
+  it('should leave HTML with no formatting to the plain-text paste', () => {
+    expect(htmlToRemarkd('<div><span style="color:red">const</span> x = 1;</div>')).to.be.null;
+    expect(htmlToRemarkd('<p>just text</p>')).to.be.null;
+  });
+});
+
+describe('plainTextToRemarkd', () => {
+  it('should turn bullet glyphs into list markers, nesting by indent', () => {
+    expect(plainTextToRemarkd('Intro\n• one\n  ◦ nested\n• two')).to.equal('Intro\n- one\n-- nested\n- two');
+  });
+
+  it('should leave text without bullet glyphs alone', () => {
+    expect(plainTextToRemarkd('- already remarkd')).to.be.null;
+  });
+});
+
+describe('pastedRemarkd', () => {
+  it('should prefer the HTML flavour', () => {
+    expect(pastedRemarkd(clipboard({'text/html': '<ul><li>a</li></ul>', 'text/plain': 'a'}))).to.equal('- a');
+  });
+
+  it('should leave code editor copies to the plain-text paste', () => {
+    expect(pastedRemarkd(clipboard({
+      'text/html': '<div><b>**bold**</b></div>', 'text/plain': '**bold**', 'vscode-editor-data': '{}',
+    }))).to.be.null;
+  });
+});

package/src/components/remarkd-editor/paste.ts

@@ -0,0 +1,241 @@
+const BLOCK_TAGS = new Set([
+  'ADDRESS', 'ARTICLE', 'ASIDE', 'BLOCKQUOTE', 'DD', 'DIV', 'DL', 'DT', 'FIGCAPTION', 'FIGURE', 'FOOTER',
+  'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'HEADER', 'HR', 'LI', 'MAIN', 'NAV', 'OL', 'P', 'PRE', 'SECTION',
+  'TABLE', 'UL',
+]);
+const SKIPPED_TAGS = new Set(['HEAD', 'META', 'LINK', 'SCRIPT', 'STYLE', 'TEMPLATE', 'TITLE', 'NOSCRIPT']);
+
+// Markup that carries formatting worth keeping; HTML without any of it (e.g. a code editor's
+// coloured spans) pastes as its plain text.
+const FORMATTED = 'ul, ol, h1, h2, h3, h4, h5, h6, table, blockquote, pre, hr, b, strong, i, em, u, s, strike, del, '
+  + 'code, a[href], [style*="font-weight"], [style*="italic"], [style*="line-through"], [style*="mso-list"]';
+
+// Word marks list paragraphs with `mso-list:l0 level2 lfo1`, and its bullet/number with `mso-list:Ignore`.
+const WORD_LIST_LEVEL = /mso-list:\s*l\d+\s+level(\d+)/i;
+const WORD_LIST_MARKER = 'span[style*="mso-list:Ignore" i], span[style*="mso-list: Ignore" i]';
+const ORDERED_MARKER = /^\s*(\d+|[a-z]{1,4})[.)]/i;
+
+const PLAIN_BULLET = /^([ \t]*)[•◦▪▫●○■□·‣⁃]\s+/;
+
+type Style = 'strong' | 'emphasis' | 'underline' | 'strike' | 'code';
+const MARKS: Record<Style, string> = {strong: '**', emphasis: '__', underline: '___', strike: '~~', code: '`'};
+
+/**
+ * The clipboard as remarkd source, keeping the lists, headings, tables and inline formatting of
+ * rich content. Null when a plain-text paste already says the same thing.
+ */
+export function pastedRemarkd(data: DataTransfer | null): string | null {
+  if (!data) return null;
+  // VS Code's HTML is just coloured spans around the source that text/plain already holds.
+  if (data.types.includes('vscode-editor-data')) return null;
+  const html = data.getData('text/html');
+  const converted = html ? htmlToRemarkd(html) : null;
+  return converted ?? plainTextToRemarkd(data.getData('text/plain'));
+}
+
+/** Remarkd source for pasted HTML, or null when it has no formatting to keep. */
+export function htmlToRemarkd(html: string): string | null {
+  const body = new DOMParser().parseFromString(html, 'text/html').body;
+  if (!body.querySelector(FORMATTED)) return null;
+  const source = tidy(blocks(body).join('\n\n'));
+  return source || null;
+}
+
+/** Turns bullet glyphs (as copied from PDFs and slides) into list markers, or null when there are none. */
+export function plainTextToRemarkd(text: string): string | null {
+  if (!text || !text.split('\n').some(line => PLAIN_BULLET.test(line))) return null;
+  return text.replace(/\r\n?/g, '\n').split('\n').map(line => line.replace(PLAIN_BULLET, (_, indent: string) =>
+    '-'.repeat(1 + Math.min(9, Math.floor(indent.replace(/\t/g, '    ').length / 2))) + ' ')).join('\n');
+}
+
+function tidy(source: string): string {
+  return source.replace(/[ \t]+$/gm, '').replace(/\n{3,}/g, '\n\n').trim();
+}
+
+function isBlock(node: Node): node is HTMLElement {
+  return node instanceof HTMLElement && (BLOCK_TAGS.has(node.tagName) || !!node.querySelector(
+    [...BLOCK_TAGS].join(',')));
+}
+
+function wordListLevel(el: Element): number | null {
+  const level = WORD_LIST_LEVEL.exec(el.getAttribute('style') ?? '');
+  return level ? Number(level[1]) : null;
+}
+
+/** The blocks of `root`, each a remarkd block with no blank lines inside it unless it is a container. */
+function blocks(root: Node): string[] {
+  const out: string[] = [];
+  let run: Node[] = [];
+  const flush = () => {
+    const text = paragraph(run);
+    if (text) out.push(text);
+    run = [];
+  };
+
+  const children = Array.from(root.childNodes);
+  for (let i = 0; i < children.length; i++) {
+    const node = children[i];
+    if (node instanceof Element && SKIPPED_TAGS.has(node.tagName)) continue;
+    if (node instanceof Element && wordListLevel(node) !== null) {
+      flush();
+      const items: Element[] = [];
+      while (i < children.length) {
+        const next = children[i];
+        if (next instanceof Element && wordListLevel(next) !== null) items.push(next);
+        else if (!(next.nodeType === Node.TEXT_NODE && !next.textContent!.trim())) break;
+        i++;
+      }
+      i--;
+      out.push(wordList(items));
+      continue;
+    }
+    if (!isBlock(node)) {
+      run.push(node);
+      continue;
+    }
+    flush();
+    out.push(...block(node));
+  }
+  flush();
+  return out.filter(Boolean);
+}
+
+function block(el: HTMLElement): string[] {
+  const tag = el.tagName;
+  if (/^H[1-6]$/.test(tag)) {
+    // Headings render bold already; a bold span inside one is just the source app's styling.
+    const text = oneLine(inline(el, new Set(['strong'])));
+    return text ? [`${'#'.repeat(Number(tag[1]))} ${text}`] : [];
+  }
+  if (tag === 'UL' || tag === 'OL') return [listLines(el, 0, []).join('\n')];
+  if (tag === 'HR') return ['---'];
+  if (tag === 'PRE') {
+    const code = (el.textContent ?? '').replace(/\n$/, '');
+    return code.trim() ? ['```\n' + code + '\n```'] : [];
+  }
+  if (tag === 'BLOCKQUOTE') {
+    const inner = blocks(el);
+    return inner.length ? [`____\n${inner.join('\n\n')}\n____`] : [];
+  }
+  if (tag === 'TABLE') return [table(el)];
+  return blocks(el);
+}
+
+function paragraph(nodes: Node[]): string {
+  return nodes.map(node => inline(node)).join('')
+    .split('\n').map(line => line.replace(/\s+/g, ' ').trim()).filter(Boolean).join('\n');
+}
+
+function oneLine(text: string): string {
+  return text.replace(/\s+/g, ' ').trim();
+}
+
+function styleOf(el: HTMLElement): Style[] {
+  const styles: Style[] = [];
+  const tag = el.tagName;
+  const weight = el.style.fontWeight;
+  const decoration = el.style.textDecorationLine || el.style.textDecoration;
+  // Google Docs wraps the whole selection in `<b style="font-weight:normal">`.
+  const unbolded = weight === 'normal' || (Number(weight) > 0 && Number(weight) < 600);
+  if (((tag === 'B' || tag === 'STRONG') && !unbolded) || weight === 'bold' || Number(weight) >= 600) {
+    styles.push('strong');
+  }
+  if (((tag === 'I' || tag === 'EM') && el.style.fontStyle !== 'normal') || el.style.fontStyle === 'italic') {
+    styles.push('emphasis');
+  }
+  if (tag === 'U' || decoration.includes('underline')) styles.push('underline');
+  if (tag === 'S' || tag === 'STRIKE' || tag === 'DEL' || decoration.includes('line-through')) styles.push('strike');
+  if (tag === 'CODE' || tag === 'KBD' || tag === 'TT' || tag === 'SAMP') styles.push('code');
+  return styles;
+}
+
+/** Puts `open`/`close` around the text of `inner`, leaving its outer whitespace outside the marks. */
+function wrap(inner: string, open: string, close = open): string {
+  const [, lead, text, trail] = /^(\s*)([\s\S]*?)(\s*)$/.exec(inner)!;
+  return text ? `${lead}${open}${text}${close}${trail}` : inner;
+}
+
+function linkTarget(href: string | null): string | null {
+  return href && /^(https?:|mailto:|tel:)/i.test(href) ? href : null;
+}
+
+/** The inline source of `node`. `active` holds the marks already open around it, so they never nest twice. */
+function inline(node: Node, active: Set<Style> = new Set()): string {
+  if (node.nodeType === Node.TEXT_NODE) return (node.textContent ?? '').replace(/[ \t\r\n\f]+/g, ' ');
+  if (!(node instanceof HTMLElement)) return '';
+  if (SKIPPED_TAGS.has(node.tagName) || node.matches(WORD_LIST_MARKER)) return '';
+  if (node.tagName === 'BR') return '\n';
+  if (node.tagName === 'IMG') {
+    const src = linkTarget(node.getAttribute('src'));
+    return src ? `![${node.getAttribute('alt') ?? ''}](${src})` : '';
+  }
+  if (node.tagName === 'INPUT' && (node as HTMLInputElement).type === 'checkbox') {
+    return (node as HTMLInputElement).checked ? '[x] ' : '[ ] ';
+  }
+
+  const styles = styleOf(node).filter(style => !active.has(style));
+  const inner = styles.includes('code')
+    ? (node.textContent ?? '').replace(/\s+/g, ' ')
+    : Array.from(node.childNodes).map(child => inline(child, new Set([...active, ...styles]))).join('');
+
+  let text = BLOCK_TAGS.has(node.tagName) ? ` ${inner} ` : inner;
+  for (const style of styles) text = wrap(text, MARKS[style]);
+  if (node.tagName === 'SUP') text = wrap(text, '^');
+  if (node.tagName === 'SUB') text = wrap(text, '~');
+  const href = node.tagName === 'A' ? linkTarget(node.getAttribute('href')) : null;
+  return href && text.trim() ? wrap(text.replace(/\n/g, ' '), '[', `](${href})`) : text;
+}
+
+/**
+ * Remarkd list lines for `list`: bullets nest by marker count, numbers as an outline under
+ * `path`, and each item stays on one line — a remarkd item cannot span lines.
+ */
+function listLines(list: HTMLElement, bulletDepth: number, path: number[]): string[] {
+  const ordered = list.tagName === 'OL';
+  const depth = ordered ? bulletDepth : bulletDepth + 1;
+  const lines: string[] = [];
+  let n = ordered ? Number(list.getAttribute('start') ?? 1) - 1 : 0;
+  for (const child of Array.from(list.children)) {
+    if (child.tagName === 'UL' || child.tagName === 'OL') {
+      // Google Docs nests a level as a list directly inside the list.
+      lines.push(...listLines(child as HTMLElement, depth, ordered ? [...path, Math.max(n, 1)] : path));
+      continue;
+    }
+    if (child.tagName !== 'LI') continue;
+    n++;
+    const itemPath = ordered ? [...path, n] : path;
+    const nested = Array.from(child.children).filter(el => el.tagName === 'UL' || el.tagName === 'OL');
+    const text = oneLine(Array.from(child.childNodes).filter(node => !nested.includes(node as Element))
+      .map(node => inline(node)).join(''));
+    if (text) {
+      const marker = ordered ? itemPath.map(i => `${i}.`).join('') : '-'.repeat(Math.min(depth, 10));
+      lines.push(`${marker} ${text}`);
+    }
+    for (const sub of nested) lines.push(...listLines(sub as HTMLElement, depth, itemPath));
+  }
+  return lines;
+}
+
+/** Word's list paragraphs, numbered by their `levelN`; bullet or number is read off Word's own marker. */
+function wordList(items: Element[]): string {
+  const counters: number[] = [];
+  return items.map(item => {
+    const level = wordListLevel(item)!;
+    const ordered = ORDERED_MARKER.test(item.querySelector(WORD_LIST_MARKER)?.textContent ?? '');
+    counters.length = level;
+    counters[level - 1] = (counters[level - 1] ?? 0) + 1;
+    for (let i = 0; i < level - 1; i++) counters[i] ??= 1;
+    const marker = ordered ? counters.map(i => `${i}.`).join('') : '-'.repeat(Math.min(level, 10));
+    return `${marker} ${oneLine(inline(item))}`;
+  }).filter(line => !/^\S+ $/.test(line)).join('\n');
+}
+
+function table(el: HTMLElement): string {
+  const rows = Array.from(el.querySelectorAll('tr'))
+    .filter(row => row.closest('table') === el)
+    .map(row => Array.from(row.children)
+      .filter(cell => cell.tagName === 'TD' || cell.tagName === 'TH')
+      .map(cell => oneLine(inline(cell)) || ' '))
+    .filter(cells => cells.length);
+  return `|===\n${rows.map(cells => cells.map(cell => `|${cell}`).join(' ')).join('\n\n')}\n|===`;
+}

package/src/components/remarkd-editor/remarkd-editor.component.ts

@@ -4,6 +4,7 @@ import {continueList, indentList, isEmptyListItem} from './list-continuation';
 import {type CSSResultGroup, html, type PropertyValues, type TemplateResult, unsafeCSS} from 'lit';
 import {defaultValue} from "../../internal/default-value";
 import {FormControlController} from "../../internal/form";
+import {pastedRemarkd} from './paste';
 import {property, query, state} from 'lit/decorators.js';
 import {parse as remarkdParse} from "remarkd-js";
 import {ToolbarOverflowController} from '../../internal/toolbar-overflow';
@@ -1076,12 +1077,28 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
 
   private handleEditPaste = (e: ClipboardEvent) => {
     const file = Array.from(e.clipboardData?.files ?? []).find(f => f.type.startsWith('image/'));
-    if (!file) return;
+    if (!file) {
+      this.pasteFormatted(e);
+      return;
+    }
     e.preventDefault();
     const index = this.editingIndex ?? this.blocks.length;
     void this.insertImage(file, index + 1);
   };
 
+  /** Pastes rich clipboard content as remarkd source, keeping its lists and formatting. */
+  private pasteFormatted = (e: ClipboardEvent) => {
+    const source = pastedRemarkd(e.clipboardData);
+    if (source === null) return;
+    e.preventDefault();
+    const input = e.target as HTMLTextAreaElement;
+    // insertText keeps the paste on the native undo stack; it fires `input` like a typed paste.
+    if (!document.execCommand('insertText', false, source)) {
+      input.setRangeText(source, input.selectionStart, input.selectionEnd, 'end');
+      input.dispatchEvent(new Event('input', {bubbles: true, composed: true}));
+    }
+  };
+
   private handleDragOver = (e: DragEvent) => {
     if (this.rawMode) return;
     if (e.dataTransfer?.types.includes('Files')) e.preventDefault();
@@ -2021,6 +2038,7 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
                 .value=${this.value}
                 @input=${this.handleRawInput}
                 @keydown=${this.handleRawKeydown}
+                @paste=${this.pasteFormatted}
                 @blur=${this.commitRaw}></textarea>`;
   }
 

package/src/components/remarkd-editor/remarkd-editor.test.ts

@@ -688,6 +688,53 @@ Second"></zn-remarkd-editor>`);
     });
   });
 
+  describe('paste', () => {
+    const paste = (input: HTMLTextAreaElement, data: Record<string, string>) => {
+      const clipboardData = new DataTransfer();
+      for (const [type, value] of Object.entries(data)) clipboardData.setData(type, value);
+      const event = new ClipboardEvent('paste', {clipboardData, bubbles: true, composed: true, cancelable: true});
+      input.dispatchEvent(event);
+      return event;
+    };
+
+    it('should paste rich content as remarkd source at the caret', async () => {
+      const el = await fixture<ZnRemarkdEditor>(html`
+        <zn-remarkd-editor value="Intro"></zn-remarkd-editor>`);
+      el.shadowRoot!.querySelector<HTMLElement>('.remarkd-editor__rendered')!.click();
+      await el.updateComplete;
+      const input = typeInBlock(el, 'Intro\n');
+      input.focus();
+
+      const event = paste(input, {'text/html': '<ol><li>a<ol><li>b</li></ol></li></ol>', 'text/plain': 'a\nb'});
+      expect(event.defaultPrevented).to.be.true;
+      await el.updateComplete;
+      expect(input.value).to.equal('Intro\n1. a\n1.1. b');
+    });
+
+    it('should leave a plain-text paste to the browser', async () => {
+      const el = await fixture<ZnRemarkdEditor>(html`
+        <zn-remarkd-editor value="Intro"></zn-remarkd-editor>`);
+      el.shadowRoot!.querySelector<HTMLElement>('.remarkd-editor__rendered')!.click();
+      await el.updateComplete;
+      const input = el.shadowRoot!.querySelector<HTMLTextAreaElement>('.remarkd-editor__input')!;
+      expect(paste(input, {'text/plain': 'just text'}).defaultPrevented).to.be.false;
+    });
+
+    it('should paste rich content in the raw source view', async () => {
+      const el = await fixture<ZnRemarkdEditor>(html`
+        <zn-remarkd-editor allow-raw value=""></zn-remarkd-editor>`);
+      el.shadowRoot!.querySelector('.remarkd-editor__raw-toggle')!
+        .dispatchEvent(new MouseEvent('click', {bubbles: true, composed: true, cancelable: true}));
+      await el.updateComplete;
+      const raw = el.shadowRoot!.querySelector<HTMLTextAreaElement>('.remarkd-editor__raw')!;
+      raw.focus();
+
+      expect(paste(raw, {'text/html': '<ul><li>a</li></ul>'}).defaultPrevented).to.be.true;
+      await el.updateComplete;
+      expect(el.value).to.equal('- a');
+    });
+  });
+
   it('should insert a placeholder when nothing is selected', async () => {
     const el = await fixture<ZnRemarkdEditor>(html`
       <zn-remarkd-editor value="hello"></zn-remarkd-editor>`);