@atom-forge/brickee 0.0.2 → 0.0.3

package/dist/markdown.js

@@ -1,35 +1,133 @@
-import { MAX_INDENT, MD, newBlock, numbering } from './types';
+import { MAX_INDENT, MD, newBlock, numbering, olStart } from './types';
 const esc = (s) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-/** Characters escaped in plain text so they never turn into inline markup. */
+/** Characters escaped in plain text so they never turn into inline markup (`_` only at a word's edge, see walk()). */
 const SPECIAL = /[\\`*~[\]<]/g;
+/** A backslash escape: any ASCII punctuation (CommonMark). */
+const ESCAPE = /\\([!-/:-@[-`{-~])/g;
 const MARK = '\u0000';
+const STASH = '\u0001';
+/** Link targets kept as links: http(s), mailto, tel and site-relative paths; anything else stays text. */
+const SAFE_URL = /^(?:https?:|mailto:|tel:|\/(?!\/))/i;
+/** A link target: no spaces, parentheses only balanced (`…/Foo_(bar)`), then an optional title that is dropped. */
+const DEST = String.raw `((?:[^()\s]|\([^()\s]{0,200}\)){1,2000})(?:\s+(?:"[^"]{0,500}"|'[^']{0,500}'|\([^()]{0,500}\)))?`;
+/** A link or an image: the label has no brackets of its own and is bounded, so a run of `[` stays linear. */
+const LINK = new RegExp(String.raw `(!?)\[([^\[\]]{0,1000})\]\(\s*${DEST}\s*\)`, 'g');
+/** Word characters, for the edges of `_` emphasis (no intraword `_`, as in `snake_case`). */
+const W = String.raw `\p{L}\p{N}_`;
+/** The marks; a marked span is at most 2000 characters, so an unclosed `**` costs a bounded scan. */
+const EMPHASIS = [
+    [/\*\*\*(?!\s)(.{1,2000}?)(?<!\s)\*\*\*/g, '<b><i>$1</i></b>'],
+    [new RegExp(String.raw `(?<![${W}])___(?!\s)(.{1,2000}?)(?<!\s)___(?![${W}])`, 'gu'), '<b><i>$1</i></b>'],
+    [/\*\*(?!\s)(.{1,2000}?)(?<!\s)\*\*/g, '<b>$1</b>'],
+    [new RegExp(String.raw `(?<![${W}])__(?!\s)(.{1,2000}?)(?<!\s)__(?![${W}])`, 'gu'), '<b>$1</b>'],
+    [/(?<!\*)\*(?![\s*])(.{1,2000}?)(?<![\s*])\*(?!\*)/g, '<i>$1</i>'],
+    [new RegExp(String.raw `(?<![${W}])_(?![\s_])(.{1,2000}?)(?<![\s_])_(?![${W}])`, 'gu'), '<i>$1</i>'],
+    [/~~(?!\s)(.{1,2000}?)(?<!\s)~~/g, '<strike>$1</strike>']
+];
+/** Inline HTML that maps onto the marks; any other tag is dropped (its text stays). */
+const HTML_MARKS = { b: 'b', strong: 'b', i: 'i', em: 'i', s: 'strike', del: 'strike', strike: 'strike', u: 'u', sub: 'sub', sup: 'sup', code: 'code' };
+/**
+ * One HTML tag in escaped text (opening, closing or self-closing), never a pair: its name and its attributes are
+ * bounded and cannot run past a `<` or `>`, so a failed match costs a bounded amount and the whole scan stays linear.
+ */
+const TAG = /&lt;(\/?)([a-z][\w-]{0,30})(?:\s(?:[^&]|&(?!lt;|gt;)){0,500})?&gt;/gi;
+/**
+ * The replacer for TAG: pairs the marks with a stack, so the output is always balanced — a closing tag closes the
+ * marks opened inside it too, a stray closing tag is dropped, and the marks still open at the end are closed.
+ */
+function htmlTag(stash) {
+    const open = [];
+    const replace = (_, closing, name) => {
+        const tag = name.toLowerCase();
+        if (tag === 'br')
+            return stash('<br>');
+        const mark = HTML_MARKS[tag];
+        if (!mark)
+            return '';
+        if (!closing) {
+            open.push(mark);
+            return stash(`<${mark}>`);
+        }
+        const at = open.lastIndexOf(mark);
+        return at < 0 ? '' : open.splice(at).reverse().map((m) => stash(`</${m}>`)).join('');
+    };
+    /** The closing tags of the marks left open. */
+    replace.rest = () => open.splice(0).reverse().map((m) => stash(`</${m}>`)).join('');
+    return replace;
+}
+/** Code spans: a run of backticks up to the next run of the same length (`` a`b ``); an unmatched run is text. */
+function codeSpans(s) {
+    const out = [];
+    const runs = /`+/g;
+    let last = 0;
+    for (let m = runs.exec(s); m; m = runs.exec(s)) {
+        const close = new RegExp(`(?<!\`)${m[0]}(?!\`)`, 'g');
+        close.lastIndex = m.index + m[0].length;
+        const c = close.exec(s);
+        if (!c)
+            continue;
+        let body = s.slice(m.index + m[0].length, c.index).replace(/\n/g, ' ');
+        if (body.length > 2 && body[0] === ' ' && body.at(-1) === ' ' && body.trim())
+            body = body.slice(1, -1);
+        out.push({ code: false, text: s.slice(last, m.index) }, { code: true, text: body });
+        last = runs.lastIndex = c.index + m[0].length;
+    }
+    out.push({ code: false, text: s.slice(last) });
+    return out;
+}
 /** Inline markdown -> inline html (b, i, u, sub, sup, strike, code, a, br). Backslash escapes are honoured; links are
- * http(s), mailto, tel or site-relative only. */
+ * http(s), mailto, tel or site-relative only. Images become links (the package has no notion of images), footnote
+ * references superscripts, and inline HTML its marks (other tags are dropped). */
 export function inline(md) {
     const kept = [];
-    const guarded = md.replace(/\\([\\`*~[\]<>#+.!_-])/g, (_, c) => `${MARK}${kept.push(c) - 1}${MARK}`);
+    const guarded = md.replace(ESCAPE, (_, c) => `${MARK}${kept.push(c) - 1}${MARK}`);
     const restore = (s, raw) => s.replace(/\u0000(\d+)\u0000/g, (_, n) => (raw ? '\\' : '') + esc(kept[+n]));
-    return guarded
-        .split(/(`[^`]+`)/)
-        .map((seg, i) => {
-        if (i % 2)
-            return `<code>${restore(esc(seg.slice(1, -1)), true)}</code>`;
-        const html = esc(seg)
-            .replace(/\*\*(.+?)\*\*/g, '<b>$1</b>')
-            .replace(/(?<!\*)\*(?!\s)(.+?)(?<!\s)\*(?!\*)/g, '<i>$1</i>')
-            .replace(/~~(.+?)~~/g, '<strike>$1</strike>')
-            .replace(/&lt;(u|sub|sup)&gt;(.+?)&lt;\/\1&gt;/g, '<$1>$2</$1>')
-            .replace(/\[(.+?)\]\(((?:https?:|mailto:|tel:|\/(?!\/))[^)\s]+)\)/g, '<a href="$2">$1</a>')
-            .replace(/\n/g, '<br>');
-        return restore(html, false);
-    })
-        .join('');
+    // Generated tags (code spans, links…) are stashed while the rest runs, so a `_` or `*` in a link target or in code
+    // stays as it is, and emphasis can wrap a code span (**`x`**).
+    const tags = [];
+    const stash = (tag) => `${STASH}${tags.push(tag) - 1}${STASH}`;
+    const link = (url, text) => {
+        const href = url.replace(/&amp;/g, '&');
+        return SAFE_URL.test(href) ? stash(`<a href="${esc(href).replace(/"/g, '&quot;')}">`) + (text || esc(href)) + stash('</a>') : null;
+    };
+    const htmlTags = htmlTag(stash);
+    let html = codeSpans(guarded)
+        .map(({ code, text }) => (code ? stash(`<code>${restore(esc(text), true)}</code>`) : esc(text)))
+        .join('')
+        .replace(LINK, (all, bang, label, url) => link(url, bang && !label ? '' : label) ?? all)
+        .replace(/&lt;((?:https?:\/\/|mailto:)(?:[^\s&]|&amp;){1,2000})&gt;/gi, (all, url) => link(url, '') ?? all)
+        .replace(/&lt;([^\s@&]{1,200}@[^\s@&]{1,200}\.[^\s&]{1,200})&gt;/g, (all, mail) => link(`mailto:${mail}`, mail) ?? all)
+        .replace(/\[\^([^\]\s]{1,100})\]/g, (_, id) => stash('<sup>') + id + stash('</sup>'))
+        .replace(TAG, htmlTags);
+    html += htmlTags.rest();
+    for (const [re, to] of EMPHASIS)
+        html = html.replace(re, to);
+    html = html.replace(/\n/g, '<br>').replace(/\u0001(\d+)\u0001/g, (_, n) => tags[+n]);
+    return restore(html, false);
+}
+/** A link target as markdown reads it back: spaces and unbalanced parentheses encoded. */
+export function mdUrl(href) {
+    let depth = 0;
+    const balanced = [...href].every((c) => (c === '(' ? ++depth : c === ')' ? --depth : depth) >= 0) && depth === 0;
+    return (balanced ? href : href.replace(/\(/g, '%28').replace(/\)/g, '%29')).replace(/\s/g, '%20');
+}
+/** Plain text as inline markdown: what would read as a mark is escaped (`_` only at a word's edge: snake_case stays). */
+export function escText(t) {
+    return t
+        .replace(SPECIAL, '\\$&')
+        .replace(/_/g, (u, i, s) => (/[\p{L}\p{N}]/u.test(s[i - 1] ?? '') && /[\p{L}\p{N}]/u.test(s[i + 1] ?? '') ? u : '\\_'));
+}
+/** Inline markdown for a code span: a fence longer than any backtick run inside, padded when it starts or ends with one. */
+export function codeSpan(text) {
+    const fence = '`'.repeat(Math.max(0, ...(text.match(/`+/g) ?? []).map((r) => r.length)) + 1);
+    const pad = /^`|`$/.test(text) ? ' ' : '';
+    return fence + pad + text + pad + fence;
 }
 function walk(n, code) {
     if (n.nodeType === Node.TEXT_NODE) {
         // Zero-width spaces only hold the caret outside a mark (see plainText()).
-        const t = (n.textContent ?? '').replace(/\u200B/g, '');
-        return code ? t : t.replace(SPECIAL, '\\$&');
+        const t = (n.textContent ?? '').replace(/​/g, '');
+        return code ? t : escText(t);
     }
     if (!(n instanceof HTMLElement))
         return '';
@@ -53,9 +151,9 @@ function walk(n, code) {
         case 'DEL':
             return inner ? `~~${inner}~~` : '';
         case 'CODE':
-            return inner && !code ? `\`${inner}\`` : inner;
+            return !inner || code ? inner : codeSpan(inner);
         case 'A':
-            return `[${inner}](${n.getAttribute('href') ?? ''})`;
+            return `[${inner}](${mdUrl(n.getAttribute('href') ?? '')})`;
         case 'BR':
             return '\n';
         default:
@@ -68,21 +166,48 @@ export function htmlToMarkdown(html, code = false) {
     d.innerHTML = html;
     return walk(d, code);
 }
-/** Line starts that markdown would read as a block; a paragraph starting like this gets a leading backslash. */
-const BLOCK_START = /^(?:#{1,6} |[-*+] |\d{1,3}[.)] |>|```|([-*_])\1{2,}\s*$)/;
-const RULE = /^([-*_])\1{2,}\s*$/;
-/** Opening code fence with an optional language: ```ts, ```c++, ```objective-c… */
-const FENCE = /^```([\w+#.-]*)[^\S\n]*/;
-const LINE = /^(?:(#{1,6}) |[-*+] \[([ xX])\] |([-*+]) |(\d{1,3})[.)] |(>) ?)?([\s\S]*)$/;
+/** Line starts that markdown would read as a block (or a setext underline); such a line of text gets escaped. */
+const BLOCK_START = /^(?:#{1,6}(?:\s|$)|[-*+](?:\s|$)|\d{1,9}[.)](?:\s|$)|>|`{3}|~{3}|([-*_])(?:\s*\1){2,}\s*$|=+\s*$)/;
+/** A thematic break: three or more -, * or _ (spaces between them allowed). */
+const RULE = /^([-*_])(?:[ \t]*\1){2,}[ \t]*$/;
+/** An opening code fence: three or more backticks or tildes, then an optional language. */
+const FENCE = /^(`{3,}|~{3,})[ \t]*([^\s`]*)[^`\n]*$/;
+/** An ATX heading (`## Title`, closing `#`s dropped), or null. Done by hand: a regex with a lazy text and an optional
+ * closing sequence is quadratic on long runs of spaces. */
+function heading(line) {
+    const m = /^#{1,6}(?=[ \t]|$)/.exec(line);
+    if (!m)
+        return null;
+    let text = line.slice(m[0].length).trim();
+    let k = text.length;
+    while (k > 0 && text[k - 1] === '#')
+        k--;
+    if (k < text.length && (k === 0 || text[k - 1] === ' ' || text[k - 1] === '\t'))
+        text = text.slice(0, k).trimEnd();
+    return { level: m[0].length, text };
+}
+const ITEM = /^(?:([-*+])[ \t]+\[([ xX])\](?:[ \t]+|$)|([-*+])(?:[ \t]+|$)|(\d{1,9})([.)])(?:[ \t]+|$))/;
+const SETEXT = /^(=+|-+)[ \t]*$/;
+const TABLE_RULE = /^\|?[ \t]*:?-+:?[ \t]*(?:\|[ \t]*:?-+:?[ \t]*)*\|?[ \t]*$/;
+/** A line of text, escaped where markdown would read it as a block start (`1. ` as `1\. `). */
+export function escLine(t) {
+    if (!BLOCK_START.test(t))
+        return t;
+    const ol = /^(\d{1,9})([.)])/.exec(t);
+    return ol ? `${ol[1]}\\${t.slice(ol[1].length)}` : '\\' + t;
+}
 /** One block -> its markdown snippet, without indentation. `n` is the ordinal of a numbered item. */
 export function blockToMd(b, n = 1) {
     if (b.type === 'plugin')
         return '';
     if (b.type === 'hr')
         return '---';
-    if (b.type === 'code')
-        return '```' + (b.props?.lang ?? '') + '\n' + htmlToMarkdown(b.html, true) + '\n```';
-    const t = htmlToMarkdown(b.html);
+    if (b.type === 'code') {
+        const text = htmlToMarkdown(b.html, true);
+        const fence = '`'.repeat(Math.max(3, ...(text.match(/`+/g) ?? []).map((r) => r.length + 1)));
+        return fence + (b.props?.lang ?? '') + '\n' + text + '\n' + fence;
+    }
+    const lines = htmlToMarkdown(b.html).split('\n').map(escLine);
     switch (b.type) {
         case 'h1':
         case 'h2':
@@ -90,45 +215,41 @@ export function blockToMd(b, n = 1) {
         case 'h4':
         case 'h5':
         case 'h6':
-            return `${'#'.repeat(+b.type[1])} ${t}`;
+            return `${'#'.repeat(+b.type[1])} ${lines.join(' ')}`;
         case 'ul':
-            return `- ${t}`;
+            return `- ${lines.join('\\\n  ')}`;
         case 'ol':
-            return `${n}. ${t}`;
+            return `${n}. ${lines.join('\\\n' + ' '.repeat(String(n).length + 2))}`;
         case 'todo':
-            return `- [${b.checked ? 'x' : ' '}] ${t}`;
+            return `- [${b.checked ? 'x' : ' '}] ${lines.join('\\\n  ')}`;
         case 'quote':
-            return `> ${t}`;
+            return lines.map((l) => `${'> '.repeat(b.indent + 1)}${l}`).join('\\\n');
         default:
-            return BLOCK_START.test(t) ? '\\' + t : t;
+            return lines.join('\\\n');
     }
 }
-/** One markdown snippet -> block fields. */
+/** One markdown line -> block fields (a heading, a list item, a quote, a rule or a paragraph). */
 export function mdToBlock(md) {
-    const fence = FENCE.exec(md);
-    if (fence) {
-        const body = md.slice(fence[0].length).replace(/^\n/, '').replace(/\n?```\s*$/, '');
-        return { type: 'code', html: codeHtml(body), ...(fence[1] ? { props: { lang: fence[1] } } : {}) };
-    }
     if (RULE.test(md))
         return { type: 'hr', html: '' };
-    const m = LINE.exec(md);
-    const type = m[1]
-        ? `h${m[1].length}`
-        : m[2]
-            ? 'todo'
-            : m[3]
-                ? 'ul'
-                : m[4]
-                    ? 'ol'
-                    : m[5]
-                        ? 'quote'
-                        : 'p';
-    let text = m[6];
-    // Undo the backslash blockToMd put before a block-like start (text escapes such as `\*` stay).
-    if (type === 'p' && text[0] === '\\' && !/[\\`*~[\]<]/.test(text[1] ?? '\\') && BLOCK_START.test(text.slice(1)))
-        text = text.slice(1);
-    return { type, html: inline(text), ...(type === 'todo' ? { checked: m[2].toLowerCase() === 'x' } : {}) };
+    const h = heading(md);
+    if (h)
+        return { type: `h${h.level}`, html: inline(h.text) };
+    const q = /^>[ \t]?/.exec(md);
+    if (q)
+        return { type: 'quote', html: inline(md.slice(q[0].length)) };
+    const m = ITEM.exec(md);
+    if (m) {
+        const text = md.slice(m[0].length);
+        if (m[2])
+            return { type: 'todo', html: inline(text), checked: m[2] !== ' ' };
+        if (m[3])
+            return { type: 'ul', html: inline(text) };
+        return { type: 'ol', html: inline(text), props: { start: +m[4] } };
+    }
+    // Undo a backslash an older export put before a block-like start ("\1. "); text escapes such as `\*` stay.
+    const text = md[0] === '\\' && /[^!-/:-@[-`{-~]/.test(md[1] ?? '\\') && BLOCK_START.test(md.slice(1)) ? md.slice(1) : md;
+    return { type: 'p', html: inline(text) };
 }
 const BUILT_IN = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ul', 'ol', 'todo', 'quote', 'code', 'hr'];
 const codeHtml = (text) => esc(text).replace(/\n/g, '<br>');
@@ -151,6 +272,8 @@ export function toStored(b) {
         out.props = { checked: !!b.checked };
     if (b.type === 'code' && b.props?.lang)
         out.props = { lang: b.props.lang };
+    if (b.type === 'ol' && b.props?.start != null && olStart(b.props) !== 1)
+        out.props = { start: olStart(b.props) };
     return out;
 }
 /** Stored block -> editor block with a fresh id. Unknown types (md: or plugin) are kept as they are. */
@@ -163,30 +286,177 @@ export function fromStored(s) {
     return newBlock(kind, html, {
         indent: s.indent,
         ...(kind === 'todo' ? { checked: !!s.props?.checked } : {}),
-        ...(kind === 'code' && s.props?.lang ? { props: { lang: s.props.lang } } : {})
+        ...(kind === 'code' && s.props?.lang ? { props: { lang: s.props.lang } } : {}),
+        ...(kind === 'ol' && s.props?.start != null ? { props: { start: olStart(s.props) } } : {})
     });
 }
-/** Markdown text -> blocks. Supports headings, lists, todos, quotes, fenced code, hr and basic inline marks. */
-export function fromMarkdown(src) {
+/** The cells of a table row: split at unescaped pipes, the outer pipes dropped, `\|` unescaped. */
+function cells(line) {
+    const t = line.trim().replace(/^\|/, '').replace(/(?<!\\)\|$/, '');
+    return t.split(/(?<!\\)\|/).map((c) => c.trim().replace(/\\\|/g, '|'));
+}
+/** The width of a line's leading whitespace (a tab counts 4). */
+const leadOf = (line) => /^[ \t]*/.exec(line)[0].replace(/\t/g, '    ').length;
+/** A line without `n` columns of leading whitespace (as far as it has them). */
+const dedent = (line, n) => line.replace(/\t/g, '    ').replace(new RegExp(`^ {0,${n}}`), '');
+/** A line ending in a hard break (two spaces or a backslash) or not, without that ending. */
+const hardEnd = (line) => {
+    let k = line.length;
+    while (k > 0 && line[k - 1] === '\\')
+        k--;
+    // An odd run of backslashes at the end: the last one is the break, the others escape each other.
+    return ((line.length - k) % 2 ? line.slice(0, -1) : line).trimEnd();
+};
+/**
+ * Markdown text -> blocks (CommonMark and GFM, as far as blocks can hold them): headings (also setext), lists with
+ * their nesting and start number, to-dos, quotes (also nested), fenced and indented code, rules, and paragraphs whose
+ * lines are kept as line breaks. Reference links are resolved, footnotes become superscripts. A GFM table goes to the
+ * first of `plugins` that takes it (`fromTable`), or stays text.
+ */
+export function fromMarkdown(src, opts = {}) {
+    const all = src.replace(/\r\n?/g, '\n').split('\n');
+    // Reference definitions ([id]: url) are taken out and used by the links; footnote definitions stay as text.
+    const refs = new Map();
+    const lines = all.filter((l) => {
+        const d = /^ {0,3}\[([^\]^][^\]]*)\]:[ \t]*<?([^\s>]+)>?(?:[ \t]+(?:"[^"]*"|'[^']*'|\([^)]*\)))?[ \t]*$/.exec(l);
+        if (d)
+            refs.set(d[1].trim().toLowerCase(), d[2]);
+        return !d;
+    });
+    const resolve = (t) => !refs.size
+        ? t
+        : t
+            .replace(/(?<!\\)\[([^[\]]{1,1000})\]\[([^[\]]{0,1000})\]/g, (all, text, id) => {
+            const url = refs.get((id || text).trim().toLowerCase());
+            return url ? `[${text}](${url})` : all;
+        })
+            .replace(/(?<![\\\]!])\[([^[\]^][^[\]]{0,1000})\](?![([:])/g, (all, text) => {
+            const url = refs.get(text.trim().toLowerCase());
+            return url ? `[${text}](${url})` : all;
+        });
+    const tableTaker = opts.plugins?.find((p) => p.fromTable);
     const out = [];
-    const lines = src.replace(/\r/g, '').split('\n');
+    // The open list items, by the column of their marker: a line indented past an item's marker is inside it.
+    const items = [];
+    const depth = (lead) => {
+        while (items.length && lead <= items[items.length - 1])
+            items.pop();
+        return Math.min(MAX_INDENT, items.length);
+    };
+    // The block the next plain line continues (a paragraph, a list item, a quote), and the quote's depth.
+    let open = null;
+    const push = (b) => {
+        out.push(b);
+        return b;
+    };
     for (let i = 0; i < lines.length; i++) {
-        const line = lines[i];
-        const fence = FENCE.exec(line.trimStart());
+        const raw = lines[i];
+        const lead = leadOf(raw);
+        const line = raw.trim();
+        if (!line) {
+            open = null;
+            continue;
+        }
+        // Fenced code: closed by a fence of the same character, at least as long.
+        const fence = lead < 4 || items.length ? FENCE.exec(line) : null;
         if (fence) {
-            const code = [];
-            i++;
-            while (i < lines.length && !/^\s*```/.test(lines[i]))
-                code.push(lines[i++]);
-            out.push(newBlock('code', codeHtml(code.join('\n')), fence[1] ? { props: { lang: fence[1] } } : {}));
+            const indent = depth(lead);
+            const body = [];
+            const close = new RegExp(`^${fence[1][0] === '`' ? '`' : '~'}{${fence[1].length},}[ \\t]*$`);
+            for (i++; i < lines.length && !close.test(lines[i].trim()); i++)
+                body.push(dedent(lines[i], lead));
+            const lang = fence[2].replace(/[^\w+#.-]/g, '');
+            push(newBlock('code', codeHtml(body.join('\n')), { indent, ...(lang ? { props: { lang } } : {}) }));
+            open = null;
+            continue;
+        }
+        // Indented code: four spaces, outside lists and paragraphs.
+        if (lead >= 4 && !open && !items.length) {
+            const body = [];
+            for (; i < lines.length && (leadOf(lines[i]) >= 4 || !lines[i].trim()); i++)
+                body.push(dedent(lines[i], 4));
+            i--;
+            while (body.length && !body[body.length - 1].trim())
+                body.pop();
+            push(newBlock('code', codeHtml(body.join('\n'))));
+            open = null;
+            continue;
+        }
+        // Setext heading: a paragraph underlined with = or -.
+        if (open?.type === 'p' && !open.indent && SETEXT.test(line) && lead < 4) {
+            open.type = line[0] === '=' ? 'h1' : 'h2';
+            open = null;
+            continue;
+        }
+        // GFM table: a header row, then a delimiter row.
+        if (tableTaker && line.includes('|') && i + 1 < lines.length && TABLE_RULE.test(lines[i + 1].trim()) && lines[i + 1].includes('-')) {
+            const head = cells(line);
+            const align = cells(lines[i + 1]).map((c) => (c.startsWith(':') && c.endsWith(':') ? 'center' : c.endsWith(':') ? 'right' : 'left'));
+            const rows = [head];
+            for (i += 2; i < lines.length && lines[i].trim() && lines[i].includes('|'); i++)
+                rows.push(cells(lines[i]));
+            i--;
+            const width = Math.max(...rows.map((r) => r.length));
+            const square = rows.map((r) => [...r, ...Array(width - r.length).fill('')].slice(0, width).map(resolve));
+            const props = tableTaker.fromTable({ rows: square, align: [...align, ...Array(width).fill('left')].slice(0, width) });
+            push(newBlock('plugin', '', { plugin: tableTaker.type, props, indent: depth(lead) }));
+            open = null;
             continue;
         }
-        if (!line.trim())
+        // Quotes: one block per paragraph, nested quotes one step deeper; `>` alone ends a paragraph.
+        const q = /^(?:>[ \t]?)+/.exec(line);
+        if (q) {
+            const level = Math.min(MAX_INDENT, (q[0].match(/>/g) ?? []).length - 1);
+            const text = line.slice(q[0].length);
+            if (!text.trim()) {
+                open = null;
+                continue;
+            }
+            if (open?.type === 'quote' && open.indent === level) {
+                open.html += '<br>' + inline(resolve(hardEnd(text)));
+                continue;
+            }
+            open = push(newBlock('quote', inline(resolve(hardEnd(text))), { indent: level }));
             continue;
-        const lead = /^\s*/.exec(line)[0];
-        const indent = Math.min(MAX_INDENT, Math.floor(lead.replace(/\t/g, '  ').length / 2));
-        const { type, html, ...extra } = mdToBlock(line.slice(lead.length));
-        out.push(newBlock(type, html, { indent, ...extra }));
+        }
+        const item = ITEM.exec(line);
+        const block = item || RULE.test(line) || heading(line);
+        // A plain line right after a paragraph, a list item or a quote continues it (with a line break).
+        if (open && !block) {
+            const more = inline(resolve(hardEnd(line)));
+            if (more.trim())
+                open.html += '<br>' + more;
+            continue;
+        }
+        const indent = depth(lead);
+        const { type, html, ...extra } = mdToBlock(resolve(hardEnd(line)));
+        if (item)
+            items.push(lead);
+        else if (!indent)
+            items.length = 0;
+        // A footnote definition ([^1]: …) reads as the note after its number.
+        const note = type === 'p' ? /^\[\^([^\]\s]+)\]:\s*/.exec(line) : null;
+        const b = newBlock(type, note ? `<sup>${esc(note[1])}</sup> ${inline(resolve(hardEnd(line.slice(note[0].length))))}` : html, {
+            indent: type === 'p' || item ? indent : 0,
+            ...extra
+        });
+        if (type === 'p' && !b.html.replace(/<br>/g, '').trim())
+            continue;
+        push(b);
+        open = type === 'p' || item ? b : null;
+    }
+    // A numbered list keeps its start number on its first item only (and only when it is not 1); as numbering() counts.
+    const counters = [];
+    for (const b of out) {
+        if (b.type !== 'ol') {
+            counters.length = Math.min(counters.length, b.indent);
+            continue;
+        }
+        const first = counters[b.indent] === undefined;
+        counters.length = b.indent + 1;
+        counters[b.indent] = 1;
+        if (!first || olStart(b.props) === 1)
+            delete b.props;
     }
     return out;
 }
@@ -195,14 +465,32 @@ export function fromMarkdown(src) {
 export function toMarkdown(blocks, opts = {}) {
     const nums = numbering(blocks);
     const listy = (t) => t === 'ul' || t === 'ol' || t === 'todo';
+    // The content column of the last list item at each level: what a nested block is indented by.
+    const cols = [];
     const md = (b) => {
-        if (b.type !== 'plugin')
-            return ('  ').repeat(listy(b.type) || b.type === 'p' ? b.indent : 0) + blockToMd(b, nums[b.id]);
-        const plugin = opts.plugins?.find((p) => p.type === b.plugin);
-        if (!plugin?.markdown)
+        if (b.type === 'plugin') {
+            const plugin = opts.plugins?.find((p) => p.type === b.plugin);
+            if (!plugin?.markdown)
+                return '';
+            const inner = b.blocks?.length ? toMarkdown(b.blocks.map(fromStored), opts) : '';
+            return plugin.markdown(b.props ?? {}, { inner }).trim();
+        }
+        const text = blockToMd(b, nums[b.id]);
+        if (!text.trim() || (b.type === 'quote' && !htmlToMarkdown(b.html).trim()))
             return '';
-        const inner = b.blocks?.length ? toMarkdown(b.blocks.map(fromStored), opts) : '';
-        return plugin.markdown(b.props ?? {}, { inner }).trim();
+        // Inside a list (a nested item, a paragraph or code under an item): indented to the item's content.
+        const nested = (listy(b.type) || b.type === 'p' || b.type === 'code') && b.indent > 0 && cols.length > 0;
+        const pad = nested ? ' '.repeat(cols[Math.min(b.indent, cols.length) - 1]) : '';
+        if (listy(b.type)) {
+            cols.length = Math.min(cols.length, b.indent);
+            cols[b.indent] = pad.length + (b.type === 'ol' ? String(nums[b.id]).length + 2 : 2);
+        }
+        else if (!nested)
+            cols.length = 0;
+        return text
+            .split('\n')
+            .map((l) => (l ? pad + l : l))
+            .join('\n');
     };
     let out = '';
     let prev;
@@ -210,8 +498,15 @@ export function toMarkdown(blocks, opts = {}) {
         const text = md(b);
         if (!text)
             continue;
-        if (prev)
-            out += listy(b.type) && listy(prev.type) ? '\n' : '\n\n';
+        if (prev) {
+            if (listy(b.type) && listy(prev.type))
+                out += '\n';
+            // Quotes in a row stay one quote, a `>` line between their paragraphs.
+            else if (b.type === 'quote' && prev.type === 'quote')
+                out += '\n' + '>'.repeat(Math.min(b.indent, prev.indent) + 1) + '\n';
+            else
+                out += '\n\n';
+        }
         out += text;
         prev = b;
     }

package/dist/model.js

@@ -1,6 +1,5 @@
-// Block content: what the block editor (src/routes/(+lib)/blocks) writes into the `content` column of pages, news posts
-// and promo boxes. Built-in blocks are `md:<kind>` with inline markdown text (raw text for md:code); every other type
-// belongs to an editor plugin, with its own props and, for some, nested blocks.
+// The stored document: what the editor writes and an app saves. Built-in blocks are `md:<kind>` with inline markdown text
+// (raw text for md:code); every other type belongs to a plugin, with its own props and, for containers, nested blocks.
 export const MD = 'md:';
 export const MAX_INDENT = 6;
 /** Plugins with nested blocks hold one level only, so a document is at most this deep. */

package/dist/plugins/Gap.svelte

@@ -18,11 +18,8 @@
 	let { props = $bindable() }: PluginViewProps<GapProps> = $props();
 </script>
 
-<div class="gap" style:height="{gapLines(props.lines)}lh" aria-hidden="true"></div>
-
-<style>
-	.gap {
-		border-radius: 6px;
-		background: repeating-linear-gradient(-45deg, transparent 0 6px, color-mix(in srgb, currentColor 7%, transparent) 6px 12px);
-	}
-</style>
+<div
+	class="rounded-md bg-[repeating-linear-gradient(-45deg,transparent_0_6px,color-mix(in_srgb,currentColor_7%,transparent)_6px_12px)]"
+	style:height="{gapLines(props.lines)}lh"
+	aria-hidden="true"
+></div>

package/dist/plugins/GapPreview.svelte

@@ -9,9 +9,7 @@
 
 <div class="gap" style:height="{gapLines(props.lines)}lh" aria-hidden="true"></div>
 
-<style>
-	.gap {
-		clear: both;
-		margin: 0;
-	}
-</style>
+<style>.gap {
+  clear: both;
+  margin: 0;
+}</style>

package/dist/plugins/Map.svelte

@@ -23,25 +23,10 @@
 </script>
 
 {#if src}
-	<div class="map">
+	<div class="overflow-hidden rounded-[10px] border border-frame">
 		<!-- Not interactive inside the editor, so selecting and dragging the block keep working. -->
-		<iframe title={tr('Map: {place}', { place: String(props.q ?? '') })} {src} loading="lazy"></iframe>
+		<iframe class="pointer-events-none block h-[260px] w-full border-0" title={tr('Map: {place}', { place: String(props.q ?? '') })} {src} loading="lazy"></iframe>
 	</div>
 {:else}
 	<Empty icon={MapPin} text="Set a place or an address above" />
 {/if}
-
-<style>
-	.map {
-		border: 1px solid var(--color-frame, #e5e5ea);
-		border-radius: 10px;
-		overflow: hidden;
-	}
-	iframe {
-		display: block;
-		width: 100%;
-		height: 260px;
-		border: 0;
-		pointer-events: none;
-	}
-</style>