@memorysmithapp/markdown-renderer 0.3.2 → 0.5.0

package/dist/edit/commands.js

@@ -0,0 +1,257 @@
+/**
+ * What the toolbar and the shortcuts of the editor do to a note (#52, #53, #57, #59).
+ *
+ * Each command is a change to the bytes around the selection and nothing else: a mark is the
+ * delimiters written on either side of what is selected, a heading the `#` at the start of its
+ * line, a list the marker of each line selected. The page the author sees follows from the text,
+ * because the editor draws the text.
+ */
+import { EditorSelection } from '@codemirror/state';
+/** A command from a function of the state, which answers `null` when it does not apply. */
+export function command(spec) {
+    return (view) => {
+        if (view.state.readOnly)
+            return false;
+        const transaction = spec(view.state);
+        if (!transaction)
+            return false;
+        view.dispatch({ scrollIntoView: true, userEvent: 'input.format', ...transaction });
+        view.focus();
+        return true;
+    };
+}
+/**
+ * Writes or takes away a pair of delimiters around each selection: `**` bold, `_` italic, `~~`
+ * struck, `==` marked, `` ` `` code. A selection that the delimiters already wrap, inside it or
+ * just outside it, loses them; an empty one gains the pair with the cursor between.
+ */
+export function toggleMark(state, delimiter) {
+    const size = delimiter.length;
+    return state.changeByRange((range) => {
+        const before = state.sliceDoc(range.from - size, range.from);
+        const after = state.sliceDoc(range.to, range.to + size);
+        if (before === delimiter && after === delimiter) {
+            return {
+                changes: [
+                    { from: range.from - size, to: range.from },
+                    { from: range.to, to: range.to + size },
+                ],
+                range: EditorSelection.range(range.from - size, range.to - size),
+            };
+        }
+        const inside = state.sliceDoc(range.from, range.to);
+        if (inside.length >= size * 2 && inside.startsWith(delimiter) && inside.endsWith(delimiter)) {
+            return {
+                changes: { from: range.from, to: range.to, insert: inside.slice(size, -size) },
+                range: EditorSelection.range(range.from, range.to - size * 2),
+            };
+        }
+        return {
+            changes: [
+                { from: range.from, insert: delimiter },
+                { from: range.to, insert: delimiter },
+            ],
+            range: EditorSelection.range(range.from + size, range.to + size),
+        };
+    });
+}
+/**
+ * Changes to the start of lines, with the selection after what they insert: a cursor between a
+ * line's start and where its marker goes — before a quotation's `>` a list marker follows — is after
+ * the marker, so what is typed next is in it (#82). Any other cursor keeps its place in the text.
+ */
+function atLineStarts(state, changes) {
+    const set = state.changes([...changes]);
+    const selection = EditorSelection.create(state.selection.ranges.map((range) => {
+        if (!range.empty)
+            return range.map(set, 1);
+        const line = state.doc.lineAt(range.head);
+        const change = changes.find((each) => each.from >= line.from && each.from <= line.to && range.head <= each.to);
+        return change ? EditorSelection.cursor(set.mapPos(change.to, 1)) : range.map(set, 1);
+    }), state.selection.mainIndex);
+    return { changes: set, selection };
+}
+/** The lines the selection touches, each once. */
+function selectedLines(state) {
+    const seen = new Set();
+    const lines = [];
+    for (const range of state.selection.ranges) {
+        for (let at = state.doc.lineAt(range.from).number; at <= state.doc.lineAt(range.to).number; at++) {
+            if (seen.has(at))
+                continue;
+            seen.add(at);
+            const line = state.doc.line(at);
+            lines.push({ from: line.from, to: line.to, text: line.text, number: at });
+        }
+    }
+    return lines;
+}
+const QUOTE = /^(?:[ \t]{0,3}>[ \t]?)*/;
+const HEADING = /^#{1,6}(?:[ \t]+|$)/;
+const LIST = /^([ \t]*)(?:([-*+]|\d{1,9}[.)])[ \t]+(\[[ xX]\][ \t]+)?)?/;
+/** Makes each selected line a heading of `level`, or a paragraph at 0; a quotation's markers stay. */
+export function setHeading(state, level) {
+    const changes = selectedLines(state).map((line) => {
+        const quote = QUOTE.exec(line.text)[0];
+        const rest = line.text.slice(quote.length);
+        const marker = HEADING.exec(rest)?.[0] ?? '';
+        return { from: line.from + quote.length, to: line.from + quote.length + marker.length, insert: level > 0 ? `${'#'.repeat(level)} ` : '' };
+    });
+    return atLineStarts(state, changes);
+}
+/** The heading level of the line the cursor is on, or 0. */
+export function headingLevel(state) {
+    const text = state.doc.lineAt(state.selection.main.head).text;
+    const marker = HEADING.exec(text.slice(QUOTE.exec(text)[0].length));
+    return marker ? marker[0].trim().length : 0;
+}
+function listKindOf(text) {
+    const match = LIST.exec(text.slice(QUOTE.exec(text)[0].length));
+    if (!match?.[2])
+        return null;
+    if (match[3])
+        return 'task';
+    return /\d/.test(match[2]) ? 'ordered' : 'bullet';
+}
+/**
+ * Makes each selected line an item of a list of `kind`, renumbering an ordered one from 1; when
+ * every line already is one, they become paragraphs again. Blank lines among them are left alone;
+ * a blank line alone starts a list.
+ */
+export function toggleList(state, kind) {
+    const selected = selectedLines(state);
+    const marker = kind === 'bullet' ? '- ' : kind === 'task' ? '- [ ] ' : '1. ';
+    // On a blank line a list starts: its marker, the cursor after it for the first item (#74).
+    if (selected.every((line) => line.text.trim().length === 0)) {
+        const line = state.doc.lineAt(state.selection.main.head);
+        const quote = QUOTE.exec(line.text)[0];
+        return { changes: { from: line.from + quote.length, to: line.to, insert: marker }, selection: { anchor: line.from + quote.length + marker.length } };
+    }
+    const lines = selected.filter((line) => line.text.trim().length > 0);
+    const remove = lines.length > 0 && lines.every((line) => listKindOf(line.text) === kind);
+    let number = 1;
+    const changes = lines.map((line) => {
+        const quote = QUOTE.exec(line.text)[0];
+        const match = LIST.exec(line.text.slice(quote.length));
+        const from = line.from + quote.length + match[1].length;
+        const to = line.from + quote.length + match[0].length;
+        const marker = remove ? '' : kind === 'bullet' ? '- ' : kind === 'task' ? '- [ ] ' : `${number++}. `;
+        return { from, to, insert: marker };
+    });
+    return atLineStarts(state, changes);
+}
+/** Quotes each selected line, or unquotes them when every one is quoted. */
+export function toggleQuote(state) {
+    const lines = selectedLines(state);
+    const remove = lines.every((line) => /^[ \t]{0,3}>/.test(line.text));
+    const changes = lines.map((line) => {
+        if (!remove)
+            return { from: line.from, to: line.from, insert: '> ' };
+        const marker = /^[ \t]{0,3}>[ \t]?/.exec(line.text)[0];
+        return { from: line.from, to: line.from + marker.length, insert: '' };
+    });
+    return atLineStarts(state, changes);
+}
+/**
+ * Inserts a block on lines of its own: in place of the current line when it is blank, else after
+ * the block the cursor is in, with a blank line on either side. `cursor` is where in the block the
+ * cursor goes, from its start; past its end, the cursor goes to the line after it.
+ */
+export function insertBlock(state, block, cursor) {
+    const line = state.doc.lineAt(state.selection.main.head);
+    // A cursor past the block lands at the start of the line after it, made when there is none.
+    const past = cursor > block.length;
+    if (line.text.trim().length === 0) {
+        const before = line.number > 1 && state.doc.line(line.number - 1).text.trim().length > 0 ? '\n' : '';
+        const next = line.number < state.doc.lines && state.doc.line(line.number + 1).text.trim().length > 0;
+        const last = line.number === state.doc.lines;
+        const insert = `${before}${block}${next || (past && last) ? '\n' : ''}`;
+        const start = line.from + before.length;
+        return { changes: { from: line.from, to: line.to, insert }, selection: { anchor: past ? start + block.length + 1 : start + cursor } };
+    }
+    // After the paragraph the cursor is in: before the blank line that ends it, or at the end of the note.
+    let end = line;
+    while (end.number < state.doc.lines && state.doc.line(end.number + 1).text.trim().length > 0)
+        end = state.doc.line(end.number + 1);
+    const last = end.number === state.doc.lines;
+    const start = end.to + 2;
+    return {
+        changes: { from: end.to, insert: `\n\n${block}${past && last ? '\n' : ''}` },
+        selection: { anchor: past ? start + block.length + 1 : start + cursor },
+    };
+}
+/** A link around the selection, with its address selected to be typed; `[](https://)` with none. */
+export function insertLink(state) {
+    return state.changeByRange((range) => {
+        const label = state.sliceDoc(range.from, range.to);
+        const insert = `[${label}](https://)`;
+        const address = range.from + label.length + 3;
+        return {
+            changes: { from: range.from, to: range.to, insert },
+            range: label.length > 0 ? EditorSelection.range(address, address + 8) : EditorSelection.cursor(range.from + 1),
+        };
+    });
+}
+/** A wikilink around the selection; with none, `[[]]` with the cursor between, where names are suggested. */
+export function insertWikilink(state) {
+    return state.changeByRange((range) => {
+        const name = state.sliceDoc(range.from, range.to);
+        return {
+            changes: { from: range.from, to: range.to, insert: `[[${name}]]` },
+            range: EditorSelection.cursor(range.from + 2 + name.length),
+        };
+    });
+}
+/** A comment around the selection, or an empty one with the cursor inside (§7.6). */
+export function toggleComment(state) {
+    const range = state.selection.main;
+    const inside = state.sliceDoc(range.from, range.to);
+    if (inside.startsWith('%%') && inside.endsWith('%%') && inside.length >= 4) {
+        return { changes: { from: range.from, to: range.to, insert: inside.slice(2, -2) } };
+    }
+    if (range.empty)
+        return { changes: { from: range.from, insert: '%%  %%' }, selection: { anchor: range.from + 3 } };
+    return {
+        changes: [
+            { from: range.from, insert: '%%' },
+            { from: range.to, insert: '%%' },
+        ],
+        selection: { anchor: range.from + 2, head: range.to + 2 },
+    };
+}
+/**
+ * A footnote: its reference at the cursor, numbered after the highest number the note uses, and
+ * its definition at the end of the note, where the cursor goes to write it (§7.12).
+ */
+export function insertFootnote(state) {
+    const text = state.sliceDoc();
+    const used = [...text.matchAll(/\[\^(\d+)\]/g)].map((match) => Number(match[1]));
+    const label = String(Math.max(0, ...used) + 1);
+    const at = state.selection.main.head;
+    const tail = text.endsWith('\n\n') ? '' : text.endsWith('\n') ? '\n' : '\n\n';
+    const definition = `${tail}[^${label}]: `;
+    const reference = `[^${label}]`;
+    return {
+        changes: [
+            { from: at, insert: reference },
+            { from: text.length, insert: definition },
+        ],
+        selection: { anchor: text.length + reference.length + definition.length },
+    };
+}
+/** Flips the task box whose `[` is at `at`, as `toggleTaskAt` does: `[x]` lower case on the way in. */
+export function toggleTaskBox(state, at) {
+    if (state.sliceDoc(at, at + 1) !== '[' || state.sliceDoc(at + 2, at + 3) !== ']')
+        return null;
+    const current = state.sliceDoc(at + 1, at + 2);
+    return { changes: { from: at + 1, to: at + 2, insert: current === ' ' ? 'x' : ' ' } };
+}
+/** The blocks the toolbar inserts, each with where the cursor goes in it. */
+export const BLOCKS = {
+    callout: { text: '> [!note]\n> ', cursor: 12 },
+    table: { text: '|  |  |\n| --- | --- |\n|  |  |', cursor: 2 },
+    codeBlock: { text: '```\n\n```', cursor: 4 },
+    math: { text: '$$\n\n$$', cursor: 3 },
+    diagram: { text: '```mermaid\nflowchart LR\n  A --> B\n```', cursor: 23 },
+    rule: { text: '---', cursor: 4 },
+};

package/dist/edit/frontmatter.d.ts

@@ -0,0 +1,45 @@
+/**
+ * The frontmatter of a note, read as ranges of its bytes, and the edits the properties form makes
+ * to it (#58).
+ *
+ * An edit rewrites the lines of the one entry it names, in the form that entry was written in —
+ * a scalar stays a scalar with its quotes, an inline list stays inline, a dash list keeps its
+ * indent — and leaves every other line of the block as written: the order of the keys, their
+ * quoting, and any line the form does not read, such as a comment.
+ */
+import type { Span } from './analyze.js';
+import type { TextChange } from './table.js';
+export type EntryForm = 'scalar' | 'inline' | 'dash';
+export interface FrontmatterEntry extends Span {
+    readonly key: string;
+    readonly keySpan: Span;
+    readonly form: EntryForm;
+    /** The value written on the key's line, after the colon and its spaces: empty for a dash list. */
+    readonly valueSpan: Span;
+    /** The quote a scalar was written in, which an edit keeps. */
+    readonly quote: '"' | "'" | null;
+    /** The indent of a dash list's items, which a new item copies. */
+    readonly indent: string;
+}
+export interface Frontmatter extends Span {
+    readonly source: string;
+    /** Where a new entry goes: the start of the closing `---` line. */
+    readonly end: number;
+    readonly entries: readonly FrontmatterEntry[];
+}
+/** The frontmatter of a note, or `null` when it has none (§6.1). */
+export declare function readFrontmatter(source: string): Frontmatter | null;
+/** A scalar as YAML reads it back as the same text: quoted when it would otherwise mean something else. */
+export declare function scalarText(value: string, quote?: '"' | "'" | null): string;
+/** Sets an entry to one value, keeping its quote; a list becomes the scalar on the key's line. */
+export declare function setScalar(frontmatter: Frontmatter, key: string, value: string): TextChange[];
+/** Sets an entry to a list, in the form it was written in; a scalar becomes an inline list. */
+export declare function setList(frontmatter: Frontmatter, key: string, items: readonly string[]): TextChange[];
+/** Renames a key, and only the key. */
+export declare function renameKey(frontmatter: Frontmatter, key: string, next: string): TextChange[];
+/** Removes an entry with all its lines. */
+export declare function removeEntry(frontmatter: Frontmatter, key: string): TextChange[];
+/** Adds an entry at the end of the block, before its closing line. */
+export declare function addEntry(frontmatter: Frontmatter, key: string, value: string | readonly string[]): TextChange[];
+/** The frontmatter a note gains when its author adds properties to a note with none. */
+export declare const NEW_FRONTMATTER = "---\n---\n";

package/dist/edit/frontmatter.js

@@ -0,0 +1,142 @@
+/**
+ * The frontmatter of a note, read as ranges of its bytes, and the edits the properties form makes
+ * to it (#58).
+ *
+ * An edit rewrites the lines of the one entry it names, in the form that entry was written in —
+ * a scalar stays a scalar with its quotes, an inline list stays inline, a dash list keeps its
+ * indent — and leaves every other line of the block as written: the order of the keys, their
+ * quoting, and any line the form does not read, such as a comment.
+ */
+const KEY = /^([A-Za-z0-9_-]+)([ \t]*:[ \t]*)(.*)$/;
+const DASH = /^([ \t]+)-[ \t]+/;
+/** The frontmatter of a note, or `null` when it has none (§6.1). */
+export function readFrontmatter(source) {
+    if (!source.startsWith('---\n'))
+        return null;
+    const close = /\n---[ \t]*(?:\n|$)/.exec(source.slice(3));
+    if (!close)
+        return null;
+    const end = 3 + close.index + 1;
+    const entries = [];
+    // The entry the next dash line may belong to; a line the form does not read ends it.
+    let open = null;
+    let at = 4;
+    while (at < end) {
+        const newline = source.indexOf('\n', at);
+        const lineTo = newline === -1 || newline > end ? end : newline;
+        const line = source.slice(at, lineTo);
+        const pair = KEY.exec(line);
+        const dash = DASH.exec(line);
+        if (pair) {
+            const key = pair[1];
+            const valueFrom = at + key.length + pair[2].length;
+            const raw = pair[3].replace(/[ \t]+$/, '');
+            const inline = raw.startsWith('[') && raw.endsWith(']') && !/^\[\[[^\]]+\]\]$/.test(raw);
+            const quote = /^(["'])[\s\S]*\1$/.exec(raw)?.[1];
+            open = {
+                key,
+                from: at,
+                to: lineTo,
+                keySpan: { from: at, to: at + key.length },
+                form: inline ? 'inline' : 'scalar',
+                valueSpan: { from: valueFrom, to: valueFrom + raw.length },
+                quote: quote === '"' || quote === "'" ? quote : null,
+                indent: '  ',
+            };
+            entries.push(open);
+        }
+        else if (open && dash && (open.form === 'dash' || open.valueSpan.from === open.valueSpan.to)) {
+            open.form = 'dash';
+            open.indent = dash[1];
+            open.to = lineTo;
+        }
+        else {
+            open = null;
+        }
+        at = lineTo + 1;
+    }
+    return { source, from: 0, to: end + 3, end, entries };
+}
+/** A scalar as YAML reads it back as the same text: quoted when it would otherwise mean something else. */
+export function scalarText(value, quote = null) {
+    const single = value.replace(/\r?\n/g, ' ');
+    if (quote === "'")
+        return `'${single.replace(/'/g, "''")}'`;
+    if (quote === '"' || needsQuotes(single))
+        return `"${single.replace(/\\/g, '\\\\').replace(/"/g, '\\"')}"`;
+    return single;
+}
+function needsQuotes(value) {
+    if (value.length === 0)
+        return false;
+    if (/^\[\[[^\]]+\]\]$/.test(value))
+        return true;
+    return /^[\s\-?:,[\]{}#&*!|>'"%@`]|\s$|: | #|:$/.test(value);
+}
+function itemText(value) {
+    const single = value.replace(/\r?\n/g, ' ').trim();
+    return /[,[\]{}#&*!|>'"%@`]|: /.test(single) || /^[\s-?:]/.test(single)
+        ? `"${single.replace(/\\/g, '\\\\').replace(/"/g, '\\"')}"`
+        : single;
+}
+function entryOf(frontmatter, key) {
+    return frontmatter.entries.find((entry) => entry.key === key);
+}
+/** Sets an entry to one value, keeping its quote; a list becomes the scalar on the key's line. */
+export function setScalar(frontmatter, key, value) {
+    const entry = entryOf(frontmatter, key);
+    if (!entry)
+        return addEntry(frontmatter, key, value);
+    const insert = scalarText(value, entry.quote);
+    if (entry.form === 'scalar') {
+        const written = frontmatter.source.slice(entry.valueSpan.from, entry.valueSpan.to);
+        if (written === insert)
+            return [];
+        // `key:` with nothing after it gains the space a value is written after.
+        const spaced = entry.valueSpan.from === entry.keySpan.to + 1 && insert.length > 0 ? ` ${insert}` : insert;
+        return [{ from: entry.valueSpan.from, to: entry.valueSpan.to, insert: spaced }];
+    }
+    return [{ from: entry.keySpan.to, to: entry.to, insert: `: ${insert}` }];
+}
+/** Sets an entry to a list, in the form it was written in; a scalar becomes an inline list. */
+export function setList(frontmatter, key, items) {
+    const entry = entryOf(frontmatter, key);
+    const inline = `[${items.map(itemText).join(', ')}]`;
+    if (!entry)
+        return addEntry(frontmatter, key, items);
+    if (entry.form === 'dash' && items.length > 0) {
+        const lines = items.map((item) => `\n${entry.indent}- ${itemText(item)}`).join('');
+        const written = frontmatter.source.slice(entry.keySpan.to, entry.to);
+        const keyLine = frontmatter.source.slice(entry.keySpan.to, frontmatter.source.indexOf('\n', entry.keySpan.to));
+        const insert = `${keyLine}${lines}`;
+        return written === insert ? [] : [{ from: entry.keySpan.to, to: entry.to, insert }];
+    }
+    if (entry.form === 'inline' || entry.form === 'scalar') {
+        if (frontmatter.source.slice(entry.valueSpan.from, entry.valueSpan.to) === inline)
+            return [];
+        const spaced = entry.valueSpan.from === entry.keySpan.to + 1 ? ` ${inline}` : inline;
+        return [{ from: entry.valueSpan.from, to: entry.valueSpan.to, insert: spaced }];
+    }
+    return [{ from: entry.keySpan.to, to: entry.to, insert: `: ${inline}` }];
+}
+/** Renames a key, and only the key. */
+export function renameKey(frontmatter, key, next) {
+    const entry = entryOf(frontmatter, key);
+    if (!entry || !/^[A-Za-z0-9_-]+$/.test(next) || next === key || entryOf(frontmatter, next))
+        return [];
+    return [{ from: entry.keySpan.from, to: entry.keySpan.to, insert: next }];
+}
+/** Removes an entry with all its lines. */
+export function removeEntry(frontmatter, key) {
+    const entry = entryOf(frontmatter, key);
+    return entry ? [{ from: entry.from, to: entry.to + 1, insert: '' }] : [];
+}
+/** Adds an entry at the end of the block, before its closing line. */
+export function addEntry(frontmatter, key, value) {
+    if (!/^[A-Za-z0-9_-]+$/.test(key) || entryOf(frontmatter, key))
+        return [];
+    const written = typeof value === 'string' ? scalarText(value) : `[${value.map(itemText).join(', ')}]`;
+    return [{ from: frontmatter.end, to: frontmatter.end, insert: `${key}:${written.length > 0 ? ` ${written}` : ''}\n` }];
+}
+/** The frontmatter a note gains when its author adds properties to a note with none. */
+export const NEW_FRONTMATTER = '---\n---\n';

package/dist/edit/index.d.ts

@@ -0,0 +1,5 @@
+export { lineBreakOf, NoteEditor, type NoteEditorProps } from './NoteEditor.js';
+export { analyze, frontmatterSpan, type Analysis, type Construct, type Span } from './analyze.js';
+export { readTable, type Alignment, type Table, type TextChange } from './table.js';
+export { readFrontmatter, type Frontmatter, type FrontmatterEntry } from './frontmatter.js';
+export { isSaveNotice, type SaveAction, type SaveNotice, type SaveOutcome, type SaveRefusal } from './saves.js';

package/dist/edit/index.js

@@ -0,0 +1,7 @@
+// The editor of @memorysmithapp/markdown-renderer, on its own subpath: a host that only draws
+// never loads CodeMirror (ADR-006).
+export { lineBreakOf, NoteEditor } from './NoteEditor.js';
+export { analyze, frontmatterSpan } from './analyze.js';
+export { readTable } from './table.js';
+export { readFrontmatter } from './frontmatter.js';
+export { isSaveNotice } from './saves.js';

package/dist/edit/live.d.ts

@@ -0,0 +1,28 @@
+/**
+ * The page the editor draws over the note's text (ADR-006).
+ *
+ * The text is the model, and nothing here changes it: each construct the analysis finds is drawn
+ * by decorations — its notation hidden and its content styled while the cursor is elsewhere, its
+ * notation shown, dimmed, while the cursor is in it; a block drawn by the reading surface's own
+ * components in place of its lines until the cursor enters it, and then its lines as source.
+ */
+import { Facet, StateField, type EditorState, type Extension } from '@codemirror/state';
+import { type DecorationSet } from '@codemirror/view';
+import { type ResolvedHost } from '../host.js';
+import { type Analysis } from './analyze.js';
+/** What the drawn blocks read: the host the note is edited under. */
+export interface EditorEnvironment {
+    readonly host: ResolvedHost;
+}
+export declare const editorEnvironment: Facet<EditorEnvironment, EditorEnvironment>;
+/** The note's text with `\n` between lines, whose offsets are the editor's positions. */
+export declare function textOf(state: EditorState): string;
+/** The analysis of the note, kept with the state and made again when the text changes. */
+export declare const analysisField: StateField<Analysis>;
+/** Says the editor took or lost the focus. */
+export declare const setFocused: import("@codemirror/state").StateEffectType<boolean>;
+/** A grammar a code block names has arrived: its tokens can be coloured now (#84). */
+export declare const grammarArrived: import("@codemirror/state").StateEffectType<string>;
+export declare const decorationsField: StateField<DecorationSet>;
+/** The live page: the analysis, the decorations over it, and what the focus and a modifier-click do. */
+export declare function livePage(): Extension;