flea-qml 0.0.0-stage → 0.2.0

package/ui/MarkdownFigure.qml

@@ -0,0 +1,254 @@
+import QtQuick
+
+// One rendered figure: the backend's SVG (src/figure.js) at its aspect ratio within the pane width, or fenced source when rendering fails.
+import "js/FigureDate.js" as FigureDate
+
+Item {
+    id: root
+
+    property string kind: "math"
+    property string source: ""
+    property bool display: true
+    property bool inline: false
+    // A bare figure asks and settles but draws nothing: its host puts the SVG in its own text.
+    property bool bare: false
+    property string bgHex: Theme.color.background
+    property string fgHex: Theme.color.foreground
+    property string accentHex: Theme.color.accent
+    property string mutedHex: ""
+    property string surfaceHex: ""
+    // The failed figure's fence sits on the code surface of the pane that holds it.
+    property color fallbackColor: Theme.color.surface
+    property string fontFamily: Theme.font.family
+    property int bodyPx: Theme.font.body
+    // The body font's x-height at bodyPx: a formula draws its ex at this height, so maths and prose letters stand level.
+    property real xHeight: regularMetrics.xHeight
+    // The request carries the x-height in hundredths of a pixel, so a font that settles late changes the request.
+    readonly property int xHeightRounding: 100
+
+    // A diagram sizes each label from the font's advance of every printable ASCII character, regular and bold; maths sends none.
+    readonly property int advanceFirst: 32
+    readonly property int advanceLast: 126
+    // The request carries the advances in thousandths of an em, so a font that settles late changes the request.
+    readonly property int advanceRounding: 1000
+    // The advance of each character from the first to the last, read through the metrics' own font so a font change re-runs the table.
+    function advanceTable(metrics) {
+        var table = [];
+        var px = metrics.font.pixelSize;
+        for (var code = root.advanceFirst; code <= root.advanceLast; code++)
+            table.push(Math.round(metrics.advanceWidth(String.fromCharCode(code)) / px * root.advanceRounding));
+        return table;
+    }
+    readonly property var advances: root.kind !== "mermaid" ? [] : root.advanceTable(regularMetrics)
+    readonly property var boldAdvances: root.kind !== "mermaid" ? [] : root.advanceTable(boldMetrics)
+    FontMetrics {
+        id: regularMetrics
+        font.family: root.fontFamily
+        font.pixelSize: root.bodyPx
+    }
+    FontMetrics {
+        id: boldMetrics
+        font.family: root.fontFamily
+        font.pixelSize: root.bodyPx
+        font.bold: true
+    }
+
+    readonly property bool failed: root.kind === "math" || root.error !== ""
+    readonly property bool ready: root.svg !== ""
+    readonly property bool working: root.ticket > 0
+    property string svg: ""
+    property string error: ""
+    property int ticket: 0
+    // The Source view sends no figure requests.
+    property bool askArmed: true
+    // Offscreen delegates retain settled figures and send no requests.
+    property bool inView: true
+
+    // The theme an ask carries, given the label advances its kind sends; the preview's warm query builds the same one, so its cache keys match.
+    function themeWith(advances, boldAdvances) {
+        return { bg: root.bgHex, fg: root.fgHex, accent: root.accentHex,
+            font: root.fontFamily, bodyPx: root.bodyPx,
+            exPx: Math.round(root.xHeight * root.xHeightRounding) / root.xHeightRounding,
+            advances: advances, boldAdvances: boldAdvances,
+            muted: root.mutedHex, surface: root.surfaceHex };
+    }
+    function hexTheme() {
+        return root.themeWith(root.advances, root.boldAdvances);
+    }
+    // The theme a figure of `kind` is asked under here, whatever this item's own kind.
+    function themeOfKind(kind) {
+        return kind === "mermaid" ? root.themeWith(root.advanceTable(regularMetrics), root.advanceTable(boldMetrics)) : root.themeWith([], []);
+    }
+    // Nothing is asked until the figure is created, so its construction-time assignments cost no request.
+    property bool created: false
+    // The request this figure last sent; an ask for the same state is dropped, so a burst of changes renders once.
+    property string lastRequest: ""
+    function ask() {
+        if (root.kind === "math") return;
+        root.askRuns++;
+        // Offscreen property changes invalidate the settled figure until it enters the viewport.
+        if (root.kind === "math" || !root.askArmed || root.source === "" || !root.inView) {
+            root.ticket = 0;
+            root.svg = "";
+            root.error = "";
+            root.lastRequest = "";
+            return;
+        }
+        // A Gantt chart is asked for today, so its key, its stored entry and its drawing name one day.
+        var theme = FigureDate.datedTheme(root.kind, root.source, root.hexTheme());
+        var request = JSON.stringify([root.kind, root.source, root.display, theme]);
+        if (request === root.lastRequest)
+            return;
+        root.lastRequest = request;
+        root.ticket = FigureService.ask(root.kind, root.source, root.display, theme);
+    }
+    // The wait, in ms, that lets the list lay the delegate out before the one ask reads its place.
+    readonly property int askSettleMs: 50
+    // The suite counts ask runs and reads the armed deferred ask, so it waits and asserts without timing.
+    property int askRuns: 0
+    readonly property bool askPending: askTimer.running
+    // Every property change lands on the one deferred ask, so the changes of one burst send one request.
+    function schedule() {
+        if (root.created && !root.takeRemembered())
+            askTimer.restart();
+    }
+
+    onKindChanged: root.schedule()
+    onSourceChanged: root.schedule()
+    onDisplayChanged: root.schedule()
+    onBgHexChanged: root.schedule()
+    onFgHexChanged: root.schedule()
+    onAccentHexChanged: root.schedule()
+    onMutedHexChanged: root.schedule()
+    onSurfaceHexChanged: root.schedule()
+    onFontFamilyChanged: root.schedule()
+    onBodyPxChanged: root.schedule()
+    onXHeightChanged: root.schedule()
+    onAdvancesChanged: root.schedule()
+    onBoldAdvancesChanged: root.schedule()
+    onAskArmedChanged: root.schedule()
+    // Entering the viewport requests an unsettled figure after layout.
+    onInViewChanged: if (root.created && root.inView && root.askArmed && root.source !== "" && root.ticket === 0 && root.svg === "" && root.error === "") root.ask()
+    // The service's held answer for this exact request, taken on the change itself, so a formula typeset ahead is drawn in the first frame.
+    function takeRemembered() {
+        if (root.kind === "math" || !root.askArmed || root.source === "" || !root.inView)
+            return false;
+        var theme = FigureDate.datedTheme(root.kind, root.source, root.hexTheme());
+        var hit = FigureService.cached(root.kind, root.source, theme, root.display);
+        if (hit === undefined)
+            return false;
+        // A held answer drops any older request, so nothing in flight lands over it.
+        root.ticket = 0;
+        askTimer.stop();
+        root.lastRequest = JSON.stringify([root.kind, root.source, root.display, theme]);
+        root.svg = hit;
+        root.error = "";
+        return true;
+    }
+    Component.onCompleted: {
+        root.created = true;
+        root.schedule();
+    }
+
+    // ListView places the delegate after it completes, so the one ask waits out layout and inView reads the placed position.
+    Timer {
+        id: askTimer
+        interval: root.askSettleMs
+        onTriggered: root.ask()
+    }
+
+    Connections {
+        target: FigureService
+        function onDone(ticket, svg, error) {
+            if (ticket !== root.ticket)
+                return;
+            root.ticket = 0;
+            if (svg !== "") {
+                root.svg = svg;
+                root.error = "";
+            } else {
+                root.svg = "";
+                root.error = error;
+            }
+        }
+    }
+
+    // Data URLs deliver figures to Qt SVG without filesystem writes.
+    readonly property string dataUrl: root.svg === "" ? ""
+        : "data:image/svg+xml," + encodeURIComponent(root.svg)
+
+    Image {
+        id: figure
+        visible: !root.inline && root.svg !== ""
+        anchors.top: parent.top
+        anchors.left: root.centred ? undefined : parent.left
+        anchors.horizontalCenter: root.centred ? parent.horizontalCenter : undefined
+        // A display figure alone decodes here; an inline one draws through inlineFigure below or in its host's own text.
+        source: root.inline ? "" : root.dataUrl
+        cache: false
+        asynchronous: true
+        width: root.fitWidth
+        height: root.fitHeight
+        fillMode: Image.PreserveAspectFit
+    }
+
+    // An inline formula beside text: line height tall, aspect kept.
+    Image {
+        id: inlineFigure
+        visible: root.inline && root.svg !== ""
+        anchors.top: parent.top
+        source: root.inline && !root.bare ? root.dataUrl : ""
+        cache: false
+        asynchronous: true
+        height: root.bodyPx
+        width: root.inlineWidth
+        fillMode: Image.PreserveAspectFit
+    }
+
+    // A failed figure draws bounded source on the code surface.
+    readonly property int fallbackChars: 2000
+    readonly property string fallbackBody: root.source.length > root.fallbackChars
+        ? root.source.slice(0, root.fallbackChars) + "… (" + (root.source.length - root.fallbackChars) + " more)"
+        : root.source
+    // The fence recipe, so fallback text sits where a fenced block does: the host hands down the preview's own fencePadX and fencePadY.
+    property int fencePadX: 0
+    property int fencePadY: 0
+    Rectangle {
+        id: fallback
+        visible: root.failed
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.right: parent.right
+        height: fallbackItem.implicitHeight + 2 * root.fencePadY
+        color: root.fallbackColor
+        Text {
+            id: fallbackItem
+            anchors.fill: parent
+            anchors.leftMargin: root.fencePadX
+            anchors.rightMargin: root.fencePadX
+            anchors.topMargin: root.fencePadY
+            anchors.bottomMargin: root.fencePadY
+            text: root.failed ? root.fallbackBody : ""
+            textFormat: Text.PlainText
+            wrapMode: Text.Wrap
+            color: Theme.color.foreground
+            font.family: root.fontFamily
+            font.pixelSize: root.bodyPx
+        }
+    }
+
+    readonly property bool centred: root.kind === "math" && root.display && !root.inline
+    readonly property real naturalWidth: !root.inline && figure.implicitWidth > 0 ? figure.implicitWidth : 0
+    readonly property real naturalHeight: !root.inline && figure.implicitHeight > 0 ? figure.implicitHeight : 0
+    // Integer geometry keeps the raster 1:1: a fractional item size would resample the whole figure and blend every flat fill.
+    readonly property real fitWidth: root.naturalWidth <= 0 ? 0 : Math.round(Math.min(root.naturalWidth, root.width))
+    readonly property real fitHeight: root.naturalWidth <= 0 ? 0 : Math.round(root.naturalHeight * (root.fitWidth / root.naturalWidth))
+    readonly property real inlineWidth: root.inline && inlineFigure.implicitHeight > 0
+        ? Math.round(inlineFigure.implicitWidth * (root.bodyPx / inlineFigure.implicitHeight)) : 0
+
+    implicitWidth: root.inline ? (root.failed ? fallbackItem.implicitWidth + 2 * root.fencePadX : root.inlineWidth) : root.width
+    // A failed inline still draws its fence, so it sizes to the fence rather than the line it never became.
+    implicitHeight: root.inline ? (root.failed ? fallback.height : root.bodyPx)
+        : root.failed ? fallback.height : root.fitHeight
+    height: root.implicitHeight
+}

package/ui/MarkdownImages.qml

@@ -0,0 +1,72 @@
+import QtQuick
+import "js/MdHtmlImage.js" as HtmlImage
+
+// A row of local images from one HTML block, wrapped at the pane width with each line centred or left, every image keeping its own link.
+Item {
+    id: root
+
+    // Each image as the parser hands it: { url, alt, width and height (optional), link (optional) }.
+    property var images: []
+    property bool centred: false
+    // The space between neighbours on a line and between lines.
+    property int gap: 0
+    // The pane's scheme gate for a link around an image, as MarkdownText takes one.
+    property var linkGate: null
+
+    // One { x, y } per image and the total height, read from the sizes the images report as they decode.
+    readonly property var arrangement: root.arrange(strip.count, root.width)
+    height: root.arrangement.height
+
+    // Sample input: three images 40, 40 and 90 wide on a 100 wide pane with gap 4 make two lines, the first 84 wide and the third alone.
+    function arrange(count, limit) {
+        var places = []
+        var y = 0
+        var from = 0
+        while (from < count) {
+            var to = from
+            var used = 0
+            var tall = 0
+            while (to < count) {
+                var pic = strip.itemAt(to)
+                var w = pic ? pic.width : 0
+                if (to > from && used + root.gap + w > limit)
+                    break
+                used += (to > from ? root.gap : 0) + w
+                tall = Math.max(tall, pic ? pic.height : 0)
+                to++
+            }
+            var x = root.centred ? Math.round((limit - used) / 2) : 0
+            for (var k = from; k < to; k++) {
+                var one = strip.itemAt(k)
+                places.push({ x: x, y: y + tall - (one ? one.height : 0) })
+                x += (one ? one.width : 0) + root.gap
+            }
+            y += tall + root.gap
+            from = to
+        }
+        return { places: places, height: Math.max(0, y - root.gap) }
+    }
+
+    Repeater {
+        id: strip
+        model: root.images.length
+        delegate: Image {
+            id: pic
+            readonly property var spec: root.images[index]
+            // The size rule of a lone picture too (HtmlImage.pictureSize): the HTML width and height are honoured, the pane width caps it.
+            readonly property var fit: HtmlImage.pictureSize(pic.spec, pic.implicitWidth, pic.implicitHeight, root.width)
+            width: pic.fit.w
+            height: pic.fit.h
+            x: index < root.arrangement.places.length ? root.arrangement.places[index].x : 0
+            y: index < root.arrangement.places.length ? root.arrangement.places[index].y : 0
+            fillMode: pic.fit.stretch ? Image.Stretch : Image.PreserveAspectFit
+            asynchronous: true
+            autoTransform: true
+            source: pic.spec.url
+
+            // A badge wrapped in a link opens it through the pane's link gate.
+            TapHandler { enabled: pic.spec.link !== undefined; gesturePolicy: TapHandler.ReleaseWithinBounds; onTapped: if (root.linkGate !== null && root.linkGate(pic.spec.link)) Qt.openUrlExternally(pic.spec.link) }
+            HoverHandler { enabled: pic.spec.link !== undefined; cursorShape: Qt.PointingHandCursor }
+        }
+    }
+}

package/ui/MarkdownList.qml

@@ -0,0 +1,81 @@
+import QtQuick
+import "js/MarkdownLists.js" as Lists
+
+// One list block drawn with plain Column and Row, keeping QtQuick.Layouts unloaded: each depth's marker column starts at its parent's text column.
+Column {
+    id: root
+
+    // The parsed list: items, and when nested or loose their depths, markers and gaps.
+    property var list: ({ items: [] })
+    property int bodyPx: Theme.font.body
+    // The paragraph gap a loose list puts between its entries.
+    property int gap: 0
+    property var linkGate: null
+    // The preview that sets the sizes of the blocks an item holds, and whether this list is in view for figures.
+    property Item preview: null
+    property bool inView: true
+
+    spacing: 0
+
+    // Each entry's marker column, marker and gap above it; reading the font's size and family re-lays it out when either changes.
+    readonly property var cells: {
+        listFont.font.pixelSize
+        listFont.font.family
+        return Lists.layout(root.list, function (text) { return listFont.advanceWidth(text) }, Theme.spacing.gap)
+    }
+
+    FontMetrics {
+        id: listFont
+        font.family: Theme.font.family
+        font.pixelSize: root.bodyPx
+    }
+
+    Repeater {
+        model: root.list.items.length
+        delegate: Row {
+            objectName: "listRow"
+            readonly property var cell: root.cells[index]
+            x: cell.x
+            width: root.width - cell.x
+            topPadding: cell.gap ? root.gap : 0
+            spacing: Theme.spacing.gap
+
+            MarkdownText {
+                id: marker
+                width: cell.w
+                bodyPx: root.bodyPx
+                text: cell.marker
+                // The marker shares the item's line box and first-line leading.
+                textFormat: Text.RichText
+                height: marker.box
+                wrapMode: Text.NoWrap
+                // The marker sits on the item's first drawn baseline, 0 for an ungrown line and for a first block with no run text.
+                y: itemParts.active ? (itemParts.item !== null && itemParts.item.firstRunText !== null ? itemParts.item.firstRunText.drawnBaseline - marker.drawnBaseline : 0) : itemText.drawnBaseline - marker.drawnBaseline
+            }
+
+            MarkdownText {
+                id: itemText
+                visible: !itemParts.active
+                linkGate: root.linkGate
+                width: parent.width - marker.width - parent.spacing
+                bodyPx: root.bodyPx
+                markdown: root.list.items[index]
+            }
+
+            // An item that holds more than prose draws its blocks in order; they load by file name since MarkdownBlocks draws lists again.
+            Loader {
+                id: itemParts
+                readonly property var parts: root.list.parts !== undefined && root.list.parts[index] ? root.list.parts[index] : []
+                active: itemParts.parts.length > 0
+                width: parent.width - marker.width - parent.spacing
+                source: itemParts.parts.length > 0 ? "MarkdownBlocks.qml" : ""
+                onLoaded: {
+                    // The preview and the view state come first: the blocks build their delegates the moment they arrive.
+                    itemParts.item.preview = Qt.binding(function () { return root.preview })
+                    itemParts.item.inView = Qt.binding(function () { return root.inView })
+                    itemParts.item.blocks = Qt.binding(function () { return itemParts.parts })
+                }
+            }
+        }
+    }
+}

package/ui/MarkdownMathsText.qml

@@ -0,0 +1,97 @@
+import QtQuick
+import "js/MarkdownMaths.js" as Maths
+
+// A Markdown text whose inline formulas draw in the line: each asks the figure helper once, and its code span stands until the picture lands.
+MarkdownText {
+    id: root
+
+    // The run's HTML text, and the TeX of its inline formulas in the order of the data-math spans inside it.
+    property string source: ""
+    property var maths: []
+    // The theme and gates a figure takes, handed down by the block's host as the display figures get them.
+    property bool askArmed: true
+    property bool inView: true
+    property string bgHex: Theme.color.background
+    property string fgHex: Theme.color.foreground
+    property string accentHex: Theme.color.accent
+    property string mutedHex: ""
+    property string surfaceHex: ""
+    // The fence pads a failed formula's source takes, the preview's own.
+    property int fencePadX: 0
+    property int fencePadY: 0
+
+    // A formula the parser and the text disagree on is left as its code span, and asks for nothing.
+    readonly property bool matched: Maths.spans(root.source).length === root.maths.length
+    // Each distinct formula asks once, however often the run repeats it.
+    readonly property var formulas: {
+        var seen = []
+        for (var i = 0; root.matched && i < root.maths.length; i++) {
+            if (seen.indexOf(root.maths[i]) < 0)
+                seen.push(root.maths[i])
+        }
+        return seen
+    }
+    // The SVG of each drawn formula by its TeX, "" while it waits or after it failed.
+    property var svgs: ({})
+    property var settledSources: ({})
+    // Formulas still waiting for their answer; the suite reads it to know the run is done.
+    readonly property int unsettled: root.formulas.length - Object.keys(root.settledSources).length
+
+    // Qt centres a middle-aligned picture above the baseline by a font-dependent amount; a hidden tall picture reports it as its baseline.
+    readonly property real anchorHeight: calibration.baselineOffset - Maths.CALIBRATION_HEIGHT / 2
+    readonly property real tallestPicture: 2 * root.box
+
+    function landed(tex, svg, settled) {
+        var next = Object.assign({}, root.svgs)
+        next[tex] = svg
+        root.svgs = next
+        var done = Object.assign({}, root.settledSources)
+        if (settled)
+            done[tex] = true
+        else
+            delete done[tex]
+        root.settledSources = done
+    }
+
+    text: root.matched ? root.padSized(Maths.compose(root.source, root.maths.map(function (tex) {
+        return Maths.picture(root.svgs[tex] || "", root.anchorHeight, root.tallestPicture)
+    }))) : root.padSized(root.source)
+
+    Text {
+        id: calibration
+        visible: false
+        font: root.font
+        textFormat: Text.MarkdownText
+        wrapMode: Text.NoWrap
+        text: "H <img src=\"" + Maths.CLEAR + "\" width=\"1\" height=\"" + Maths.CALIBRATION_HEIGHT + "\" style=\"vertical-align: middle\" />"
+    }
+
+    Repeater {
+        model: root.formulas
+        delegate: MarkdownFigure {
+            required property string modelData
+            visible: false
+            kind: "math"
+            source: modelData
+            display: false
+            inline: true
+            bare: true
+            askArmed: root.askArmed
+            inView: root.inView
+            bgHex: root.bgHex
+            fgHex: root.fgHex
+            accentHex: root.accentHex
+            mutedHex: root.mutedHex
+            surfaceHex: root.surfaceHex
+            fencePadX: root.fencePadX
+            fencePadY: root.fencePadY
+            fontFamily: root.font.family
+            bodyPx: root.font.pixelSize
+            onSvgChanged: root.landed(modelData, svg, svg !== "" || error !== "")
+            onErrorChanged: root.landed(modelData, svg, svg !== "" || error !== "")
+        }
+    }
+
+    // Its formulas are padded to sit on the fixed line's baseline, so a picture beside them keeps that line.
+    growsForPictures: false
+}

package/ui/MarkdownPane.qml

@@ -0,0 +1,83 @@
+import QtQuick
+import "." as Flea
+import "js/Icons.js" as Icons
+
+// The Markdown bar and pane load only for a Markdown file.
+Item {
+    id: root
+
+    property bool active: false
+    // flea-qml: the row's icon; an emoji one marks the bar instead of the Markdown glyph.
+    property string iconName: ""
+    property string path: ""
+    property int size: 0
+    property string view: "rendered"
+    property int maxBytes: 1048576
+    property bool truncate: false
+    property string blockPath: ""
+    // The backend that colours Source and the fences, and the wrap Quick Look's w keeps for Source.
+    property var backend: null
+    property bool wrap: false
+
+    // The keyboard is on the close mark; Quick Look's key handler owns the walk, as the PDF viewer's controls do.
+    property bool closeFocused: false
+
+    signal closeRequested
+
+    readonly property var viewport: doc.shownView === "source" ? doc.sourceItem : doc.viewport
+    readonly property var bodyItem: doc.bodyItem
+    readonly property var tableWheel: doc.tableWheel
+    function tableScroller() { return doc.tableScroller() }
+    readonly property real scrollY: doc.scrollY
+    function endGap() { return doc.endGap() }
+    function closeState() { return bar.closeState() }
+    readonly property string rawText: doc.rawText
+    readonly property string status: doc.status
+    readonly property string lineLabel: doc.lineLabel
+    // The view the body draws, which Quick Look's IPC reads rather than the property that asks for it.
+    readonly property string shownView: doc.shownView
+    // Quick Look's seam reads figures through this pane, so it forwards the document's blocks.
+    readonly property var blockList: doc.blockList
+    function figureInfo(i) { return doc.figureInfo(i) }
+    function blockItem(i) { return doc.blockItem(i) }
+    readonly property bool contentReady: doc.contentReady
+    readonly property bool firstScreen: doc.firstScreen
+
+    // The render suite reads the bar's order off these rects; the pane adds what only it knows.
+    function barGeometry() {
+        var g = bar.geometry()
+        g.ready = root.contentReady
+        return g
+    }
+
+    Flea.QuickLookBar {
+        id: bar
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.right: parent.right
+        markName: Icons.isEmoji(root.iconName) ? root.iconName : "markdown"
+        name: root.path.substring(root.path.lastIndexOf("/") + 1)
+        countLabel: root.contentReady ? root.lineLabel : ""
+        closeFocused: root.closeFocused
+        onCloseRequested: root.closeRequested()
+    }
+
+    Flea.PreviewMarkdown {
+        id: doc
+        anchors.fill: parent
+        anchors.topMargin: bar.height
+        active: root.active
+        view: root.view
+        path: root.path
+        size: root.size
+        maxBytes: root.maxBytes
+        truncate: root.truncate
+        blockPath: root.blockPath
+        backend: root.backend
+        slot: "look"
+        wrap: root.wrap
+        shareParse: true
+        // The page is the chrome surface, so code sits on the window colour (md_rendered code_bg).
+        codeSurface: Theme.color.background
+    }
+}

package/ui/MarkdownPictures.qml

@@ -0,0 +1,41 @@
+// Bound: the hidden images read this helper's root to note their sizes, and only its own Repeater builds them.
+pragma ComponentBehavior: Bound
+import QtQuick
+import "js/MarkdownPictures.js" as Pictures
+
+// The pictures one Markdown text holds: their natural sizes from hidden images, and the text with the wide ones scaled to its width; ui/MarkdownText.qml builds it for a text with a picture only.
+Item {
+    id: root
+
+    required property MarkdownText host
+
+    readonly property var urls: Pictures.urls(root.host.markdown)
+    // Each decoded picture's natural size by address, kept after the hidden Image releases its own copy.
+    property var known: ({})
+    // One address is noted once; replacing the map notifies fitted below, which a mutated key never does.
+    function noteSize(url, w, h) {
+        if (root.known[url] !== undefined)
+            return
+        var next = {}
+        for (var key in root.known)
+            next[key] = root.known[key]
+        next[url] = { w: w, h: h }
+        root.known = next
+    }
+    readonly property var fitted: Pictures.fit(root.host.markdown, root.known, Math.floor(root.host.width - root.host.leftPadding - root.host.rightPadding))
+    // The text to draw, and the tallest picture in it as it draws, 0 until one is decoded.
+    readonly property string shown: root.fitted.text
+    readonly property real tallest: root.fitted.tallest
+
+    Repeater {
+        model: root.urls
+        delegate: Image {
+            required property string modelData
+            visible: false
+            asynchronous: true
+            // An address loads only until its size is known, so no decoded copy outlives the note.
+            source: root.known[modelData] === undefined ? modelData : ""
+            onStatusChanged: if (status === Image.Ready && implicitWidth > 0) root.noteSize(modelData, implicitWidth, implicitHeight)
+        }
+    }
+}

package/ui/MarkdownQuote.qml

@@ -0,0 +1,52 @@
+import QtQuick
+
+// One quote block: a 2 px bar per level, each a bar-plus-gap step right of its parent's, then the text or the blocks the quote holds.
+Row {
+    id: root
+
+    property int levels: 1
+    property string text: ""
+    // The quote's blocks when it holds more than prose, drawn in order in place of the text; the preview sets their sizes.
+    property var parts: []
+    property Item preview: null
+    property bool inView: true
+    property int bodyPx: Theme.font.body
+    property var linkGate: null
+    readonly property int barWidth: 2
+    // The width the text or the blocks take beside the bars.
+    readonly property real contentWidth: root.width - root.levels * (root.barWidth + root.spacing)
+
+    spacing: Theme.spacing.gap
+
+    Repeater {
+        model: root.levels
+        delegate: Rectangle {
+            width: root.barWidth
+            height: root.parts.length > 0 ? held.height : quoteText.implicitHeight
+            color: Theme.color.mutedFrame
+        }
+    }
+
+    MarkdownText {
+        id: quoteText
+        visible: root.parts.length === 0
+        linkGate: root.linkGate
+        width: root.contentWidth
+        bodyPx: root.bodyPx
+        markdown: root.text
+    }
+
+    // The blocks load by file name: MarkdownBlocks draws quotes and lists again, and a type reference would close the cycle.
+    Loader {
+        id: held
+        active: root.parts.length > 0
+        width: root.contentWidth
+        source: root.parts.length > 0 ? "MarkdownBlocks.qml" : ""
+        onLoaded: {
+            // The preview and the view state come first: the blocks build their delegates the moment they arrive.
+            held.item.preview = Qt.binding(function () { return root.preview })
+            held.item.inView = Qt.binding(function () { return root.inView })
+            held.item.blocks = Qt.binding(function () { return root.parts })
+        }
+    }
+}