rapier-markdown-kit 1.1.99 → 1.1.102
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +10 -2
- package/README.md +42 -8
- package/dist/kit/export-fonts.mjs +403 -0
- package/dist/kit/ledger/data.mjs +1 -1
- package/dist/kit/ledger/format.mjs +12 -5
- package/dist/kit/ledger/hash.mjs +16 -22
- package/dist/kit/ledger/history.mjs +59 -276
- package/dist/kit/ledger/inverse-source.mjs +316 -0
- package/dist/kit/ledger/journal-records.mjs +116 -12
- package/dist/kit/ledger/merge.mjs +7 -4
- package/dist/kit/ledger/transport.mjs +123 -19
- package/dist/kit/pdf-glyphs.mjs +159 -0
- package/dist/kit/pdf-vectors.mjs +204 -0
- package/dist/kit/print-capitals.mjs +85 -0
- package/dist/kit/rapier-ledger.mjs +2 -2
- package/dist/kit/render-entry.mjs +1 -0
- package/dist/kit/render-ink.mjs +132 -0
- package/dist/kit/render-markdown.mjs +71 -17
- package/dist/kit/render-print.mjs +208 -60
- package/dist/kit/render-sanitize.mjs +23 -7
- package/dist/kit/render-styles.mjs +8 -12
- package/dist/kit/render.mjs +365 -133
- package/dist/layout/model.mjs +26 -20
- package/dist/layout/typography.mjs +364 -0
- package/dist/packages/rapier-diff/LICENSE +21 -0
- package/dist/packages/rapier-diff/index.mjs +610 -0
- package/dist/spec/document-fonts.mjs +244 -0
- package/dist/spec/document-settings.mjs +494 -0
- package/dist/spec/frontmatter.mjs +30 -0
- package/dist/spec/html-blocks.mjs +143 -0
- package/dist/spec/md-assets.mjs +77 -5
- package/dist/spec/md-layout.mjs +7 -3
- package/dist/spec/md-marks.mjs +114 -8
- package/package.json +1 -1
- package/style.css +110 -52
- package/dist/agent/diff.mjs +0 -52
package/dist/layout/model.mjs
CHANGED
|
@@ -85,30 +85,36 @@ export function mapFragment(run, fragment) {
|
|
|
85
85
|
// The line a picture is measured in (`lines`, spec/md-layout.mjs): the anchor's line box, its type's cap height, and where that
|
|
86
86
|
// cap height stands in the first line box (the half-leading model: the baseline sits half the leading below the box's top plus
|
|
87
87
|
// the ascent). Read from the font as the page lays it out, so a text size or a line spacing moves the picture with the words.
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
const
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
let
|
|
97
|
-
if (!
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
88
|
+
export function createLineMeasurer() {
|
|
89
|
+
const fontMetrics = new Map(), measurers = new WeakMap();
|
|
90
|
+
const finite = value => typeof value === 'number' && Number.isFinite(value);
|
|
91
|
+
return function lineMetrics(element) {
|
|
92
|
+
const view = element?.ownerDocument?.defaultView;
|
|
93
|
+
if (!view) return null;
|
|
94
|
+
const computed = view.getComputedStyle(element), size = parseFloat(computed.fontSize) || 16;
|
|
95
|
+
const font = computed.fontStyle + ' ' + computed.fontWeight + ' ' + size + 'px ' + computed.fontFamily;
|
|
96
|
+
let metrics = fontMetrics.get(font);
|
|
97
|
+
if (!metrics) {
|
|
98
|
+
let context = measurers.get(element.ownerDocument);
|
|
99
|
+
if (!context) measurers.set(element.ownerDocument, context = element.ownerDocument.createElement('canvas').getContext('2d'));
|
|
100
|
+
if (!context) return null;
|
|
101
|
+
context.font = font;
|
|
102
|
+
const capital = context.measureText('H');
|
|
103
|
+
metrics = {ascent: capital.fontBoundingBoxAscent, descent: capital.fontBoundingBoxDescent, cap: capital.actualBoundingBoxAscent};
|
|
104
|
+
if (![metrics.ascent, metrics.descent, metrics.cap].every(finite) || !(metrics.cap > 0)) return null;
|
|
105
|
+
// A face still loading measures as its fallback: keep the answer only once the face is in.
|
|
106
|
+
if (element.ownerDocument.fonts?.check?.(font) !== false && element.ownerDocument.fonts?.status !== 'loading') fontMetrics.set(font, metrics);
|
|
107
|
+
}
|
|
108
|
+
const line = parseFloat(computed.lineHeight) || metrics.ascent + metrics.descent;
|
|
109
|
+
return {line, cap: metrics.cap, capTop: (line - metrics.ascent - metrics.descent) / 2 + metrics.ascent - metrics.cap};
|
|
110
|
+
};
|
|
108
111
|
}
|
|
109
112
|
|
|
113
|
+
export const lineMetrics = createLineMeasurer();
|
|
114
|
+
|
|
110
115
|
// `lines` tall: from the first line's cap height to the Nth line's baseline, N - 1 lines and one cap.
|
|
111
116
|
export function linesHeight(lines, metrics) {
|
|
117
|
+
const finite = value => typeof value === 'number' && Number.isFinite(value);
|
|
112
118
|
const height = Number.isInteger(lines) && lines > 0 && metrics && finite(metrics.line) && finite(metrics.cap)
|
|
113
119
|
? (lines - 1) * metrics.line + metrics.cap : NaN;
|
|
114
120
|
return height > 0 ? height : null;
|
|
@@ -0,0 +1,364 @@
|
|
|
1
|
+
// SPDX-License-Identifier: MIT
|
|
2
|
+
|
|
3
|
+
// Layout projections keep the original text in place. The factory also runs in an exported page.
|
|
4
|
+
export function createTypography() {
|
|
5
|
+
const mark = 'data-rapier-typography', boundary = mark + '-break', hang = mark + '-hang';
|
|
6
|
+
const protectedInitial = mark + '-protected-initial';
|
|
7
|
+
const exclude = 'code,kbd,samp,math,script,style,.math-rendered,[hidden]';
|
|
8
|
+
const candidates = 'p[data-md-hyphens="auto"],p[data-md-lines],p[data-md-hanging="on"],p[' + mark + ']';
|
|
9
|
+
const properties = ['--md-drop-cap-font', '--md-hang-start'];
|
|
10
|
+
const states = new WeakMap(), documents = new WeakMap();
|
|
11
|
+
const graphemes = new Intl.Segmenter(undefined, {granularity: 'grapheme'});
|
|
12
|
+
const opening = /^[\p{Ps}\p{Pi}\p{Pf}"']+$/u;
|
|
13
|
+
const closing = /^[\p{Pe}\p{Pi}\p{Pf}"'.,;:!?]+$/u;
|
|
14
|
+
|
|
15
|
+
function initialRange(input) {
|
|
16
|
+
const text = typeof input === 'string' ? input : input?.textContent;
|
|
17
|
+
if (typeof text !== 'string') return null;
|
|
18
|
+
const start = /^\s*/u.exec(text)[0].length;
|
|
19
|
+
if (start === text.length) return null;
|
|
20
|
+
let end = start;
|
|
21
|
+
for (const part of graphemes.segment(text.slice(start))) {
|
|
22
|
+
if (/^\s/u.test(part.segment)) break;
|
|
23
|
+
end = start + part.index + part.segment.length;
|
|
24
|
+
if (!opening.test(part.segment)) break;
|
|
25
|
+
}
|
|
26
|
+
return end > start ? {start, end, text: text.slice(start, end)} : null;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
function paragraphs(root, selector = candidates) {
|
|
30
|
+
return [...(root?.matches?.(selector) ? [root] : []), ...(root?.querySelectorAll?.(selector) || [])];
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
function runs(paragraph) {
|
|
34
|
+
const walker = paragraph.ownerDocument.createTreeWalker(paragraph, 4), result = [];
|
|
35
|
+
let start = 0;
|
|
36
|
+
while (walker.nextNode()) {
|
|
37
|
+
const node = walker.currentNode;
|
|
38
|
+
if (node.length) result.push({node, start, end: start + node.length});
|
|
39
|
+
start += node.length;
|
|
40
|
+
}
|
|
41
|
+
return result;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
function point(items, offset, atEnd = false) {
|
|
45
|
+
let lo = 0, hi = items.length;
|
|
46
|
+
while (lo < hi) {
|
|
47
|
+
const middle = lo + hi >>> 1;
|
|
48
|
+
if (items[middle].end < offset || !atEnd && items[middle].end === offset) lo = middle + 1;
|
|
49
|
+
else hi = middle;
|
|
50
|
+
}
|
|
51
|
+
const item = items[Math.min(lo, items.length - 1)];
|
|
52
|
+
return item ? {node: item.node, offset: Math.max(0, Math.min(item.node.length, offset - item.start))} : null;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
// This data-only guard is safe on an active edit surface, including during composition.
|
|
56
|
+
function protectInitial(root) {
|
|
57
|
+
for (const paragraph of paragraphs(root, 'p[data-md-lines],p[data-md-hanging="on"],p[' + protectedInitial + ']')) {
|
|
58
|
+
const initial = initialRange(paragraph), letter = initial && [...graphemes.segment(initial.text)].at(-1);
|
|
59
|
+
const at = initial && point(runs(paragraph), initial.start + letter.index);
|
|
60
|
+
const enabled = paragraph.hasAttribute('data-md-lines') || paragraph.getAttribute('data-md-hanging') === 'on';
|
|
61
|
+
paragraph.toggleAttribute(protectedInitial, Boolean(enabled && at?.node.parentElement?.closest(exclude)));
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
function range(items, start, end) {
|
|
66
|
+
const a = point(items, start), b = point(items, end, true);
|
|
67
|
+
if (!a || !b) return null;
|
|
68
|
+
const value = a.node.ownerDocument.createRange();
|
|
69
|
+
value.setStart(a.node, a.offset); value.setEnd(b.node, b.offset);
|
|
70
|
+
return value;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
function boxes(items, start, end, height = Infinity) {
|
|
74
|
+
return [...(range(items, start, end)?.getClientRects?.() || [])]
|
|
75
|
+
.filter(box => box.width > .05 && box.height > 0 && box.height <= height);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
function sameLine(a, b) {
|
|
79
|
+
return Math.min(a.bottom, b.bottom) - Math.max(a.top, b.top) > Math.min(a.height, b.height) * .35;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
function ordinaryHeight(paragraph, style) {
|
|
83
|
+
return paragraph.hasAttribute('data-md-lines') ? Math.max(parseFloat(style.lineHeight) || 0, parseFloat(style.fontSize) * 1.7) : Infinity;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
// Returns a textContent coordinate, independent of markup, selected fonts or a floated initial.
|
|
87
|
+
function firstLineEnd(paragraph) {
|
|
88
|
+
if (!paragraph?.isConnected || !paragraph.getClientRects?.().length) return null;
|
|
89
|
+
const view = paragraph.ownerDocument.defaultView;
|
|
90
|
+
if (!view) return null;
|
|
91
|
+
const style = view.getComputedStyle(paragraph), height = ordinaryHeight(paragraph, style);
|
|
92
|
+
const items = runs(paragraph), text = paragraph.textContent;
|
|
93
|
+
const initial = paragraph.hasAttribute('data-md-lines') ? initialRange(text) : null;
|
|
94
|
+
let first = null, end = null;
|
|
95
|
+
for (const part of graphemes.segment(text)) {
|
|
96
|
+
if (initial && part.index < initial.end) continue;
|
|
97
|
+
if (/^\s+$/u.test(part.segment)) continue;
|
|
98
|
+
const rects = boxes(items, part.index, part.index + part.segment.length, height);
|
|
99
|
+
if (!rects.length) continue;
|
|
100
|
+
const box = rects[rects.length - 1];
|
|
101
|
+
if (!first) first = box;
|
|
102
|
+
if (sameLine(first, box)) end = part.index + part.segment.length;
|
|
103
|
+
else if (box.top >= first.bottom - Math.min(box.height, first.height) * .35) break;
|
|
104
|
+
}
|
|
105
|
+
return end ?? initial?.end ?? null;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
function setProperty(paragraph, state, name, value) {
|
|
109
|
+
if (!state.properties.has(name)) state.properties.set(name, [paragraph.style.getPropertyValue(name), paragraph.style.getPropertyPriority(name)]);
|
|
110
|
+
paragraph.style.setProperty(name, value);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
function selectionBefore(paragraph) {
|
|
114
|
+
const selection = paragraph.ownerDocument.getSelection();
|
|
115
|
+
if (!selection?.rangeCount || !paragraph.contains(selection.anchorNode) && !paragraph.contains(selection.focusNode)) return null;
|
|
116
|
+
const capture = (node, offset) => {
|
|
117
|
+
if (!paragraph.contains(node)) return {node, offset};
|
|
118
|
+
const prefix = paragraph.ownerDocument.createRange(); prefix.selectNodeContents(paragraph); prefix.setEnd(node, offset);
|
|
119
|
+
return {text: prefix.toString().length};
|
|
120
|
+
};
|
|
121
|
+
return {selection, anchor: capture(selection.anchorNode, selection.anchorOffset), focus: capture(selection.focusNode, selection.focusOffset)};
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
function restoreSelection(paragraph, saved) {
|
|
125
|
+
if (!saved) return;
|
|
126
|
+
const items = runs(paragraph);
|
|
127
|
+
const resolve = endpoint => endpoint.text == null ? endpoint : point(items, endpoint.text, true) || {node: paragraph, offset: 0};
|
|
128
|
+
const anchor = resolve(saved.anchor), focus = resolve(saved.focus);
|
|
129
|
+
if (anchor.node.isConnected && focus.node.isConnected) saved.selection.setBaseAndExtent(anchor.node, anchor.offset, focus.node, focus.offset);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
// A native initial cannot span inline element boundaries. Move only its opening punctuation
|
|
133
|
+
// into the letter's text node; the paragraph's text and all original elements stay in place.
|
|
134
|
+
function unifyInitial(paragraph, state, initial, letterStart) {
|
|
135
|
+
const items = runs(paragraph), at = point(items, letterStart);
|
|
136
|
+
if (!at || at.node.parentElement?.closest(exclude)) return;
|
|
137
|
+
let prefix = '';
|
|
138
|
+
for (const item of items) {
|
|
139
|
+
if (item.node === at.node) break;
|
|
140
|
+
const from = Math.max(initial.start, item.start), to = Math.min(letterStart, item.end);
|
|
141
|
+
if (from >= to) continue;
|
|
142
|
+
const before = item.node.data;
|
|
143
|
+
prefix += before.slice(from - item.start, to - item.start);
|
|
144
|
+
state.moves.push({node: item.node, parent: item.node.parentNode, next: item.node.nextSibling,
|
|
145
|
+
before, after: before.slice(0, from - item.start) + before.slice(to - item.start)});
|
|
146
|
+
}
|
|
147
|
+
if (!prefix) return;
|
|
148
|
+
state.moves.push({node: at.node, parent: at.node.parentNode, next: at.node.nextSibling,
|
|
149
|
+
before: at.node.data, after: prefix + at.node.data});
|
|
150
|
+
for (const move of state.moves) move.node.data = move.after;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
function restoreInitial(state) {
|
|
154
|
+
if (!state?.moves.length) return;
|
|
155
|
+
const restore = [];
|
|
156
|
+
for (const move of state.moves) {
|
|
157
|
+
if (move.node.parentNode !== move.parent) return;
|
|
158
|
+
const pieces = [move.node]; let cursor = move.node.nextSibling, text = move.node.data;
|
|
159
|
+
while (cursor !== move.next && cursor?.nodeType === 3) { pieces.push(cursor); text += cursor.data; cursor = cursor.nextSibling; }
|
|
160
|
+
if (cursor !== move.next || text !== move.after) return;
|
|
161
|
+
restore.push({move, pieces});
|
|
162
|
+
}
|
|
163
|
+
// A changed projection belongs to its current writer; restoration never replaces newer text.
|
|
164
|
+
for (const {move, pieces} of restore) { move.node.data = move.before; for (const piece of pieces.slice(1)) piece.remove(); }
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
function clear(root) {
|
|
168
|
+
const list = paragraphs(root, 'p[' + mark + '],p[' + protectedInitial + ']');
|
|
169
|
+
for (const paragraph of list) {
|
|
170
|
+
if (!paragraph.hasAttribute(mark)) { paragraph.removeAttribute(protectedInitial); continue; }
|
|
171
|
+
const selected = selectionBefore(paragraph);
|
|
172
|
+
for (const node of paragraph.querySelectorAll('[' + boundary + '],[' + hang + ']')) node.replaceWith(...node.childNodes);
|
|
173
|
+
const state = states.get(paragraph);
|
|
174
|
+
restoreInitial(state);
|
|
175
|
+
for (const name of properties) {
|
|
176
|
+
const previous = state?.properties.get(name);
|
|
177
|
+
if (previous?.[0]) paragraph.style.setProperty(name, previous[0], previous[1]);
|
|
178
|
+
else paragraph.style.removeProperty(name);
|
|
179
|
+
}
|
|
180
|
+
paragraph.removeAttribute(mark); paragraph.removeAttribute(mark + '-ragged');
|
|
181
|
+
paragraph.removeAttribute(protectedInitial);
|
|
182
|
+
if (!paragraph.getAttribute('style')) paragraph.removeAttribute('style');
|
|
183
|
+
paragraph.normalize();
|
|
184
|
+
states.delete(paragraph);
|
|
185
|
+
restoreSelection(paragraph, selected);
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
function fontEpoch(document) {
|
|
190
|
+
let entry = documents.get(document);
|
|
191
|
+
if (!entry) {
|
|
192
|
+
entry = {epoch: 0}; documents.set(document, entry);
|
|
193
|
+
document.fonts?.addEventListener('loadingdone', () => { entry.epoch++; });
|
|
194
|
+
}
|
|
195
|
+
return entry.epoch;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
function signature(paragraph, style, width, hangingGeometry) {
|
|
199
|
+
return [paragraph.innerHTML, width, hangingGeometry, style.font, style.lineHeight, style.letterSpacing, style.wordSpacing,
|
|
200
|
+
style.writingMode, style.direction, style.textIndent, style.paddingInlineStart, style.paddingInlineEnd,
|
|
201
|
+
paragraph.getAttribute('data-md-layout'), paragraph.getAttribute('data-md-align'), paragraph.getAttribute('data-md-lines'),
|
|
202
|
+
paragraph.getAttribute('data-md-hyphens'), paragraph.getAttribute('data-md-caps'), paragraph.getAttribute('data-md-hanging'),
|
|
203
|
+
paragraph.closest('[lang]')?.getAttribute('lang'), fontEpoch(paragraph.ownerDocument)].join('\u0000');
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
function insertBoundary(paragraph, items, offset) {
|
|
207
|
+
const at = point(items, offset);
|
|
208
|
+
if (!at || at.node.parentElement?.closest(exclude + ',[' + boundary + ']')) return false;
|
|
209
|
+
const separator = /^[\t\n\r\f ]+/.exec(at.node.data.slice(at.offset));
|
|
210
|
+
if (!separator) return false;
|
|
211
|
+
let text = at.node;
|
|
212
|
+
const end = at.offset + separator[0].length;
|
|
213
|
+
if (end < text.length) text.splitText(end);
|
|
214
|
+
if (at.offset) text = text.splitText(at.offset);
|
|
215
|
+
const node = paragraph.ownerDocument.createElement('span'); node.setAttribute(boundary, '');
|
|
216
|
+
text.before(node); node.append(text);
|
|
217
|
+
return true;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
function stretchedLines(paragraph, style, maximum) {
|
|
221
|
+
const text = paragraph.textContent, items = runs(paragraph), height = ordinaryHeight(paragraph, style), lines = [];
|
|
222
|
+
for (const match of text.matchAll(/[\t\n\r\f \u00a0\u202f]+/gu)) {
|
|
223
|
+
const start = point(items, match.index), end = point(items, match.index + match[0].length, true);
|
|
224
|
+
if (start?.node.parentElement?.closest(exclude) || end?.node.parentElement?.closest(exclude)) continue;
|
|
225
|
+
for (const box of boxes(items, match.index, match.index + match[0].length, height)) {
|
|
226
|
+
if (box.width <= maximum + .1 || lines.some(line => sameLine(line.box, box))) continue;
|
|
227
|
+
lines.push({box, end: -1});
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
if (!lines.length) return {items, lines};
|
|
231
|
+
for (const match of text.matchAll(/[^\t\n\r\f ]+/gu)) {
|
|
232
|
+
const rects = boxes(items, match.index, match.index + match[0].length, height);
|
|
233
|
+
if (!rects.length) continue;
|
|
234
|
+
const last = rects[rects.length - 1];
|
|
235
|
+
for (const line of lines) if (sameLine(line.box, last)) line.end = match.index + match[0].length;
|
|
236
|
+
}
|
|
237
|
+
return {items, lines};
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
function justify(paragraph, style) {
|
|
241
|
+
const maximum = parseFloat(style.fontSize) * .6;
|
|
242
|
+
if (!(maximum > 0) || style.writingMode !== 'horizontal-tb') return 0;
|
|
243
|
+
let count = 0;
|
|
244
|
+
// Each released line changes the native pretty-wrap solution. Use only the earliest current
|
|
245
|
+
// line, then measure again so obsolete later endpoints cannot create isolated words.
|
|
246
|
+
for (let pass = 0; pass < 64; pass++) {
|
|
247
|
+
const {items, lines} = stretchedLines(paragraph, style, maximum);
|
|
248
|
+
if (!lines.length) return count;
|
|
249
|
+
const end = lines.map(line => line.end).filter(end => end > 0 && end < paragraph.textContent.trimEnd().length).sort((a, b) => a - b)[0];
|
|
250
|
+
if (!end || !insertBoundary(paragraph, items, end)) break;
|
|
251
|
+
count++;
|
|
252
|
+
}
|
|
253
|
+
// If no safe ordinary-word boundary can release the line, retain the natural paragraph flow.
|
|
254
|
+
for (const node of paragraph.querySelectorAll('[' + boundary + ']')) node.replaceWith(...node.childNodes);
|
|
255
|
+
paragraph.setAttribute(mark + '-ragged', '');
|
|
256
|
+
return 0;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
// Optical alignment uses the available margin; paint containment and narrow pages must not
|
|
260
|
+
// clip a large quoted initial. Offscreen measurement stages have no viewport clipping edge.
|
|
261
|
+
function hangingEdge(paragraph, style, box) {
|
|
262
|
+
const view = paragraph.ownerDocument.defaultView, rtl = style.direction === 'rtl';
|
|
263
|
+
if (style.visibility !== 'visible' || box.right <= 0 || box.left >= view.innerWidth) return null;
|
|
264
|
+
let edge = rtl ? view.innerWidth : 0;
|
|
265
|
+
if (view.matchMedia('print').matches) {
|
|
266
|
+
const content = paragraph.closest('.md-render')?.getBoundingClientRect();
|
|
267
|
+
// The PDF painter clips at the content area even when a physical page margin exists.
|
|
268
|
+
if (content?.width > 0) edge = rtl ? Math.min(edge, content.right) : Math.max(edge, content.left);
|
|
269
|
+
}
|
|
270
|
+
for (let element = paragraph; element; element = element.parentElement) {
|
|
271
|
+
const computed = view.getComputedStyle(element);
|
|
272
|
+
if (!/^(?:hidden|clip|scroll|auto)$/.test(computed.overflowX) &&
|
|
273
|
+
!/(?:^|\s)(?:paint|content|strict)(?:\s|$)/.test(computed.contain) && computed.contentVisibility !== 'auto') continue;
|
|
274
|
+
const bounds = element.getBoundingClientRect();
|
|
275
|
+
if (!(bounds.width > 0)) continue;
|
|
276
|
+
const limit = rtl ? bounds.right - (parseFloat(computed.borderRightWidth) || 0) :
|
|
277
|
+
bounds.left + (parseFloat(computed.borderLeftWidth) || 0);
|
|
278
|
+
edge = rtl ? Math.min(edge, limit) : Math.max(edge, limit);
|
|
279
|
+
}
|
|
280
|
+
return edge;
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
function hangPunctuation(paragraph, state, style, edge) {
|
|
284
|
+
if (paragraph.ownerDocument.defaultView.CSS.supports('hanging-punctuation', 'first last allow-end')) return;
|
|
285
|
+
const text = paragraph.textContent, parts = [...graphemes.segment(text)], items = runs(paragraph);
|
|
286
|
+
const initial = initialRange(text);
|
|
287
|
+
if (initial && !paragraph.hasAttribute(protectedInitial)) {
|
|
288
|
+
let end = initial.start;
|
|
289
|
+
for (const part of graphemes.segment(initial.text)) {
|
|
290
|
+
if (!opening.test(part.segment)) break;
|
|
291
|
+
end = initial.start + part.index + part.segment.length;
|
|
292
|
+
}
|
|
293
|
+
if (end > initial.start) {
|
|
294
|
+
const rects = boxes(items, initial.start, end);
|
|
295
|
+
if (rects.length === 1) {
|
|
296
|
+
const box = rects[0], view = paragraph.ownerDocument.defaultView;
|
|
297
|
+
const margin = parseFloat(view.getComputedStyle(paragraph, '::first-letter').marginInlineStart) || 0;
|
|
298
|
+
const available = style.direction === 'rtl' ? edge - box.right - margin : box.left - edge - margin;
|
|
299
|
+
const distance = edge == null ? box.width : Math.min(box.width, available);
|
|
300
|
+
setProperty(paragraph, state, '--md-hang-start', -distance + 'px');
|
|
301
|
+
}
|
|
302
|
+
}
|
|
303
|
+
}
|
|
304
|
+
const last = parts.findLast(part => !/^\s+$/u.test(part.segment));
|
|
305
|
+
if (!last || !closing.test(last.segment)) return;
|
|
306
|
+
const a = point(items, last.index), b = point(items, last.index + last.segment.length, true);
|
|
307
|
+
if (!a || !b || a.node !== b.node || a.node.parentElement?.closest(exclude)) return;
|
|
308
|
+
const rects = boxes(items, last.index, last.index + last.segment.length);
|
|
309
|
+
if (rects.length !== 1) return;
|
|
310
|
+
let node = a.node;
|
|
311
|
+
if (b.offset < node.length) node.splitText(b.offset);
|
|
312
|
+
if (a.offset) node = node.splitText(a.offset);
|
|
313
|
+
const wrapper = paragraph.ownerDocument.createElement('span');
|
|
314
|
+
wrapper.setAttribute(hang, 'end'); wrapper.style.marginInlineEnd = -rects[0].width + 'px';
|
|
315
|
+
node.before(wrapper); wrapper.append(node);
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
function apply(root, {all = false} = {}) {
|
|
319
|
+
let changed = 0, released = 0;
|
|
320
|
+
for (const paragraph of paragraphs(root)) {
|
|
321
|
+
if (paragraph.closest('table,pre,code,h1,h2,h3,h4,h5,h6,.block-edit') ||
|
|
322
|
+
paragraph.isContentEditable && !paragraph.closest('.block-read') ||
|
|
323
|
+
!paragraph.isConnected || !all && paragraph.checkVisibility && !paragraph.checkVisibility({contentVisibilityAuto: true})) continue;
|
|
324
|
+
const view = paragraph.ownerDocument.defaultView;
|
|
325
|
+
if (!view || !paragraph.getClientRects().length) continue;
|
|
326
|
+
let style = view.getComputedStyle(paragraph);
|
|
327
|
+
const box = paragraph.getBoundingClientRect(), width = box.width, prior = states.get(paragraph);
|
|
328
|
+
const hanging = paragraph.getAttribute('data-md-hanging') === 'on';
|
|
329
|
+
const edge = hanging ? hangingEdge(paragraph, style, box) : null;
|
|
330
|
+
const geometry = hanging ? [edge, box.left, box.right].join(',') : '';
|
|
331
|
+
if (!(width > 0) || prior?.signature === signature(paragraph, style, width, geometry)) continue;
|
|
332
|
+
const selected = selectionBefore(paragraph);
|
|
333
|
+
clear(paragraph);
|
|
334
|
+
const cap = paragraph.hasAttribute('data-md-lines');
|
|
335
|
+
const justified = paragraph.getAttribute('data-md-hyphens') === 'auto' && paragraph.getAttribute('data-md-align') === 'justify';
|
|
336
|
+
if (!cap && !hanging && !justified) continue;
|
|
337
|
+
const state = {properties: new Map(), moves: [], signature: ''}; states.set(paragraph, state);
|
|
338
|
+
paragraph.setAttribute(mark, '');
|
|
339
|
+
protectInitial(paragraph);
|
|
340
|
+
if (cap && !paragraph.hasAttribute(protectedInitial)) {
|
|
341
|
+
const initial = initialRange(paragraph), letter = initial && [...graphemes.segment(initial.text)].at(-1);
|
|
342
|
+
const at = initial && point(runs(paragraph), initial.start + letter.index);
|
|
343
|
+
if (at?.node.parentElement) setProperty(paragraph, state, '--md-drop-cap-font', view.getComputedStyle(at.node.parentElement).fontFamily);
|
|
344
|
+
if (initial && letter) unifyInitial(paragraph, state, initial, initial.start + letter.index);
|
|
345
|
+
}
|
|
346
|
+
if (hanging) hangPunctuation(paragraph, state, style, edge);
|
|
347
|
+
style = view.getComputedStyle(paragraph);
|
|
348
|
+
if (justified) released += justify(paragraph, style);
|
|
349
|
+
state.signature = signature(paragraph, view.getComputedStyle(paragraph), width, geometry);
|
|
350
|
+
restoreSelection(paragraph, selected);
|
|
351
|
+
changed++;
|
|
352
|
+
}
|
|
353
|
+
return {changed, released};
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
return {apply, clear, firstLineEnd, initialRange, protectInitial};
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
const typography = createTypography();
|
|
360
|
+
export const apply = typography.apply;
|
|
361
|
+
export const clear = typography.clear;
|
|
362
|
+
export const firstLineEnd = typography.firstLineEnd;
|
|
363
|
+
export const initialRange = typography.initialRange;
|
|
364
|
+
export const protectInitial = typography.protectInitial;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Jack Skipworth
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|