@memorysmithapp/markdown-renderer 0.6.0 → 0.7.1

package/dist/edit/heights.d.ts

@@ -13,6 +13,22 @@ export interface BlockMetrics {
     readonly width: number;
     readonly lineHeight: number;
     readonly charWidth: number;
+    /**
+     * Each level of heading as the theme draws it in edit mode, `h1` first, and a line of a code
+     * block: its line height, its characters, the space above it and the width its sides take (#94).
+     * Absent where nothing is laid out.
+     */
+    readonly headings?: readonly LineMetrics[];
+    readonly code?: LineMetrics;
+}
+/** A kind of line as the theme draws it, which differs from the text's: a heading, a line of code. */
+export interface LineMetrics {
+    readonly lineHeight: number;
+    readonly charWidth: number;
+    /** The space above it, on a heading. */
+    readonly padding: number;
+    /** The width its sides take from the column: a code block's padding and border. */
+    readonly inset: number;
 }
 /** What an estimate assumes before the editor has been measured, as in a test with no layout. */
 export declare const DEFAULT_METRICS: BlockMetrics;
@@ -22,10 +38,28 @@ export declare const DEFAULT_METRICS: BlockMetrics;
  * nothing is laid out.
  */
 export declare function measureMetrics(parent: HTMLElement): BlockMetrics;
+/**
+ * Each level of heading and a line of code laid out in `parent` as the editor draws them, by the
+ * classes of their line, so whatever the theme gives them — a face, a size, the space above, the
+ * sides of a code block — is what is measured (#94).
+ */
+export declare function measureLines(parent: HTMLElement): {
+    headings: LineMetrics[];
+    code: LineMetrics;
+};
 /** Metrics as measured, any that could not be read replaced by the default. */
 export declare function withinReason(metrics: BlockMetrics): BlockMetrics;
+/**
+ * The height of a line of the text the editor shows, `length` characters visible, as the page draws
+ * it where CodeMirror would guess it from the text's metrics alone (#94): a heading at its `level`,
+ * a line of code, or a line of text, which on a narrow column wraps sooner than CodeMirror counts.
+ * `null` where that kind of line was not measured.
+ */
+export declare function lineHeightOf(kind: 'text' | 'code' | {
+    readonly heading: number;
+}, length: number, metrics: BlockMetrics): number | null;
 /** What a block is, for its estimate. */
-export type BlockKind = 'frontmatter' | 'callout' | 'table' | 'embed' | 'diagram' | 'preview' | 'add-properties';
+export type BlockKind = 'frontmatter' | 'callout' | 'table' | 'embed' | 'diagram' | 'preview' | 'add-properties' | 'image';
 /** The height a block of this kind and these lines is drawn at, near enough to lay out the page. */
 export declare function estimateHeight(kind: BlockKind, source: string, metrics: BlockMetrics): number;
 /** The height a block of this content was drawn at at this width, if it was. */

package/dist/edit/heights.js

@@ -8,6 +8,7 @@
  * properties — and a block drawn once at a width is remembered at its measured height, so the same
  * block made again, moved by an edit above it or in the next edit of the note, starts right.
  */
+import { readImageSize } from './image-size.js';
 /** What an estimate assumes before the editor has been measured, as in a test with no layout. */
 export const DEFAULT_METRICS = { width: 700, lineHeight: 24, charWidth: 8 };
 /**
@@ -17,23 +18,74 @@ export const DEFAULT_METRICS = { width: 700, lineHeight: 24, charWidth: 8 };
  */
 export function measureMetrics(parent) {
     const probe = document.createElement('div');
-    probe.style.cssText = 'position: absolute; visibility: hidden; white-space: pre; pointer-events: none';
-    probe.textContent = 'abcdefghijklmnopqrstuvwxyz';
+    probe.style.cssText = PROBE;
+    probe.textContent = SAMPLE;
     parent.appendChild(probe);
     const box = probe.getBoundingClientRect();
     const width = parent.clientWidth;
     probe.remove();
-    return withinReason({ width, lineHeight: box.height, charWidth: box.width / 26 });
+    return withinReason({ width, lineHeight: box.height, charWidth: box.width / SAMPLE.length, ...measureLines(parent) });
+}
+const PROBE = 'position: absolute; visibility: hidden; white-space: pre; pointer-events: none';
+const SAMPLE = 'abcdefghijklmnopqrstuvwxyz';
+/**
+ * Each level of heading and a line of code laid out in `parent` as the editor draws them, by the
+ * classes of their line, so whatever the theme gives them — a face, a size, the space above, the
+ * sides of a code block — is what is measured (#94).
+ */
+export function measureLines(parent) {
+    const classes = [1, 2, 3, 4, 5, 6].map((level) => `cm-ms-heading cm-ms-h${level}`).concat('cm-ms-code-line');
+    const probes = classes.map((className) => {
+        const probe = document.createElement('div');
+        probe.className = `cm-line ${className}`;
+        probe.style.cssText = PROBE;
+        probe.textContent = SAMPLE;
+        parent.appendChild(probe);
+        return probe;
+    });
+    const read = probes.map((probe) => {
+        const box = probe.getBoundingClientRect();
+        const style = getComputedStyle(probe);
+        const number = (value) => Number.parseFloat(value) || 0;
+        const padding = number(style.paddingTop);
+        const inset = number(style.paddingLeft) + number(style.paddingRight) + number(style.borderLeftWidth) + number(style.borderRightWidth);
+        return { lineHeight: box.height - padding - number(style.paddingBottom), charWidth: (box.width - inset) / SAMPLE.length, padding, inset };
+    });
+    for (const probe of probes)
+        probe.remove();
+    return { headings: read.slice(0, 6), code: read[6] };
 }
 /** Metrics as measured, any that could not be read replaced by the default. */
 export function withinReason(metrics) {
     const usable = (value, fallback) => (Number.isFinite(value) && value > 1 ? value : fallback);
+    const laidOut = (line) => line.lineHeight > 1 && line.charWidth > 0.5;
+    const headings = metrics.headings?.length === 6 && metrics.headings.every(laidOut) ? metrics.headings : undefined;
+    const code = metrics.code && laidOut(metrics.code) ? metrics.code : undefined;
     return {
         width: usable(metrics.width, DEFAULT_METRICS.width),
         lineHeight: usable(metrics.lineHeight, DEFAULT_METRICS.lineHeight),
         charWidth: usable(metrics.charWidth, DEFAULT_METRICS.charWidth),
+        ...(headings ? { headings } : {}),
+        ...(code ? { code } : {}),
     };
 }
+/** A line of `length` visible characters drawn as `line`, wrapped at the column's width. */
+function lineOf(line, length, width) {
+    const perLine = Math.max(4, Math.floor((width - line.inset) / line.charWidth));
+    return Math.round(line.padding + line.lineHeight * Math.max(1, Math.ceil(length / perLine)));
+}
+/**
+ * The height of a line of the text the editor shows, `length` characters visible, as the page draws
+ * it where CodeMirror would guess it from the text's metrics alone (#94): a heading at its `level`,
+ * a line of code, or a line of text, which on a narrow column wraps sooner than CodeMirror counts.
+ * `null` where that kind of line was not measured.
+ */
+export function lineHeightOf(kind, length, metrics) {
+    if (kind === 'text')
+        return lineOf({ lineHeight: metrics.lineHeight, charWidth: metrics.charWidth, padding: 0, inset: 0 }, length, metrics.width);
+    const line = kind === 'code' ? metrics.code : metrics.headings?.[kind.heading - 1];
+    return line ? lineOf(line, length, metrics.width) : null;
+}
 /** The lines a text takes in a column `width` wide, each of its lines at least one. */
 function wrapped(lines, width, metrics) {
     const perLine = Math.max(8, Math.floor(width / metrics.charWidth));
@@ -44,6 +96,8 @@ function wrapped(lines, width, metrics) {
  * the text column of its 560px breakpoint.
  */
 const STACKED_PROPERTIES = 528;
+/** What an image declares no height for is drawn at before it loads, near enough (#91). */
+const UNDECLARED_IMAGE_HEIGHT = 200;
 /** The height a block of this kind and these lines is drawn at, near enough to lay out the page. */
 export function estimateHeight(kind, source, metrics) {
     const { lineHeight } = metrics;
@@ -79,6 +133,13 @@ export function estimateHeight(kind, source, metrics) {
             return Math.round(lineHeight + wrapped(lines, metrics.width, metrics) * lineHeight);
         case 'add-properties':
             return Math.round(1.5 * lineHeight);
+        case 'image': {
+            // The height it declares, or its width at a photograph's proportions, or a guess (#91).
+            const size = readImageSize(source.trim());
+            if (size?.height != null)
+                return size.height;
+            return size?.width != null ? Math.round(size.width * 0.75) : UNDECLARED_IMAGE_HEIGHT;
+        }
     }
 }
 /** The heights blocks were drawn at, by width and content; the oldest are let go past the limit. */

package/dist/edit/image-size.d.ts

@@ -0,0 +1,36 @@
+/**
+ * The size an image is drawn at, as its notation writes it (#98): the dimensions after the pipe
+ * of a Markdown image's description, `![description|300](address)` (`SPEC.md` §3.14), or of the
+ * embed of a file the notebook keeps, `![[photo.jpg|300]]` (§5.7). The editor reads them and
+ * rewrites them, and no other byte.
+ */
+import type { TextChange } from './table.js';
+export interface ImageSize {
+    /** The width it declares, or `null` when it is drawn at its own size. */
+    readonly width: number | null;
+    readonly height: number | null;
+    /**
+     * Where in the source the dimensions are written, their pipe included; an empty span where they
+     * would be written when there are none.
+     */
+    readonly at: {
+        readonly from: number;
+        readonly to: number;
+    };
+    /** What separates them from the rest: `|`, or `\|` in an embed whose pipe is escaped. */
+    readonly pipe: string;
+}
+/** The largest width the notation writes: five digits (`SPEC.md` §3.14). */
+export declare const MAX_IMAGE_WIDTH = 99999;
+/**
+ * The size an image's source declares, and where it is written. `null` for a source that is not an
+ * image's notation, and for an embed whose pipe holds something other than dimensions, which the
+ * editor does not overwrite.
+ */
+export declare function readImageSize(source: string): ImageSize | null;
+/**
+ * The change that draws the image whose source starts at `from` at `width`, its height following,
+ * or at its own size for `null`: the dimensions written, replaced or taken away, and nothing else.
+ * Empty when the source is not an image's notation or already says so.
+ */
+export declare function resizeImage(source: string, from: number, width: number | null): TextChange[];

package/dist/edit/image-size.js

@@ -0,0 +1,61 @@
+/**
+ * The size an image is drawn at, as its notation writes it (#98): the dimensions after the pipe
+ * of a Markdown image's description, `![description|300](address)` (`SPEC.md` §3.14), or of the
+ * embed of a file the notebook keeps, `![[photo.jpg|300]]` (§5.7). The editor reads them and
+ * rewrites them, and no other byte.
+ */
+import { readDimensions, readImageAlt } from '../image-dimensions.js';
+/** The largest width the notation writes: five digits (`SPEC.md` §3.14). */
+export const MAX_IMAGE_WIDTH = 99999;
+const MARKDOWN_IMAGE = /^!\[([^\]]*)\]\(/;
+const EMBED = /^!\[\[([^\]]*)\]\]$/;
+/**
+ * The size an image's source declares, and where it is written. `null` for a source that is not an
+ * image's notation, and for an embed whose pipe holds something other than dimensions, which the
+ * editor does not overwrite.
+ */
+export function readImageSize(source) {
+    // A block's line may be indented, or end in spaces, around its one embed.
+    const lead = source.length - source.trimStart().length;
+    const size = readTrimmed(source.trim());
+    return size && lead ? { ...size, at: { from: size.at.from + lead, to: size.at.to + lead } } : size;
+}
+function readTrimmed(source) {
+    const image = MARKDOWN_IMAGE.exec(source);
+    if (image) {
+        const alt = image[1] ?? '';
+        const start = 2;
+        const read = readImageAlt(alt);
+        if (read.width === null)
+            return { width: null, height: null, at: { from: start + alt.length, to: start + alt.length }, pipe: '|' };
+        return { width: read.width, height: read.height, at: { from: start + alt.lastIndexOf('|'), to: start + alt.length }, pipe: '|' };
+    }
+    const embed = EMBED.exec(source);
+    if (embed) {
+        const inner = embed[1] ?? '';
+        const start = 3;
+        const pipe = /\\?\|/.exec(inner);
+        if (!pipe)
+            return { width: null, height: null, at: { from: start + inner.length, to: start + inner.length }, pipe: '|' };
+        const measured = readDimensions(inner.slice(pipe.index + pipe[0].length));
+        if (!measured)
+            return null;
+        return { width: measured.width, height: measured.height, at: { from: start + pipe.index, to: start + inner.length }, pipe: pipe[0] };
+    }
+    return null;
+}
+/**
+ * The change that draws the image whose source starts at `from` at `width`, its height following,
+ * or at its own size for `null`: the dimensions written, replaced or taken away, and nothing else.
+ * Empty when the source is not an image's notation or already says so.
+ */
+export function resizeImage(source, from, width) {
+    const size = readImageSize(source);
+    if (!size)
+        return [];
+    const wanted = width === null ? null : Math.min(MAX_IMAGE_WIDTH, Math.max(1, Math.round(width)));
+    if (wanted === size.width && (wanted === null || size.height === null))
+        return [];
+    const insert = wanted === null ? '' : `${size.pipe}${wanted}`;
+    return [{ from: from + size.at.from, to: from + size.at.to, insert }];
+}

package/dist/edit/live.d.ts

@@ -24,6 +24,8 @@ export declare const analysisField: StateField<Analysis>;
 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>;
+/** The metrics of the editor's text column, which a drawn block estimates its height by (#91). */
+export declare const metricsField: StateField<BlockMetrics>;
 export declare const decorationsField: StateField<DecorationSet>;
 /**
  * The live page: the analysis, the decorations over it, and what the focus and a modifier-click do.