@memorysmithapp/markdown-renderer 0.3.2 → 0.5.0

package/dist/edit/analyze.d.ts

@@ -0,0 +1,150 @@
+/**
+ * Where each construct of a note sits in its bytes, for the editor to draw (ADR-006).
+ *
+ * The editor's model is the note's text, and the page is drawn over it: every construct the
+ * reading surface draws is found here as ranges of that text — what it covers, which characters
+ * are its notation and which are its content — so the editor can hide the notation, style the
+ * content, or draw a block in place, and never rewrite a byte it did not touch.
+ *
+ * The text is read by the reading surface's own parser (`remark-parse` with GFM and math, at the
+ * options of `readingPlugins`), and the notation that parser leaves as text — callouts, wikilinks,
+ * marked text, comments, block identifiers — by the same patterns the reading surface uses. No
+ * React and no DOM: the analysis is a pure function of the text, and tested as one.
+ */
+/** A range of the text: `from` included, `to` excluded. */
+export interface Span {
+    readonly from: number;
+    readonly to: number;
+}
+export type InlineMark = 'em' | 'strong' | 'strike' | 'highlight' | 'code';
+/** A construct of the note, found in its text. */
+export type Construct = {
+    readonly kind: 'frontmatter';
+    readonly from: number;
+    readonly to: number;
+} | {
+    readonly kind: 'heading';
+    readonly from: number;
+    readonly to: number;
+    readonly level: number;
+    readonly marker: Span;
+} | {
+    readonly kind: 'mark';
+    readonly mark: InlineMark;
+    readonly from: number;
+    readonly to: number;
+    readonly open: Span;
+    readonly close: Span;
+} | {
+    readonly kind: 'link';
+    readonly from: number;
+    readonly to: number;
+    /** The label; `null` for an address written bare, which has no notation to hide. */
+    readonly label: Span | null;
+    readonly url: string;
+} | {
+    readonly kind: 'wikilink';
+    readonly from: number;
+    readonly to: number;
+    readonly target: string;
+    /** What the page shows: the alias, or the target. */
+    readonly label: Span;
+    readonly embed: boolean;
+} | {
+    readonly kind: 'image';
+    readonly from: number;
+    readonly to: number;
+} | {
+    readonly kind: 'inlineMath';
+    readonly from: number;
+    readonly to: number;
+    readonly tex: string;
+} | {
+    readonly kind: 'mathBlock';
+    readonly from: number;
+    readonly to: number;
+    readonly tex: string;
+} | {
+    readonly kind: 'code';
+    readonly from: number;
+    readonly to: number;
+    readonly language: string | null;
+    /** The fence lines; `null` for an indented block. */
+    readonly open: Span | null;
+    readonly close: Span | null;
+    readonly code: string;
+} | {
+    readonly kind: 'callout';
+    readonly from: number;
+    readonly to: number;
+    readonly type: string;
+    readonly fold: '+' | '-' | null;
+    /** `[!type]` and its fold marker, in the first line. */
+    readonly marker: Span;
+} | {
+    readonly kind: 'quoteMarker';
+    readonly from: number;
+    readonly to: number;
+} | {
+    readonly kind: 'table';
+    readonly from: number;
+    readonly to: number;
+} | {
+    readonly kind: 'listMarker';
+    readonly from: number;
+    readonly to: number;
+    readonly ordered: boolean;
+    /** The task box after the marker, `[ ]` or `[x]`. */
+    readonly task: (Span & {
+        readonly checked: boolean;
+    }) | null;
+} | {
+    readonly kind: 'rule';
+    readonly from: number;
+    readonly to: number;
+} | {
+    readonly kind: 'embed';
+    readonly from: number;
+    readonly to: number;
+    readonly target: string;
+    readonly anchor: string | null;
+} | {
+    readonly kind: 'footnoteRef';
+    readonly from: number;
+    readonly to: number;
+    readonly label: string;
+} | {
+    readonly kind: 'footnoteDef';
+    readonly from: number;
+    readonly to: number;
+    readonly label: string;
+    readonly marker: Span;
+} | {
+    readonly kind: 'comment';
+    readonly from: number;
+    readonly to: number;
+} | {
+    readonly kind: 'blockId';
+    readonly from: number;
+    readonly to: number;
+    readonly id: string;
+} | {
+    readonly kind: 'html';
+    readonly from: number;
+    readonly to: number;
+} | {
+    readonly kind: 'definition';
+    readonly from: number;
+    readonly to: number;
+};
+export type ConstructKind = Construct['kind'];
+/** The constructs of a note, in the order of their `from`. */
+export interface Analysis {
+    readonly constructs: readonly Construct[];
+    /** Where the body starts: after the frontmatter, or 0. */
+    readonly bodyFrom: number;
+}
+/** The frontmatter block, from its first `---` to the end of its closing line, or `null`. */
+export declare function frontmatterSpan(text: string): Span | null;
+/** The constructs of a note's text. Offsets are into `text` as given. */
+export declare function analyze(text: string): Analysis;

package/dist/edit/analyze.js

@@ -0,0 +1,268 @@
+/**
+ * Where each construct of a note sits in its bytes, for the editor to draw (ADR-006).
+ *
+ * The editor's model is the note's text, and the page is drawn over it: every construct the
+ * reading surface draws is found here as ranges of that text — what it covers, which characters
+ * are its notation and which are its content — so the editor can hide the notation, style the
+ * content, or draw a block in place, and never rewrite a byte it did not touch.
+ *
+ * The text is read by the reading surface's own parser (`remark-parse` with GFM and math, at the
+ * options of `readingPlugins`), and the notation that parser leaves as text — callouts, wikilinks,
+ * marked text, comments, block identifiers — by the same patterns the reading surface uses. No
+ * React and no DOM: the analysis is a pure function of the text, and tested as one.
+ */
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+import remarkParse from 'remark-parse';
+import { unified } from 'unified';
+import { codeRegions, commentRegions, insideCode } from '../markdown.js';
+import { CALLOUT_MARKER } from '../remark-callouts.js';
+import { breaksDollarRule } from '../remark-ring.js';
+let parser = null;
+function parse(text) {
+    // The micromark extensions of `readingPlugins`, at its options; the transforms that rewrite the
+    // tree are not run, because they drop the positions this reads.
+    parser ??= unified().use(remarkParse).use(remarkGfm, { singleTilde: false }).use(remarkMath);
+    return parser.parse(text);
+}
+const FRONTMATTER_CLOSE = /\n---[ \t]*(?:\n|$)/;
+/** Same as the reading surface's: `[[target#anchor|alias]]`, with an optional bang. */
+const WIKILINK = /(!)?\[\[([^\]|]+?)(?:\|([^\]]+?))?\]\]/g;
+const HIGHLIGHT = /==([^=\n]+)==/g;
+const BLOCK_ID = /[ \t]\^([A-Za-z0-9-]+)[ \t]*$/;
+const LIST_MARKER = /^([-*+]|\d{1,9}[.)])([ \t]+|$)(\[([ xX])\](?=[ \t]|$))?/;
+const QUOTE_MARKERS = /^(?:[ \t]{0,3}>[ \t]?)+/;
+const EMBED_LINE = /^!\[\[([^\]|#]+?)(?:#([^\]|]+?))?(?:\|[^\]]*?)?\]\]$/;
+/** The frontmatter block, from its first `---` to the end of its closing line, or `null`. */
+export function frontmatterSpan(text) {
+    if (!text.startsWith('---\n'))
+        return null;
+    const close = FRONTMATTER_CLOSE.exec(text.slice(3));
+    if (!close)
+        return null;
+    return { from: 0, to: 3 + close.index + close[0].length };
+}
+const offsets = (node) => {
+    const from = node.position?.start.offset;
+    const to = node.position?.end.offset;
+    return from === undefined || to === undefined ? null : { from, to };
+};
+/** The constructs of a note's text. Offsets are into `text` as given. */
+export function analyze(text) {
+    const found = [];
+    const front = frontmatterSpan(text);
+    const bodyFrom = front?.to ?? 0;
+    if (front)
+        found.push({ kind: 'frontmatter', ...front });
+    // The body is parsed alone, padded so that every offset is an offset of the note.
+    const tree = parse('\n'.repeat(bodyFrom) + text.slice(bodyFrom));
+    const comments = commentRegions(text).filter(([from]) => from >= bodyFrom);
+    for (const [from, to] of comments)
+        found.push({ kind: 'comment', from, to });
+    const inComment = (at) => comments.some(([from, to]) => at >= from && at < to);
+    const code = codeRegions(text);
+    // Wikilinks first: what a wikilink covers is drawn as one link, and nothing inside it is read again.
+    const wikilinks = [];
+    for (const match of text.slice(bodyFrom).matchAll(WIKILINK)) {
+        const from = bodyFrom + (match.index ?? 0);
+        const to = from + match[0].length;
+        if (insideCode(code, from) || inComment(from))
+            continue;
+        const embed = match[1] === '!';
+        const target = match[2] ?? '';
+        const head = from + (embed ? 3 : 2);
+        const label = match[3] !== undefined
+            ? { from: to - 2 - match[3].length, to: to - 2 }
+            : { from: head, to: head + target.length };
+        wikilinks.push({ from, to });
+        // In a table cell the pipe before an alias is escaped, and the backslash is not part of the target.
+        found.push({ kind: 'wikilink', from, to, target: target.split('#')[0].replace(/\\$/, '').trim(), label, embed });
+    }
+    const inWikilink = (span) => wikilinks.some((link) => span.from < link.to && span.to > link.from);
+    const visit = (node, inCallout) => {
+        const span = offsets(node);
+        const children = node.children ?? [];
+        if (span && !inComment(span.from)) {
+            switch (node.type) {
+                case 'heading': {
+                    const line = text.slice(span.from, span.to);
+                    const marker = /^#{1,6}(?:[ \t]+|$)/.exec(line);
+                    if (marker) {
+                        found.push({
+                            kind: 'heading',
+                            ...span,
+                            level: node.depth ?? 1,
+                            marker: { from: span.from, to: span.from + marker[0].length },
+                        });
+                    }
+                    break;
+                }
+                case 'emphasis':
+                case 'strong':
+                case 'delete': {
+                    const first = children[0] && offsets(children[0]);
+                    const last = children[children.length - 1] && offsets(children[children.length - 1]);
+                    if (first && last && !inWikilink(span)) {
+                        found.push({
+                            kind: 'mark',
+                            mark: node.type === 'emphasis' ? 'em' : node.type === 'strong' ? 'strong' : 'strike',
+                            ...span,
+                            open: { from: span.from, to: first.from },
+                            close: { from: last.to, to: span.to },
+                        });
+                    }
+                    break;
+                }
+                case 'inlineCode': {
+                    const raw = text.slice(span.from, span.to);
+                    const ticks = /^`+/.exec(raw)?.[0].length ?? 1;
+                    found.push({
+                        kind: 'mark',
+                        mark: 'code',
+                        ...span,
+                        open: { from: span.from, to: span.from + ticks },
+                        close: { from: span.to - ticks, to: span.to },
+                    });
+                    break;
+                }
+                case 'link': {
+                    if (inWikilink(span))
+                        break;
+                    const raw = text.slice(span.from, span.to);
+                    const first = children[0] && offsets(children[0]);
+                    const last = children[children.length - 1] && offsets(children[children.length - 1]);
+                    const label = raw.startsWith('[') && first && last ? { from: first.from, to: last.to } : null;
+                    found.push({ kind: 'link', ...span, label, url: node.url ?? '' });
+                    break;
+                }
+                case 'image':
+                    if (!inWikilink(span))
+                        found.push({ kind: 'image', ...span });
+                    break;
+                case 'inlineMath':
+                    if (!breaksDollarRule(text, span.from, span.to)) {
+                        found.push({ kind: 'inlineMath', ...span, tex: node.value ?? '' });
+                    }
+                    break;
+                case 'math':
+                    found.push({ kind: 'mathBlock', ...span, tex: node.value ?? '' });
+                    break;
+                case 'code': {
+                    const lines = text.slice(span.from, span.to).split('\n');
+                    const head = lines[0] ?? '';
+                    const fence = /^([ \t]*(?:>[ \t]?)*[ \t]*)(`{3,}|~{3,})/.exec(head);
+                    const tail = lines[lines.length - 1] ?? '';
+                    const closes = fence !== null && lines.length > 1 && new RegExp(`^[ \\t>]*\\${fence[2][0]}{${fence[2].length},}[ \\t]*$`).test(tail);
+                    found.push({
+                        kind: 'code',
+                        ...span,
+                        language: node.lang ?? null,
+                        open: fence ? { from: span.from, to: span.from + head.length } : null,
+                        close: closes ? { from: span.to - tail.length, to: span.to } : null,
+                        code: node.value ?? '',
+                    });
+                    return;
+                }
+                case 'blockquote': {
+                    const first = text.slice(span.from, text.indexOf('\n', span.from) === -1 ? span.to : text.indexOf('\n', span.from));
+                    const quote = QUOTE_MARKERS.exec(first);
+                    const callout = quote ? CALLOUT_MARKER.exec(first.slice(quote[0].length)) : null;
+                    if (callout && quote && !inCallout) {
+                        const markerFrom = span.from + quote[0].length;
+                        const markerText = /^\[![^\]]+\][+-]?/.exec(first.slice(quote[0].length))?.[0] ?? '';
+                        found.push({
+                            kind: 'callout',
+                            ...span,
+                            type: (callout[1] ?? 'note').toLowerCase(),
+                            fold: callout[2] === '+' || callout[2] === '-' ? callout[2] : null,
+                            marker: { from: markerFrom, to: markerFrom + markerText.length },
+                        });
+                        for (const child of children)
+                            visit(child, true);
+                        return;
+                    }
+                    if (!inCallout) {
+                        // Each line's markers, which the page hides while the line is not being edited.
+                        let at = span.from;
+                        while (at < span.to) {
+                            const end = text.indexOf('\n', at);
+                            const lineEnd = end === -1 || end > span.to ? span.to : end;
+                            const marker = QUOTE_MARKERS.exec(text.slice(at, lineEnd));
+                            if (marker)
+                                found.push({ kind: 'quoteMarker', from: at, to: at + marker[0].length });
+                            at = lineEnd + 1;
+                        }
+                    }
+                    break;
+                }
+                case 'table':
+                    found.push({ kind: 'table', ...span });
+                    return;
+                case 'listItem': {
+                    const marker = LIST_MARKER.exec(text.slice(span.from, span.to));
+                    if (marker) {
+                        const markerTo = span.from + marker[1].length + (marker[2]?.length ?? 0);
+                        const task = marker[3] !== undefined && node.checked !== null && node.checked !== undefined
+                            ? { from: markerTo, to: markerTo + 3, checked: node.checked }
+                            : null;
+                        found.push({ kind: 'listMarker', from: span.from, to: markerTo, ordered: /\d/.test(marker[1]), task });
+                    }
+                    break;
+                }
+                case 'thematicBreak':
+                    found.push({ kind: 'rule', ...span });
+                    return;
+                case 'paragraph': {
+                    const raw = text.slice(span.from, span.to);
+                    const embed = EMBED_LINE.exec(raw.trim());
+                    if (embed && !raw.includes('\n') && !inCallout && span.from === text.lastIndexOf('\n', span.from - 1) + 1) {
+                        found.push({ kind: 'embed', ...span, target: embed[1].trim(), anchor: embed[2]?.trim() ?? null });
+                        return;
+                    }
+                    // Marked text and a block identifier are characters to the parser, found here on the
+                    // paragraph's own lines and never inside code.
+                    for (const match of raw.matchAll(HIGHLIGHT)) {
+                        const from = span.from + (match.index ?? 0);
+                        const to = from + match[0].length;
+                        if (insideCode(code, from) || inWikilink({ from, to }))
+                            continue;
+                        found.push({ kind: 'mark', mark: 'highlight', from, to, open: { from, to: from + 2 }, close: { from: to - 2, to } });
+                    }
+                    const lastLineFrom = span.from + raw.lastIndexOf('\n') + 1;
+                    const id = BLOCK_ID.exec(text.slice(lastLineFrom, span.to));
+                    if (id) {
+                        const from = lastLineFrom + (id.index ?? 0) + 1;
+                        found.push({ kind: 'blockId', from, to: from + 1 + id[1].length, id: id[1] });
+                    }
+                    break;
+                }
+                case 'footnoteReference':
+                    found.push({ kind: 'footnoteRef', ...span, label: node.label ?? node.identifier ?? '' });
+                    break;
+                case 'footnoteDefinition': {
+                    const marker = /^\[\^[^\]]+\]:[ \t]?/.exec(text.slice(span.from, span.to));
+                    if (marker) {
+                        found.push({
+                            kind: 'footnoteDef',
+                            ...span,
+                            label: node.label ?? node.identifier ?? '',
+                            marker: { from: span.from, to: span.from + marker[0].length },
+                        });
+                    }
+                    break;
+                }
+                case 'html':
+                    found.push({ kind: 'html', ...span });
+                    return;
+                case 'definition':
+                    found.push({ kind: 'definition', ...span });
+                    return;
+            }
+        }
+        for (const child of children)
+            visit(child, inCallout);
+    };
+    visit(tree, false);
+    found.sort((a, b) => a.from - b.from || b.to - a.to);
+    return { constructs: found, bodyFrom };
+}

package/dist/edit/blocks.d.ts

@@ -0,0 +1,97 @@
+/**
+ * The blocks the editor draws in place of their text while the author is not editing it, each
+ * drawn by the reading surface's own components so that edit mode looks like the page (ADR-006):
+ * a run of notation through `Markdown`, a callout with its type and folding controls, a table
+ * whose cells are edited where they stand (#56), and the frontmatter as a form (#58).
+ *
+ * Every edit they make is a change to the note's bytes, dispatched to the editor; none of them
+ * keeps a copy of the note.
+ */
+import type { EditorView } from '@codemirror/view';
+import { type ReactNode } from 'react';
+/** A run of notation drawn as the reading surface draws it: comments out, wikilinks resolved, embeds expanded. */
+export declare function Snippet({ text }: {
+    text: string;
+}): import("react").JSX.Element;
+/** The types a callout may take from the toolbar: the families the default theme draws. */
+export declare const CALLOUT_TYPES: readonly ["note", "info", "todo", "abstract", "tip", "success", "question", "warning", "failure", "danger", "bug", "example", "quote"];
+/**
+ * A callout drawn as the page draws it, with its type and its folding chosen in place: each
+ * choice rewrites the marker `[!type]±` of its first line and nothing else (#55).
+ */
+export declare function CalloutBlock({ view, text, marker }: {
+    view: EditorView;
+    text: string;
+    marker: {
+        from: number;
+        to: number;
+        type: string;
+        fold: '+' | '-' | null;
+    };
+}): import("react").JSX.Element;
+/**
+ * A table whose cells are edited where they stand. A cell commits its text when it loses the focus,
+ * or on Enter (to the cell below) and Tab (to the next one); each commit rewrites that cell's
+ * content only. The controls add and remove rows and columns and align the column of the cell last
+ * focused.
+ */
+export declare function TableBlock({ view, from, to }: {
+    view: EditorView;
+    from: number;
+    to: number;
+}): import("react").JSX.Element;
+/** Shows a block as its text: the cursor goes into it, and the editor draws its source. */
+export declare function reveal(view: EditorView, at: number): void;
+export declare function PropertiesBlock({ view, to }: {
+    view: EditorView;
+    to: number;
+}): import("react").JSX.Element | null;
+/** The control a note with no frontmatter shows above its body, which gives it one. */
+export declare function AddProperties({ view }: {
+    view: EditorView;
+}): import("react").JSX.Element;
+export declare const ICONS: {
+    readonly add: ReactNode;
+    readonly remove: ReactNode;
+    readonly source: ReactNode;
+    readonly rowAdd: ReactNode;
+    readonly rowRemove: ReactNode;
+    readonly columnAdd: ReactNode;
+    readonly columnRemove: ReactNode;
+    readonly alignLeft: ReactNode;
+    readonly alignCenter: ReactNode;
+    readonly alignRight: ReactNode;
+    readonly undo: ReactNode;
+    readonly redo: ReactNode;
+    readonly bold: ReactNode;
+    readonly italic: ReactNode;
+    readonly strikethrough: ReactNode;
+    readonly highlight: ReactNode;
+    readonly code: ReactNode;
+    readonly link: ReactNode;
+    readonly wikilink: ReactNode;
+    readonly bulletList: ReactNode;
+    readonly orderedList: ReactNode;
+    readonly taskList: ReactNode;
+    readonly quote: ReactNode;
+    readonly callout: ReactNode;
+    readonly table: ReactNode;
+    readonly codeBlock: ReactNode;
+    readonly math: ReactNode;
+    readonly diagram: ReactNode;
+    readonly rule: ReactNode;
+    readonly footnote: ReactNode;
+    readonly comment: ReactNode;
+    readonly caret: ReactNode;
+    readonly cut: ReactNode;
+    readonly copy: ReactNode;
+    readonly paste: ReactNode;
+    readonly attach: ReactNode;
+    readonly revert: ReactNode;
+    readonly saving: ReactNode;
+    readonly saved: ReactNode;
+    readonly notSaved: ReactNode;
+    readonly alert: ReactNode;
+    readonly edit: ReactNode;
+    readonly view: ReactNode;
+};