notesy::blocks

Fenced blocks drawn as pictures. A plugin names the languages it draws in [contributes] blocks (plugin.toml), which asks for the markdown permission, and its script draws each block as SVG. In live preview, a block fenced with one of those languages shows as the picture; with the caret in it, as its text.

tomlmain = "main.rn"

[contributes]
blocks = ["bars"]
markdown```bars
Mon: 3
Tue: 5
Wed: 2
```
rustuse notesy::blocks;

pub fn ready() {
    blocks::on("bars", |source, cx| {
        let rows = [];
        for line in source.split("\n") {
            if let Some((label, value)) = line.split_once(":") {
                if let Ok(n) = value.trim().parse::<i64>() {
                    rows.push((label.trim(), n));
                }
            }
        }
        let max = 1;
        for (_, n) in rows { if n > max { max = n; } }
        let svg = `<svg xmlns="http://www.w3.org/2000/svg" width="320" height="${rows.len() * 24}" font-family="sans-serif" font-size="14">`;
        let y = 0;
        for (label, n) in rows {
            let width = 220 * n / max;
            svg += `<text x="0" y="${y + 16}" fill="${cx.colors.text}">${label}</text>`;
            svg += `<rect x="80" y="${y + 4}" width="${width}" height="16" rx="3" fill="${cx.colors.accent}"/>`;
            y += 24;
        }
        svg + "</svg>"
    });
}

#blocks::refresh(lang)

Every lang block is drawn again, though its text hasn't changed: for a picture that shows more than its block says, like the notes a query finds. Call it when what it shows has changed (note.saved, say); each block on screen is asked for again, and the ones off screen when they show.

#blocks::on(lang, draw)

draw(source, context) makes the picture for a block fenced with lang, one of the languages its manifest names: source is the block's text, and it returns SVG text. Returning Err(why), or failing, shows the block as text, and the plugin's log says why.

context is what the block is drawn for:

Field What it is
dark Whether the theme is dark.
scale The editor's text size, relative to the default. Draw at the default size: notesy scales the picture.
colors The theme's colors, as #rrggbb: page (behind it), node (a box's fill), heading, text, line (lines, arrows, quieter text), border, group (a group's fill), note (a note's fill) and accent.

#How it's drawn

  • Never on the window's thread: notesy's diagrams worker asks the plugin's script, which draws on its own thread within the budget for a view. A block the script hasn't drawn within five seconds shows as text.
  • A block is drawn again only when its text, the theme's colors, the text size or the screen's pixel density change, or when the script starts again. Drawn blocks share notesy's texture budget with diagrams.
  • The SVG is read locked down: an <image> in it may be inline data, but never a file on this computer. At most 8 MB of SVG; a picture's longest side is at most 4,096 pixels.
  • An SVG that moves (<animate>, <animateTransform> and <set>, as an icon's can: notesy::icons) is drawn at each of its frames, as many as fit 24 MB (a big picture keeps fewer), and plays as the Motion setting says: briefly as it comes into sight, always, or not at all. At rest, one that plays once (bars growing in) shows how it ends.
  • mermaid and typst are notesy's own, and a plugin can't claim them.

Every page