@kubex/zinc 1.1.165 → 1.1.168

package/docs/pages/components/remarkd-editor.md

@@ -160,7 +160,7 @@ outgrows the 20rem cap set here."
 ### Actions
 
 The toolbar and the `/` slash menu are driven by one shared registry of actions, grouped
-under ten headings: **Text**, **Inline**, **Lists**, **Admonitions**, **Blocks**,
+under ten headings: **Text**, **Inline**, **Lists**, **Alerts**, **Blocks**,
 **Structured**, **Media**, **Objects**, **Breaks**, and **Logic**. The toolbar shows as
 many groups as fit its width and folds the rest into an overflow menu; the slash menu
 carries every action regardless of width, and typing narrows it by label or keyword — so

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.165",
+  "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/actions.ts

@@ -42,7 +42,7 @@ export const ACTION_GROUPS: { id: ActionGroup; label: string }[] = [
   // they are among the last groups to collapse, not the first.
   {id: 'inline', label: 'Inline'},
   {id: 'lists', label: 'Lists'},
-  {id: 'admonitions', label: 'Admonitions'},
+  {id: 'admonitions', label: 'Alerts'},
   {id: 'blocks', label: 'Blocks'},
   {id: 'structured', label: 'Structured'},
   {id: 'media', label: 'Media'},
@@ -67,7 +67,7 @@ export const EDITOR_ACTIONS: EditorAction[] = [
   {key: 'checkboxes', label: 'Checklist', icon: 'list-todo@lu', group: 'lists', prefix: '- [ ] ', keywords: ['task', 'todo']},
   {key: 'definition-list', label: 'Definition list', icon: 'book-a@lu', group: 'lists', prefix: 'Term:: Definition'},
 
-  // Admonitions
+  // Alerts
   {key: 'admonition', label: 'Note', icon: 'info@lu', group: 'admonitions', prefix: 'NOTE: '},
   {key: 'tip', label: 'Tip', icon: 'lightbulb@lu', group: 'admonitions', prefix: 'TIP: '},
   {key: 'warning', label: 'Warning', icon: 'triangle-alert@lu', group: 'admonitions', prefix: 'WARNING: '},

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

@@ -1,4 +1,4 @@
-import {continueList} from './list-continuation';
+import {continueList, indentList} from './list-continuation';
 import {expect} from '@open-wc/testing';
 
 /** Enter at `caret` (the end by default), rendered as the new value with `|` at the caret, or null. */
@@ -12,15 +12,23 @@ describe('continueList', () => {
     expect(enter('- a')).to.equal('- a\n- |');
     expect(enter('* a')).to.equal('* a\n* |');
     expect(enter('-- nested')).to.equal('-- nested\n-- |');
+    expect(enter('- a\n---- deep\n---- deeper')).to.equal('- a\n---- deep\n---- deeper\n---- |');
   });
 
   it('should continue numbered lists with the next number', () => {
     expect(enter('1. hello')).to.equal('1. hello\n2. |');
     expect(enter('9. nine')).to.equal('9. nine\n10. |');
+    expect(enter('1. a\n1.1. b')).to.equal('1. a\n1.1. b\n1.2. |');
+  });
+
+  it('should number skipped levels from one', () => {
+    expect(enter('1. a\n1.1.1. b\n2. c', 4)).to.equal('1. a\n2. |\n2.1.1. b\n3. c');
   });
 
   it('should renumber the items after one inserted mid-list', () => {
     expect(enter('1. a\n2. b\n3. c', 4)).to.equal('1. a\n2. |\n3. b\n4. c');
+    expect(enter('1. a\n1.1. b\n2. c', 4)).to.equal('1. a\n2. |\n2.1. b\n3. c');
+    expect(enter('1. a\n-- x\n2. b', 4)).to.equal('1. a\n2. |\n-- x\n3. b');
   });
 
   it('should continue checklists unticked, keeping the editable kind', () => {
@@ -35,6 +43,7 @@ describe('continueList', () => {
   });
 
   it('should end the list when Enter is pressed on an empty item', () => {
+    expect(enter('1. a\n1.1. ')).to.equal('1. a\n|');
     expect(enter('- a\n- ')).to.equal('- a\n|');
     expect(enter('1. a\n2. ')).to.equal('1. a\n|');
     expect(enter('- [ ] a\n- [ ] ')).to.equal('- [ ] a\n|');
@@ -65,3 +74,70 @@ describe('continueList', () => {
     expect(continueList('- abc', 2, 4)).to.be.null;
   });
 });
+
+/** Tab over `[start, end]` (a caret at the end by default), rendered with `[`/`]` around the selection, or null. */
+function tab(value: string, outdent = false, start = value.length, end = start): string | null {
+  const edit = indentList(value, start, end, outdent);
+  if (!edit) return null;
+  const v = edit.value;
+  return edit.start === edit.end
+    ? `${v.slice(0, edit.start)}|${v.slice(edit.start)}`
+    : `${v.slice(0, edit.start)}[${v.slice(edit.start, edit.end)}]${v.slice(edit.end)}`;
+}
+
+describe('indentList', () => {
+  it('should nest a bullet item one level deeper on Tab', () => {
+    expect(tab('- a')).to.equal('-- a|');
+    expect(tab('* a')).to.equal('** a|');
+    expect(tab('- [ ] task')).to.equal('-- [ ] task|');
+    expect(tab('- a\n- b')).to.equal('- a\n-- b|');
+    expect(tab('---- a\n---- b')).to.equal('---- a\n----- b|');
+  });
+
+  it('should un-nest a bullet item on Shift+Tab, stopping at the top level', () => {
+    expect(tab('--- a', true)).to.equal('-- a|');
+    expect(tab('- a', true)).to.equal('- a|');
+  });
+
+  it('should stop at the deepest level the parser supports', () => {
+    expect(tab('---------- a')).to.equal('---------- a|');
+  });
+
+  it('should keep the caret on the same text', () => {
+    expect(tab('- hello', false, 4)).to.equal('-- he|llo');
+    expect(tab('-- hello', true, 5)).to.equal('- he|llo');
+    expect(tab('- a', false, 0)).to.equal('|-- a');
+  });
+
+  it('should nest every bullet item a selection touches', () => {
+    const value = '- a\n- b\n- c';
+    expect(tab(value, false, 4, 11)).to.equal('- a\n[-- b\n-- c]');
+    expect(tab(value, false, 0, 4)).to.equal('[-- a\n]- b\n- c');
+  });
+
+  it('should nest a numbered item under the one above, renumbering the items after it', () => {
+    expect(tab('1. a\n2. b')).to.equal('1. a\n1.1. b|');
+    expect(tab('1. a\n2. b\n3. c', false, 9)).to.equal('1. a\n1.1. b|\n2. c');
+    expect(tab('1. a\n1.1. b\n2. c')).to.equal('1. a\n1.1. b\n1.2. c|');
+    expect(tab('1. a\n-- x\n2. b')).to.equal('1. a\n-- x\n1.1. b|');
+    expect(tab('1. first')).to.equal('1. first|');
+    expect(tab('1. a\n1.1. b')).to.equal('1. a\n1.1. b|');
+    expect(tab('1. a\n1.1. b\n1.2. c')).to.equal('1. a\n1.1. b\n1.1.1. c|');
+  });
+
+  it('should un-nest a numbered item on Shift+Tab, adopting the items after it', () => {
+    expect(tab('1. a\n1.1. b\n1.2. c\n2. d', true, 10)).to.equal('1. a\n2. |b\n2.1. c\n3. d');
+    expect(tab('1. a', true)).to.equal('1. a|');
+  });
+
+  it('should keep the caret on the same text when the marker changes length', () => {
+    expect(tab('1. a\n2. hello', false, 10)).to.equal('1. a\n1.1. he|llo');
+    expect(tab('1. a\n1.1. hello', true, 12)).to.equal('1. a\n2. he|llo');
+  });
+
+  it('should leave Tab alone outside list items', () => {
+    expect(tab('plain text')).to.be.null;
+    expect(tab('CPU:: x')).to.be.null;
+    expect(tab('```\n- a')).to.be.null;
+  });
+});

package/src/components/remarkd-editor/list-continuation.ts

@@ -4,14 +4,15 @@ export interface TextEdit {
   caret: number;
 }
 
-// Nesting depth is the marker's repeat count (`--`, `**`), never indentation.
-const LIST_ITEM = /^(-+|\*+|(\d+)\.) (\[[ xX_*]\] )?/;
-const ORDERED_ITEM = /^(\d+)\. /;
+// Nesting depth is the marker's repeat count (`--`, `**`) or dot count (`1.2.`), never indentation.
+const LIST_ITEM = /^(-+|\*+|((?:\d+\.)+)) (\[[ xX_*]\] )?/;
+const ORDERED_PATH = /^(?:\d+\.)+(?= )/;
 // `::` must end the line or be followed by a space, so macros (`include::x[]`) never match.
 const DEFINITION = /^[^:\s][^\n]*?::(?: |$)/;
 
 // Code, listing and literal blocks — their content is verbatim, so a `- ` there is not a list.
-const VERBATIM_DELIMITER = /^(`{3,}|-{4,}|\.{4,})/;
+// A `----`/`....` delimiter is the whole line; `---- x` is a fourth-level bullet.
+const VERBATIM_DELIMITER = /^(?:`{3,}|-{4,} *$|\.{4,} *$)/;
 
 function insideVerbatim(before: string): boolean {
   return before.split('\n').filter(line => VERBATIM_DELIMITER.test(line)).length % 2 === 1;
@@ -58,22 +59,122 @@ export function continueList(value: string, start: number, end: number): TextEdi
   }
 
   const [, bullet, ordinal, box] = item!;
-  const next = (ordinal ? `${Number(ordinal) + 1}.` : bullet) + ' ' + (box ? nextCheckbox(box) : '');
+  const own = ordinal ? parsePath(ordinal) : null;
+  const path = own && nextPath(own, own.length);
+  const next = (path ? formatPath(path) : bullet) + ' ' + (box ? nextCheckbox(box) : '');
   const head = `${value.slice(0, start)}\n${next}`;
-  const rest = value.slice(start).replace(/^ +/, '');
-  const tail = ordinal ? renumber(rest, Number(ordinal) + 2) : rest;
-  return {value: head + tail, caret: head.length};
+  const edited = head + value.slice(start).replace(/^ +/, '');
+  if (!path) return {value: edited, caret: head.length};
+
+  const lines = edited.split('\n');
+  renumber(lines, head.split('\n').length);
+  return {value: lines.join('\n'), caret: head.length};
+}
+
+/** The numbers of an ordered marker: `1.2.` is `[1, 2]`. */
+function parsePath(marker: string): number[] {
+  return marker.split('.').filter(Boolean).map(Number);
+}
+
+function formatPath(path: number[]): string {
+  return path.map(n => `${n}.`).join('');
+}
+
+/** The marker of the ordered item at `depth` that follows the one numbered `previous`. */
+function nextPath(previous: number[], depth: number): number[] {
+  if (depth <= previous.length) return [...previous.slice(0, depth - 1), previous[depth - 1] + 1];
+  return [...previous, ...Array<number>(depth - previous.length).fill(1)];
+}
+
+/** The number of the nearest ordered item above line `i` in the same list, passing over nested bullets. */
+function orderedAbove(lines: string[], i: number): number[] | null {
+  for (let j = i - 1; j >= 0; j--) {
+    const item = LIST_ITEM.exec(lines[j]);
+    if (!item) return null;
+    if (item[2]) return parsePath(item[2]);
+  }
+  return null;
+}
+
+/**
+ * Renumbers the ordered items from line `from` on as an outline counting on from the item above,
+ * so the source stays in step with the rendered numbering. Bullet items nested among them are
+ * passed over; any other line ends the list. With no ordered item above, the first keeps its
+ * number.
+ */
+function renumber(lines: string[], from: number) {
+  let path = orderedAbove(lines, from);
+  for (let i = from; i < lines.length; i++) {
+    const item = LIST_ITEM.exec(lines[i]);
+    if (!item) break;
+    if (!item[2]) continue;
+    const own = parsePath(item[2]);
+    path = path ? nextPath(path, own.length) : own;
+    lines[i] = lines[i].replace(ORDERED_PATH, formatPath(path));
+  }
 }
 
+/** A textarea edit that keeps a selection: the new value and the selected range in it. */
+export interface RangeEdit {
+  value: string;
+  start: number;
+  end: number;
+}
+
+// The parser caps bullet depth at ten marker characters.
+const MAX_BULLET_DEPTH = 10;
+
 /**
- * Shifts the ordered items that directly follow the split line up by one, so the source keeps
- * counting in step. `text` starts with the rest of the split line, which is left alone.
+ * What Tab (or Shift+Tab when `outdent`) does on the list items the selection touches: nests
+ * each one level deeper or shallower, renumbering the ordered items that follow. Null when no
+ * list item is touched, so Tab keeps its default. Items already at the limit are left as they
+ * are, but the key is still claimed.
  */
-function renumber(text: string, from: number): string {
-  const lines = text.split('\n');
-  for (let i = 1, n = from; i < lines.length; i++, n++) {
-    if (!ORDERED_ITEM.test(lines[i])) break;
-    lines[i] = lines[i].replace(ORDERED_ITEM, `${n}. `);
+export function indentList(value: string, start: number, end: number, outdent: boolean): RangeEdit | null {
+  const firstStart = value.lastIndexOf('\n', start - 1) + 1;
+  if (insideVerbatim(value.slice(0, firstStart))) return null;
+  // A selection ending at the start of a line does not touch that line.
+  const last = end > start && value[end - 1] === '\n' ? end - 1 : end;
+
+  const before = value.split('\n');
+  const lines = [...before];
+  const first = value.slice(0, firstStart).split('\n').length - 1;
+  const lastIndex = value.slice(0, last).split('\n').length - 1;
+
+  let touched = false;
+  let renumberFrom = -1;
+  for (let i = first; i <= lastIndex; i++) {
+    const item = LIST_ITEM.exec(lines[i]);
+    if (!item) continue;
+    touched = true;
+    const [, bullet, ordinal] = item;
+    if (ordinal) {
+      const own = parsePath(ordinal);
+      // An item nests at most one level below the item above it.
+      const deepest = (orderedAbove(lines, i)?.length ?? 0) + 1;
+      if (outdent ? own.length === 1 : own.length >= deepest) continue;
+      lines[i] = lines[i].replace(ORDERED_PATH, formatPath(outdent ? own.slice(0, -1) : [...own, 1]));
+      if (renumberFrom === -1) renumberFrom = i;
+    } else if (outdent ? bullet.length > 1 : bullet.length < MAX_BULLET_DEPTH) {
+      lines[i] = outdent ? lines[i].slice(1) : bullet[0] + lines[i];
+    }
   }
-  return lines.join('\n');
+  if (!touched) return null;
+  if (renumberFrom !== -1) renumber(lines, renumberFrom);
+
+  const move = (pos: number) => {
+    let oldAt = 0;
+    let newAt = 0;
+    for (let i = 0; i < before.length; i++) {
+      const oldEnd = oldAt + before[i].length;
+      if (pos <= oldEnd) {
+        const delta = lines[i].length - before[i].length;
+        return pos > oldAt ? Math.max(newAt, pos + (newAt - oldAt) + delta) : newAt;
+      }
+      oldAt = oldEnd + 1;
+      newAt += lines[i].length + 1;
+    }
+    return pos;
+  };
+  return {value: lines.join('\n'), start: move(start), end: move(end)};
 }

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|===`;
+}