@simple-mark/codemirror 0.3.2 → 0.3.4

package/index.d.ts

@@ -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. */
@@ -84,7 +88,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

@@ -5,18 +5,24 @@ import { Decoration, EditorView, ViewPlugin, WidgetType, hoverTooltip, keymap, s
 import { 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. */
@@ -252,10 +258,12 @@ 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 keepLine = look.monospace !== void 0 || look.fontScale !== void 0;
 			deco = Decoration.mark({
 				class: styles.map((s) => `sm-${s}`).join(" "),
 				attributes: {
-					style: lookCss(resolveLook([], styles, this.theme), this.theme),
+					style: lookCss(look, this.theme) + (keepLine ? "; line-height: 0" : ""),
 					...linked ? { title: `${followKeyName}+Click to open` } : {}
 				}
 			});
@@ -620,9 +628,10 @@ const heightHints = StateField.define({
 	},
 	provide: (field) => EditorView.decorations.from(field)
 });
+const hintTheme = EditorView.baseTheme({ ".sm-height-hint + .cm-widgetBuffer": { verticalAlign: "top" } });
 /** Better height estimates for headings and wrapping lines that are not drawn yet. */
 function lineHeightHints() {
-	return heightHints;
+	return [heightHints, hintTheme];
 }
 //#endregion
 //#region packages/codemirror/src/previews.ts
@@ -684,7 +693,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,
@@ -729,14 +746,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++;
@@ -798,7 +815,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)
 });
@@ -860,6 +877,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,
@@ -1140,4 +1161,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.2",
+  "version": "0.3.4",
   "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.2",
-    "@simple-mark/model": "^0.3.2"
+    "@simple-mark/math": "^0.3.4",
+    "@simple-mark/model": "^0.3.4"
   }
 }