flea-qml 0.0.0-stage → 0.2.0

package/ui/js/MdHtml.js

@@ -0,0 +1,307 @@
+.pragma library
+
+// MdHtml: one forward scan allowlists raw tags; only sanitized markup reaches md4c.
+.import "MdUrl.js" as MdUrl
+.import "MdEscape.js" as MdEscape
+.import "MdInline.js" as MdInline
+
+var TOKEN_OPEN = 57346
+var TOKEN_CLOSE = 57347
+var MAX_TAG_LENGTH = 4096
+
+// Sample input: "\uE0020\uE003" becomes "\uFFFD0\uFFFD" before document parsing reserves its token markers; "a\r\nb\rc" becomes "a\nb\nc", the line endings CommonMark names.
+function documentText(text) {
+    return String(text).replace(/[\uE002\uE003]/g, "\uFFFD").replace(/\r\n?/g, "\n")
+}
+
+// Held spans use private-use delimiters and one shared token table, restored after escaping.
+function openToken() {
+    return String.fromCharCode(TOKEN_OPEN)
+}
+
+function closeToken() {
+    return String.fromCharCode(TOKEN_CLOSE)
+}
+
+function holdToken(tokens, html) {
+    var token = openToken() + tokens.length + closeToken()
+    tokens.push(html)
+    return token
+}
+
+// Tags whose content is dropped with them: active content and whole-document namespaces a preview must never instantiate.
+var DROP_CONTENT = { script: 1, style: 1, iframe: 1, object: 1, embed: 1,
+    template: 1, noscript: 1, svg: 1, math: 1 }
+
+// Tags re-emitted with the attributes below; any other tag is dropped and its content kept. font carries only the color the parser's own links wrap in.
+var ALLOWED = { a: 1, b: 1, strong: 1, i: 1, em: 1, u: 1, s: 1, del: 1,
+    strike: 1, sub: 1, sup: 1, kbd: 1, code: 1, br: 1, small: 1, mark: 1,
+    span: 1, p: 1, div: 1, h1: 1, h2: 1, h3: 1, h4: 1, h5: 1, h6: 1, hr: 1,
+    img: 1, picture: 1, source: 1, details: 1, summary: 1, table: 1,
+    thead: 1, tbody: 1, tr: 1, th: 1, td: 1, ul: 1, ol: 1, li: 1,
+    blockquote: 1, pre: 1, font: 1 }
+
+// Attributes that survive on any allowed tag. Every style, class, id, background, srcset, poster, data-* and on* attribute is dropped.
+var GLOBAL_ATTRS = { align: 1, alt: 1, width: 1, height: 1, title: 1,
+    colspan: 1, rowspan: 1 }
+
+// Void tags never take a closing tag.
+var VOID = { br: 1, hr: 1, img: 1, source: 1 }
+
+// The chip kbd and code tags wear, the same recipe as an inline code span.
+var CHROME_PATTERN = /^#[0-9a-f]{6}([0-9a-f]{2})?$/i
+var DISCLOSURE_OPEN = "\u25be"
+
+// Qt draws a raw s tag struck on every build but drops del and strike, so all three are emitted as s.
+var STRIKE_AS = { del: "s", strike: "s" }
+
+function isNameChar(c) {
+    return (c >= "a" && c <= "z") || (c >= "A" && c <= "Z") || (c >= "0" && c <= "9")
+}
+
+function isHtmlWhitespace(c) {
+    return c === "\t" || c === "\n" || c === "\f" || c === "\r" || c === " "
+}
+
+// Sample: <img src="pic.png" alt="picture">. Quote-check only the candidate; a failed native search marks later openers dead, and oversized tags stay literal.
+function readTag(text, i, dead) {
+    if (dead !== undefined && dead !== null && i < dead.tagDead)
+        return null
+    var cached = dead !== undefined && dead !== null && dead.tagClose > i
+    var gt = cached ? dead.tagClose : text.indexOf(">", i + 1)
+    if (dead !== undefined && dead !== null && gt >= 0)
+        dead.tagClose = gt
+    if (gt < 0) {
+        if (dead !== undefined && dead !== null)
+            dead.tagDead = text.length
+        return null
+    }
+    if (gt - i > MAX_TAG_LENGTH) {
+        if (dead !== undefined && dead !== null)
+            dead.tagDead = gt - MAX_TAG_LENGTH
+        return null
+    }
+    var candidate = text.slice(i, gt + 1)
+    var dq = candidate.indexOf('"')
+    var sq = candidate.indexOf("'")
+    if (dq < 0 && sq < 0)
+        return { tag: candidate, end: gt + 1 }
+    var quote = ""
+    var j = i + 1
+    while (j < gt) {
+        var c = text.charAt(j)
+        if (quote !== "") {
+            if (c === quote)
+                quote = ""
+        } else if (c === '"' || c === "'") {
+            quote = c
+        }
+        j++
+    }
+    if (quote !== "")
+        return null
+    return { tag: candidate, end: gt + 1 }
+}
+
+// Sample input: ' a=b/' keeps the slash in b/; ' ==/' names '=' with value '/'; ' a="b"/' sets the self-closing flag.
+function scanAttributes(rest) {
+    var i = 0
+    var attributes = []
+    var valid = true
+    var selfClose = false
+    while (i < rest.length) {
+        while (i < rest.length && isHtmlWhitespace(rest.charAt(i)))
+            i++
+        if (i >= rest.length)
+            break
+        if (rest.charAt(i) === "/") {
+            selfClose = i === rest.length - 1
+            i++
+            continue
+        }
+        // Before an attribute name, even '=' starts the name; only a later '=' starts its value.
+        var aname = rest.charAt(i).toLowerCase()
+        i++
+        while (i < rest.length && !isHtmlWhitespace(rest.charAt(i))
+                && rest.charAt(i) !== "=" && rest.charAt(i) !== "/" && rest.charAt(i) !== ">") {
+            aname += rest.charAt(i).toLowerCase()
+            i++
+        }
+        if (!/^[A-Za-z_:][-A-Za-z0-9_.:]*$/.test(aname))
+            valid = false
+        while (i < rest.length && isHtmlWhitespace(rest.charAt(i)))
+            i++
+        var value = null
+        if (rest.charAt(i) === "=") {
+            i++
+            while (i < rest.length && isHtmlWhitespace(rest.charAt(i)))
+                i++
+            var q = rest.charAt(i)
+            if (q === '"' || q === "'") {
+                i++
+                var start = i
+                while (i < rest.length && rest.charAt(i) !== q)
+                    i++
+                value = rest.slice(start, i)
+                i++
+            } else {
+                var begin = i
+                while (i < rest.length && !isHtmlWhitespace(rest.charAt(i)) && rest.charAt(i) !== ">")
+                    i++
+                value = rest.slice(begin, i)
+            }
+        }
+        attributes.push({ name: aname, value: value })
+    }
+    return { attributes: attributes, valid: valid, selfClose: selfClose }
+}
+
+// Sample input: '<img src="pic.png"/>' yields name "img", its attributes and a self-closing flag.
+function tagHead(tag) {
+    var i = 1
+    var closing = false
+    if (tag.charAt(i) === "/") {
+        closing = true
+        i++
+    }
+    var name = ""
+    while (i < tag.length && (isNameChar(tag.charAt(i)) || tag.charAt(i) === "-")) {
+        name += tag.charAt(i).toLowerCase()
+        i++
+    }
+    var rest = tag.slice(i, tag.length - 1)
+    var slashFirst = rest.charAt(0) === "/"
+    var whitespaceEnd = slashFirst ? 1 : 0
+    while (whitespaceEnd < rest.length && isHtmlWhitespace(rest.charAt(whitespaceEnd)))
+        whitespaceEnd++
+    var validHead = /^[a-z]/.test(name)
+        && (rest === "" || isHtmlWhitespace(rest.charAt(0)) || slashFirst)
+        && (!closing || (!slashFirst && whitespaceEnd === rest.length))
+        && (!slashFirst || whitespaceEnd === rest.length)
+    // Malformed dropped openers still suppress their bodies; malformed closers cannot end a dropped body.
+    if (!validHead && (closing || !DROP_CONTENT.hasOwnProperty(name)))
+        name = ""
+    var attrs = scanAttributes(rest)
+    return { name: name, closing: closing, rest: rest, selfClose: validHead && attrs.valid && attrs.selfClose,
+        attributes: attrs.attributes, validAttrs: attrs.valid }
+}
+
+// Sample input: " \thttps://a.example/x\n " strips URL padding and embedded tab, CR and LF.
+function normalizedTarget(value) {
+    return MdUrl.strippedTarget(value)
+}
+
+// One attribute value with entities decoded for the safety checks below.
+function attrKept(name, value, tagName) {
+    var seen = normalizedTarget(MdUrl.canonicalUrl(value)).toLowerCase()
+    // CSS url() in any attribute loads, so the attribute goes.
+    if (/url\s*\(/i.test(seen))
+        return false
+    if (name === "href") {
+        if (tagName !== "a")
+            return false
+        // Links never fetch: http, https, mailto, relative and #anchor stay, through every decoding.
+        return MdUrl.targetAllowed(value)
+    }
+    if (name === "src")
+        return tagName === "img" || tagName === "source"
+    if (name === "color")
+        return tagName === "font"
+    return GLOBAL_ATTRS.hasOwnProperty(name)
+}
+
+// The opening of an inline code chip; an unusable chrome leaves a plain code tag.
+function chipOpen(chrome) {
+    return CHROME_PATTERN.test(String(chrome || "")) ? '<code style="background-color:' + chrome + '">' + MdEscape.chipPad() : "<code>"
+}
+function chipClose(chrome) {
+    return CHROME_PATTERN.test(String(chrome || "")) ? MdEscape.chipPad() + "</code>" : "</code>"
+}
+
+function escapeAttr(value) {
+    return String(value).replace(/&/g, "&#38;").replace(/"/g, "&#34;").replace(/</g, "&#60;")
+}
+
+// Sanitize one tag into {emit, drop}; held image tokens carry resolved URLs, and drop names content to skip. chrome fills the key cap, ink colours a link, inked.open counts the links wearing it.
+function sanitizeTag(tag, dir, tokens, chrome, ink, inked) {
+    function hold(html) {
+        return holdToken(tokens, html)
+    }
+    var head = tagHead(tag)
+    var name = STRIKE_AS.hasOwnProperty(head.name) ? STRIKE_AS[head.name] : head.name
+    if (name.length === 0)
+        return { emit: "&#60;", drop: null }
+    if (DROP_CONTENT.hasOwnProperty(name))
+        return { emit: "", drop: head.closing || head.selfClose ? null : name }
+    if (!ALLOWED.hasOwnProperty(name))
+        return { emit: "", drop: null }
+    // details is drawn open: its summary is a bold line led by the open disclosure mark, and its body follows.
+    if (name === "details")
+        return { emit: "", drop: null }
+    if (name === "summary")
+        return { emit: head.closing ? "</b>" : "<b>" + DISCLOSURE_OPEN + " ", drop: null }
+    // kbd and code are the inline code chip, never a bare tag.
+    if (name === "kbd" || name === "code")
+        return { emit: head.closing ? chipClose(chrome) : chipOpen(chrome), drop: null }
+    var wear = name === "a" ? MdInline.linkInk(ink) : null
+    // A closer takes off only ink its own opener put on, so a refused, self-closed or missing opener never ends an enclosing font.
+    if (head.closing) {
+        var worn = wear !== null && inked.open > 0
+        if (worn)
+            inked.open--
+        return { emit: (worn ? wear.close : "") + "</" + name + ">", drop: null }
+    }
+    if (!head.validAttrs)
+        return { emit: "", drop: null }
+    var kept = ""
+    var srcSeen = null
+    var srcsetSeen = null
+    var altSeen = null
+    for (var i = 0; i < head.attributes.length; i++) {
+        var aname = head.attributes[i].name
+        var value = head.attributes[i].value
+        // Every style, class, id, background, srcset, poster, data-* and on* attribute is dropped, whatever its value.
+        if (aname === "style" || aname === "class" || aname === "id"
+                || aname === "background" || aname === "poster"
+                || aname.indexOf("data-") === 0 || aname.indexOf("on") === 0)
+            continue
+        if (aname === "srcset") {
+            if (srcsetSeen === null)
+                srcsetSeen = value === null ? "" : value
+            continue
+        }
+        if (aname === "src" && (name === "img" || name === "source")) {
+            if (srcSeen === null)
+                srcSeen = value === null ? "" : value
+            continue
+        }
+        if (aname === "alt") {
+            if (altSeen !== null)
+                continue
+            altSeen = value === null ? "" : value
+        }
+        if (aname === "href" && value !== null)
+            value = normalizedTarget(value)
+        if (value === null || attrKept(aname, value, name))
+            kept += " " + aname + (value === null ? "" : '="' + escapeAttr(value) + '"')
+    }
+    if (name === "img" || name === "source") {
+        var picked = null
+        if (srcSeen !== null)
+            picked = MdUrl.classifyImage(srcSeen, dir)
+        else if (srcsetSeen !== null)
+            picked = MdUrl.srcsetPick(srcsetSeen, dir)
+        // The importer drops everything after a raw img tag, so a local picture reaches it as a Markdown image.
+        if (picked !== null && picked.kind === "local")
+            return { emit: hold("![" + MdEscape.escapeText(altSeen === null ? "" : altSeen) + "]("
+                + picked.url.replace(/\(/g, "%28").replace(/\)/g, "%29") + ")"), drop: null }
+        if (picked !== null && picked.kind === "remote")
+            return { emit: "\n\n" + MdUrl.placeholder(MdEscape.escapeText(picked.host)) + "\n\n", drop: null }
+        return { emit: MdUrl.canonicalUrl(altSeen).length > 0 ? MdEscape.escapeText(altSeen) : "", drop: null }
+    }
+    var close = (head.selfClose || VOID.hasOwnProperty(name)) ? " /" : ""
+    var wears = wear !== null && close === ""
+    if (wears)
+        inked.open++
+    return { emit: "<" + name + kept + close + ">" + (wears ? wear.open : ""), drop: null }
+}

package/ui/js/MdHtmlBlock.js

@@ -0,0 +1,290 @@
+.pragma library
+
+// MdHtmlBlock: images leave an HTML block as image blocks, and top-level HTML blocks start their own lines.
+.import "MdHtml.js" as MdHtml
+.import "MdHtmlImage.js" as HtmlImage
+
+// The names CommonMark starts an HTML block with, and one complete tag alone on its line, which starts one only outside a paragraph.
+var BLOCK_NAMES = "address|article|aside|base|basefont|blockquote|body|caption|center|col|colgroup|dd|details|dialog|dir|div|dl|dt|fieldset|figcaption|figure|footer|form|frame|frameset|h[1-6]|head|header|hr|html|iframe|legend|li|link|main|menu|menuitem|meta|nav|noframes|ol|optgroup|option|p|param|section|source|summary|table|tbody|td|tfoot|th|thead|title|tr|track|ul"
+// Sample input: '<div align="center">' and '  </table>' start an HTML block; '<span>x</span>' and 'text <div>' do not.
+var BLOCK_START = new RegExp("^ {0,3}<\\/?(?:" + BLOCK_NAMES + ")(?:[\\s>]|\\/>|$)", "i")
+// Sample input: '<a href="x">' and '</span>' alone on a line are complete tags; '<a href="x">text' is not.
+var COMPLETE_TAG = /^ {0,3}(?:<[A-Za-z][A-Za-z0-9-]*(?:\s[^<>]*)?\/?>|<\/[A-Za-z][A-Za-z0-9-]*\s*>)\s*$/
+// Sample input: 'x <a href="https://y">' ends with a link opener, which the text before an image holds when the image sits in a link.
+var LINK_BEFORE = /<a\b[^<>]*>\s*$/i
+// Sample input: '</a>' and '</A>' close the link around an image; the four characters after the image are tested against it.
+var LINK_CLOSE = /^<\/a>$/i
+var LINK_CLOSE_LENGTH = "</a>".length
+// Sample input: 'A<IMG' holds the capital letters asciiLower lowers, by their distance from lower case.
+var UPPER_ASCII = /[A-Z]/g
+var CASE_OFFSET = "a".charCodeAt(0) - "A".charCodeAt(0)
+// Sample input: '<p align="center"><b>x</b>' and '<center>' open a block that may centre; '<span>' and 'text' do not.
+var CENTRED_OPEN = /^\s*<(?:p|div|center)\b[^<>]*>/i
+// Sample input: 'a <div>b</div>' and '<h1 align="center">' hold a block tag that centres itself; '<b>x</b>' holds none.
+var BLOCK_TAG = /<(?:p|div|h[1-6]|table|ul|ol|blockquote|pre)\b/i
+// Sample input: '</p><p>' and '<div align="center">' open or close a block, so pictures either side of them sit on lines of their own; '<b>' and '</td><td>' do not.
+var BLOCK_BOUNDARY = /<\/?(?:p|div|h[1-6]|table|tr|ul|ol|li|blockquote|pre)\b/i
+// Sample input: '<br>' and '<BR />' break a line.
+var BREAK_TAG = /<br\b[^<>]*>/i
+// The most pictures one images block holds.
+var ROW_IMAGE_CAP = 64
+var CENTRED_WRAP = '<p align="center">'
+// The elements that start their own line, and the ones that nest and so are counted open and closed.
+// Sample input: '<h1 align="center">Flea</h1>' and '  <details open>' start a line of their own; '<b>x</b>' does not.
+var LINE_OPENER = /^ {0,3}<(?:p|div|h[1-6]|details|summary|hr|table|ul|ol|blockquote|pre)(?=[\s>\/])/i
+// Sample input: '<div class="x">' answers slash "" and '</div>' answers "/"; '<b>' and '<divider>' match nothing.
+var NESTING_TAG = /<(\/?)(?:p|div|h[1-6]|details|summary|table|ul|ol|blockquote|pre)(?=[\s>\/])[^<>]*>/gi
+// Sample input: '<b>' answers slash "" and name "b"; '</p>' answers "/" and "p"; text with no angle bracket matches nothing.
+var ANY_TAG = /<(\/?)([A-Za-z][A-Za-z0-9]*)[^<>]*>/g
+
+// Sample input: '<IMG SRC>' after a U+0130 answers '<img src>'; only A to Z change, so an index in the answer is an index in the text.
+function asciiLower(text) {
+    return text.replace(UPPER_ASCII, function (letter) { return String.fromCharCode(letter.charCodeAt(0) + CASE_OFFSET) })
+}
+
+// Sample input: '<td><img src="a.png"></td>' from 0 answers { start: 4, end: 24, block }; remote and unreadable images answer null.
+// lower is the line in asciiLower form and dead its tag cache, made once per line, so a row of many images costs one pass.
+function findImage(line, lower, from, dead, dir) {
+    var at = lower.indexOf("<img", from)
+    while (at >= 0) {
+        var tag = MdHtml.readTag(line, at, dead)
+        var block = tag === null ? null : HtmlImage.rawImage(tag.tag, dir)
+        if (block !== null && block.type === "image")
+            return { start: at, end: tag.end, block: block }
+        at = lower.indexOf("<img", at + 1)
+    }
+    return null
+}
+
+// Sample input: '<td>a</p>' drops the closer no opener in the text matches; text with its own pairs is unchanged.
+function withoutStrayClosers(text) {
+    var open = {}
+    return text.replace(ANY_TAG, function (tag, slash, name) {
+        var key = name.toLowerCase()
+        if (slash === "") {
+            open[key] = (open[key] || 0) + 1
+            return tag
+        }
+        if (open[key] > 0) {
+            open[key]--
+            return tag
+        }
+        return ""
+    })
+}
+
+// What stays of the lines around an extracted image: lines with visible text, their stray closers gone, centred when its block was.
+function remainder(kept, centred) {
+    var split = withoutStrayClosers(kept.join("\n")).split("\n")
+    var lines = []
+    // A line that holds a block tag of its own centres itself; wrapping it would nest the paragraphs.
+    var nests = false
+    for (var i = 0; i < split.length; i++) {
+        // A line holding an image the splitter did not take (a remote one) draws its placeholder, so it stays.
+        if (split[i].replace(ANY_TAG, "").trim().length === 0 && !/<(?:hr|img)\b/i.test(split[i]))
+            continue
+        lines.push(split[i])
+        nests = nests || BLOCK_TAG.test(split[i])
+    }
+    if (lines.length > 0)
+        lines[0] = lines[0].replace(HtmlImage.LEADING_BREAK, "")
+    return lines.length === 0 ? [] : centred && !nests ? [CENTRED_WRAP + lines.join("\n") + "</p>"] : lines
+}
+
+// Sample input: images a and b with nothing between them answer [{ block: { type: "images", items: [a, b] } }]; one image, text or a row break keeps them apart.
+// A row longer than ROW_IMAGE_CAP continues in the next block, so no block builds an unbounded number of pictures at once.
+function imageRows(parts) {
+    var out = []
+    var row = []
+    function close() {
+        for (var at = 0; at < row.length; at += ROW_IMAGE_CAP) {
+            var items = row.slice(at, at + ROW_IMAGE_CAP)
+            if (items.length === 1) {
+                out.push({ block: items[0] })
+                continue
+            }
+            var rows = { type: "images", items: items }
+            if (items[0].align !== undefined)
+                rows.align = items[0].align
+            for (var r = 0; r < items.length; r++)
+                delete items[r].align
+            out.push({ block: rows })
+        }
+        row = []
+    }
+    for (var i = 0; i < parts.length; i++) {
+        if (parts[i].block !== undefined) {
+            row.push(parts[i].block)
+        } else {
+            close()
+            if (parts[i].lines !== undefined)
+                out.push(parts[i])
+        }
+    }
+    close()
+    return out
+}
+
+// One HTML block's lines as parts, each a { lines } to parse or a { block } image; the block's wrappers do not outlive its image.
+function splitBlock(group, dir) {
+    var centred = CENTRED_OPEN.test(group[0]) && (/^\s*<center\b/i.test(group[0]) || HtmlImage.isCentred(CENTRED_OPEN.exec(group[0])[0]))
+    var parts = []
+    var kept = []
+    var found = false
+    function flush() {
+        var lines = remainder(kept, centred)
+        // A line break or a block boundary between two images starts the next row.
+        var between = kept.join("\n")
+        var broke = BREAK_TAG.test(between) || BLOCK_BOUNDARY.test(between)
+        kept = []
+        if (lines.length > 0)
+            parts.push({ lines: lines })
+        else if (broke)
+            parts.push({ rowBreak: true })
+    }
+    for (var i = 0; i < group.length; i++) {
+        var line = group[i]
+        var lower = asciiLower(line)
+        var dead = { tagDead: -1 }
+        // The scan walks the line by position, so a line of many images is cut once, never once per image.
+        var from = 0
+        for (var hit = findImage(line, lower, from, dead, dir); hit !== null; hit = findImage(line, lower, from, dead, dir)) {
+            var before = line.slice(from, hit.start)
+            var wrap = LINK_BEFORE.exec(before)
+            // The link closer follows the image after optional whitespace.
+            var next = hit.end
+            while (next < line.length && /\s/.test(line.charAt(next)))
+                next++
+            from = hit.end
+            if (wrap !== null && LINK_CLOSE.test(line.slice(next, next + LINK_CLOSE_LENGTH))) {
+                if (HtmlImage.linkOf(wrap[0]) !== null)
+                    hit.block.link = HtmlImage.linkOf(wrap[0])
+                before = before.slice(0, wrap.index)
+                from = next + LINK_CLOSE_LENGTH
+            }
+            kept.push(before)
+            flush()
+            if (centred)
+                hit.block.align = "center"
+            parts.push({ block: hit.block })
+            found = true
+        }
+        kept.push(line.slice(from))
+    }
+    flush()
+    return found ? imageRows(parts) : [{ lines: group }]
+}
+
+// Sample input: ['<table><tr><td><img src="a.png"></td></tr></table>'] answers [{ block }]; a paragraph's inline image stays in its lines.
+// The importer draws no Markdown inside an HTML block and drops a raw img with all that follows it, so a block's images leave it.
+function splitHtmlImages(lines, dir) {
+    var parts = []
+    var text = []
+    var group = null
+    var paragraph = false
+    function closeGroup() {
+        if (group !== null) {
+            var split = splitBlock(group, dir)
+            for (var s = 0; s < split.length; s++)
+                parts.push(split[s])
+        }
+        group = null
+    }
+    function closeText() {
+        if (text.length > 0)
+            parts.push({ lines: text })
+        text = []
+    }
+    for (var i = 0; i < lines.length; i++) {
+        var line = lines[i]
+        if (line.trim().length === 0) {
+            closeGroup()
+            text.push(line)
+            paragraph = false
+        } else if (group !== null) {
+            group.push(line)
+        } else if (BLOCK_START.test(line) || (!paragraph && COMPLETE_TAG.test(line))) {
+            closeText()
+            group = [line]
+        } else {
+            paragraph = true
+            text.push(line)
+        }
+    }
+    closeGroup()
+    closeText()
+    // Lines the split left alone stay one run, as the importer joins an HTML block with the paragraph after it.
+    var merged = []
+    for (var k = 0; k < parts.length; k++) {
+        var last = merged.length - 1
+        if (last >= 0 && merged[last].lines !== undefined && parts[k].lines !== undefined) {
+            for (var m = 0; m < parts[k].lines.length; m++)
+                merged[last].lines.push(parts[k].lines[m])
+        } else {
+            merged.push(parts[k].lines === undefined ? parts[k] : { lines: parts[k].lines.slice(0) })
+        }
+    }
+    return merged
+}
+
+// Sample input: ['<h1>A</h1>', '<p>B</p>'] answers ['<h1>A</h1>', '', '<p>B</p>']; a block nested in an open one stays on its line.
+// The importer draws adjacent HTML block lines as one line, so each top-level block starts after a blank line.
+function separateBlocks(lines) {
+    var out = []
+    var depth = 0
+    for (var i = 0; i < lines.length; i++) {
+        var line = lines[i]
+        if (line.trim().length === 0)
+            depth = 0
+        else if (depth === 0 && out.length > 0 && out[out.length - 1].trim().length > 0 && LINE_OPENER.test(line))
+            out.push("")
+        out.push(line)
+        line.replace(NESTING_TAG, function (tag, slash) {
+            depth = slash === "/" ? Math.max(0, depth - 1) : depth + 1
+            return tag
+        })
+    }
+    return out
+}
+
+// The six heading levels by tag name, so an HTML heading maps to its Markdown level.
+var HEADING_LEVEL = { h1: 1, h2: 2, h3: 3, h4: 4, h5: 5, h6: 6 }
+// The shortest heading line that holds text, "<h1>x</h1>": anything shorter is never one.
+var HEADING_SHORTEST = 10
+// Sample input: '<h1 align="center">Flea</h1>' answers level 1 with centre and inner Flea; '<h2>x</h2> tail' answers null.
+function htmlHeading(line) {
+    var text = String(line).trim()
+    if (text.length < HEADING_SHORTEST)
+        return null
+    var open = MdHtml.readTag(text, 0, null)
+    if (open === null || open.end <= 0)
+        return null
+    var head = MdHtml.tagHead(open.tag)
+    var level = HEADING_LEVEL[head.name]
+    if (level === undefined || head.closing)
+        return null
+    var rest = text.slice(open.end)
+    var lower = asciiLower(rest)
+    var closeName = "</h" + level
+    var closeAt = lower.indexOf(closeName)
+    if (closeAt < 0)
+        return null
+    var close = MdHtml.readTag(text, open.end + closeAt, null)
+    if (close === null || close.end !== text.length)
+        return null
+    var closeHead = MdHtml.tagHead(close.tag)
+    if (closeHead.name !== head.name || !closeHead.closing)
+        return null
+    var inner = rest.slice(0, closeAt)
+    var align = null
+    var aligned = false
+    for (var i = 0; i < head.attributes.length; i++) {
+        if (head.attributes[i].name === "align" && head.attributes[i].value !== null) {
+            aligned = true
+            var seen = head.attributes[i].value.toLowerCase()
+            if (seen === "center" || seen === "right")
+                align = seen
+        }
+    }
+    return { level: level, align: align, aligned: aligned, inner: inner }
+}

package/ui/js/MdHtmlHeading.js

@@ -0,0 +1,53 @@
+.pragma library
+
+// MdHtmlHeading: an HTML heading inside a wrapper or opening with a picture, lifted whole so no wrapper is split and no picture sits in a text line.
+.import "MdHtml.js" as MdHtml
+.import "MdHtmlImage.js" as HtmlImage
+.import "MdHtmlBlock.js" as HtmlBlock
+
+// Sample input: drawn heading text '![](file:///d/logo.png)Flea' or '<img src="a.png">' holds a picture; 'Flea' and 'Wow!\[beta]' hold none.
+var DRAWN_PICTURE = /<img\b|!\[(?:\\.|[^\]\\])*\]\(/i
+
+// Sample input: ['<div align="center">', '<h1>Flea</h1>', '<p>x</p>', '</div>'] at 0 answers { head, end: 3, wrapper: ['<div align="center"><p>x</p></div>'] }; a heading with no lone wrapper before it, or a wrapper that cannot be matched, answers null.
+// The heading lifts out with its own align, else the wrapper's centre; what the wrapper held after it is drawn centred as it was.
+function headingUnit(lines, at) {
+    var open = String(lines[at]).trim()
+    if (!HtmlImage.WRAPPER_OPEN.test(open) || at + 1 >= lines.length)
+        return null
+    var head = HtmlBlock.htmlHeading(lines[at + 1])
+    if (head === null)
+        return null
+    var name = MdHtml.tagHead(open).name
+    var tail = HtmlImage.wrapperTail(lines, at + 2, name)
+    if (tail === null)
+        return null
+    if (!head.aligned && HtmlImage.isCentred(open))
+        head.align = "center"
+    var shown = tail.rest.filter(function (line) { return line.length > 0 })
+    return { head: head, end: tail.end, wrapper: shown.length === 0 ? [] : [open + shown.join("\n") + "</" + name + ">"] }
+}
+
+// Sample input: ('<div>', 0) answers 1 and ('</div>', 1) answers 0; a line with no block tag leaves the depth as it was.
+// The open block HTML a run holds after a line, so a heading is judged inside open HTML by what the lines before it left open.
+function nestDepth(line, depth) {
+    line.replace(HtmlBlock.NESTING_TAG, function (tag, slash) {
+        depth = slash === "/" ? Math.max(0, depth - 1) : depth + 1
+        return tag
+    })
+    return depth
+}
+
+// Sample input: '<a href="https://x/"><img src="logo.png" width="120"></a><br>Flea' answers { block: the linked image, rest: 'Flea' }; text first answers null.
+var HEADING_PICTURE = /^\s*(<a\b[^<>]*>)?\s*(<img\b[^<>]*>)\s*(<\/a>)?\s*(?:<br\s*\/?>\s*)*/i
+// A picture opening a heading's text draws through the picture path, so it is sized and fetched there and never sits in a text line.
+function headingPicture(inner, dir) {
+    var parts = HEADING_PICTURE.exec(inner)
+    if (parts === null || (parts[1] === undefined) !== (parts[3] === undefined))
+        return null
+    var block = HtmlImage.rawImage(parts[2], dir)
+    if (block === null)
+        return null
+    if (parts[1] !== undefined && block.type === "image" && HtmlImage.linkOf(parts[1]) !== null)
+        block.link = HtmlImage.linkOf(parts[1])
+    return { block: block, rest: inner.slice(parts[0].length) }
+}