wehub-resource-sync
364 lines
19 KiB
Swift
364 lines
19 KiB
Swift
import AppKit
|
||
|
||
// MARK: - HTMLTheme
|
||
//
|
||
// Emits the CSS for Read mode / PDF export from the *same* `EditorTheme` and
|
||
// `CalloutStyle` models the editor renders from, so the two can't drift. The
|
||
// theme is the single source of truth for the values it carries (body font/size,
|
||
// accent, code color, line/paragraph spacing, callout colors); spacing for
|
||
// elements the theme doesn't model (headings, list indent) uses tasteful
|
||
// document defaults.
|
||
//
|
||
// Colors are resolved for one appearance (`dark`); the Read view re-renders when
|
||
// the system appearance flips.
|
||
enum HTMLTheme {
|
||
|
||
@MainActor
|
||
static func css(_ theme: EditorTheme,
|
||
callouts: [String: CalloutStyle],
|
||
dark: Bool,
|
||
maxContentWidthPoints: Double = .greatestFiniteMagnitude) -> String {
|
||
let bg = dark ? "#1e1e1e" : "#ffffff"
|
||
let fg = dark ? "#e6e6e6" : "#1a1a1a"
|
||
let faint = dark ? "#9a9a9a" : "#6a6a6a"
|
||
let rule = dark ? "#3a3a3a" : "#e0e0e0"
|
||
let codeBg = dark ? "#2a2a2a" : "#f4f4f4"
|
||
|
||
// line-height: editor `NSParagraphStyle.lineSpacing` adds extra points
|
||
// *between* lines on top of the font's natural leading (~1.2×). The CSS
|
||
// equivalent is 1.2 + (lineSpacing / fontSize).
|
||
let lineHeight = 1.2 + theme.lineSpacing / theme.fontSize
|
||
|
||
// CSS px and AppKit points are both device-independent, so the editor's
|
||
// physical cap (EditorTextView.maxContentWidthPoints) carries over as-is.
|
||
// A huge/infinite value means "uncapped" in the editor too; `none` skips
|
||
// the constraint instead of emitting an unusable giant number.
|
||
let pageMaxWidth = maxContentWidthPoints < 100_000
|
||
? "\(trim(CGFloat(maxContentWidthPoints)))px" : "none"
|
||
|
||
return """
|
||
:root {
|
||
--body-font: \(cssFontStack(theme.fontName, generic: "serif"));
|
||
--body-size: \(trim(theme.fontSize))px;
|
||
--mono-font: \(cssFontStack(theme.monospaceFontName.isEmpty ? "ui-monospace" : theme.monospaceFontName, generic: "monospace"));
|
||
--mono-size: \(trim(theme.monospaceFontSize))px;
|
||
--accent: \(theme.linkBlueHex);
|
||
--code: \(theme.codeHex);
|
||
--bg: \(bg);
|
||
--fg: \(fg);
|
||
--faint: \(faint);
|
||
--rule: \(rule);
|
||
--code-bg: \(codeBg);
|
||
--marker: \(resolvedRGBA(.tertiaryLabelColor, dark: dark));
|
||
--check-fill: \(resolvedRGBA(.controlAccentColor, dark: dark));
|
||
--line-height: \(trim(lineHeight));
|
||
--para-space: \(trim(max(theme.paragraphSpacingBefore, 0)))px;
|
||
--page-max-width: \(pageMaxWidth);
|
||
}
|
||
\(calloutVars(callouts, dark: dark))
|
||
\(staticRules)
|
||
\(codeTokenRules(dark: dark))
|
||
"""
|
||
}
|
||
|
||
// MARK: Code syntax colors
|
||
|
||
/// `.tok-*` color rules for fenced code blocks, from the shared
|
||
/// `CodeSyntaxPalette` so Read mode matches the editor token-for-token. The
|
||
/// `pre code` rule overrides the static `var(--fg)` so plain (un-tokenized)
|
||
/// code uses the palette's plain color too, like the editor.
|
||
private static func codeTokenRules(dark: Bool) -> String {
|
||
func rule(_ selector: String, _ type: CodeHighlighter.TokenType?) -> String {
|
||
"\(selector) { color: \(CodeSyntaxPalette.hex(type, dark: dark)); }"
|
||
}
|
||
return [
|
||
rule("pre code", nil),
|
||
rule("pre code .tok-keyword", .keyword),
|
||
rule("pre code .tok-type", .type),
|
||
rule("pre code .tok-string", .string),
|
||
rule("pre code .tok-number", .number),
|
||
rule("pre code .tok-comment", .comment),
|
||
rule("pre code .tok-function", .function),
|
||
].joined(separator: "\n")
|
||
}
|
||
|
||
// MARK: Callout custom properties
|
||
|
||
@MainActor
|
||
private static func calloutVars(_ callouts: [String: CalloutStyle], dark: Bool) -> String {
|
||
// De-dup styles shared by aliases: emit one rule block per type key.
|
||
var out = ""
|
||
for type in callouts.keys.sorted() {
|
||
let style = callouts[type]!
|
||
let accent = style.accentHex(dark: dark)
|
||
let border = style.resolvedBorderHex(dark: dark)
|
||
let bg = style.explicitBackgroundHex(dark: dark)
|
||
?? rgba(accent, alpha: style.backgroundAlpha)
|
||
out += """
|
||
.callout-\(type) {
|
||
--c-accent: \(accent);
|
||
--c-border: \(border);
|
||
--c-bg: \(bg);
|
||
--c-border-width: \(trim(style.borderWidth))px;
|
||
\(borderEdgeRules(style.borderEdges))
|
||
}
|
||
|
||
"""
|
||
}
|
||
return out
|
||
}
|
||
|
||
private static func borderEdgeRules(_ edges: CalloutStyle.Edges) -> String {
|
||
var parts: [String] = []
|
||
if edges.contains(.left) { parts.append("border-left: var(--c-border-width) solid var(--c-border);") }
|
||
if edges.contains(.top) { parts.append("border-top: var(--c-border-width) solid var(--c-border);") }
|
||
if edges.contains(.right) { parts.append("border-right: var(--c-border-width) solid var(--c-border);") }
|
||
if edges.contains(.bottom) { parts.append("border-bottom: var(--c-border-width) solid var(--c-border);") }
|
||
return parts.joined(separator: " ")
|
||
}
|
||
|
||
// MARK: Static element rules
|
||
|
||
private static let staticRules = """
|
||
* { box-sizing: border-box; }
|
||
html { -webkit-text-size-adjust: 100%; }
|
||
body {
|
||
font-family: var(--body-font);
|
||
font-size: var(--body-size);
|
||
line-height: var(--line-height);
|
||
color: var(--fg);
|
||
background: var(--bg);
|
||
margin: 0;
|
||
padding: 48px 24px;
|
||
}
|
||
.page { max-width: var(--page-max-width); margin: 0 auto; }
|
||
/* Styled-source spacing: paragraphs and blocks get a full line's breathing
|
||
room, so the cadence feels like a clean, readable version of Edit mode
|
||
rather than a collapsed publication layout. */
|
||
p { margin: 0 0 1em; }
|
||
h1, h2, h3, h4, h5, h6 { line-height: 1.25; font-weight: 600; margin: 1.4em 0 0.5em; }
|
||
h1 { font-size: 1.9em; } h2 { font-size: 1.55em; } h3 { font-size: 1.3em; }
|
||
h4 { font-size: 1.1em; } h5 { font-size: 1em; } h6 { font-size: 0.9em; color: var(--faint); }
|
||
:is(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; }
|
||
a { color: var(--accent); text-decoration: underline; }
|
||
code { font-family: var(--mono-font); font-size: 0.92em; color: var(--code);
|
||
background: var(--code-bg); padding: 0.1em 0.35em; border-radius: 4px; }
|
||
pre { background: var(--code-bg); padding: 12px 14px; border-radius: 8px; overflow-x: auto;
|
||
/* tab-size: browsers default to 8; match the common editor convention of 4. */
|
||
tab-size: 4; -moz-tab-size: 4; }
|
||
pre code { color: var(--fg); background: none; padding: 0; font-size: var(--mono-size); }
|
||
blockquote { margin: 1em 0; padding: 0.5em 1em; border-left: 3px solid var(--rule); color: var(--faint); }
|
||
/* Without this, the 1em bottom margin on the last <p> inside a blockquote
|
||
creates asymmetric vertical padding — the blockquote looks heavier at the
|
||
bottom than at the top. Reset it so padding alone controls the spacing. */
|
||
blockquote > p:last-child { margin-bottom: 0; }
|
||
/* A nested blockquote that is the last child of its parent blockquote (or
|
||
callout body) would otherwise leave 1em of extra space below itself inside
|
||
the parent's padding. Collapse it. */
|
||
blockquote > blockquote:last-child,
|
||
.callout-body > blockquote:last-child { margin-bottom: 0; }
|
||
hr { border: none; border-top: 1px solid var(--rule); margin: 1.6em 0; }
|
||
mark { background: rgba(255, 200, 0, 0.3); color: inherit; padding: 0 0.1em; }
|
||
/* Whitelisted inline HTML rendered in Read mode (see HTMLRenderer
|
||
sanitizeInlineHTML). <u>/<mark> use the UA underline / the rule above;
|
||
<kbd> matches the editor's inline-key chrome, <sub>/<sup> get the standard
|
||
line-height-safe reset. */
|
||
kbd { font-family: var(--mono-font); font-size: 0.92em; background: var(--code-bg);
|
||
border: 1px solid var(--rule); border-radius: 4px; padding: 0.05em 0.4em; }
|
||
sub, sup { font-size: 0.75em; line-height: 0; position: relative; vertical-align: baseline; }
|
||
sup { top: -0.5em; }
|
||
sub { bottom: -0.25em; }
|
||
/* Footnotes (see HTMLRenderer.renderFootnotesSection): in-text `[^id]` refs
|
||
are plain (undecorated) superscript links; the bottom-of-page list is a
|
||
smaller, dimmer <ol> below its own <hr>, each entry ending in a backref
|
||
arrow to the in-text marker. */
|
||
sup.footnote-ref a { text-decoration: none; }
|
||
hr.footnotes-sep { margin-bottom: 0.8em; }
|
||
ol.footnotes { font-size: 0.85em; color: var(--faint); }
|
||
ol.footnotes li { margin: 0.4em 0; }
|
||
a.footnote-backref { text-decoration: none; margin-left: 0.2em; font-size: 0.9em; line-height: 1; }
|
||
/* Match the editor's list indentation: level-1 text begins at one marker
|
||
slot past the marker (~2.25em), and each nesting level steps in by one
|
||
slot (~1.25em). Same dot at every level, like Edit mode. */
|
||
/* Only direct children of .page and .callout-body get block margin (1em top
|
||
+ bottom) and the wider level-1 indent (2.25em). Nested lists inside list
|
||
items stay at 0 margin — otherwise each level compounds to large gaps. */
|
||
ul, ol { margin: 0; padding-left: 1.25em; }
|
||
.page > ul, .page > ol,
|
||
.callout-body > ul, .callout-body > ol { margin: 1em 0; padding-left: 2.25em; }
|
||
li > ul, li > ol { margin: 0; }
|
||
ul { list-style-type: disc; }
|
||
li { margin: 0.2em 0; }
|
||
li::marker { color: var(--marker); font-size: 0.85em; }
|
||
li > p { margin: 0; }
|
||
/* Task items: float the checkbox into the marker slot so the label and
|
||
wrapped lines sit at the same content edge as bullet/number text. The
|
||
negative margin-left pulls the checkbox into the list's padding area; the
|
||
nested <ul>/<ol> clears the float so it falls below.
|
||
Lucide checkbox (a tinted <svg>, see HTMLRenderer/LucideIcons): unchecked =
|
||
dim outlined circle (--marker, the editor's tertiaryLabelColor); checked =
|
||
disc filled in the system accent (--check-fill, matching the editor's
|
||
controlAccentColor) with a white check baked into the SVG. `currentColor`
|
||
in the SVG inherits from `color` below. */
|
||
li.task { list-style: none; }
|
||
li.task > .task-check {
|
||
/* Sized a bit larger than 1em so the Lucide circle (r=10 in a 24-box, so it
|
||
underfills) reads as big as the editor's checkbox. margin-left is roughly
|
||
-(width + margin-right) so the task TEXT starts at the content edge,
|
||
lining up with sibling bullet/number text; hand-tuned to -1.45em (a hair
|
||
less negative than the -1.5em that formula gives) so the marker centers
|
||
over the bullet/number column at every nesting level.
|
||
margin-top (0.1em) centers the box on the first text line's cap-height
|
||
center — tuned visually for Iowan Old Style at 16pt / line-height 1.45. A
|
||
font-agnostic fix would measure NSFont.ascender at render time and emit an
|
||
inline margin-top. */
|
||
float: left; width: 1.2em; height: 1.2em; line-height: 0;
|
||
margin-top: 0.1em;
|
||
margin-right: 0.3em;
|
||
margin-left: -1.45em;
|
||
}
|
||
li.task > .task-check svg { display: block; width: 1.2em; height: 1.2em; }
|
||
.task-check--unchecked { color: var(--marker); }
|
||
.task-check--checked { color: var(--check-fill); }
|
||
li.task--checked > p { opacity: 0.45; text-decoration: line-through; }
|
||
li.task > p { display: inline; margin: 0; }
|
||
li.task > ul, li.task > ol { clear: left; }
|
||
/* Contain the checkbox float within its own item. Without this, a task item
|
||
that has no nested list (the float is never cleared by a child ul/ol)
|
||
leaks its float onto the FOLLOWING sibling, shoving that item's bullet/
|
||
number marker to the right — so sibling markers stop lining up. */
|
||
li.task::after { content: ""; display: block; clear: both; }
|
||
.blank-line { height: calc(var(--body-size) * var(--line-height)); }
|
||
/* Tables keep their natural (content-driven) width and scroll horizontally
|
||
inside .table-wrap instead of squeezing columns or forcing cell text to
|
||
wrap — same idiom as `pre`'s overflow-x below. */
|
||
.table-wrap { overflow-x: auto; margin: 1em 0; }
|
||
table { border-collapse: collapse; }
|
||
th, td { border: 1px solid var(--rule); padding: 6px 10px; }
|
||
thead th { background: var(--code-bg); }
|
||
img { max-width: 100%; }
|
||
img.math { vertical-align: middle; }
|
||
.math-display { text-align: center; margin: 1em 0; }
|
||
/* Stand-in for a plain-http image, which never loads under ATS. */
|
||
.md-image-blocked { display: inline-flex; align-items: center; gap: 0.4em;
|
||
color: var(--faint); background: var(--code-bg);
|
||
border: 1px dashed var(--rule); border-radius: 6px;
|
||
padding: 0.3em 0.6em; font-size: 0.9em; }
|
||
.md-image-blocked svg { width: 1.1em; height: 1.1em; flex: 0 0 auto; }
|
||
|
||
/* Callouts: tinted box + colored title; the icon sits as a non-shrinking
|
||
flex child so a long custom title wraps under the title text, never under
|
||
the icon — the layout the TextKit editor can't achieve. */
|
||
/* Outer margin matches the gap between two consecutive <pre> blocks (UA
|
||
stylesheet gives pre { margin: 1em 0 }; collapsing → 1em gap). Using
|
||
the same value here means neighboring callouts look equally spaced. */
|
||
.callout { background: var(--c-bg); border-radius: 8px; padding: 10px 14px; margin: 1em 0; }
|
||
/* Icon sits at the top so it stays on the first line of a wrapped title; its
|
||
box is exactly one line tall and centers the glyph, so it lines up with the
|
||
first line's text rather than floating above it. */
|
||
.callout-title { display: flex; align-items: flex-start; gap: 0.3em;
|
||
font-weight: 600; color: var(--c-accent); }
|
||
.callout-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
|
||
height: calc(var(--body-size) * var(--line-height)); }
|
||
/* Lucide glyphs sit a touch low against the title's optical (cap-height)
|
||
center; nudge the icon up so it reads as centered with the title text. */
|
||
.callout-icon svg { width: 1em; height: 1em; transform: translateY(-0.06em); }
|
||
/* Per-glyph optical nudge: a few Lucide icons sit high in their 24-box, so
|
||
push them down a hair to read as centered against the title cap-height.
|
||
Aliases share an icon, so they get the same value. */
|
||
.callout-info .callout-icon, .callout-todo .callout-icon,
|
||
.callout-question .callout-icon, .callout-help .callout-icon, .callout-faq .callout-icon,
|
||
.callout-quote .callout-icon, .callout-cite .callout-icon { padding-top: 0.05em; }
|
||
.callout-warning .callout-icon, .callout-attention .callout-icon,
|
||
.callout-bug .callout-icon { padding-top: 0.06em; }
|
||
.callout-example .callout-icon { padding-top: 0.1em; }
|
||
.callout-success .callout-icon, .callout-check .callout-icon, .callout-done .callout-icon,
|
||
.callout-failure .callout-icon, .callout-fail .callout-icon,
|
||
.callout-missing .callout-icon { padding-top: 0.15em; }
|
||
.callout-title-text { flex: 1 1 auto; }
|
||
.callout-body { margin-top: 0.4em; }
|
||
/* A title-only callout still emits an empty body div; collapse its top margin
|
||
so the box doesn't carry the 0.4em title gap as dead space at the bottom. */
|
||
.callout-body:empty { margin-top: 0; }
|
||
/* Reduce paragraph spacing inside callout bodies so nested callouts and
|
||
body text don't sit too far apart. The full 1em bottom margin (from the
|
||
global <p> rule) + the nested callout's 0.5em top margin would give
|
||
1.5em gap — halving the paragraph bottom margin brings it to ~1em. */
|
||
.callout-body > p { margin-bottom: 0.5em; }
|
||
.callout-body > :first-child { margin-top: 0; }
|
||
.callout-body > :last-child { margin-bottom: 0; }
|
||
/* A callout that is the last child of a callout body (e.g. the nested TIP
|
||
inside the NOTE) has its top margin removed so the space above it is
|
||
governed only by the preceding element's bottom margin (0.5em for a <p>
|
||
from .callout-body > p), not the combined margin collapse of 1em. */
|
||
.callout-body > .callout:last-child { margin-top: 0; }
|
||
|
||
@media print {
|
||
body { padding: 0; }
|
||
/* QUIRK: WebKit strips background colors when printing by default (it
|
||
follows the user's browser setting), even though WKWebView.createPDF
|
||
keeps them. `print-color-adjust: exact` forces faithful color output
|
||
so callout backgrounds, code blocks, and highlights survive printing. */
|
||
* { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
||
.callout, pre, blockquote, .table-wrap, .math-display { break-inside: avoid; }
|
||
h1, h2, h3, h4, h5, h6 { break-after: avoid; }
|
||
thead { display: table-header-group; }
|
||
}
|
||
"""
|
||
|
||
// MARK: Helpers
|
||
|
||
/// A CSS font stack: the (possibly multi-word) macOS family name quoted, then
|
||
/// a system fallback and a generic. WKWebView resolves installed families
|
||
/// (e.g. "Iowan Old Style") by name; the generic guards the rest.
|
||
private static func cssFontStack(_ family: String, generic: String) -> String {
|
||
let trimmed = family.trimmingCharacters(in: .whitespaces)
|
||
if trimmed.isEmpty || trimmed == "ui-monospace" {
|
||
return "ui-monospace, \(generic)"
|
||
}
|
||
return "\"\(trimmed)\", -apple-system, \(generic)"
|
||
}
|
||
|
||
/// Resolves a (possibly dynamic/catalog) `NSColor` for the given appearance
|
||
/// to a CSS `rgba(...)`, preserving alpha. Used so list markers use the exact
|
||
/// same dim as the editor (`NSColor.tertiaryLabelColor`) and can't drift.
|
||
///
|
||
/// QUIRK: dynamic system colors like `tertiaryLabelColor` store a catalog
|
||
/// reference, not actual RGBA components — calling `usingColorSpace(.sRGB)`
|
||
/// on one outside a drawing context resolves to nil or returns the wrong
|
||
/// variant. `performAsCurrentDrawingAppearance` sets the appearance context
|
||
/// so the catalog resolves to the correct light or dark concrete color.
|
||
@MainActor
|
||
private static func resolvedRGBA(_ color: NSColor, dark: Bool) -> String {
|
||
var resolved = color
|
||
NSAppearance(named: dark ? .darkAqua : .aqua)?.performAsCurrentDrawingAppearance {
|
||
resolved = color.usingColorSpace(.sRGB) ?? color
|
||
}
|
||
guard let c = resolved.usingColorSpace(.sRGB) else {
|
||
return dark ? "rgba(235,235,245,0.25)" : "rgba(60,60,67,0.3)"
|
||
}
|
||
let r = Int((c.redComponent * 255).rounded())
|
||
let g = Int((c.greenComponent * 255).rounded())
|
||
let b = Int((c.blueComponent * 255).rounded())
|
||
return "rgba(\(r), \(g), \(b), \(trim(c.alphaComponent)))"
|
||
}
|
||
|
||
/// rgba(...) from a "#RRGGBB" hex and an alpha.
|
||
private static func rgba(_ hex: String, alpha: CGFloat) -> String {
|
||
guard let (r, g, b) = rgbComponents(hex) else { return hex }
|
||
return "rgba(\(r), \(g), \(b), \(trim(alpha)))"
|
||
}
|
||
|
||
private static func rgbComponents(_ hex: String) -> (Int, Int, Int)? {
|
||
var h = hex.trimmingCharacters(in: .whitespacesAndNewlines)
|
||
if h.hasPrefix("#") { h.removeFirst() }
|
||
guard h.count == 6, let rgb = UInt64(h, radix: 16) else { return nil }
|
||
return (Int((rgb >> 16) & 0xFF), Int((rgb >> 8) & 0xFF), Int(rgb & 0xFF))
|
||
}
|
||
|
||
/// Formats a CGFloat without a trailing ".0" so CSS reads cleanly.
|
||
private static func trim(_ v: CGFloat) -> String {
|
||
v == v.rounded() ? String(Int(v)) : String(format: "%g", v)
|
||
}
|
||
}
|