@simple-mark/codemirror 0.3.0 → 0.3.1

package/index.js

@@ -128,7 +128,7 @@ function lookCss(look, theme) {
 		css.push(`text-decoration: ${lines.join(" ") || "none"}`);
 	}
 	if (look.lineBackground !== void 0) css.push(`background-color: ${look.lineBackground}`);
-	if (look.borderLeft !== void 0) css.push(`box-shadow: inset 3px 0 0 ${look.borderLeft}`, "padding-left: 12px");
+	if (look.borderLeft !== void 0) css.push(`box-shadow: inset ${3 / 15}em 0 0 ${look.borderLeft}`, `padding-left: ${12 / 15}em`);
 	return css.join("; ");
 }
 const fontChecks = /* @__PURE__ */ new Map();
@@ -289,8 +289,26 @@ function loadMath() {
 function loadedMath() {
 	return loaded;
 }
-/** Gap between images on one line (CSS gap). */
-const IMAGE_GAP = 8;
+//#endregion
+//#region packages/codemirror/src/preview-heights.ts
+/**
+* Preview sizes in em of the editor's font: at 15px, 4px above and 8px below a preview, images
+* at most 320px tall and 8px apart. The same numbers as @simple-mark/canvas, so a canvas and the
+* editor agree at any font size (a canvas text may be 48 units tall).
+*/
+const PREVIEW_EM = {
+	top: 4 / 15,
+	bottom: 8 / 15,
+	imageMaxHeight: 320 / 15,
+	imageGap: 8 / 15,
+	radius: 4 / 15
+};
+/** Vertical padding of a preview in pixels, at the editor's font size. */
+function previewPadding() {
+	return (PREVIEW_EM.top + PREVIEW_EM.bottom) * layout.fontSize;
+}
+const imageMaxHeight = () => PREVIEW_EM.imageMaxHeight * layout.fontSize;
+const imageGap = () => PREVIEW_EM.imageGap * layout.fontSize;
 /** Editor facts the estimates depend on, measured by `previewLayout`. */
 const layout = {
 	contentWidth: 700,
@@ -375,7 +393,7 @@ function whenImageSized(src, then) {
 /** Gives an <img> its final layout size before its pixels arrive (CSS caps it at the width). */
 function reserveImageBox(img, size) {
 	img.style.aspectRatio = `${size.width} / ${size.height}`;
-	img.style.width = `${Math.min(size.width, 320 * size.width / size.height)}px`;
+	img.style.width = `${Math.min(size.width, imageMaxHeight() * size.width / size.height)}px`;
 }
 function probeImage(src) {
 	if (probing.has(src) || imageSizes.has(src) || typeof Image === "undefined") return;
@@ -384,7 +402,7 @@ function probeImage(src) {
 	watchImage(img, src);
 	img.src = src;
 }
-/** Displayed size of one image: fits the width, at most IMAGE_MAX_HEIGHT tall, never enlarged. */
+/** Displayed size of one image: fits the width, at most `imageMaxHeight` tall, never enlarged. */
 function imageBox(src) {
 	const errorLine = {
 		width: layout.contentWidth,
@@ -396,11 +414,11 @@ function imageBox(src) {
 		probeImage(src);
 		return {
 			width: layout.contentWidth,
-			height: 160
+			height: imageMaxHeight() / 2
 		};
 	}
 	if (size === null) return errorLine;
-	const scale = Math.min(1, layout.contentWidth / size.width, 320 / size.height);
+	const scale = Math.min(1, layout.contentWidth / size.width, imageMaxHeight() / size.height);
 	return {
 		width: size.width * scale,
 		height: size.height * scale
@@ -415,15 +433,15 @@ function imagesEstimate(key, srcs) {
 	let rowHeight = 0;
 	for (const src of srcs) {
 		const box = imageBox(src);
-		if (rowWidth > 0 && rowWidth + IMAGE_GAP + box.width > layout.contentWidth) {
-			total += rowHeight + IMAGE_GAP;
+		if (rowWidth > 0 && rowWidth + imageGap() + box.width > layout.contentWidth) {
+			total += rowHeight + imageGap();
 			rowWidth = 0;
 			rowHeight = 0;
 		}
-		rowWidth += (rowWidth > 0 ? IMAGE_GAP : 0) + box.width;
+		rowWidth += (rowWidth > 0 ? imageGap() : 0) + box.width;
 		rowHeight = Math.max(rowHeight, box.height);
 	}
-	return Math.round(total + rowHeight + 12);
+	return Math.round(total + rowHeight + previewPadding());
 }
 /** Renders queued formulas one at a time, so their heights are known before they are shown. */
 function renderQueuedMath() {
@@ -449,13 +467,13 @@ function mathEstimate(key, tex) {
 	const result = loadedMath()?.cachedMath(tex, true);
 	if (result?.svg !== void 0) {
 		const height = /height="([\d.]+)ex"/.exec(result.svg);
-		if (height) return Math.round(parseFloat(height[1]) * layout.exPx + 12);
-	} else if (result?.error !== void 0) return layout.lineHeight + 12;
+		if (height) return Math.round(parseFloat(height[1]) * layout.exPx + previewPadding());
+	} else if (result?.error !== void 0) return layout.lineHeight + previewPadding();
 	else {
 		mathQueue.add(tex);
 		renderQueuedMath();
 	}
-	return 3 * layout.lineHeight + 12;
+	return 3 * layout.lineHeight + previewPadding();
 }
 /** Measures the editor (content width, x-height, line height) and refreshes previews on news. */
 const previewLayout = ViewPlugin.fromClass(class {
@@ -649,7 +667,7 @@ var MathBlockWidget = class extends WidgetType {
 		const dom = document.createElement("div");
 		dom.className = "sm-math-preview";
 		dom.dataset["key"] = this.key;
-		dom.style.minHeight = `${this.estimate - 12}px`;
+		dom.style.minHeight = `${this.estimate - previewPadding()}px`;
 		renderInto(dom, this.tex, true, () => {
 			dom.style.minHeight = "";
 			view.requestMeasure();
@@ -752,7 +770,7 @@ var ImageWidget = class extends WidgetType {
 				settled();
 			};
 		}
-		if (unsized > 0) dom.style.minHeight = `${this.estimate - 12}px`;
+		if (unsized > 0) dom.style.minHeight = `${this.estimate - previewPadding()}px`;
 		if (waiting === 0) rememberHeight(view, this.key, dom);
 		return dom;
 	}
@@ -823,17 +841,20 @@ const hoverMathTooltip = hoverTooltip((view, pos) => {
 	const tooltip = mathTooltip(view.state, pos);
 	return tooltip && cursor?.pos === tooltip.pos ? null : tooltip;
 });
+const em = (value) => `${value}em`;
+const previewSpacing = `${em(PREVIEW_EM.top)} 0 ${em(PREVIEW_EM.bottom)}`;
+/** Sizes in em (see PREVIEW_EM), so previews scale with the text like on a canvas. */
 const previewTheme = EditorView.theme({
 	".sm-image-preview": {
 		display: "flex",
 		flexWrap: "wrap",
-		gap: "8px",
-		padding: "4px 0 8px"
+		gap: em(PREVIEW_EM.imageGap),
+		padding: previewSpacing
 	},
 	".sm-image-preview img": {
 		maxWidth: "100%",
-		maxHeight: "320px",
-		borderRadius: "4px"
+		maxHeight: em(PREVIEW_EM.imageMaxHeight),
+		borderRadius: em(PREVIEW_EM.radius)
 	},
 	".sm-image-error, .sm-math-error": {
 		color: "#cf222e",
@@ -841,7 +862,7 @@ const previewTheme = EditorView.theme({
 	},
 	".sm-math-preview": {
 		textAlign: "center",
-		padding: "4px 0 8px",
+		padding: previewSpacing,
 		overflowX: "auto",
 		overflowY: "hidden"
 	},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simple-mark/codemirror",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "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.0",
-    "@simple-mark/model": "^0.3.0"
+    "@simple-mark/math": "^0.3.1",
+    "@simple-mark/model": "^0.3.1"
   }
 }