@simple-mark/codemirror 0.3.4 → 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 {
@@ -40,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;
@@ -49,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;

package/index.js

@@ -2,7 +2,7 @@ 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; undefined while the host is still loading. */
@@ -129,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();
@@ -186,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;
@@ -241,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);
 		}
@@ -258,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(" "),

package/package.json

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