jspdf-md-renderer 3.4.0 → 3.5.0
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/dist/index.d.mts +124 -0
- package/dist/index.d.ts +124 -1
- package/dist/index.js +1685 -4
- package/dist/index.mjs +1348 -660
- package/dist/index.umd.js +1691 -4
- package/package.json +4 -6
package/dist/index.mjs
CHANGED
|
@@ -1,641 +1,1134 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
/*!
|
|
2
|
+
* jspdf-md-renderer
|
|
3
|
+
*
|
|
4
|
+
* MIT License
|
|
5
|
+
*
|
|
6
|
+
* Copyright (c) 2026 Jeel Gajera
|
|
7
|
+
*
|
|
8
|
+
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
9
|
+
* of this software and associated documentation files (the "Software"), to deal
|
|
10
|
+
* in the Software without restriction, including without limitation the rights
|
|
11
|
+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
12
|
+
* copies of the Software, and to permit persons to whom the Software is
|
|
13
|
+
* furnished to do so, subject to the following conditions:
|
|
14
|
+
*
|
|
15
|
+
* The above copyright notice and this permission notice shall be included in all
|
|
16
|
+
* copies or substantial portions of the Software.
|
|
17
|
+
*
|
|
18
|
+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
19
|
+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
20
|
+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
21
|
+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
22
|
+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
23
|
+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
24
|
+
* SOFTWARE.
|
|
25
|
+
*
|
|
26
|
+
*/
|
|
27
|
+
import { marked } from "marked";
|
|
28
|
+
import autoTable from "jspdf-autotable";
|
|
29
|
+
//#region src/parser/imageExtension.ts
|
|
30
|
+
/**
|
|
31
|
+
* Internal hash prefix used to encode image attributes in the URL fragment.
|
|
32
|
+
* This is stripped during token conversion and never reaches the image fetcher.
|
|
33
|
+
*/
|
|
34
|
+
const ATTR_HASH_PREFIX = "__jmr_";
|
|
35
|
+
/**
|
|
36
|
+
* Regex to match an image tag followed by an attribute block.
|
|
37
|
+
* Captures:
|
|
38
|
+
* Group 1: Everything before the closing `)` (i.e., `
|
|
39
|
+
* Group 2: The image URL inside the parentheses
|
|
40
|
+
* Group 3: The attribute block content (e.g., `width=200 height=150 align=center`)
|
|
41
|
+
*
|
|
42
|
+
* Pattern: {key=value ...}
|
|
43
|
+
*/
|
|
44
|
+
const IMAGE_WITH_ATTRS_REGEX = /(!\[[^\]]*\]\()([^)]+)(\))\s*\{([^}]+)\}/g;
|
|
45
|
+
/**
|
|
46
|
+
* Regex to extract individual key=value pairs from the attribute block.
|
|
47
|
+
*/
|
|
48
|
+
const ATTR_PAIR_REGEX = /(\w+)\s*=\s*(\w+)/g;
|
|
49
|
+
/** Valid alignment values */
|
|
50
|
+
const VALID_ALIGNMENTS = [
|
|
7
51
|
"left",
|
|
8
52
|
"center",
|
|
9
53
|
"right"
|
|
10
|
-
]
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
54
|
+
];
|
|
55
|
+
/**
|
|
56
|
+
* Encodes image attributes into a URL hash fragment.
|
|
57
|
+
* Example: {width: 200, height: 100, align: 'center'} → '#__jmr_w=200&h=100&a=center'
|
|
58
|
+
*/
|
|
59
|
+
const encodeAttrsToFragment = (attrs) => {
|
|
60
|
+
const parts = [];
|
|
61
|
+
if (attrs.width !== void 0) parts.push(`w=${attrs.width}`);
|
|
62
|
+
if (attrs.height !== void 0) parts.push(`h=${attrs.height}`);
|
|
63
|
+
if (attrs.align) parts.push(`a=${attrs.align}`);
|
|
64
|
+
return parts.length > 0 ? `#${ATTR_HASH_PREFIX}${parts.join("&")}` : "";
|
|
65
|
+
};
|
|
66
|
+
/**
|
|
67
|
+
* Parses an attribute string like "width=200 height=150 align=center"
|
|
68
|
+
* into a structured object.
|
|
69
|
+
*/
|
|
70
|
+
const parseRawAttributes = (attrString) => {
|
|
71
|
+
const attrs = {};
|
|
72
|
+
let match;
|
|
73
|
+
while ((match = ATTR_PAIR_REGEX.exec(attrString)) !== null) {
|
|
74
|
+
const key = match[1].toLowerCase();
|
|
75
|
+
const value = match[2];
|
|
76
|
+
switch (key) {
|
|
18
77
|
case "width":
|
|
19
78
|
case "w": {
|
|
20
|
-
|
|
21
|
-
!isNaN(
|
|
79
|
+
const num = parseInt(value, 10);
|
|
80
|
+
if (!isNaN(num) && num > 0) attrs.width = num;
|
|
22
81
|
break;
|
|
23
82
|
}
|
|
24
83
|
case "height":
|
|
25
84
|
case "h": {
|
|
26
|
-
|
|
27
|
-
!isNaN(
|
|
85
|
+
const num = parseInt(value, 10);
|
|
86
|
+
if (!isNaN(num) && num > 0) attrs.height = num;
|
|
28
87
|
break;
|
|
29
88
|
}
|
|
30
89
|
case "align": {
|
|
31
|
-
|
|
32
|
-
|
|
90
|
+
const alignVal = value.toLowerCase();
|
|
91
|
+
if (VALID_ALIGNMENTS.includes(alignVal)) attrs.align = alignVal;
|
|
33
92
|
break;
|
|
34
93
|
}
|
|
35
94
|
}
|
|
36
95
|
}
|
|
37
|
-
return
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
96
|
+
return attrs;
|
|
97
|
+
};
|
|
98
|
+
/**
|
|
99
|
+
* Pre-processes markdown text to embed image attributes into URL fragments.
|
|
100
|
+
*
|
|
101
|
+
* Transforms `{width=200 align=center}` into
|
|
102
|
+
* `` so that each image token
|
|
103
|
+
* carries its own attributes — no shared state needed.
|
|
104
|
+
*
|
|
105
|
+
* Supported attributes:
|
|
106
|
+
* - `width` or `w`: Image width in pixels (number)
|
|
107
|
+
* - `height` or `h`: Image height in pixels (number)
|
|
108
|
+
* - `align`: Image alignment - 'left', 'center', or 'right'
|
|
109
|
+
*
|
|
110
|
+
* @param text - The raw markdown text
|
|
111
|
+
* @returns The cleaned markdown text with attributes encoded in URLs
|
|
112
|
+
*/
|
|
113
|
+
const preprocessImageAttributes = (text) => {
|
|
114
|
+
return text.replace(IMAGE_WITH_ATTRS_REGEX, (_fullMatch, before, url, closeParen, attrsContent) => {
|
|
115
|
+
return `${before}${url}${encodeAttrsToFragment(parseRawAttributes(attrsContent))}${closeParen}`;
|
|
116
|
+
});
|
|
117
|
+
};
|
|
118
|
+
/**
|
|
119
|
+
* Extracts image attributes from a URL that may contain an encoded fragment.
|
|
120
|
+
* Returns the clean URL (without the attribute fragment) and parsed attributes.
|
|
121
|
+
*
|
|
122
|
+
* @param href - The image URL, possibly containing `#__jmr_...` fragment
|
|
123
|
+
* @returns Object with cleanHref and parsed attrs
|
|
124
|
+
*/
|
|
125
|
+
const parseImageAttrsFromHref = (href) => {
|
|
126
|
+
const fragmentIdx = href.indexOf(`#${ATTR_HASH_PREFIX}`);
|
|
127
|
+
if (fragmentIdx === -1) return {
|
|
128
|
+
cleanHref: href,
|
|
42
129
|
attrs: {}
|
|
43
130
|
};
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
131
|
+
const cleanHref = href.substring(0, fragmentIdx);
|
|
132
|
+
const fragment = href.substring(fragmentIdx + 1 + 6);
|
|
133
|
+
const attrs = {};
|
|
134
|
+
const pairs = fragment.split("&");
|
|
135
|
+
for (const pair of pairs) {
|
|
136
|
+
const [key, value] = pair.split("=");
|
|
137
|
+
switch (key) {
|
|
48
138
|
case "w": {
|
|
49
|
-
|
|
50
|
-
!isNaN(
|
|
139
|
+
const num = parseInt(value, 10);
|
|
140
|
+
if (!isNaN(num) && num > 0) attrs.width = num;
|
|
51
141
|
break;
|
|
52
142
|
}
|
|
53
143
|
case "h": {
|
|
54
|
-
|
|
55
|
-
!isNaN(
|
|
144
|
+
const num = parseInt(value, 10);
|
|
145
|
+
if (!isNaN(num) && num > 0) attrs.height = num;
|
|
56
146
|
break;
|
|
57
147
|
}
|
|
58
148
|
case "a":
|
|
59
|
-
|
|
149
|
+
if (VALID_ALIGNMENTS.includes(value)) attrs.align = value;
|
|
60
150
|
break;
|
|
61
151
|
}
|
|
62
152
|
}
|
|
63
153
|
return {
|
|
64
|
-
cleanHref
|
|
65
|
-
attrs
|
|
154
|
+
cleanHref,
|
|
155
|
+
attrs
|
|
66
156
|
};
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
157
|
+
};
|
|
158
|
+
//#endregion
|
|
159
|
+
//#region src/parser/MdTextParser.ts
|
|
160
|
+
/**
|
|
161
|
+
* Parses markdown into tokens and converts to a custom parsed structure.
|
|
162
|
+
*
|
|
163
|
+
* @param text - The markdown content to parse.
|
|
164
|
+
* @returns Parsed markdown elements.
|
|
165
|
+
*/
|
|
166
|
+
const MdTextParser = async (text) => {
|
|
167
|
+
const processedText = preprocessImageAttributes(text);
|
|
168
|
+
return convertTokens(await marked.lexer(processedText, {
|
|
169
|
+
async: true,
|
|
170
|
+
gfm: true
|
|
72
171
|
}));
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
|
|
172
|
+
};
|
|
173
|
+
/**
|
|
174
|
+
* Convert the markdown tokens to ParsedElements.
|
|
175
|
+
*
|
|
176
|
+
* @param tokens - The list of markdown tokens.
|
|
177
|
+
* @returns Parsed elements in a custom structure.
|
|
178
|
+
*/
|
|
179
|
+
const convertTokens = (tokens) => {
|
|
180
|
+
const parsedElements = [];
|
|
181
|
+
tokens.forEach((token) => {
|
|
76
182
|
try {
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
183
|
+
const handler = tokenHandlers[token.type];
|
|
184
|
+
if (handler) parsedElements.push(handler(token));
|
|
185
|
+
else parsedElements.push({
|
|
186
|
+
type: "raw",
|
|
187
|
+
content: token.raw
|
|
81
188
|
});
|
|
82
|
-
} catch (
|
|
83
|
-
console.error("Failed to handle token ==>",
|
|
84
|
-
}
|
|
85
|
-
})
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
189
|
+
} catch (error) {
|
|
190
|
+
console.error("Failed to handle token ==>", token, error);
|
|
191
|
+
}
|
|
192
|
+
});
|
|
193
|
+
return parsedElements;
|
|
194
|
+
};
|
|
195
|
+
/**
|
|
196
|
+
* Map each token type to its handler function.
|
|
197
|
+
*/
|
|
198
|
+
const tokenHandlers = {
|
|
199
|
+
["heading"]: (token) => ({
|
|
200
|
+
type: "heading",
|
|
201
|
+
depth: token.depth,
|
|
202
|
+
content: token.text,
|
|
203
|
+
items: token.tokens ? convertTokens(token.tokens) : []
|
|
92
204
|
}),
|
|
93
|
-
[
|
|
94
|
-
type:
|
|
95
|
-
content:
|
|
96
|
-
items:
|
|
205
|
+
["paragraph"]: (token) => ({
|
|
206
|
+
type: "paragraph",
|
|
207
|
+
content: token.text,
|
|
208
|
+
items: token.tokens ? convertTokens(token.tokens) : []
|
|
97
209
|
}),
|
|
98
|
-
[
|
|
99
|
-
type:
|
|
100
|
-
ordered:
|
|
101
|
-
start:
|
|
102
|
-
items:
|
|
210
|
+
["list"]: (token) => ({
|
|
211
|
+
type: "list",
|
|
212
|
+
ordered: token.ordered,
|
|
213
|
+
start: token.start,
|
|
214
|
+
items: token.items ? convertTokens(token.items) : []
|
|
103
215
|
}),
|
|
104
|
-
[
|
|
105
|
-
type:
|
|
106
|
-
content:
|
|
107
|
-
items:
|
|
216
|
+
["list_item"]: (token) => ({
|
|
217
|
+
type: "list_item",
|
|
218
|
+
content: token.text,
|
|
219
|
+
items: token.tokens ? convertTokens(token.tokens) : []
|
|
108
220
|
}),
|
|
109
|
-
[
|
|
110
|
-
type:
|
|
111
|
-
lang:
|
|
112
|
-
code:
|
|
221
|
+
["code"]: (token) => ({
|
|
222
|
+
type: "code",
|
|
223
|
+
lang: token.lang,
|
|
224
|
+
code: token.text
|
|
113
225
|
}),
|
|
114
|
-
[
|
|
115
|
-
type:
|
|
116
|
-
header:
|
|
117
|
-
type:
|
|
118
|
-
content:
|
|
226
|
+
["table"]: (token) => ({
|
|
227
|
+
type: "table",
|
|
228
|
+
header: token.header.map((header) => ({
|
|
229
|
+
type: "table_header",
|
|
230
|
+
content: header.text
|
|
119
231
|
})),
|
|
120
|
-
rows:
|
|
121
|
-
type:
|
|
122
|
-
content:
|
|
232
|
+
rows: token.rows.map((row) => row.map((cell) => ({
|
|
233
|
+
type: "table_cell",
|
|
234
|
+
content: cell.text
|
|
123
235
|
})))
|
|
124
236
|
}),
|
|
125
|
-
[
|
|
126
|
-
|
|
237
|
+
["image"]: (token) => {
|
|
238
|
+
const { cleanHref, attrs } = parseImageAttrsFromHref(token.href);
|
|
127
239
|
return {
|
|
128
|
-
type:
|
|
129
|
-
src:
|
|
130
|
-
alt:
|
|
131
|
-
width:
|
|
132
|
-
height:
|
|
133
|
-
align:
|
|
240
|
+
type: "image",
|
|
241
|
+
src: cleanHref,
|
|
242
|
+
alt: token.text,
|
|
243
|
+
width: attrs.width,
|
|
244
|
+
height: attrs.height,
|
|
245
|
+
align: attrs.align
|
|
134
246
|
};
|
|
135
247
|
},
|
|
136
|
-
[
|
|
137
|
-
type:
|
|
138
|
-
href:
|
|
139
|
-
text:
|
|
140
|
-
items:
|
|
248
|
+
["link"]: (token) => ({
|
|
249
|
+
type: "link",
|
|
250
|
+
href: token.href,
|
|
251
|
+
text: token.text,
|
|
252
|
+
items: token.tokens ? convertTokens(token.tokens) : []
|
|
141
253
|
}),
|
|
142
|
-
[
|
|
143
|
-
type:
|
|
144
|
-
content:
|
|
145
|
-
items:
|
|
254
|
+
["strong"]: (token) => ({
|
|
255
|
+
type: "strong",
|
|
256
|
+
content: token.text,
|
|
257
|
+
items: token.tokens ? convertTokens(token.tokens) : []
|
|
146
258
|
}),
|
|
147
|
-
[
|
|
148
|
-
type:
|
|
149
|
-
content:
|
|
150
|
-
items:
|
|
259
|
+
["em"]: (token) => ({
|
|
260
|
+
type: "em",
|
|
261
|
+
content: token.text,
|
|
262
|
+
items: token.tokens ? convertTokens(token.tokens) : []
|
|
151
263
|
}),
|
|
152
|
-
[
|
|
153
|
-
type:
|
|
154
|
-
content:
|
|
155
|
-
items:
|
|
264
|
+
["text"]: (token) => ({
|
|
265
|
+
type: "text",
|
|
266
|
+
content: token.text,
|
|
267
|
+
items: token.tokens ? convertTokens(token.tokens) : []
|
|
156
268
|
}),
|
|
157
|
-
[
|
|
158
|
-
type:
|
|
159
|
-
content:
|
|
160
|
-
items:
|
|
269
|
+
["hr"]: (token) => ({
|
|
270
|
+
type: "hr",
|
|
271
|
+
content: token.raw,
|
|
272
|
+
items: token.tokens ? convertTokens(token.tokens) : []
|
|
161
273
|
}),
|
|
162
|
-
[
|
|
163
|
-
type:
|
|
164
|
-
content:
|
|
165
|
-
items:
|
|
274
|
+
["codespan"]: (token) => ({
|
|
275
|
+
type: "codespan",
|
|
276
|
+
content: token.text,
|
|
277
|
+
items: token.tokens ? convertTokens(token.tokens) : []
|
|
166
278
|
}),
|
|
167
|
-
[
|
|
168
|
-
type:
|
|
169
|
-
content:
|
|
170
|
-
items:
|
|
279
|
+
["blockquote"]: (token) => ({
|
|
280
|
+
type: "blockquote",
|
|
281
|
+
content: token.text,
|
|
282
|
+
items: token.tokens ? convertTokens(token.tokens) : []
|
|
171
283
|
}),
|
|
172
|
-
[
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
type:
|
|
284
|
+
["html"]: (token) => {
|
|
285
|
+
const rawHtml = String(token.raw ?? token.text ?? "").trim();
|
|
286
|
+
if (/^<br\s*\/?>$/i.test(rawHtml)) return {
|
|
287
|
+
type: "br",
|
|
176
288
|
content: "\n"
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
|
|
289
|
+
};
|
|
290
|
+
return {
|
|
291
|
+
type: "raw",
|
|
292
|
+
content: token.raw ?? token.text ?? ""
|
|
180
293
|
};
|
|
181
294
|
},
|
|
182
|
-
[
|
|
183
|
-
type:
|
|
295
|
+
["br"]: () => ({
|
|
296
|
+
type: "br",
|
|
184
297
|
content: "\n"
|
|
185
298
|
})
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
|
|
299
|
+
};
|
|
300
|
+
//#endregion
|
|
301
|
+
//#region src/utils/doc-helpers.ts
|
|
302
|
+
const getCharHight = (doc) => {
|
|
303
|
+
return doc.getTextDimensions("H").h;
|
|
304
|
+
};
|
|
305
|
+
const getCharWidth = (doc) => {
|
|
306
|
+
return doc.getTextDimensions("H").w;
|
|
307
|
+
};
|
|
308
|
+
//#endregion
|
|
309
|
+
//#region src/renderer/components/heading.ts
|
|
310
|
+
/**
|
|
311
|
+
* Renders heading elements.
|
|
312
|
+
*/
|
|
313
|
+
const renderHeading = (doc, element, indent, store, parentElementRenderer) => {
|
|
314
|
+
const size = 6 - (element?.depth ?? 0) > 0 ? 6 - (element?.depth ?? 0) : 1;
|
|
315
|
+
doc.setFontSize(store.options.page.defaultFontSize + size);
|
|
316
|
+
if (element?.items && element?.items.length > 0) for (const item of element?.items ?? []) parentElementRenderer(item, indent, store, false);
|
|
189
317
|
else {
|
|
190
|
-
|
|
191
|
-
|
|
318
|
+
const charHeight = getCharHight(doc);
|
|
319
|
+
doc.text(element?.content ?? "", store.X + indent, store.Y, {
|
|
192
320
|
align: "left",
|
|
193
|
-
maxWidth:
|
|
321
|
+
maxWidth: store.options.page.maxContentWidth - indent,
|
|
194
322
|
baseline: "top"
|
|
195
|
-
})
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
}
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
323
|
+
});
|
|
324
|
+
store.recordContentY(store.Y + charHeight);
|
|
325
|
+
store.updateY(getCharHight(doc), "add");
|
|
326
|
+
}
|
|
327
|
+
doc.setFontSize(store.options.page.defaultFontSize);
|
|
328
|
+
store.updateX(store.options.page.xpading, "set");
|
|
329
|
+
};
|
|
330
|
+
//#endregion
|
|
331
|
+
//#region src/utils/handlePageBreak.ts
|
|
332
|
+
const HandlePageBreaks = (doc, store) => {
|
|
333
|
+
if (typeof store.options.pageBreakHandler === "function") store.options.pageBreakHandler(doc);
|
|
334
|
+
else doc.addPage(store.options.page?.format, store.options.page?.orientation);
|
|
335
|
+
store.updateY(store.options.page.topmargin);
|
|
336
|
+
store.updateX(store.options.page.xpading);
|
|
337
|
+
};
|
|
338
|
+
//#endregion
|
|
339
|
+
//#region src/utils/image-utils.ts
|
|
340
|
+
/**
|
|
341
|
+
* Standard DPI for web/screen pixels.
|
|
342
|
+
*/
|
|
343
|
+
const DEFAULT_DPI = 96;
|
|
344
|
+
/**
|
|
345
|
+
* Converts pixel values to the document's unit system.
|
|
346
|
+
* Uses 96 DPI as the standard web pixel density.
|
|
347
|
+
*
|
|
348
|
+
* @param px - Value in pixels
|
|
349
|
+
* @param unit - The document unit ('mm' | 'pt' | 'in' | 'px')
|
|
350
|
+
* @returns Value in document units
|
|
351
|
+
*/
|
|
352
|
+
const pxToDocUnit = (px, unit = "mm") => {
|
|
353
|
+
switch (unit) {
|
|
354
|
+
case "pt": return px * 72 / DEFAULT_DPI;
|
|
355
|
+
case "in": return px / DEFAULT_DPI;
|
|
356
|
+
case "px": return px;
|
|
357
|
+
default: return px * 25.4 / DEFAULT_DPI;
|
|
358
|
+
}
|
|
359
|
+
};
|
|
360
|
+
/**
|
|
361
|
+
* Extracts width and height from an SVG data URI if possible.
|
|
362
|
+
*/
|
|
363
|
+
const extractSvgDimensions = (dataUri) => {
|
|
208
364
|
try {
|
|
209
|
-
let
|
|
210
|
-
if (
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
365
|
+
let svgString = "";
|
|
366
|
+
if (dataUri.includes("base64,")) {
|
|
367
|
+
const base64 = dataUri.split("base64,")[1];
|
|
368
|
+
if (typeof window !== "undefined" && typeof window.atob === "function") svgString = decodeURIComponent(escape(window.atob(base64)));
|
|
369
|
+
else if (typeof Buffer !== "undefined") svgString = Buffer.from(base64, "base64").toString("utf-8");
|
|
370
|
+
else svgString = decodeURIComponent(escape(atob(base64)));
|
|
371
|
+
} else svgString = decodeURIComponent(dataUri.split(",")[1] || "");
|
|
372
|
+
const widthMatch = svgString.match(/<svg[^>]*\swidth=(?:'|")([0-9.]+)[a-zA-Z]*(?:'|")/i);
|
|
373
|
+
const heightMatch = svgString.match(/<svg[^>]*\sheight=(?:'|")([0-9.]+)[a-zA-Z]*(?:'|")/i);
|
|
374
|
+
const viewBoxMatch = svgString.match(/<svg[^>]*\sviewBox=(?:'|")[^'"]*(?:'|")/i);
|
|
375
|
+
let w = widthMatch ? parseFloat(widthMatch[1]) : 0;
|
|
376
|
+
let h = heightMatch ? parseFloat(heightMatch[1]) : 0;
|
|
377
|
+
if ((!w || !h) && viewBoxMatch) {
|
|
378
|
+
const viewBoxStr = viewBoxMatch[0].match(/viewBox=(?:'|")([^'"]+)(?:'|")/i);
|
|
379
|
+
if (viewBoxStr) {
|
|
380
|
+
const parts = viewBoxStr[1].split(/[ ,]+/).filter(Boolean).map(parseFloat);
|
|
381
|
+
if (parts.length >= 4) {
|
|
382
|
+
w = w || parts[2];
|
|
383
|
+
h = h || parts[3];
|
|
384
|
+
}
|
|
220
385
|
}
|
|
221
386
|
}
|
|
222
|
-
if (
|
|
223
|
-
width:
|
|
224
|
-
height:
|
|
387
|
+
if (w > 0 && h > 0) return {
|
|
388
|
+
width: w,
|
|
389
|
+
height: h
|
|
225
390
|
};
|
|
226
391
|
} catch (e) {
|
|
227
392
|
console.warn("Failed to extract SVG dimensions:", e);
|
|
228
393
|
}
|
|
229
394
|
return null;
|
|
230
|
-
}
|
|
231
|
-
|
|
395
|
+
};
|
|
396
|
+
/**
|
|
397
|
+
* Calculates final dimensions for an image, respecting intrinsic size,
|
|
398
|
+
* user-specified attributes, and page bounds.
|
|
399
|
+
*/
|
|
400
|
+
const calculateImageDimensions = (doc, element, maxWidth, maxHeight, docUnit = "mm") => {
|
|
401
|
+
if (!element.data) return {
|
|
232
402
|
finalWidth: 0,
|
|
233
403
|
finalHeight: 0
|
|
234
404
|
};
|
|
235
|
-
let
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
a = n.width, o = n.height;
|
|
405
|
+
let intrinsicPxW = element.naturalWidth || 0;
|
|
406
|
+
let intrinsicPxH = element.naturalHeight || 0;
|
|
407
|
+
if (!intrinsicPxW || !intrinsicPxH) if (!element.data.startsWith("data:image/svg")) try {
|
|
408
|
+
const props = doc.getImageProperties(element.data);
|
|
409
|
+
intrinsicPxW = props.width;
|
|
410
|
+
intrinsicPxH = props.height;
|
|
242
411
|
} catch (e) {
|
|
243
412
|
console.warn("Failed to get image properties for intrinsic sizing:", e);
|
|
244
413
|
}
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
414
|
+
else {
|
|
415
|
+
const svgDims = extractSvgDimensions(element.data);
|
|
416
|
+
if (svgDims) {
|
|
417
|
+
intrinsicPxW = svgDims.width;
|
|
418
|
+
intrinsicPxH = svgDims.height;
|
|
419
|
+
}
|
|
420
|
+
}
|
|
421
|
+
const aspectRatio = intrinsicPxH > 0 ? intrinsicPxW / intrinsicPxH : 1;
|
|
422
|
+
let finalWidth;
|
|
423
|
+
let finalHeight;
|
|
424
|
+
if (element.width && element.height) {
|
|
425
|
+
finalWidth = pxToDocUnit(element.width, docUnit);
|
|
426
|
+
finalHeight = pxToDocUnit(element.height, docUnit);
|
|
427
|
+
} else if (element.width) {
|
|
428
|
+
finalWidth = pxToDocUnit(element.width, docUnit);
|
|
429
|
+
finalHeight = finalWidth / aspectRatio;
|
|
430
|
+
} else if (element.height) {
|
|
431
|
+
finalHeight = pxToDocUnit(element.height, docUnit);
|
|
432
|
+
finalWidth = finalHeight * aspectRatio;
|
|
433
|
+
} else {
|
|
434
|
+
finalWidth = pxToDocUnit(intrinsicPxW, docUnit);
|
|
435
|
+
finalHeight = pxToDocUnit(intrinsicPxH, docUnit);
|
|
436
|
+
}
|
|
437
|
+
if (finalWidth > maxWidth) {
|
|
438
|
+
const scale = maxWidth / finalWidth;
|
|
439
|
+
finalWidth = maxWidth;
|
|
440
|
+
finalHeight = finalHeight * scale;
|
|
249
441
|
}
|
|
250
|
-
if (
|
|
251
|
-
|
|
252
|
-
|
|
442
|
+
if (finalHeight > maxHeight) {
|
|
443
|
+
const scale = maxHeight / finalHeight;
|
|
444
|
+
finalHeight = maxHeight;
|
|
445
|
+
finalWidth = finalWidth * scale;
|
|
253
446
|
}
|
|
254
447
|
return {
|
|
255
|
-
finalWidth
|
|
256
|
-
finalHeight
|
|
448
|
+
finalWidth,
|
|
449
|
+
finalHeight
|
|
257
450
|
};
|
|
258
|
-
}
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
451
|
+
};
|
|
452
|
+
/**
|
|
453
|
+
* Recursively traverses parsed elements and loads image data for Image tokens.
|
|
454
|
+
* @param elements - The parsed elements to process.
|
|
455
|
+
*/
|
|
456
|
+
const prefetchImages = async (elements) => {
|
|
457
|
+
for (const element of elements) {
|
|
458
|
+
if (element.type === "image" && element.src) try {
|
|
459
|
+
if (element.src.startsWith("data:")) element.data = element.src;
|
|
262
460
|
else {
|
|
263
|
-
|
|
264
|
-
if (!
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
typeof
|
|
270
|
-
|
|
461
|
+
const response = await fetch(element.src);
|
|
462
|
+
if (!response.ok) throw new Error(`Failed to fetch image: ${response.statusText}`);
|
|
463
|
+
const blob = await response.blob();
|
|
464
|
+
element.data = await new Promise((resolve, reject) => {
|
|
465
|
+
const reader = new FileReader();
|
|
466
|
+
reader.onloadend = () => {
|
|
467
|
+
if (typeof reader.result === "string") resolve(reader.result);
|
|
468
|
+
else reject(/* @__PURE__ */ new Error("Failed to convert image to base64 string"));
|
|
469
|
+
};
|
|
470
|
+
reader.onerror = reject;
|
|
471
|
+
reader.readAsDataURL(blob);
|
|
271
472
|
});
|
|
272
473
|
}
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
474
|
+
if (element.data && element.data.startsWith("data:image/svg")) {
|
|
475
|
+
if (typeof window !== "undefined" && typeof document !== "undefined") element.data = await new Promise((resolve) => {
|
|
476
|
+
const img = new Image();
|
|
477
|
+
img.onload = () => {
|
|
478
|
+
const canvas = document.createElement("canvas");
|
|
479
|
+
const dims = extractSvgDimensions(element.data);
|
|
480
|
+
const w = dims ? dims.width : img.width || 300;
|
|
481
|
+
const h = dims ? dims.height : img.height || 150;
|
|
482
|
+
element.naturalWidth = w;
|
|
483
|
+
element.naturalHeight = h;
|
|
484
|
+
const scale = 4;
|
|
485
|
+
canvas.width = w * scale;
|
|
486
|
+
canvas.height = h * scale;
|
|
487
|
+
const ctx = canvas.getContext("2d");
|
|
488
|
+
if (ctx) {
|
|
489
|
+
ctx.scale(scale, scale);
|
|
490
|
+
ctx.drawImage(img, 0, 0, w, h);
|
|
491
|
+
resolve(canvas.toDataURL("image/png"));
|
|
492
|
+
} else resolve(element.data);
|
|
493
|
+
};
|
|
494
|
+
img.onerror = () => resolve(element.data);
|
|
495
|
+
img.src = element.data;
|
|
496
|
+
});
|
|
497
|
+
}
|
|
498
|
+
} catch (error) {
|
|
499
|
+
console.warn(`[jspdf-md-renderer] Warning: Failed to load image at ${element.src}. It will be skipped.`, error);
|
|
284
500
|
}
|
|
285
|
-
|
|
501
|
+
if (element.items && element.items.length > 0) await prefetchImages(element.items);
|
|
286
502
|
}
|
|
287
|
-
}
|
|
288
|
-
|
|
289
|
-
|
|
503
|
+
};
|
|
504
|
+
//#endregion
|
|
505
|
+
//#region src/utils/justifiedTextRenderer.ts
|
|
506
|
+
/**
|
|
507
|
+
* JustifiedTextRenderer - Renders mixed inline elements with proper alignment.
|
|
508
|
+
*
|
|
509
|
+
* Features:
|
|
510
|
+
* - Handles bold, italic, codespan, links mixed in paragraph
|
|
511
|
+
* - Proper word spacing distribution for justified alignment
|
|
512
|
+
* - Supports left, right, center, and justify alignments
|
|
513
|
+
* - Page break handling
|
|
514
|
+
* - Preserves link clickability
|
|
515
|
+
* - Codespan background rendering
|
|
516
|
+
*/
|
|
517
|
+
var JustifiedTextRenderer = class {
|
|
518
|
+
static getCodespanOptions(store) {
|
|
519
|
+
const opts = store.options.codespan ?? {};
|
|
290
520
|
return {
|
|
291
|
-
backgroundColor:
|
|
292
|
-
padding:
|
|
293
|
-
showBackground:
|
|
294
|
-
fontSizeScale:
|
|
521
|
+
backgroundColor: opts.backgroundColor ?? "#EEEEEE",
|
|
522
|
+
padding: opts.padding ?? .5,
|
|
523
|
+
showBackground: opts.showBackground !== false,
|
|
524
|
+
fontSizeScale: opts.fontSizeScale ?? .9
|
|
295
525
|
};
|
|
296
526
|
}
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
527
|
+
/**
|
|
528
|
+
* Apply font style to the jsPDF document.
|
|
529
|
+
*/
|
|
530
|
+
static applyStyle(doc, style, store) {
|
|
531
|
+
const currentFont = doc.getFont().fontName;
|
|
532
|
+
const currentFontSize = doc.getFontSize();
|
|
533
|
+
const getBoldFont = () => {
|
|
534
|
+
const boldName = store.options.font.bold?.name;
|
|
535
|
+
return boldName && boldName !== "" ? boldName : currentFont;
|
|
536
|
+
};
|
|
537
|
+
const getRegularFont = () => {
|
|
538
|
+
const regularName = store.options.font.regular?.name;
|
|
539
|
+
return regularName && regularName !== "" ? regularName : currentFont;
|
|
304
540
|
};
|
|
305
|
-
switch (
|
|
541
|
+
switch (style) {
|
|
306
542
|
case "bold":
|
|
307
|
-
|
|
543
|
+
doc.setFont(getBoldFont(), store.options.font.bold?.style || "bold");
|
|
308
544
|
break;
|
|
309
545
|
case "italic":
|
|
310
|
-
|
|
546
|
+
doc.setFont(getRegularFont(), "italic");
|
|
311
547
|
break;
|
|
312
548
|
case "bolditalic":
|
|
313
|
-
|
|
549
|
+
doc.setFont(getBoldFont(), "bolditalic");
|
|
314
550
|
break;
|
|
315
551
|
case "codespan":
|
|
316
|
-
|
|
552
|
+
const codeFont = store.options.font.code || {
|
|
553
|
+
name: "courier",
|
|
554
|
+
style: "normal"
|
|
555
|
+
};
|
|
556
|
+
doc.setFont(codeFont.name, codeFont.style);
|
|
557
|
+
doc.setFontSize(currentFontSize * this.getCodespanOptions(store).fontSizeScale);
|
|
317
558
|
break;
|
|
318
559
|
default:
|
|
319
|
-
|
|
560
|
+
doc.setFont(getRegularFont(), doc.getFont().fontStyle);
|
|
320
561
|
break;
|
|
321
562
|
}
|
|
322
563
|
}
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
564
|
+
/**
|
|
565
|
+
* Measure word width with a specific style applied.
|
|
566
|
+
* NOTE: jsPDF's getTextWidth() does NOT include charSpace in its calculation,
|
|
567
|
+
* so we must manually add it: effectiveWidth = getTextWidth(text) + (text.length * charSpace)
|
|
568
|
+
*/
|
|
569
|
+
static measureWordWidth(doc, text, style, store) {
|
|
570
|
+
const savedFont = doc.getFont();
|
|
571
|
+
const savedSize = doc.getFontSize();
|
|
572
|
+
this.applyStyle(doc, style, store);
|
|
573
|
+
const baseWidth = doc.getTextWidth(text);
|
|
574
|
+
const charSpace = doc.getCharSpace?.() ?? 0;
|
|
575
|
+
const effectiveWidth = baseWidth + text.length * charSpace;
|
|
576
|
+
doc.setFont(savedFont.fontName, savedFont.fontStyle);
|
|
577
|
+
doc.setFontSize(savedSize);
|
|
578
|
+
return effectiveWidth;
|
|
328
579
|
}
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
580
|
+
/**
|
|
581
|
+
* Extract style from element type string.
|
|
582
|
+
*/
|
|
583
|
+
static getStyleFromType(type, parentStyle) {
|
|
584
|
+
switch (type) {
|
|
585
|
+
case "strong":
|
|
586
|
+
if (parentStyle === "italic") return "bolditalic";
|
|
587
|
+
return "bold";
|
|
588
|
+
case "em":
|
|
589
|
+
if (parentStyle === "bold") return "bolditalic";
|
|
590
|
+
return "italic";
|
|
333
591
|
case "codespan": return "codespan";
|
|
334
|
-
default: return
|
|
335
|
-
}
|
|
336
|
-
}
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
592
|
+
default: return parentStyle || "normal";
|
|
593
|
+
}
|
|
594
|
+
}
|
|
595
|
+
/**
|
|
596
|
+
* Flatten ParsedElement tree into an array of StyledWordInfo.
|
|
597
|
+
* Handles nested inline elements.
|
|
598
|
+
*/
|
|
599
|
+
static flattenToWords(doc, elements, store, parentStyle = "normal", isLink = false, href) {
|
|
600
|
+
const result = [];
|
|
601
|
+
for (const el of elements) {
|
|
602
|
+
const style = this.getStyleFromType(el.type, parentStyle);
|
|
603
|
+
const elIsLink = el.type === "link" || isLink;
|
|
604
|
+
const elHref = el.href || href;
|
|
605
|
+
if (el.items && el.items.length > 0) {
|
|
606
|
+
const nested = this.flattenToWords(doc, el.items, store, style, elIsLink, elHref);
|
|
607
|
+
result.push(...nested);
|
|
608
|
+
} else if (el.type === "image") {
|
|
609
|
+
const maxH = store.options.page.maxContentHeight - store.options.page.topmargin;
|
|
610
|
+
const { finalWidth, finalHeight } = calculateImageDimensions(doc, el, store.options.page.maxContentWidth - store.options.page.indent * 0, maxH, store.options.page.unit || "mm");
|
|
611
|
+
result.push({
|
|
347
612
|
text: "",
|
|
348
|
-
width:
|
|
349
|
-
style
|
|
350
|
-
isLink:
|
|
351
|
-
href:
|
|
352
|
-
linkColor:
|
|
613
|
+
width: finalWidth,
|
|
614
|
+
style,
|
|
615
|
+
isLink: elIsLink,
|
|
616
|
+
href: elHref,
|
|
617
|
+
linkColor: elIsLink ? store.options.link?.linkColor || [
|
|
353
618
|
0,
|
|
354
619
|
0,
|
|
355
620
|
255
|
|
356
621
|
] : void 0,
|
|
357
|
-
isImage:
|
|
358
|
-
imageElement:
|
|
359
|
-
imageHeight:
|
|
622
|
+
isImage: true,
|
|
623
|
+
imageElement: el,
|
|
624
|
+
imageHeight: finalHeight
|
|
360
625
|
});
|
|
361
|
-
} else if (
|
|
626
|
+
} else if (el.type === "br") result.push({
|
|
362
627
|
text: "",
|
|
363
628
|
width: 0,
|
|
364
|
-
style
|
|
365
|
-
isBr:
|
|
629
|
+
style,
|
|
630
|
+
isBr: true
|
|
366
631
|
});
|
|
367
632
|
else {
|
|
368
|
-
|
|
369
|
-
if (!
|
|
370
|
-
if (/^\s/.test(
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
633
|
+
const text = el.content || el.text || "";
|
|
634
|
+
if (!text) continue;
|
|
635
|
+
if (/^\s/.test(text) && result.length > 0) result[result.length - 1].hasTrailingSpace = true;
|
|
636
|
+
if (style === "codespan") {
|
|
637
|
+
const trimmedText = text.trim();
|
|
638
|
+
if (trimmedText) result.push({
|
|
639
|
+
text: trimmedText,
|
|
640
|
+
width: this.measureWordWidth(doc, trimmedText, style, store),
|
|
641
|
+
style,
|
|
642
|
+
isLink: elIsLink,
|
|
643
|
+
href: elHref,
|
|
644
|
+
linkColor: elIsLink ? store.options.link?.linkColor || [
|
|
379
645
|
0,
|
|
380
646
|
0,
|
|
381
647
|
255
|
|
382
648
|
] : void 0,
|
|
383
|
-
hasTrailingSpace: /\s$/.test(
|
|
649
|
+
hasTrailingSpace: /\s$/.test(text)
|
|
384
650
|
});
|
|
385
651
|
continue;
|
|
386
652
|
}
|
|
387
|
-
|
|
388
|
-
for (let
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
text: i
|
|
392
|
-
width: this.measureWordWidth(
|
|
393
|
-
style
|
|
394
|
-
isLink:
|
|
395
|
-
href:
|
|
396
|
-
linkColor:
|
|
653
|
+
const words = text.trim().split(/\s+/).filter((w) => w.length > 0);
|
|
654
|
+
for (let i = 0; i < words.length; i++) {
|
|
655
|
+
const hasTrailingSpace = !(i === words.length - 1) || /\s$/.test(text);
|
|
656
|
+
result.push({
|
|
657
|
+
text: words[i],
|
|
658
|
+
width: this.measureWordWidth(doc, words[i], style, store),
|
|
659
|
+
style,
|
|
660
|
+
isLink: elIsLink,
|
|
661
|
+
href: elHref,
|
|
662
|
+
linkColor: elIsLink ? store.options.link?.linkColor || [
|
|
397
663
|
0,
|
|
398
664
|
0,
|
|
399
665
|
255
|
|
400
666
|
] : void 0,
|
|
401
|
-
hasTrailingSpace
|
|
667
|
+
hasTrailingSpace
|
|
402
668
|
});
|
|
403
669
|
}
|
|
404
670
|
}
|
|
405
671
|
}
|
|
406
|
-
return
|
|
407
|
-
}
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
672
|
+
return result;
|
|
673
|
+
}
|
|
674
|
+
/**
|
|
675
|
+
* Break a flat list of words into lines that fit within maxWidth.
|
|
676
|
+
* Correctly tracks totalTextWidth (sum of word widths only) for justification.
|
|
677
|
+
*/
|
|
678
|
+
static breakIntoLines(doc, words, maxWidth, store) {
|
|
679
|
+
const lines = [];
|
|
680
|
+
let currentLine = [];
|
|
681
|
+
let currentTextWidth = 0;
|
|
682
|
+
let currentLineWidth = 0;
|
|
683
|
+
let currentLineHeight = getCharHight(doc) * store.options.page.defaultLineHeightFactor;
|
|
684
|
+
const spaceWidth = doc.getTextWidth(" ");
|
|
685
|
+
for (let i = 0; i < words.length; i++) {
|
|
686
|
+
const word = words[i];
|
|
687
|
+
const neededWidthWithSpace = currentLine[currentLine.length - 1]?.hasTrailingSpace ? spaceWidth + word.width : word.width;
|
|
688
|
+
const itemHeight = word.isImage && word.imageHeight ? word.imageHeight : getCharHight(doc) * store.options.page.defaultLineHeightFactor;
|
|
689
|
+
if (word.isBr) {
|
|
690
|
+
lines.push({
|
|
691
|
+
words: currentLine,
|
|
692
|
+
totalTextWidth: currentTextWidth,
|
|
693
|
+
isLastLine: true,
|
|
694
|
+
lineHeight: currentLineHeight
|
|
695
|
+
});
|
|
696
|
+
currentLine = [];
|
|
697
|
+
currentTextWidth = 0;
|
|
698
|
+
currentLineWidth = 0;
|
|
699
|
+
currentLineHeight = getCharHight(doc) * store.options.page.defaultLineHeightFactor;
|
|
419
700
|
continue;
|
|
420
701
|
}
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
702
|
+
if (currentLineWidth + neededWidthWithSpace > maxWidth && currentLine.length > 0) {
|
|
703
|
+
lines.push({
|
|
704
|
+
words: currentLine,
|
|
705
|
+
totalTextWidth: currentTextWidth,
|
|
706
|
+
isLastLine: false,
|
|
707
|
+
lineHeight: currentLineHeight
|
|
708
|
+
});
|
|
709
|
+
currentLine = [word];
|
|
710
|
+
currentTextWidth = word.width;
|
|
711
|
+
currentLineWidth = word.width;
|
|
712
|
+
currentLineHeight = itemHeight;
|
|
713
|
+
} else {
|
|
714
|
+
currentLine.push(word);
|
|
715
|
+
currentTextWidth += word.width;
|
|
716
|
+
currentLineWidth += neededWidthWithSpace;
|
|
717
|
+
currentLineHeight = Math.max(currentLineHeight, itemHeight);
|
|
718
|
+
}
|
|
719
|
+
}
|
|
720
|
+
if (currentLine.length > 0) lines.push({
|
|
721
|
+
words: currentLine,
|
|
722
|
+
totalTextWidth: currentTextWidth,
|
|
723
|
+
isLastLine: true,
|
|
724
|
+
lineHeight: currentLineHeight
|
|
725
|
+
});
|
|
726
|
+
return lines;
|
|
727
|
+
}
|
|
728
|
+
/**
|
|
729
|
+
* Render a single word with its style applied.
|
|
730
|
+
*/
|
|
731
|
+
static renderWord(doc, word, x, y, store) {
|
|
732
|
+
const savedFont = doc.getFont();
|
|
733
|
+
const savedSize = doc.getFontSize();
|
|
734
|
+
const savedColor = doc.getTextColor();
|
|
735
|
+
this.applyStyle(doc, word.style, store);
|
|
736
|
+
if (word.isLink && word.linkColor) doc.setTextColor(...word.linkColor);
|
|
737
|
+
if (word.isImage && word.imageElement && word.imageElement.data) try {
|
|
738
|
+
let imgFormat = "JPEG";
|
|
739
|
+
if (word.imageElement.data.startsWith("data:image/png")) imgFormat = "PNG";
|
|
740
|
+
else if (word.imageElement.data.startsWith("data:image/webp")) imgFormat = "WEBP";
|
|
741
|
+
else if (word.imageElement.data.startsWith("data:image/gif")) imgFormat = "GIF";
|
|
742
|
+
else if (word.imageElement.src) {
|
|
743
|
+
const ext = word.imageElement.src.split("?")[0].split("#")[0].split(".").pop()?.toUpperCase();
|
|
744
|
+
if (ext && [
|
|
445
745
|
"PNG",
|
|
446
746
|
"JPEG",
|
|
447
747
|
"JPG",
|
|
448
748
|
"WEBP",
|
|
449
749
|
"GIF"
|
|
450
|
-
].includes(
|
|
750
|
+
].includes(ext)) imgFormat = ext === "JPG" ? "JPEG" : ext;
|
|
451
751
|
}
|
|
452
|
-
if (
|
|
453
|
-
|
|
454
|
-
|
|
752
|
+
if (word.width > 0 && (word.imageHeight || 0) > 0) {
|
|
753
|
+
const imgH = word.imageHeight || 0;
|
|
754
|
+
const imgY = y;
|
|
755
|
+
doc.addImage(word.imageElement.data, imgFormat, x, imgY, word.width, imgH);
|
|
455
756
|
}
|
|
456
757
|
} catch (e) {
|
|
457
758
|
console.warn("Failed to render inline image", e);
|
|
458
759
|
}
|
|
459
760
|
else {
|
|
460
|
-
if (
|
|
461
|
-
|
|
462
|
-
if (
|
|
463
|
-
|
|
464
|
-
|
|
761
|
+
if (word.style === "codespan") {
|
|
762
|
+
const codespanOpts = this.getCodespanOptions(store);
|
|
763
|
+
if (codespanOpts.showBackground) {
|
|
764
|
+
const h = getCharHight(doc);
|
|
765
|
+
const pad = codespanOpts.padding;
|
|
766
|
+
doc.setFillColor(codespanOpts.backgroundColor);
|
|
767
|
+
doc.rect(x - pad, y - pad, word.width + pad * 2, h + pad * 2, "F");
|
|
768
|
+
doc.setFillColor("#000000");
|
|
465
769
|
}
|
|
466
770
|
}
|
|
467
|
-
|
|
771
|
+
doc.text(word.text, x, y, { baseline: "top" });
|
|
468
772
|
}
|
|
469
|
-
if (
|
|
470
|
-
|
|
471
|
-
|
|
773
|
+
if (word.isLink && word.href) {
|
|
774
|
+
const h = word.isImage && word.imageHeight ? word.imageHeight : getCharHight(doc);
|
|
775
|
+
doc.link(x, y, word.width, h, { url: word.href });
|
|
472
776
|
}
|
|
473
|
-
|
|
777
|
+
doc.setFont(savedFont.fontName, savedFont.fontStyle);
|
|
778
|
+
doc.setFontSize(savedSize);
|
|
779
|
+
doc.setTextColor(savedColor);
|
|
474
780
|
}
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
781
|
+
/**
|
|
782
|
+
* Render a single line with specified alignment.
|
|
783
|
+
*/
|
|
784
|
+
static renderAlignedLine(doc, line, x, y, maxWidth, store, alignment = "left") {
|
|
785
|
+
const { words, totalTextWidth, isLastLine } = line;
|
|
786
|
+
if (words.length === 0) return;
|
|
787
|
+
const normalSpaceWidth = doc.getTextWidth(" ");
|
|
788
|
+
let startX = x;
|
|
789
|
+
let wordSpacing = normalSpaceWidth;
|
|
790
|
+
let lineWidthWithNormalSpaces = totalTextWidth;
|
|
791
|
+
let expandableSpacesCount = 0;
|
|
792
|
+
for (let i = 0; i < words.length - 1; i++) if (words[i].hasTrailingSpace) {
|
|
793
|
+
lineWidthWithNormalSpaces += normalSpaceWidth;
|
|
794
|
+
expandableSpacesCount++;
|
|
795
|
+
}
|
|
796
|
+
switch (alignment) {
|
|
481
797
|
case "right":
|
|
482
|
-
|
|
798
|
+
startX = x + maxWidth - lineWidthWithNormalSpaces;
|
|
483
799
|
break;
|
|
484
800
|
case "center":
|
|
485
|
-
|
|
801
|
+
startX = x + (maxWidth - lineWidthWithNormalSpaces) / 2;
|
|
486
802
|
break;
|
|
487
803
|
case "justify":
|
|
488
|
-
!
|
|
804
|
+
if (!isLastLine && expandableSpacesCount > 0) wordSpacing = (maxWidth - totalTextWidth) / expandableSpacesCount;
|
|
489
805
|
break;
|
|
490
806
|
default: break;
|
|
491
807
|
}
|
|
492
|
-
let
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
808
|
+
let currentX = startX;
|
|
809
|
+
const textHeight = getCharHight(doc) * store.options.page.defaultLineHeightFactor;
|
|
810
|
+
for (let i = 0; i < words.length; i++) {
|
|
811
|
+
const word = words[i];
|
|
812
|
+
let drawY = y;
|
|
813
|
+
const elementHeight = word.isImage && word.imageHeight ? word.imageHeight : textHeight;
|
|
814
|
+
if (word.isImage) drawY = y;
|
|
815
|
+
else if (elementHeight < line.lineHeight) drawY = y + (line.lineHeight - elementHeight);
|
|
816
|
+
this.renderWord(doc, word, currentX, drawY, store);
|
|
817
|
+
currentX += word.width;
|
|
818
|
+
if (i < words.length - 1 && word.hasTrailingSpace) currentX += wordSpacing;
|
|
819
|
+
}
|
|
820
|
+
}
|
|
821
|
+
/**
|
|
822
|
+
* Main entry point: Render a paragraph with mixed inline elements.
|
|
823
|
+
* Respects user's textAlignment option from store.
|
|
824
|
+
*
|
|
825
|
+
* @param doc jsPDF instance
|
|
826
|
+
* @param elements Array of ParsedElement (inline items in a paragraph)
|
|
827
|
+
* @param x Starting X coordinate
|
|
828
|
+
* @param y Starting Y coordinate
|
|
829
|
+
* @param maxWidth Maximum width for text wrapping
|
|
830
|
+
* @param store RenderStore instance to use
|
|
831
|
+
* @param alignment Optional alignment override (defaults to store option)
|
|
832
|
+
*/
|
|
833
|
+
static renderStyledParagraph(doc, elements, x, y, maxWidth, store, alignment) {
|
|
834
|
+
const textAlignment = alignment ?? store.options.content?.textAlignment ?? "left";
|
|
835
|
+
const words = this.flattenToWords(doc, elements, store);
|
|
836
|
+
if (words.length === 0) return;
|
|
837
|
+
const lines = this.breakIntoLines(doc, words, maxWidth, store);
|
|
838
|
+
let currentY = y;
|
|
839
|
+
for (const line of lines) {
|
|
840
|
+
if (currentY + line.lineHeight > store.options.page.maxContentHeight) {
|
|
841
|
+
HandlePageBreaks(doc, store);
|
|
842
|
+
currentY = store.Y;
|
|
843
|
+
}
|
|
844
|
+
this.renderAlignedLine(doc, line, x, currentY, maxWidth, store, textAlignment);
|
|
845
|
+
store.recordContentY(currentY + line.lineHeight);
|
|
846
|
+
currentY += line.lineHeight;
|
|
847
|
+
store.updateY(line.lineHeight, "add");
|
|
848
|
+
}
|
|
849
|
+
const lastLine = lines[lines.length - 1];
|
|
850
|
+
if (lastLine) {
|
|
851
|
+
let actualSpacesCount = 0;
|
|
852
|
+
for (let i = 0; i < lastLine.words.length - 1; i++) if (lastLine.words[i].hasTrailingSpace) actualSpacesCount++;
|
|
853
|
+
const lastLineWidth = lastLine.totalTextWidth + actualSpacesCount * doc.getTextWidth(" ");
|
|
854
|
+
store.updateX(x + lastLineWidth, "set");
|
|
855
|
+
}
|
|
856
|
+
}
|
|
857
|
+
/**
|
|
858
|
+
* @deprecated Use renderStyledParagraph instead
|
|
859
|
+
*/
|
|
860
|
+
static renderJustifiedParagraph(doc, elements, x, y, maxWidth, store) {
|
|
861
|
+
this.renderStyledParagraph(doc, elements, x, y, maxWidth, store);
|
|
862
|
+
}
|
|
863
|
+
};
|
|
864
|
+
//#endregion
|
|
865
|
+
//#region src/utils/text-renderer.ts
|
|
866
|
+
var TextRenderer = class {
|
|
867
|
+
/**
|
|
868
|
+
* Renders text with automatic line wrapping and page breaking.
|
|
869
|
+
* @param doc jsPDF instance
|
|
870
|
+
* @param text Text to render
|
|
871
|
+
* @param store RenderStore instance to use
|
|
872
|
+
* @param x X coordinate (if not provided, uses store.X)
|
|
873
|
+
* @param y Y coordinate (if not provided, uses store.Y)
|
|
874
|
+
* @param maxWidth Max width for text wrapping
|
|
875
|
+
* @param justify Whether to justify the text
|
|
876
|
+
*/
|
|
877
|
+
static renderText(doc, text, store, x = store.X, y = store.Y, maxWidth, justify = false) {
|
|
878
|
+
const lines = doc.splitTextToSize(text, maxWidth);
|
|
879
|
+
const charHeight = getCharHight(doc);
|
|
880
|
+
const lineHeight = charHeight * store.options.page.defaultLineHeightFactor;
|
|
881
|
+
let currentY = y;
|
|
882
|
+
for (let i = 0; i < lines.length; i++) {
|
|
883
|
+
const line = lines[i];
|
|
884
|
+
if (currentY + lineHeight > store.options.page.maxContentHeight) {
|
|
885
|
+
HandlePageBreaks(doc, store);
|
|
886
|
+
currentY = store.Y;
|
|
887
|
+
}
|
|
888
|
+
if (justify) if (i === lines.length - 1) doc.text(line, x, currentY, { baseline: "top" });
|
|
889
|
+
else doc.text(line, x, currentY, {
|
|
890
|
+
maxWidth,
|
|
521
891
|
align: "justify",
|
|
522
892
|
baseline: "top"
|
|
523
|
-
})
|
|
893
|
+
});
|
|
894
|
+
else doc.text(line, x, currentY, { baseline: "top" });
|
|
895
|
+
store.recordContentY(currentY + charHeight);
|
|
896
|
+
currentY += lineHeight;
|
|
897
|
+
store.updateY(lineHeight, "add");
|
|
524
898
|
}
|
|
525
|
-
return
|
|
899
|
+
return currentY;
|
|
526
900
|
}
|
|
527
|
-
}
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
901
|
+
};
|
|
902
|
+
//#endregion
|
|
903
|
+
//#region src/renderer/components/paragraph.ts
|
|
904
|
+
/**
|
|
905
|
+
* Renders paragraph elements with proper text alignment.
|
|
906
|
+
* Handles mixed inline styles (bold, italic, codespan) and links.
|
|
907
|
+
* Respects user's textAlignment option from RenderStore.
|
|
908
|
+
*/
|
|
909
|
+
const renderParagraph = (doc, element, indent, store, parentElementRenderer) => {
|
|
910
|
+
store.activateInlineLock();
|
|
911
|
+
doc.setFontSize(store.options.page.defaultFontSize);
|
|
912
|
+
const maxWidth = store.options.page.maxContentWidth - indent;
|
|
913
|
+
if (element?.items && element?.items.length > 0) {
|
|
914
|
+
if (element.items.length === 1 && element.items[0].type === "image") {
|
|
915
|
+
parentElementRenderer(element.items[0], indent, store, false);
|
|
916
|
+
store.updateX(store.options.page.xpading);
|
|
917
|
+
store.deactivateInlineLock();
|
|
533
918
|
return;
|
|
534
919
|
}
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
920
|
+
const inlineTypes = [
|
|
921
|
+
"strong",
|
|
922
|
+
"em",
|
|
923
|
+
"text",
|
|
924
|
+
"codespan",
|
|
925
|
+
"link",
|
|
926
|
+
"image",
|
|
927
|
+
"br"
|
|
543
928
|
];
|
|
544
|
-
if (
|
|
545
|
-
|
|
546
|
-
|
|
929
|
+
if (element.items.some((item) => !inlineTypes.includes(item.type))) {
|
|
930
|
+
const inlineBuffer = [];
|
|
931
|
+
const flushInlineBuffer = () => {
|
|
932
|
+
if (inlineBuffer.length > 0) {
|
|
933
|
+
JustifiedTextRenderer.renderStyledParagraph(doc, inlineBuffer, store.X + indent, store.Y, maxWidth, store);
|
|
934
|
+
inlineBuffer.length = 0;
|
|
935
|
+
}
|
|
547
936
|
};
|
|
548
|
-
for (
|
|
549
|
-
|
|
550
|
-
|
|
937
|
+
for (const item of element.items) if (inlineTypes.includes(item.type)) inlineBuffer.push(item);
|
|
938
|
+
else {
|
|
939
|
+
flushInlineBuffer();
|
|
940
|
+
parentElementRenderer(item, indent, store, false);
|
|
941
|
+
}
|
|
942
|
+
flushInlineBuffer();
|
|
943
|
+
} else JustifiedTextRenderer.renderStyledParagraph(doc, element.items, store.X + indent, store.Y, maxWidth, store);
|
|
551
944
|
} else {
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
945
|
+
const content = element.content ?? "";
|
|
946
|
+
const textAlignment = store.options.content?.textAlignment ?? "left";
|
|
947
|
+
if (content.trim()) TextRenderer.renderText(doc, content, store, store.X + indent, store.Y, maxWidth, textAlignment === "justify");
|
|
948
|
+
}
|
|
949
|
+
store.updateX(store.options.page.xpading);
|
|
950
|
+
store.deactivateInlineLock();
|
|
951
|
+
};
|
|
952
|
+
//#endregion
|
|
953
|
+
//#region src/renderer/components/list.ts
|
|
954
|
+
const renderList = (doc, element, indentLevel, store, parentElementRenderer) => {
|
|
955
|
+
doc.setFontSize(store.options.page.defaultFontSize);
|
|
956
|
+
for (const [i, point] of element?.items?.entries() ?? []) {
|
|
957
|
+
const _start = element.ordered ? (element.start ?? 0) + i : element.start;
|
|
958
|
+
parentElementRenderer(point, indentLevel + 1, store, true, _start, element.ordered);
|
|
959
|
+
}
|
|
960
|
+
};
|
|
961
|
+
//#endregion
|
|
962
|
+
//#region src/renderer/components/listItem.ts
|
|
963
|
+
/**
|
|
964
|
+
* Render a single list item, including bullets/numbering, inline text, and any nested lists.
|
|
965
|
+
*/
|
|
966
|
+
const renderListItem = (doc, element, indentLevel, store, parentElementRenderer, start, ordered) => {
|
|
967
|
+
if (store.Y + getCharHight(doc) >= store.options.page.maxContentHeight) HandlePageBreaks(doc, store);
|
|
968
|
+
const options = store.options;
|
|
969
|
+
const baseIndent = indentLevel * options.page.indent;
|
|
970
|
+
const bullet = ordered ? `${start}. ` : "• ";
|
|
971
|
+
const xLeft = options.page.xpading;
|
|
972
|
+
store.updateX(xLeft, "set");
|
|
973
|
+
doc.setFont(options.font.regular.name, options.font.regular.style);
|
|
974
|
+
doc.text(bullet, xLeft + baseIndent, store.Y, { baseline: "top" });
|
|
975
|
+
const bulletWidth = doc.getTextWidth(bullet);
|
|
976
|
+
const contentX = xLeft + baseIndent + bulletWidth;
|
|
977
|
+
const textMaxWidth = options.page.maxContentWidth - baseIndent - bulletWidth;
|
|
978
|
+
if (element.items && element.items.length > 0) {
|
|
979
|
+
const inlineBuffer = [];
|
|
980
|
+
const flushInlineBuffer = () => {
|
|
981
|
+
if (inlineBuffer.length > 0) {
|
|
982
|
+
JustifiedTextRenderer.renderStyledParagraph(doc, inlineBuffer, contentX, store.Y, textMaxWidth, store);
|
|
983
|
+
inlineBuffer.length = 0;
|
|
984
|
+
store.updateX(xLeft, "set");
|
|
985
|
+
}
|
|
570
986
|
};
|
|
571
|
-
for (
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
}
|
|
578
|
-
|
|
987
|
+
for (const subItem of element.items) if (subItem.type === "list") {
|
|
988
|
+
flushInlineBuffer();
|
|
989
|
+
parentElementRenderer(subItem, indentLevel, store, true, start, subItem.ordered ?? false);
|
|
990
|
+
} else if (subItem.type === "list_item") {
|
|
991
|
+
flushInlineBuffer();
|
|
992
|
+
parentElementRenderer(subItem, indentLevel, store, true, start, ordered);
|
|
993
|
+
} else inlineBuffer.push(subItem);
|
|
994
|
+
flushInlineBuffer();
|
|
995
|
+
} else if (element.content) {
|
|
996
|
+
const textAlignment = options.content?.textAlignment ?? "left";
|
|
997
|
+
TextRenderer.renderText(doc, element.content, store, contentX, store.Y, textMaxWidth, textAlignment === "justify");
|
|
998
|
+
}
|
|
999
|
+
};
|
|
1000
|
+
//#endregion
|
|
1001
|
+
//#region src/renderer/components/rawItem.ts
|
|
1002
|
+
const renderRawItem = (doc, element, indentLevel, store, hasRawBullet, parentElementRenderer, start, ordered, justify = true) => {
|
|
1003
|
+
if (element?.items && element?.items.length > 0) for (const item of element?.items ?? []) parentElementRenderer(item, indentLevel, store, hasRawBullet, start, ordered, justify);
|
|
579
1004
|
else {
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
1005
|
+
const options = store.options;
|
|
1006
|
+
const indent = indentLevel * options.page.indent;
|
|
1007
|
+
const bullet = hasRawBullet ? ordered ? `${start}. ` : "• " : "";
|
|
1008
|
+
const content = element.content || "";
|
|
1009
|
+
const xLeft = options.page.xpading;
|
|
1010
|
+
if (!content && !bullet) return;
|
|
1011
|
+
if (!content.trim() && !bullet) {
|
|
1012
|
+
const newlines = (content.match(/\n/g) || []).length;
|
|
1013
|
+
if (newlines > 1) {
|
|
1014
|
+
const addedHeight = (newlines - 1) * (doc.getTextDimensions("A").h * options.page.defaultLineHeightFactor);
|
|
1015
|
+
if (store.Y + addedHeight > options.page.maxContentHeight) HandlePageBreaks(doc, store);
|
|
1016
|
+
else {
|
|
1017
|
+
store.updateY(addedHeight, "add");
|
|
1018
|
+
store.recordContentY(store.Y);
|
|
1019
|
+
}
|
|
587
1020
|
}
|
|
588
1021
|
return;
|
|
589
1022
|
}
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
1023
|
+
store.updateX(xLeft, "set");
|
|
1024
|
+
if (hasRawBullet && bullet) {
|
|
1025
|
+
const bulletWidth = doc.getTextWidth(bullet);
|
|
1026
|
+
const textMaxWidth = options.page.maxContentWidth - indent - bulletWidth;
|
|
1027
|
+
doc.setFont(options.font.regular.name, options.font.regular.style);
|
|
1028
|
+
doc.text(bullet, xLeft + indent, store.Y, { baseline: "top" });
|
|
1029
|
+
TextRenderer.renderText(doc, content, store, xLeft + indent + bulletWidth, store.Y, textMaxWidth, justify);
|
|
593
1030
|
} else {
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
}
|
|
597
|
-
|
|
598
|
-
}
|
|
599
|
-
}
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
1031
|
+
const textMaxWidth = options.page.maxContentWidth - indent;
|
|
1032
|
+
TextRenderer.renderText(doc, content, store, xLeft + indent, store.Y, textMaxWidth, justify);
|
|
1033
|
+
}
|
|
1034
|
+
store.updateX(xLeft, "set");
|
|
1035
|
+
}
|
|
1036
|
+
};
|
|
1037
|
+
//#endregion
|
|
1038
|
+
//#region src/renderer/components/hr.ts
|
|
1039
|
+
const renderHR = (doc, store) => {
|
|
1040
|
+
const pageWidth = doc.internal.pageSize.getWidth();
|
|
1041
|
+
doc.setLineDashPattern([1, 1], 0);
|
|
1042
|
+
doc.setLineWidth(.1);
|
|
1043
|
+
doc.line(store.options.page.xpading, store.Y, pageWidth - store.options.page.xpading, store.Y);
|
|
1044
|
+
doc.setLineWidth(.1);
|
|
1045
|
+
doc.setLineDashPattern([], 0);
|
|
1046
|
+
store.updateY(getCharHight(doc), "add");
|
|
1047
|
+
};
|
|
1048
|
+
//#endregion
|
|
1049
|
+
//#region src/renderer/components/code.ts
|
|
1050
|
+
const renderCodeBlock = (doc, element, indentLevel, store) => {
|
|
1051
|
+
const savedFont = doc.getFont();
|
|
1052
|
+
const savedFontSize = doc.getFontSize();
|
|
1053
|
+
const codeFont = store.options.font.code || {
|
|
1054
|
+
name: "courier",
|
|
1055
|
+
style: "normal"
|
|
1056
|
+
};
|
|
1057
|
+
doc.setFont(codeFont.name, codeFont.style);
|
|
1058
|
+
const codeFontSize = store.options.page.defaultFontSize * .9;
|
|
1059
|
+
doc.setFontSize(codeFontSize);
|
|
1060
|
+
const indent = indentLevel * store.options.page.indent;
|
|
1061
|
+
const maxWidth = store.options.page.maxContentWidth - indent - 8;
|
|
1062
|
+
const lineHeightFactor = doc.getLineHeightFactor();
|
|
1063
|
+
const lineHeight = codeFontSize / doc.internal.scaleFactor * lineHeightFactor;
|
|
1064
|
+
const content = (element.code ?? "").replace(/[\r\n\s]+$/, "");
|
|
1065
|
+
if (!content) {
|
|
1066
|
+
doc.setFont(savedFont.fontName, savedFont.fontStyle);
|
|
1067
|
+
doc.setFontSize(savedFontSize);
|
|
610
1068
|
return;
|
|
611
1069
|
}
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
if (
|
|
615
|
-
|
|
1070
|
+
const lines = doc.splitTextToSize(content, maxWidth);
|
|
1071
|
+
while (lines.length > 0 && lines[lines.length - 1].trim() === "") lines.pop();
|
|
1072
|
+
if (lines.length === 0) {
|
|
1073
|
+
doc.setFont(savedFont.fontName, savedFont.fontStyle);
|
|
1074
|
+
doc.setFontSize(savedFontSize);
|
|
616
1075
|
return;
|
|
617
1076
|
}
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
1077
|
+
const padding = 4;
|
|
1078
|
+
const bgColor = "#EEEEEE";
|
|
1079
|
+
const drawColor = "#DDDDDD";
|
|
1080
|
+
let currentLineIndex = 0;
|
|
1081
|
+
while (currentLineIndex < lines.length) {
|
|
1082
|
+
const availableHeight = store.options.page.maxContentHeight - store.Y;
|
|
1083
|
+
const remainingLines = lines.length - currentLineIndex;
|
|
1084
|
+
const effectiveAvailable = availableHeight - padding * 2;
|
|
1085
|
+
let linesToRenderCount = Math.floor(effectiveAvailable / lineHeight);
|
|
1086
|
+
if (linesToRenderCount <= 0) {
|
|
1087
|
+
HandlePageBreaks(doc, store);
|
|
623
1088
|
continue;
|
|
624
1089
|
}
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
1090
|
+
if (linesToRenderCount > remainingLines) linesToRenderCount = remainingLines;
|
|
1091
|
+
const linesToRender = lines.slice(currentLineIndex, currentLineIndex + linesToRenderCount);
|
|
1092
|
+
const isFirstChunk = currentLineIndex === 0;
|
|
1093
|
+
const isLastChunk = currentLineIndex + linesToRenderCount >= lines.length;
|
|
1094
|
+
const textBlockHeight = linesToRenderCount * lineHeight;
|
|
1095
|
+
if (isFirstChunk) store.updateY(padding, "add");
|
|
1096
|
+
doc.setFillColor(bgColor);
|
|
1097
|
+
doc.setDrawColor(drawColor);
|
|
1098
|
+
doc.roundedRect(store.X, store.Y - padding, store.options.page.maxContentWidth, textBlockHeight + (isFirstChunk ? padding : 0) + (isLastChunk ? padding : 0), 2, 2, "FD");
|
|
1099
|
+
if (isFirstChunk && element.lang) {
|
|
1100
|
+
const savedCodeFontSize = doc.getFontSize();
|
|
1101
|
+
doc.setFontSize(10);
|
|
1102
|
+
doc.setTextColor("#666666");
|
|
1103
|
+
doc.text(element.lang, store.X + store.options.page.maxContentWidth - doc.getTextWidth(element.lang) - 4, store.Y, { baseline: "top" });
|
|
1104
|
+
doc.setFontSize(savedCodeFontSize);
|
|
1105
|
+
doc.setTextColor("#000000");
|
|
630
1106
|
}
|
|
631
|
-
let
|
|
632
|
-
for (
|
|
633
|
-
|
|
1107
|
+
let yPos = store.Y;
|
|
1108
|
+
for (const line of linesToRender) {
|
|
1109
|
+
doc.text(line, store.X + 4, yPos, { baseline: "top" });
|
|
1110
|
+
yPos += lineHeight;
|
|
1111
|
+
}
|
|
1112
|
+
store.updateY(textBlockHeight, "add");
|
|
1113
|
+
store.recordContentY(store.Y + (isLastChunk ? padding : 0));
|
|
1114
|
+
if (isLastChunk) store.updateY(padding, "add");
|
|
1115
|
+
currentLineIndex += linesToRenderCount;
|
|
1116
|
+
if (currentLineIndex < lines.length) HandlePageBreaks(doc, store);
|
|
634
1117
|
}
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
1118
|
+
doc.setFont(savedFont.fontName, savedFont.fontStyle);
|
|
1119
|
+
doc.setFontSize(savedFontSize);
|
|
1120
|
+
};
|
|
1121
|
+
//#endregion
|
|
1122
|
+
//#region src/renderer/components/inlineText.ts
|
|
1123
|
+
/**
|
|
1124
|
+
* Renders inline text elements (Strong, Em, and Text) with proper inline styling.
|
|
1125
|
+
*/
|
|
1126
|
+
const renderInlineText = (doc, element, indent, store) => {
|
|
1127
|
+
const currentFont = doc.getFont().fontName;
|
|
1128
|
+
const currentFontStyle = doc.getFont().fontStyle;
|
|
1129
|
+
const currentFontSize = doc.getFontSize();
|
|
1130
|
+
const spaceMultiplier = (style) => {
|
|
1131
|
+
switch (style) {
|
|
639
1132
|
case "normal": return 0;
|
|
640
1133
|
case "bold": return 1;
|
|
641
1134
|
case "italic": return 1.5;
|
|
@@ -643,192 +1136,338 @@ var n = /* @__PURE__ */ function(e) {
|
|
|
643
1136
|
case "codespan": return .5;
|
|
644
1137
|
default: return 0;
|
|
645
1138
|
}
|
|
646
|
-
}
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
if (
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
1139
|
+
};
|
|
1140
|
+
const renderTextWithStyle = (text, style) => {
|
|
1141
|
+
if (style === "bold") doc.setFont(store.options.font.bold.name && store.options.font.bold.name !== "" ? store.options.font.bold.name : currentFont, store.options.font.bold.style || "bold");
|
|
1142
|
+
else if (style === "italic") doc.setFont(store.options.font.regular.name, "italic");
|
|
1143
|
+
else if (style === "bolditalic") doc.setFont(store.options.font.bold.name && store.options.font.bold.name !== "" ? store.options.font.bold.name : currentFont, "bolditalic");
|
|
1144
|
+
else if (style === "codespan") {
|
|
1145
|
+
const codeFont = store.options.font.code || {
|
|
1146
|
+
name: "courier",
|
|
1147
|
+
style: "normal"
|
|
1148
|
+
};
|
|
1149
|
+
doc.setFont(codeFont.name, codeFont.style);
|
|
1150
|
+
doc.setFontSize(currentFontSize * .9);
|
|
1151
|
+
} else doc.setFont(store.options.font.regular.name, currentFontStyle);
|
|
1152
|
+
const availableWidth = store.options.page.maxContentWidth - indent - store.X;
|
|
1153
|
+
const textLines = doc.splitTextToSize(text, availableWidth);
|
|
1154
|
+
const isCodeSpan = style === "codespan";
|
|
1155
|
+
const codePadding = 1;
|
|
1156
|
+
const codeBgColor = "#EEEEEE";
|
|
1157
|
+
if (store.isInlineLockActive) for (let i = 0; i < textLines.length; i++) {
|
|
1158
|
+
if (isCodeSpan) {
|
|
1159
|
+
const lineWidth = doc.getTextWidth(textLines[i]) + getCharWidth(doc);
|
|
1160
|
+
const lineHeight = getCharHight(doc);
|
|
1161
|
+
doc.setFillColor(codeBgColor);
|
|
1162
|
+
doc.roundedRect(store.X + indent - codePadding, store.Y - codePadding, lineWidth + codePadding * 2, lineHeight + codePadding * 2, 2, 2, "F");
|
|
1163
|
+
doc.setFillColor("#000000");
|
|
653
1164
|
}
|
|
654
|
-
|
|
1165
|
+
doc.text(textLines[i], store.X + indent, store.Y, {
|
|
655
1166
|
baseline: "top",
|
|
656
|
-
maxWidth:
|
|
657
|
-
})
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
let i = e.getTextWidth(t) + h(e), a = m(e);
|
|
663
|
-
e.setFillColor(f), e.roundedRect(r.X + (n >= 2 ? n + 2 : 0) - 1, r.Y - 1, i + 2, a + 2, 2, 2, "F"), e.setFillColor("#000000");
|
|
1167
|
+
maxWidth: availableWidth
|
|
1168
|
+
});
|
|
1169
|
+
store.updateX(doc.getTextDimensions(textLines[i]).w + (isCodeSpan ? codePadding * 2 : 1), "add");
|
|
1170
|
+
if (i < textLines.length - 1) {
|
|
1171
|
+
store.updateY(getCharHight(doc), "add");
|
|
1172
|
+
store.updateX(store.options.page.xpading, "set");
|
|
664
1173
|
}
|
|
665
|
-
|
|
1174
|
+
}
|
|
1175
|
+
else if (textLines.length > 1) {
|
|
1176
|
+
const firstLine = textLines[0];
|
|
1177
|
+
const restContent = textLines?.slice(1)?.join(" ");
|
|
1178
|
+
if (isCodeSpan) {
|
|
1179
|
+
const w = doc.getTextWidth(firstLine) + getCharWidth(doc);
|
|
1180
|
+
const h = getCharHight(doc);
|
|
1181
|
+
doc.setFillColor(codeBgColor);
|
|
1182
|
+
doc.roundedRect(store.X + (indent >= 2 ? indent + 2 : 0) - codePadding, store.Y - codePadding, w + codePadding * 2, h + codePadding * 2, 2, 2, "F");
|
|
1183
|
+
doc.setFillColor("#000000");
|
|
1184
|
+
}
|
|
1185
|
+
doc.text(firstLine, store.X + (indent >= 2 ? indent + 2 * spaceMultiplier(style) : 0), store.Y, {
|
|
666
1186
|
baseline: "top",
|
|
667
|
-
maxWidth:
|
|
668
|
-
})
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
1187
|
+
maxWidth: availableWidth
|
|
1188
|
+
});
|
|
1189
|
+
store.updateX(store.options.page.xpading + indent);
|
|
1190
|
+
store.updateY(getCharHight(doc), "add");
|
|
1191
|
+
const maxWidthForRest = store.options.page.maxContentWidth - indent - store.options.page.xpading;
|
|
1192
|
+
doc.splitTextToSize(restContent, maxWidthForRest).forEach((line) => {
|
|
1193
|
+
if (isCodeSpan) {
|
|
1194
|
+
const w = doc.getTextWidth(line) + getCharWidth(doc);
|
|
1195
|
+
const h = getCharHight(doc);
|
|
1196
|
+
doc.setFillColor(codeBgColor);
|
|
1197
|
+
doc.roundedRect(store.X + getCharWidth(doc) - codePadding, store.Y - codePadding, w + codePadding * 2, h + codePadding * 2, 2, 2, "F");
|
|
1198
|
+
doc.setFillColor("#000000");
|
|
674
1199
|
}
|
|
675
|
-
|
|
1200
|
+
doc.text(line, store.X + getCharWidth(doc), store.Y, {
|
|
676
1201
|
baseline: "top",
|
|
677
|
-
maxWidth:
|
|
1202
|
+
maxWidth: maxWidthForRest
|
|
678
1203
|
});
|
|
679
1204
|
});
|
|
680
1205
|
} else {
|
|
681
|
-
if (
|
|
682
|
-
|
|
683
|
-
|
|
1206
|
+
if (isCodeSpan) {
|
|
1207
|
+
const w = doc.getTextWidth(text) + getCharWidth(doc);
|
|
1208
|
+
const h = getCharHight(doc);
|
|
1209
|
+
doc.setFillColor(codeBgColor);
|
|
1210
|
+
doc.roundedRect(store.X + indent - codePadding, store.Y - codePadding, w + codePadding * 2, h + codePadding * 2, 2, 2, "F");
|
|
1211
|
+
doc.setFillColor("#000000");
|
|
684
1212
|
}
|
|
685
|
-
|
|
1213
|
+
doc.text(text, store.X + indent, store.Y, {
|
|
686
1214
|
baseline: "top",
|
|
687
|
-
maxWidth:
|
|
688
|
-
})
|
|
1215
|
+
maxWidth: availableWidth
|
|
1216
|
+
});
|
|
1217
|
+
store.updateX(doc.getTextDimensions(text).w + (indent >= 2 ? text.split(" ").length + 2 : 2) * spaceMultiplier(style) * .5 + (isCodeSpan ? codePadding * 2 : 0), "add");
|
|
689
1218
|
}
|
|
690
1219
|
};
|
|
691
|
-
if (
|
|
692
|
-
else if (
|
|
693
|
-
|
|
694
|
-
if (
|
|
695
|
-
else
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
1220
|
+
if (element.type === "text" && element.items && element.items.length > 0) for (const item of element.items) if (item.type === "codespan") renderTextWithStyle(item.content || "", "codespan");
|
|
1221
|
+
else if (item.type === "em" || item.type === "strong") {
|
|
1222
|
+
const baseStyle = item.type === "em" ? "italic" : "bold";
|
|
1223
|
+
if (item.items && item.items.length > 0) for (const subItem of item.items) if (subItem.type === "strong" && baseStyle === "italic") renderTextWithStyle(subItem.content || "", "bolditalic");
|
|
1224
|
+
else if (subItem.type === "em" && baseStyle === "bold") renderTextWithStyle(subItem.content || "", "bolditalic");
|
|
1225
|
+
else renderTextWithStyle(subItem.content || "", baseStyle);
|
|
1226
|
+
else renderTextWithStyle(item.content || "", baseStyle);
|
|
1227
|
+
} else renderTextWithStyle(item.content || "", "normal");
|
|
1228
|
+
else if (element.type === "em") renderTextWithStyle(element.content || "", "italic");
|
|
1229
|
+
else if (element.type === "strong") renderTextWithStyle(element.content || "", "bold");
|
|
1230
|
+
else if (element.type === "codespan") renderTextWithStyle(element.content || "", "codespan");
|
|
1231
|
+
else renderTextWithStyle(element.content || "", "normal");
|
|
1232
|
+
doc.setFont(currentFont, currentFontStyle);
|
|
1233
|
+
doc.setFontSize(currentFontSize);
|
|
1234
|
+
};
|
|
1235
|
+
//#endregion
|
|
1236
|
+
//#region src/renderer/components/link.ts
|
|
1237
|
+
/**
|
|
1238
|
+
* Renders link elements with proper styling and URL handling.
|
|
1239
|
+
* Links are rendered in blue color and underlined to distinguish them from regular text.
|
|
1240
|
+
*/
|
|
1241
|
+
const renderLink = (doc, element, indent, store) => {
|
|
1242
|
+
const currentFont = doc.getFont().fontName;
|
|
1243
|
+
const currentFontStyle = doc.getFont().fontStyle;
|
|
1244
|
+
const currentFontSize = doc.getFontSize();
|
|
1245
|
+
const currentTextColor = doc.getTextColor();
|
|
1246
|
+
const linkColor = store.options.link?.linkColor || [
|
|
701
1247
|
0,
|
|
702
1248
|
0,
|
|
703
1249
|
255
|
|
704
1250
|
];
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
1251
|
+
doc.setTextColor(...linkColor);
|
|
1252
|
+
const availableWidth = store.options.page.maxContentWidth - indent - store.X;
|
|
1253
|
+
const linkText = element.text || element.content || "";
|
|
1254
|
+
const linkUrl = element.href || "";
|
|
1255
|
+
const textLines = doc.splitTextToSize(linkText, availableWidth);
|
|
1256
|
+
if (store.isInlineLockActive) for (let i = 0; i < textLines.length; i++) {
|
|
1257
|
+
const textWidth = doc.getTextDimensions(textLines[i]).w;
|
|
1258
|
+
const textHeight = getCharHight(doc) / 2;
|
|
1259
|
+
doc.link(store.X + indent, store.Y, textWidth, textHeight, { url: linkUrl });
|
|
1260
|
+
doc.text(textLines[i], store.X + indent, store.Y, {
|
|
710
1261
|
baseline: "top",
|
|
711
|
-
maxWidth:
|
|
712
|
-
})
|
|
1262
|
+
maxWidth: availableWidth
|
|
1263
|
+
});
|
|
1264
|
+
store.updateX(textWidth + 1, "add");
|
|
1265
|
+
if (store.X + textWidth > store.options.page.maxContentWidth - indent) {
|
|
1266
|
+
store.updateY(textHeight, "add");
|
|
1267
|
+
store.updateX(store.options.page.xpading + indent, "set");
|
|
1268
|
+
}
|
|
1269
|
+
if (i < textLines.length - 1) {
|
|
1270
|
+
store.updateY(textHeight, "add");
|
|
1271
|
+
store.updateX(store.options.page.xpading + indent, "set");
|
|
1272
|
+
}
|
|
713
1273
|
}
|
|
714
|
-
else if (
|
|
715
|
-
|
|
716
|
-
|
|
1274
|
+
else if (textLines.length > 1) {
|
|
1275
|
+
const firstLine = textLines[0];
|
|
1276
|
+
const restContent = textLines?.slice(1)?.join(" ");
|
|
1277
|
+
const firstLineWidth = doc.getTextDimensions(firstLine).w;
|
|
1278
|
+
const textHeight = getCharHight(doc) / 2;
|
|
1279
|
+
doc.link(store.X + indent, store.Y, firstLineWidth, textHeight, { url: linkUrl });
|
|
1280
|
+
doc.text(firstLine, store.X + indent, store.Y, {
|
|
717
1281
|
baseline: "top",
|
|
718
|
-
maxWidth:
|
|
719
|
-
})
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
1282
|
+
maxWidth: availableWidth
|
|
1283
|
+
});
|
|
1284
|
+
store.updateX(store.options.page.xpading + indent);
|
|
1285
|
+
store.updateY(textHeight, "add");
|
|
1286
|
+
const maxWidthForRest = store.options.page.maxContentWidth - indent - store.options.page.xpading;
|
|
1287
|
+
doc.splitTextToSize(restContent, maxWidthForRest).forEach((line) => {
|
|
1288
|
+
const lineWidth = doc.getTextDimensions(line).w;
|
|
1289
|
+
doc.link(store.X + getCharWidth(doc), store.Y, lineWidth, textHeight, { url: linkUrl });
|
|
1290
|
+
doc.text(line, store.X + getCharWidth(doc), store.Y, {
|
|
724
1291
|
baseline: "top",
|
|
725
|
-
maxWidth:
|
|
1292
|
+
maxWidth: maxWidthForRest
|
|
726
1293
|
});
|
|
727
1294
|
});
|
|
728
1295
|
} else {
|
|
729
|
-
|
|
730
|
-
|
|
1296
|
+
const textWidth = doc.getTextDimensions(linkText).w;
|
|
1297
|
+
const textHeight = getCharHight(doc) / 2;
|
|
1298
|
+
doc.link(store.X + indent, store.Y, textWidth, textHeight, { url: linkUrl });
|
|
1299
|
+
doc.text(linkText, store.X + indent, store.Y, {
|
|
731
1300
|
baseline: "top",
|
|
732
|
-
maxWidth:
|
|
733
|
-
})
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
1301
|
+
maxWidth: availableWidth
|
|
1302
|
+
});
|
|
1303
|
+
store.updateX(textWidth + 2, "add");
|
|
1304
|
+
}
|
|
1305
|
+
doc.setFont(currentFont, currentFontStyle);
|
|
1306
|
+
doc.setFontSize(currentFontSize);
|
|
1307
|
+
doc.setTextColor(currentTextColor);
|
|
1308
|
+
};
|
|
1309
|
+
//#endregion
|
|
1310
|
+
//#region src/renderer/components/blockquote.ts
|
|
1311
|
+
const renderBlockquote = (doc, element, indentLevel, store, renderElement) => {
|
|
1312
|
+
const options = store.options;
|
|
1313
|
+
const blockquoteIndent = indentLevel + 1;
|
|
1314
|
+
const currentX = store.X + indentLevel * options.page.indent;
|
|
1315
|
+
const currentY = store.Y;
|
|
1316
|
+
const barX = currentX + options.page.indent / 2;
|
|
1317
|
+
const startY = currentY;
|
|
1318
|
+
const startPage = doc.internal.getCurrentPageInfo().pageNumber;
|
|
1319
|
+
if (element.items && element.items.length > 0) element.items.forEach((item) => {
|
|
1320
|
+
renderElement(item, blockquoteIndent, store);
|
|
740
1321
|
});
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
1322
|
+
const endY = store.Y;
|
|
1323
|
+
const endPage = doc.internal.getCurrentPageInfo().pageNumber;
|
|
1324
|
+
doc.setDrawColor(100);
|
|
1325
|
+
doc.setLineWidth(1);
|
|
1326
|
+
for (let p = startPage; p <= endPage; p++) {
|
|
1327
|
+
doc.setPage(p);
|
|
1328
|
+
const isStart = p === startPage;
|
|
1329
|
+
const isEnd = p === endPage;
|
|
1330
|
+
const lineTop = isStart ? startY : options.page.topmargin;
|
|
1331
|
+
const lineBottom = isEnd ? endY : options.page.maxContentHeight;
|
|
1332
|
+
doc.line(barX, lineTop, barX, lineBottom);
|
|
1333
|
+
}
|
|
1334
|
+
store.recordContentY();
|
|
1335
|
+
doc.setPage(endPage);
|
|
1336
|
+
};
|
|
1337
|
+
//#endregion
|
|
1338
|
+
//#region src/renderer/components/image.ts
|
|
1339
|
+
/**
|
|
1340
|
+
* Detects the image format from element data and source.
|
|
1341
|
+
*/
|
|
1342
|
+
const detectImageFormat = (element) => {
|
|
1343
|
+
if (element.data) {
|
|
1344
|
+
if (element.data.startsWith("data:image/png")) return "PNG";
|
|
1345
|
+
if (element.data.startsWith("data:image/jpeg") || element.data.startsWith("data:image/jpg")) return "JPEG";
|
|
1346
|
+
if (element.data.startsWith("data:image/webp")) return "WEBP";
|
|
1347
|
+
if (element.data.startsWith("data:image/webp")) return "WEBP";
|
|
1348
|
+
if (element.data.startsWith("data:image/gif")) return "GIF";
|
|
1349
|
+
}
|
|
1350
|
+
if (element.src) {
|
|
1351
|
+
const ext = element.src.split("?")[0].split("#")[0].split(".").pop()?.toUpperCase();
|
|
1352
|
+
if (ext && [
|
|
759
1353
|
"PNG",
|
|
760
1354
|
"JPEG",
|
|
761
1355
|
"JPG",
|
|
762
1356
|
"WEBP",
|
|
763
1357
|
"GIF"
|
|
764
|
-
].includes(
|
|
1358
|
+
].includes(ext)) return ext === "JPG" ? "JPEG" : ext;
|
|
765
1359
|
}
|
|
766
1360
|
return "JPEG";
|
|
767
|
-
}
|
|
768
|
-
|
|
769
|
-
|
|
1361
|
+
};
|
|
1362
|
+
/**
|
|
1363
|
+
* Renders an image element into the jsPDF document with smart sizing and alignment.
|
|
1364
|
+
*
|
|
1365
|
+
* Sizing logic (in order of priority):
|
|
1366
|
+
* 1. If both width & height are specified by user → convert from px, use as-is
|
|
1367
|
+
* 2. If only width is specified → convert from px, calculate height from aspect ratio
|
|
1368
|
+
* 3. If only height is specified → convert from px, calculate width from aspect ratio
|
|
1369
|
+
* 4. If nothing specified → use intrinsic dimensions (converted from px to doc units)
|
|
1370
|
+
* 5. Always clamp to page bounds (scale down proportionally if needed)
|
|
1371
|
+
*
|
|
1372
|
+
* Alignment: 'left' (default) | 'center' | 'right'
|
|
1373
|
+
* Can be set per-image via markdown attributes or globally via RenderOption.image.defaultAlign
|
|
1374
|
+
*/
|
|
1375
|
+
const renderImage = (doc, element, indentLevel, store) => {
|
|
1376
|
+
if (!element.data) return;
|
|
1377
|
+
const options = store.options;
|
|
1378
|
+
const docUnit = options.page.unit || "mm";
|
|
1379
|
+
const indent = indentLevel * options.page.indent;
|
|
1380
|
+
const maxWidth = options.page.maxContentWidth - indent;
|
|
1381
|
+
const pageLeftX = store.X + indent;
|
|
1382
|
+
let currentY = store.Y;
|
|
770
1383
|
try {
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
1384
|
+
const { finalWidth, finalHeight } = calculateImageDimensions(doc, element, maxWidth, options.page.maxContentHeight - options.page.topmargin, docUnit);
|
|
1385
|
+
if (currentY + finalHeight > options.page.maxContentHeight) {
|
|
1386
|
+
HandlePageBreaks(doc, store);
|
|
1387
|
+
currentY = store.Y;
|
|
1388
|
+
}
|
|
1389
|
+
const align = element.align || options.image?.defaultAlign || "left";
|
|
1390
|
+
let drawX;
|
|
1391
|
+
switch (align) {
|
|
775
1392
|
case "right":
|
|
776
|
-
|
|
1393
|
+
drawX = pageLeftX + maxWidth - finalWidth;
|
|
777
1394
|
break;
|
|
778
1395
|
case "center":
|
|
779
|
-
|
|
1396
|
+
drawX = pageLeftX + (maxWidth - finalWidth) / 2;
|
|
780
1397
|
break;
|
|
781
1398
|
default:
|
|
782
|
-
|
|
1399
|
+
drawX = pageLeftX;
|
|
783
1400
|
break;
|
|
784
1401
|
}
|
|
785
|
-
|
|
786
|
-
|
|
1402
|
+
const imgFormat = detectImageFormat(element);
|
|
1403
|
+
if (finalWidth > 0 && finalHeight > 0) doc.addImage(element.data, imgFormat, drawX, currentY, finalWidth, finalHeight);
|
|
1404
|
+
store.updateY(finalHeight, "add");
|
|
1405
|
+
store.recordContentY();
|
|
787
1406
|
} catch (e) {
|
|
788
1407
|
console.warn("Failed to render image", e);
|
|
789
1408
|
}
|
|
790
|
-
}
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
if (
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
1409
|
+
};
|
|
1410
|
+
//#endregion
|
|
1411
|
+
//#region src/renderer/components/table.ts
|
|
1412
|
+
const resolveAutoTable = () => {
|
|
1413
|
+
const autoTableCandidate = autoTable;
|
|
1414
|
+
if (typeof autoTable === "function") return autoTable;
|
|
1415
|
+
if (typeof autoTableCandidate.default === "function") return autoTableCandidate.default;
|
|
1416
|
+
if (typeof autoTableCandidate.autoTable === "function") return autoTableCandidate.autoTable;
|
|
1417
|
+
throw new Error("Could not resolve jspdf-autotable export. Expected a callable export.");
|
|
1418
|
+
};
|
|
1419
|
+
const renderTable = (doc, element, indentLevel, store) => {
|
|
1420
|
+
if (!element.header || !element.rows) return;
|
|
1421
|
+
const options = store.options;
|
|
1422
|
+
const marginLeft = options.page.xmargin + indentLevel * options.page.indent;
|
|
1423
|
+
const head = [element.header.map((h) => h.content || "")];
|
|
1424
|
+
const body = element.rows.map((row) => row.map((cell) => cell.content || ""));
|
|
1425
|
+
const userTableOptions = options.table || {};
|
|
1426
|
+
resolveAutoTable()(doc, {
|
|
1427
|
+
head,
|
|
1428
|
+
body,
|
|
1429
|
+
startY: store.Y,
|
|
803
1430
|
margin: {
|
|
804
|
-
left:
|
|
805
|
-
right:
|
|
1431
|
+
left: marginLeft,
|
|
1432
|
+
right: options.page.xmargin
|
|
806
1433
|
},
|
|
807
|
-
...
|
|
808
|
-
didDrawPage: (
|
|
809
|
-
|
|
1434
|
+
...userTableOptions,
|
|
1435
|
+
didDrawPage: (data) => {
|
|
1436
|
+
if (userTableOptions.didDrawPage) userTableOptions.didDrawPage(data);
|
|
810
1437
|
},
|
|
811
|
-
didDrawCell: (
|
|
812
|
-
|
|
1438
|
+
didDrawCell: (data) => {
|
|
1439
|
+
if (userTableOptions.didDrawCell) userTableOptions.didDrawCell(data);
|
|
813
1440
|
}
|
|
814
1441
|
});
|
|
815
|
-
|
|
816
|
-
typeof
|
|
817
|
-
|
|
818
|
-
|
|
1442
|
+
const finalY = doc.lastAutoTable?.finalY;
|
|
1443
|
+
if (typeof finalY === "number") {
|
|
1444
|
+
store.updateY(finalY + options.page.lineSpace, "set");
|
|
1445
|
+
store.updateX(options.page.xpading, "set");
|
|
1446
|
+
store.recordContentY();
|
|
1447
|
+
}
|
|
1448
|
+
};
|
|
1449
|
+
//#endregion
|
|
1450
|
+
//#region src/store/renderStore.ts
|
|
1451
|
+
var RenderStore = class {
|
|
1452
|
+
constructor(options) {
|
|
819
1453
|
this.cursor = {
|
|
820
1454
|
x: 0,
|
|
821
1455
|
y: 0
|
|
822
|
-
}
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
1456
|
+
};
|
|
1457
|
+
this.lastContentY_ = 0;
|
|
1458
|
+
this.inlineLock = false;
|
|
1459
|
+
this.options_ = options;
|
|
1460
|
+
this.cursor = {
|
|
1461
|
+
x: options.cursor.x,
|
|
1462
|
+
y: options.cursor.y
|
|
1463
|
+
};
|
|
1464
|
+
this.lastContentY_ = options.cursor.y;
|
|
826
1465
|
}
|
|
827
1466
|
getCursor() {
|
|
828
1467
|
return this.cursor;
|
|
829
1468
|
}
|
|
830
|
-
setCursor(
|
|
831
|
-
this.cursor =
|
|
1469
|
+
setCursor(newCursor) {
|
|
1470
|
+
this.cursor = newCursor;
|
|
832
1471
|
}
|
|
833
1472
|
get options() {
|
|
834
1473
|
return this.options_;
|
|
@@ -837,20 +1476,43 @@ var n = /* @__PURE__ */ function(e) {
|
|
|
837
1476
|
return this.inlineLock;
|
|
838
1477
|
}
|
|
839
1478
|
activateInlineLock() {
|
|
840
|
-
this.inlineLock =
|
|
1479
|
+
this.inlineLock = true;
|
|
841
1480
|
}
|
|
842
1481
|
deactivateInlineLock() {
|
|
843
|
-
this.inlineLock =
|
|
1482
|
+
this.inlineLock = false;
|
|
844
1483
|
}
|
|
845
|
-
|
|
846
|
-
|
|
1484
|
+
/**
|
|
1485
|
+
* Updates the x pointer of the cursor.
|
|
1486
|
+
* @param value The value to set or add.
|
|
1487
|
+
* @param operation 'set' to assign a new value, 'add' to increment the current value.
|
|
1488
|
+
* @default operation = 'set'
|
|
1489
|
+
*/
|
|
1490
|
+
updateX(value, operation = "set") {
|
|
1491
|
+
if (operation === "set") this.cursor.x = value;
|
|
1492
|
+
else if (operation === "add") this.cursor.x += value;
|
|
847
1493
|
}
|
|
848
|
-
|
|
849
|
-
|
|
1494
|
+
/**
|
|
1495
|
+
* Updates the y pointer of the cursor.
|
|
1496
|
+
* @param value The value to set or add.
|
|
1497
|
+
* @param operation 'set' to assign a new value, 'add' to increment the current value.
|
|
1498
|
+
* @default operation = 'set'
|
|
1499
|
+
*/
|
|
1500
|
+
updateY(value, operation = "set") {
|
|
1501
|
+
if (operation === "set") this.cursor.y = value;
|
|
1502
|
+
else if (operation === "add") this.cursor.y += value;
|
|
850
1503
|
}
|
|
851
|
-
|
|
852
|
-
|
|
1504
|
+
/**
|
|
1505
|
+
* Records a Y position as the bottom of rendered content.
|
|
1506
|
+
* This is useful for container components (like blockquotes) to know
|
|
1507
|
+
* where their actual text content ends, ignoring any trailing margins.
|
|
1508
|
+
* @param specificY Optional Y value to record. Defaults to current cursor Y.
|
|
1509
|
+
*/
|
|
1510
|
+
recordContentY(specificY) {
|
|
1511
|
+
this.lastContentY_ = specificY !== void 0 ? specificY : this.cursor.y;
|
|
853
1512
|
}
|
|
1513
|
+
/**
|
|
1514
|
+
* Gets the last Y position recorded as content bottom.
|
|
1515
|
+
*/
|
|
854
1516
|
get lastContentY() {
|
|
855
1517
|
return this.lastContentY_;
|
|
856
1518
|
}
|
|
@@ -860,7 +1522,10 @@ var n = /* @__PURE__ */ function(e) {
|
|
|
860
1522
|
get Y() {
|
|
861
1523
|
return this.cursor.y;
|
|
862
1524
|
}
|
|
863
|
-
}
|
|
1525
|
+
};
|
|
1526
|
+
//#endregion
|
|
1527
|
+
//#region src/utils/options-validation.ts
|
|
1528
|
+
const defaultOptions = {
|
|
864
1529
|
page: {
|
|
865
1530
|
indent: 10,
|
|
866
1531
|
maxContentWidth: 190,
|
|
@@ -887,88 +1552,111 @@ var n = /* @__PURE__ */ function(e) {
|
|
|
887
1552
|
light: {
|
|
888
1553
|
name: "helvetica",
|
|
889
1554
|
style: "light"
|
|
1555
|
+
},
|
|
1556
|
+
code: {
|
|
1557
|
+
name: "courier",
|
|
1558
|
+
style: "normal"
|
|
890
1559
|
}
|
|
891
1560
|
},
|
|
892
1561
|
image: { defaultAlign: "left" }
|
|
893
|
-
}
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
...
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
...
|
|
903
|
-
|
|
1562
|
+
};
|
|
1563
|
+
const validateOptions = (options) => {
|
|
1564
|
+
if (!options) throw new Error("RenderOption is required");
|
|
1565
|
+
const mergedPage = {
|
|
1566
|
+
...defaultOptions.page,
|
|
1567
|
+
...options.page
|
|
1568
|
+
};
|
|
1569
|
+
const mergedFont = {
|
|
1570
|
+
...defaultOptions.font,
|
|
1571
|
+
...options.font
|
|
1572
|
+
};
|
|
1573
|
+
const mergedImage = {
|
|
1574
|
+
...defaultOptions.image,
|
|
1575
|
+
...options.image
|
|
904
1576
|
};
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
1577
|
+
if (!mergedPage.maxContentWidth) mergedPage.maxContentWidth = 190;
|
|
1578
|
+
if (!mergedPage.maxContentHeight) mergedPage.maxContentHeight = 277;
|
|
1579
|
+
return {
|
|
1580
|
+
...options,
|
|
1581
|
+
page: mergedPage,
|
|
1582
|
+
font: mergedFont,
|
|
1583
|
+
image: mergedImage
|
|
910
1584
|
};
|
|
911
|
-
}
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
1585
|
+
};
|
|
1586
|
+
//#endregion
|
|
1587
|
+
//#region src/renderer/MdTextRender.ts
|
|
1588
|
+
/**
|
|
1589
|
+
* Renders parsed markdown text into jsPDF document.
|
|
1590
|
+
*
|
|
1591
|
+
* @param doc - The jsPDF document.
|
|
1592
|
+
* @param text - The markdown content to render.
|
|
1593
|
+
* @param options - The render options (fonts, page margins, etc.).
|
|
1594
|
+
*/
|
|
1595
|
+
const MdTextRender = async (doc, text, options) => {
|
|
1596
|
+
const validOptions = validateOptions(options);
|
|
1597
|
+
const store = new RenderStore(validOptions);
|
|
1598
|
+
const parsedElements = await MdTextParser(text);
|
|
1599
|
+
await prefetchImages(parsedElements);
|
|
1600
|
+
const renderElement = (element, indentLevel = 0, store, hasRawBullet = false, start = 0, ordered = false) => {
|
|
1601
|
+
const indent = indentLevel * validOptions.page.indent;
|
|
1602
|
+
switch (element.type) {
|
|
1603
|
+
case "heading":
|
|
1604
|
+
renderHeading(doc, element, indent, store, renderElement);
|
|
919
1605
|
break;
|
|
920
|
-
case
|
|
921
|
-
|
|
1606
|
+
case "paragraph":
|
|
1607
|
+
renderParagraph(doc, element, indent, store, renderElement);
|
|
922
1608
|
break;
|
|
923
|
-
case
|
|
924
|
-
|
|
1609
|
+
case "list":
|
|
1610
|
+
renderList(doc, element, indentLevel, store, renderElement);
|
|
925
1611
|
break;
|
|
926
|
-
case
|
|
927
|
-
|
|
1612
|
+
case "list_item":
|
|
1613
|
+
renderListItem(doc, element, indentLevel, store, renderElement, start, ordered);
|
|
928
1614
|
break;
|
|
929
|
-
case
|
|
930
|
-
|
|
1615
|
+
case "hr":
|
|
1616
|
+
renderHR(doc, store);
|
|
931
1617
|
break;
|
|
932
|
-
case
|
|
933
|
-
|
|
1618
|
+
case "code":
|
|
1619
|
+
renderCodeBlock(doc, element, indentLevel, store);
|
|
934
1620
|
break;
|
|
935
|
-
case
|
|
936
|
-
case
|
|
937
|
-
case
|
|
938
|
-
|
|
1621
|
+
case "strong":
|
|
1622
|
+
case "em":
|
|
1623
|
+
case "codespan":
|
|
1624
|
+
renderInlineText(doc, element, indent, store);
|
|
939
1625
|
break;
|
|
940
|
-
case
|
|
941
|
-
|
|
1626
|
+
case "link":
|
|
1627
|
+
renderLink(doc, element, indent, store);
|
|
942
1628
|
break;
|
|
943
|
-
case
|
|
944
|
-
|
|
1629
|
+
case "blockquote":
|
|
1630
|
+
renderBlockquote(doc, element, indentLevel, store, renderElement);
|
|
945
1631
|
break;
|
|
946
|
-
case
|
|
947
|
-
|
|
1632
|
+
case "image":
|
|
1633
|
+
renderImage(doc, element, indentLevel, store);
|
|
948
1634
|
break;
|
|
949
|
-
case
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
1635
|
+
case "br": {
|
|
1636
|
+
store.updateX(validOptions.page.xpading, "set");
|
|
1637
|
+
const brHeight = getCharHight(doc) * validOptions.page.defaultLineHeightFactor;
|
|
1638
|
+
if (store.Y + brHeight > validOptions.page.maxContentHeight) HandlePageBreaks(doc, store);
|
|
1639
|
+
else store.updateY(brHeight, "add");
|
|
1640
|
+
store.recordContentY();
|
|
953
1641
|
break;
|
|
954
1642
|
}
|
|
955
|
-
case
|
|
956
|
-
|
|
1643
|
+
case "table":
|
|
1644
|
+
renderTable(doc, element, indentLevel, store);
|
|
957
1645
|
break;
|
|
958
|
-
case
|
|
959
|
-
case
|
|
960
|
-
|
|
1646
|
+
case "raw":
|
|
1647
|
+
case "text":
|
|
1648
|
+
renderRawItem(doc, element, indentLevel, store, hasRawBullet, renderElement, start, ordered, validOptions.content?.textAlignment === "justify");
|
|
961
1649
|
break;
|
|
962
1650
|
default:
|
|
963
|
-
console.warn(`Warning: Unsupported element type encountered: ${
|
|
1651
|
+
console.warn(`Warning: Unsupported element type encountered: ${element.type}.
|
|
964
1652
|
If you believe this element type should be supported, please create an issue at:
|
|
965
1653
|
https://github.com/JeelGajera/jspdf-md-renderer/issues
|
|
966
1654
|
with details of the element and expected behavior. Thanks for helping to improve this library!`);
|
|
967
1655
|
break;
|
|
968
1656
|
}
|
|
969
1657
|
};
|
|
970
|
-
for (
|
|
971
|
-
|
|
1658
|
+
for (const item of parsedElements) renderElement(item, 0, store);
|
|
1659
|
+
validOptions.endCursorYHandler(store.Y);
|
|
972
1660
|
};
|
|
973
1661
|
//#endregion
|
|
974
|
-
export {
|
|
1662
|
+
export { MdTextParser, MdTextRender };
|