@simple-mark/model 0.3.4 → 0.3.5

package/README.md

@@ -7,7 +7,8 @@ or a canvas renderer.
 - Parses CommonMark + GFM + `$math$` (Lezer) into **styled ranges**: line styles (headings,
   quotes, code blocks, tables, …) and non-overlapping inline spans (strong, em, code, link,
   and `mark` for the syntax characters, which stay visible and dimmed).
-- A **theme** as plain data, and `resolveLook` to turn styles into font/color properties.
+- A **theme** as plain data (the default follows GitHub's Markdown styles), and `resolveLook` /
+  `resolveLineLook` to turn styles into font, color and line properties.
 - **Tables**: display width (Korean, Chinese, Japanese count as two columns), row splitting,
   and re-aligning a table by padding its cells.
 

package/index.d.ts

@@ -159,6 +159,8 @@ interface Look {
   color?: string;
   /** Behind the styled text only (e.g. inline code). */
   background?: string;
+  /** Corner radius of `background`, in em of the line's font. */
+  radius?: number;
   strike?: boolean;
   underline?: boolean;
 }
@@ -166,9 +168,33 @@ interface Look {
 interface LineLook extends Look {
   /** Behind the full width of the line (e.g. code blocks). */
   lineBackground?: string;
-  /** A bar along the left edge of the line (e.g. quotes). */
+  /** Corner radius of the block's `lineBackground` (top of its first line, bottom of its last), in em. */
+  lineRadius?: number;
+  /** A bar along the left edge of the line (e.g. quotes), `STROKES.bar` wide. */
   borderLeft?: string;
+  /** Space before the text, in em of the base font. Nested blocks add up (code in a quote). */
+  indent?: number;
+  /** A line under the block's last line (h1, h2), `STROKES.border` thick. */
+  borderBottom?: string;
+  /** A line across the middle of the line (horizontal rules), `STROKES.rule` thick. */
+  rule?: string;
 }
+/** A line's look with its blocks' edges applied: `lineRadius` becomes the corners this line rounds. */
+interface ResolvedLineLook extends Omit<LineLook, 'lineRadius'> {
+  radiusTop?: number;
+  radiusBottom?: number;
+}
+/** Which of a line's blocks start and end on it. */
+interface BlockEdges {
+  first: Iterable<BlockStyle>;
+  last: Iterable<BlockStyle>;
+}
+/** Widths of bars and lines, in em of the base font (1px and 4px at 16px, as GitHub). */
+export declare const STROKES: {
+  readonly bar: 0.25;
+  readonly border: number;
+  readonly rule: 0.25;
+};
 interface Theme {
   fontFamily: string;
   monospaceFamily: string;
@@ -177,9 +203,12 @@ interface Theme {
   inline: Record<InlineStyle, Look>;
 }
 export declare const defaultTheme: Theme;
-/** The look of a line with these block styles (any order). */
-export declare function resolveLineLook(blocks: Iterable<BlockStyle>, theme?: Theme): LineLook;
+/**
+ * The look of a line with these block styles (any order). `edges` tells which blocks start and
+ * end on the line (for corners and bottom borders); without it every block is one line long.
+ */
+export declare function resolveLineLook(blocks: Iterable<BlockStyle>, theme?: Theme, edges?: BlockEdges): ResolvedLineLook;
 /** The look of text with these block and inline styles (any order). */
 export declare function resolveLook(blocks: Iterable<BlockStyle>, inline: Iterable<InlineStyle>, theme?: Theme): Look;
 //#endregion
-export type { BlockRange, BlockStyle, ColumnAlign, ImageSource, InlineStyle, LineLook, LinkAt, Look, MarkdownStyles, PreviewBlock, RenderedTable, RowCell, Span, Table, Theme };
+export type { BlockEdges, BlockRange, BlockStyle, ColumnAlign, ImageSource, InlineStyle, LineLook, LinkAt, Look, MarkdownStyles, PreviewBlock, RenderedTable, ResolvedLineLook, RowCell, Span, Table, Theme };

package/index.js

@@ -630,57 +630,74 @@ function renderTable(table) {
 }
 //#endregion
 //#region packages/model/src/theme.ts
+/** Widths of bars and lines, in em of the base font (1px and 4px at 16px, as GitHub). */
+const STROKES = {
+	bar: .25,
+	border: 1 / 16,
+	rule: .25
+};
+const muted = "#59636e";
+const border = "#d1d9e0";
+const subtleBorder = "#d1d9e0b3";
+const codeBackground = "#f6f8fa";
 const defaultTheme = {
 	fontFamily: "system-ui, -apple-system, \"Segoe UI\", \"Noto Sans KR\", sans-serif",
 	monospaceFamily: "\"D2Coding\", \"Noto Sans Mono CJK KR\", ui-monospace, \"SFMono-Regular\", Menlo, Consolas, monospace",
 	color: "#1f2328",
 	block: {
 		quote: {
-			color: "#59636e",
-			borderLeft: "#d1d9e0"
+			color: muted,
+			borderLeft: border,
+			indent: 1
 		},
 		codeblock: {
 			monospace: true,
-			lineBackground: "#f6f8fa"
+			lineBackground: codeBackground,
+			lineRadius: 6 / 16,
+			indent: 1
 		},
 		mathblock: {
 			monospace: true,
 			color: "#6639ba"
 		},
 		table: { monospace: true },
-		tableHeader: { fontWeight: 700 },
-		tableRowAlt: { lineBackground: "#f6f8fa" },
-		hr: {},
+		tableHeader: { fontWeight: 600 },
+		tableRowAlt: { lineBackground: codeBackground },
+		hr: { rule: border },
 		h1: {
-			fontScale: 1.6,
-			fontWeight: 700
+			fontScale: 2,
+			fontWeight: 600,
+			borderBottom: subtleBorder
 		},
 		h2: {
-			fontScale: 1.4,
-			fontWeight: 700
+			fontScale: 1.5,
+			fontWeight: 600,
+			borderBottom: subtleBorder
 		},
 		h3: {
-			fontScale: 1.2,
-			fontWeight: 700
+			fontScale: 1.25,
+			fontWeight: 600
 		},
-		h4: {
-			fontScale: 1.1,
-			fontWeight: 700
+		h4: { fontWeight: 600 },
+		h5: {
+			fontScale: .875,
+			fontWeight: 600
 		},
-		h5: { fontWeight: 700 },
 		h6: {
-			fontWeight: 700,
-			color: "#59636e"
+			fontScale: .85,
+			fontWeight: 600,
+			color: muted
 		}
 	},
 	inline: {
 		link: { color: "#0969da" },
-		strong: { fontWeight: 700 },
+		strong: { fontWeight: 600 },
 		em: { italic: true },
 		strike: { strike: true },
 		code: {
 			monospace: true,
-			background: "rgba(129, 139, 152, 0.15)"
+			background: "#818b981f",
+			radius: 6 / 16
 		},
 		math: {
 			monospace: true,
@@ -699,19 +716,38 @@ const defaultTheme = {
 		}
 	}
 };
-/** The look of a line with these block styles (any order). */
-function resolveLineLook(blocks, theme = defaultTheme) {
+/**
+* The look of a line with these block styles (any order). `edges` tells which blocks start and
+* end on the line (for corners and bottom borders); without it every block is one line long.
+*/
+function resolveLineLook(blocks, theme = defaultTheme, edges) {
 	const present = new Set(blocks);
+	const first = edges ? new Set(edges.first) : present;
+	const last = edges ? new Set(edges.last) : present;
 	const look = {};
-	for (const style of BLOCK_STYLES) if (present.has(style)) Object.assign(look, theme.block[style]);
+	let indent = 0;
+	for (const style of BLOCK_STYLES) {
+		if (!present.has(style)) continue;
+		const { lineRadius, borderBottom, indent: own, ...rest } = theme.block[style];
+		Object.assign(look, rest);
+		indent += own ?? 0;
+		if (borderBottom !== void 0 && last.has(style)) look.borderBottom = borderBottom;
+		if (rest.lineBackground !== void 0) {
+			delete look.radiusTop;
+			delete look.radiusBottom;
+			if (lineRadius && first.has(style)) look.radiusTop = lineRadius;
+			if (lineRadius && last.has(style)) look.radiusBottom = lineRadius;
+		}
+	}
+	if (indent) look.indent = indent;
 	return look;
 }
 /** The look of text with these block and inline styles (any order). */
 function resolveLook(blocks, inline, theme = defaultTheme) {
-	const { lineBackground: _bg, borderLeft: _border, ...look } = resolveLineLook(blocks, theme);
+	const { lineBackground: _bg, borderLeft: _bar, indent: _indent, borderBottom: _border, rule: _rule, radiusTop: _top, radiusBottom: _bottom, ...look } = resolveLineLook(blocks, theme);
 	const present = new Set(inline);
 	for (const style of INLINE_STYLES) if (present.has(style)) Object.assign(look, theme.inline[style]);
 	return look;
 }
 //#endregion
-export { BLOCK_STYLES, INLINE_STYLES, cellAt, charWidth, defaultTheme, displayWidth, flattenSpans, headingAnchors, headingSlug, linkAt, linkKind, markdownExtensions, markdownParser, markdownStyles, mathSource, parseTable, previewBlocks, renderTable, resolveLineLook, resolveLook, rowLine, splitRow };
+export { BLOCK_STYLES, INLINE_STYLES, STROKES, cellAt, charWidth, defaultTheme, displayWidth, flattenSpans, headingAnchors, headingSlug, linkAt, linkKind, markdownExtensions, markdownParser, markdownStyles, mathSource, parseTable, previewBlocks, renderTable, resolveLineLook, resolveLook, rowLine, splitRow };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simple-mark/model",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "description": "Markdown parsing and styling model shared by every renderer. Pure TypeScript, no DOM.",
   "license": "MIT",
   "type": "module",