@simple-mark/codemirror 0.3.3 → 0.3.5

package/index.d.ts

@@ -1,6 +1,6 @@
 import { EditorState, Extension, Facet, StateCommand } from "@codemirror/state";
 import { DecorationSet, EditorView, ViewPlugin, ViewUpdate } from "@codemirror/view";
-import { LineLook, Theme } from "@simple-mark/model";
+import { ResolvedLineLook, Theme } from "@simple-mark/model";
 //#region packages/codemirror/src/links.d.ts
 /** What to open: a web address, or a path as written (an image, another document, …). */
 interface LinkTarget {
@@ -22,11 +22,15 @@ export declare function links(): Extension;
 //#region packages/codemirror/src/image-resolver.d.ts
 /**
  * Turns a path as written in the document into a URL to load, or several to try in order
- * (the first that loads is shown), or null if it can't be loaded.
+ * (the first that loads is shown), or null if it can't be loaded. `undefined` means the host
+ * doesn't know yet (its file is still loading): the editor shows that it is loading, and the
+ * host calls `refreshImages` once it knows.
  */
-type ImageResolver = (src: string) => string | readonly string[] | null;
+type ImageResolver = (src: string) => string | readonly string[] | null | undefined;
 /** How image (and file) paths are resolved; by default they are used as written. */
 export declare const imageResolver: Facet<ImageResolver, ImageResolver>;
+/** Resolves the images again, e.g. when files the resolver was waiting for have loaded. */
+export declare function refreshImages(view: EditorView): void;
 //#endregion
 //#region packages/codemirror/src/previews.d.ts
 /** Image and math previews; the source text always stays visible. */
@@ -36,7 +40,7 @@ export declare function previews(): Extension;
 /** The theme the editor draws with. */
 export declare const markdownTheme: Facet<Theme, Theme>;
 /** A look as an inline CSS declaration list. */
-export declare function lookCss(look: LineLook, theme: Theme): string;
+export declare function lookCss(look: ResolvedLineLook, theme: Theme): string;
 declare class MarkdownDecorations {
   decorations: DecorationSet;
   private theme;
@@ -45,6 +49,12 @@ declare class MarkdownDecorations {
   constructor(view: EditorView);
   update(update: ViewUpdate): void;
   private build;
+  /**
+   * One element behind each run of neighbouring spans with the same background (inline code
+   * with its backticks), so the background has rounded corners only at its ends. The spans
+   * themselves draw no background. Being longer, a box wraps the spans' elements.
+   */
+  private backgroundBoxes;
   /** Draws runs of wide characters exactly two columns each, so table pipes line up. */
   private wideRuns;
   private lineDecoration;
@@ -84,7 +94,10 @@ export interface EditorOptions {
   theme?: Theme;
   /** Line ending to read and write ("\n", "\r\n"); by default the one `doc` uses. */
   lineSeparator?: string;
-  /** Turns an image path from the document into a URL to load (default: as written). */
+  /**
+   * Turns an image path from the document into a URL to load (default: as written). Return
+   * undefined while the file is still loading, and call `refreshImages(view)` when it has.
+   */
   resolveImage?: ImageResolver;
   /**
    * Opens a followed link (Ctrl/Cmd+Click) or a clicked image preview. Default: web addresses

package/index.js

@@ -2,21 +2,27 @@ import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
 import { commonmarkLanguage, markdown } from "@codemirror/lang-markdown";
 import { EditorState, Facet, Prec, StateEffect, StateField } from "@codemirror/state";
 import { Decoration, EditorView, ViewPlugin, WidgetType, hoverTooltip, keymap, showTooltip } from "@codemirror/view";
-import { cellAt, charWidth, defaultTheme, headingAnchors, linkAt, linkKind, markdownExtensions, markdownStyles, mathSource, parseTable, previewBlocks, renderTable, resolveLineLook, resolveLook, rowLine } from "@simple-mark/model";
+import { STROKES, cellAt, charWidth, defaultTheme, headingAnchors, linkAt, linkKind, markdownExtensions, markdownStyles, mathSource, parseTable, previewBlocks, renderTable, resolveLineLook, resolveLook, rowLine } from "@simple-mark/model";
 import { ensureSyntaxTree, syntaxTree } from "@codemirror/language";
 //#region packages/codemirror/src/image-resolver.ts
-/** The URLs a resolver gives for `src`, in order. */
+/** The URLs a resolver gives for `src`, in order; undefined while the host is still loading. */
 function resolvedUrls(resolve, src) {
 	const result = resolve(src);
-	return result === null ? [] : typeof result === "string" ? [result] : [...result];
+	return result === void 0 ? void 0 : result === null ? [] : typeof result === "string" ? [result] : [...result];
 }
 /** How image (and file) paths are resolved; by default they are used as written. */
 const imageResolver = Facet.define({ combine: (values) => values[0] ?? ((src) => src) });
+/** Asks the editor to resolve its images again. */
+const imagesChanged = StateEffect.define();
+/** Resolves the images again, e.g. when files the resolver was waiting for have loaded. */
+function refreshImages(view) {
+	view.dispatch({ effects: imagesChanged.of(null) });
+}
 //#endregion
 //#region packages/codemirror/src/links.ts
 /** In a browser: web addresses and paths (resolved like images) open in a new tab. */
 const openInBrowser = (target, view) => {
-	const url = target.kind === "web" ? target.url : resolvedUrls(view.state.facet(imageResolver), target.url)[0];
+	const url = target.kind === "web" ? target.url : resolvedUrls(view.state.facet(imageResolver), target.url)?.[0];
 	if (url) window.open(url, "_blank", "noopener,noreferrer");
 };
 /** How links are opened. */
@@ -123,12 +129,26 @@ function lookCss(look, theme) {
 	if (look.monospace !== void 0) css.push(`font-family: ${look.monospace ? theme.monospaceFamily : theme.fontFamily}`);
 	if (look.color !== void 0) css.push(`color: ${look.color}`);
 	if (look.background !== void 0) css.push(`background-color: ${look.background}`);
+	if (look.radius !== void 0) css.push(`border-radius: ${look.radius}em`);
 	if (look.strike !== void 0 || look.underline !== void 0) {
 		const lines = [look.strike && "line-through", look.underline && "underline"].filter(Boolean);
 		css.push(`text-decoration: ${lines.join(" ") || "none"}`);
 	}
+	const em = (size) => `${size / (look.fontScale ?? 1)}em`;
 	if (look.lineBackground !== void 0) css.push(`background-color: ${look.lineBackground}`);
-	if (look.borderLeft !== void 0) css.push(`box-shadow: inset ${3 / 15}em 0 0 ${look.borderLeft}`, `padding-left: ${12 / 15}em`);
+	if (look.radiusTop || look.radiusBottom) {
+		const [top, bottom] = [em(look.radiusTop ?? 0), em(look.radiusBottom ?? 0)];
+		css.push(`border-radius: ${top} ${top} ${bottom} ${bottom}`);
+	}
+	const shadows = [];
+	if (look.borderLeft !== void 0) shadows.push(`inset ${em(STROKES.bar)} 0 0 ${look.borderLeft}`);
+	if (look.borderBottom !== void 0) shadows.push(`inset 0 -${em(STROKES.border)} 0 ${look.borderBottom}`);
+	if (shadows.length) css.push(`box-shadow: ${shadows.join(", ")}`);
+	if (look.rule !== void 0) {
+		const half = em(STROKES.rule / 2);
+		css.push(`background-image: linear-gradient(transparent calc(50% - ${half}), ${look.rule} 0, ${look.rule} calc(50% + ${half}), transparent 0)`);
+	}
+	if (look.indent !== void 0) css.push(`padding-left: ${em(look.indent)}`);
 	return css.join("; ");
 }
 const fontChecks = /* @__PURE__ */ new Map();
@@ -180,32 +200,86 @@ var MarkdownDecorations = class {
 		const { doc } = view.state;
 		const { from, to } = view.viewport;
 		const { blocks, spans } = markdownStyles(syntaxTree(view.state), from, to);
+		/** Block styles of each line, and the styles whose block starts or ends there. */
 		const lines = /* @__PURE__ */ new Map();
 		for (const block of blocks) {
-			const start = Math.max(block.from, from);
-			let end = Math.min(block.to, to);
-			if (end > start && doc.lineAt(end).from === end) end--;
-			for (let pos = start; pos <= end;) {
+			let blockEnd = block.to;
+			if (blockEnd > block.from && doc.lineAt(blockEnd).from === blockEnd) blockEnd--;
+			const firstLine = doc.lineAt(block.from).from;
+			const lastLine = doc.lineAt(blockEnd).from;
+			for (let pos = Math.max(block.from, from), end = Math.min(blockEnd, to); pos <= end;) {
 				const line = doc.lineAt(pos);
-				let styles = lines.get(line.from);
-				if (!styles) lines.set(line.from, styles = /* @__PURE__ */ new Set());
-				styles.add(block.style);
+				let entry = lines.get(line.from);
+				if (!entry) lines.set(line.from, entry = {
+					styles: /* @__PURE__ */ new Set(),
+					first: /* @__PURE__ */ new Set(),
+					last: /* @__PURE__ */ new Set()
+				});
+				entry.styles.add(block.style);
+				if (line.from === firstLine) entry.first.add(block.style);
+				if (line.from === lastLine) entry.last.add(block.style);
 				pos = line.to + 1;
 			}
 		}
 		const ranges = [];
-		for (const [lineFrom, styles] of lines) ranges.push(this.lineDecoration([...styles]).range(lineFrom));
+		for (const [lineFrom, entry] of lines) ranges.push(this.lineDecoration(entry).range(lineFrom));
+		for (const box of this.backgroundBoxes(spans)) ranges.push(box);
 		for (const span of spans) ranges.push(this.markDecoration(span.styles).range(span.from, span.to));
-		for (const [lineFrom, styles] of lines) {
+		for (const [lineFrom, { styles }] of lines) {
 			const line = doc.lineAt(lineFrom);
 			if (line.length && [...styles].some((s) => /^h[1-6]$/.test(s))) ranges.push(headingText.range(line.from, line.to));
 		}
 		if (this.fixWide) {
 			const cursorLines = new Set(view.state.selection.ranges.map((r) => doc.lineAt(r.head).from));
-			for (const [lineFrom, styles] of lines) if (styles.has("table") && !cursorLines.has(lineFrom)) this.wideRuns(doc.lineAt(lineFrom), ranges);
+			for (const [lineFrom, { styles }] of lines) if (styles.has("table") && !cursorLines.has(lineFrom)) this.wideRuns(doc.lineAt(lineFrom), ranges);
 		}
 		return Decoration.set(ranges, true);
 	}
+	/**
+	* One element behind each run of neighbouring spans with the same background (inline code
+	* with its backticks), so the background has rounded corners only at its ends. The spans
+	* themselves draw no background. Being longer, a box wraps the spans' elements.
+	*/
+	backgroundBoxes(spans) {
+		const boxes = [];
+		let open = null;
+		const flush = () => {
+			if (!open) return;
+			const { background, radius, monospace } = open.look;
+			const look = {
+				background,
+				...radius !== void 0 ? { radius } : {},
+				...monospace !== void 0 ? { monospace } : {}
+			};
+			const key = `box:${JSON.stringify(look)}`;
+			let deco = this.cache.get(key);
+			if (!deco) {
+				const css = `${lookCss(look, this.theme)}; line-height: 0; -webkit-box-decoration-break: clone; box-decoration-break: clone`;
+				deco = Decoration.mark({
+					class: "sm-box",
+					attributes: { style: css }
+				});
+				this.cache.set(key, deco);
+			}
+			boxes.push(deco.range(open.from, open.to));
+			open = null;
+		};
+		for (const span of spans) {
+			const look = resolveLook([], span.styles, this.theme);
+			if (look.background === void 0) flush();
+			else if (open && open.to === span.from && open.look.background === look.background) open.to = span.to;
+			else {
+				flush();
+				open = {
+					from: span.from,
+					to: span.to,
+					look
+				};
+			}
+		}
+		flush();
+		return boxes;
+	}
 	/** Draws runs of wide characters exactly two columns each, so table pipes line up. */
 	wideRuns(line, ranges) {
 		let start = -1;
@@ -235,13 +309,14 @@ var MarkdownDecorations = class {
 		}
 		flush(i);
 	}
-	lineDecoration(styles) {
-		const key = `line:${styles.sort().join(" ")}`;
+	lineDecoration(entry) {
+		const styles = [...entry.styles].sort();
+		const key = `line:${styles.join(" ")}|${[...entry.first].sort().join(" ")}|${[...entry.last].sort().join(" ")}`;
 		let deco = this.cache.get(key);
 		if (!deco) {
 			deco = Decoration.line({
 				class: styles.map((s) => `sm-line-${s}`).join(" "),
-				attributes: { style: lookCss(resolveLineLook(styles, this.theme), this.theme) }
+				attributes: { style: lookCss(resolveLineLook(styles, this.theme, entry), this.theme) }
 			});
 			this.cache.set(key, deco);
 		}
@@ -252,7 +327,7 @@ var MarkdownDecorations = class {
 		let deco = this.cache.get(key);
 		if (!deco) {
 			const linked = styles.includes("link") || styles.includes("url");
-			const look = resolveLook([], styles, this.theme);
+			const { background: _background, radius: _radius, ...look } = resolveLook([], styles, this.theme);
 			const keepLine = look.monospace !== void 0 || look.fontScale !== void 0;
 			deco = Decoration.mark({
 				class: styles.map((s) => `sm-${s}`).join(" "),
@@ -687,7 +762,15 @@ function imageRef(image, resolve) {
 		alt: image.alt,
 		problem: `No definition for ${image.raw}`
 	};
-	const [src, ...fallbacks] = resolvedUrls(resolve, image.src);
+	const urls = resolvedUrls(resolve, image.src);
+	if (urls === void 0) return {
+		raw: image.raw,
+		src: null,
+		alt: image.alt,
+		problem: `Loading ${image.raw}…`,
+		loading: true
+	};
+	const [src, ...fallbacks] = urls;
 	if (src === void 0) return {
 		raw: image.raw,
 		src: null,
@@ -732,14 +815,14 @@ var ImageWidget = class extends WidgetType {
 			if (--waiting === 0) rememberHeight(view, this.key, dom);
 		};
 		for (const image of this.images) {
-			const problem = (text) => {
+			const problem = (text, className = "sm-image-error") => {
 				const span = document.createElement("span");
-				span.className = "sm-image-error";
+				span.className = className;
 				span.textContent = text;
 				return span;
 			};
 			if (image.src === null) {
-				dom.appendChild(problem(image.problem ?? `Can't load ${image.raw}`));
+				dom.appendChild(problem(image.problem ?? `Can't load ${image.raw}`, image.loading ? "sm-image-loading" : "sm-image-error"));
 				continue;
 			}
 			waiting++;
@@ -801,7 +884,7 @@ function blockPreviews(state) {
 const blockPreviewField = StateField.define({
 	create: blockPreviews,
 	update(previews, tr) {
-		return tr.docChanged || syntaxTree(tr.state) !== syntaxTree(tr.startState) || tr.state.facet(imageResolver) !== tr.startState.facet(imageResolver) || tr.effects.some((effect) => effect.is(refreshEstimates)) ? blockPreviews(tr.state) : previews;
+		return tr.docChanged || syntaxTree(tr.state) !== syntaxTree(tr.startState) || tr.state.facet(imageResolver) !== tr.startState.facet(imageResolver) || tr.effects.some((effect) => effect.is(refreshEstimates) || effect.is(imagesChanged)) ? blockPreviews(tr.state) : previews;
 	},
 	provide: (field) => EditorView.decorations.from(field)
 });
@@ -863,6 +946,10 @@ const previewTheme = EditorView.theme({
 		color: "#cf222e",
 		fontSize: "0.9em"
 	},
+	".sm-image-loading": {
+		color: "#818b98",
+		fontSize: "0.9em"
+	},
 	".sm-math-preview": {
 		textAlign: "center",
 		padding: previewSpacing,
@@ -1143,4 +1230,4 @@ function createEditor(parent, options = {}) {
 	});
 }
 //#endregion
-export { createEditor, followLink, imageResolver, insertRowBelow, keepLineSeparator, linkOpener, links, lookCss, markdownDecorations, markdownTheme, nextCell, previews, previousCell, simpleMark, tableEditing };
+export { createEditor, followLink, imageResolver, insertRowBelow, keepLineSeparator, linkOpener, links, lookCss, markdownDecorations, markdownTheme, nextCell, previews, previousCell, refreshImages, simpleMark, tableEditing };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simple-mark/codemirror",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "description": "CodeMirror 6 editor that styles Markdown without hiding its syntax.",
   "license": "MIT",
   "type": "module",
@@ -28,7 +28,7 @@
     "@codemirror/state": "^6.7.6",
     "@codemirror/view": "^6.43.15",
     "@lezer/common": "^1.5.3",
-    "@simple-mark/math": "^0.3.3",
-    "@simple-mark/model": "^0.3.3"
+    "@simple-mark/math": "^0.3.5",
+    "@simple-mark/model": "^0.3.5"
   }
 }