@hyperbook/markdown 0.44.1 → 0.46.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.
@@ -0,0 +1,466 @@
1
+ .directive-typst {
2
+ display: flex;
3
+ justify-content: center;
4
+ align-items: center;
5
+ flex-direction: column;
6
+ margin-bottom: 16px;
7
+ overflow: hidden;
8
+ gap: 8px;
9
+ height: calc(100dvh - 128px);
10
+ }
11
+
12
+ code-input {
13
+ margin: 0;
14
+ }
15
+
16
+ .directive-typst .preview-container {
17
+ width: 100%;
18
+ border: 1px solid var(--color-spacer);
19
+ border-radius: 8px;
20
+ overflow: auto;
21
+ background-color: white;
22
+ position: relative;
23
+ }
24
+
25
+ .directive-typst .typst-preview {
26
+ padding: 16px;
27
+ min-height: 100px;
28
+ display: flex;
29
+ justify-content: center;
30
+ align-items: flex-start;
31
+ }
32
+
33
+ .directive-typst.preview-only {
34
+ gap: 0px;
35
+ align-items: normal;
36
+ height: auto;
37
+
38
+ .download-pdf {
39
+ border-right: none;
40
+ }
41
+
42
+ .preview-container {
43
+ border-bottom-left-radius: 0;
44
+ border-bottom-right-radius: 0;
45
+ }
46
+ }
47
+
48
+ .directive-typst .typst-preview svg {
49
+ max-width: 100%;
50
+ height: auto;
51
+ }
52
+
53
+ .directive-typst .typst-loading {
54
+ display: flex;
55
+ flex-direction: column;
56
+ align-items: center;
57
+ justify-content: center;
58
+ padding: 32px;
59
+ gap: 12px;
60
+ color: var(--color-text);
61
+ }
62
+
63
+ .directive-typst .typst-spinner {
64
+ width: 32px;
65
+ height: 32px;
66
+ border: 3px solid var(--color-spacer);
67
+ border-top-color: var(--color-brand, #3b82f6);
68
+ border-radius: 50%;
69
+ animation: typst-spin 1s linear infinite;
70
+ }
71
+
72
+ @keyframes typst-spin {
73
+ to {
74
+ transform: rotate(360deg);
75
+ }
76
+ }
77
+
78
+ .directive-typst .typst-error {
79
+ color: #dc2626;
80
+ padding: 16px;
81
+ background-color: #fef2f2;
82
+ border-radius: 4px;
83
+ font-family: monospace;
84
+ white-space: pre-wrap;
85
+ word-break: break-word;
86
+ }
87
+
88
+ .directive-typst .typst-error-overlay {
89
+ position: absolute;
90
+ bottom: 16px;
91
+ left: 16px;
92
+ right: 16px;
93
+ z-index: 100;
94
+ animation: typst-error-slide-in 0.3s ease-out;
95
+ }
96
+
97
+ @keyframes typst-error-slide-in {
98
+ from {
99
+ opacity: 0;
100
+ transform: translateY(-10px);
101
+ }
102
+ to {
103
+ opacity: 1;
104
+ transform: translateY(0);
105
+ }
106
+ }
107
+
108
+ .directive-typst .typst-error-content {
109
+ background-color: #fef2f2;
110
+ border: 2px solid #dc2626;
111
+ border-radius: 8px;
112
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
113
+ overflow: hidden;
114
+ }
115
+
116
+ .directive-typst .typst-error-header {
117
+ display: flex;
118
+ align-items: center;
119
+ justify-content: space-between;
120
+ padding: 12px 16px;
121
+ background-color: #dc2626;
122
+ color: white;
123
+ }
124
+
125
+ .directive-typst .typst-error-title {
126
+ font-weight: 600;
127
+ font-size: 14px;
128
+ display: flex;
129
+ align-items: center;
130
+ gap: 8px;
131
+ }
132
+
133
+ .directive-typst .typst-error-close {
134
+ background: none;
135
+ border: none;
136
+ color: white;
137
+ cursor: pointer;
138
+ font-size: 24px;
139
+ line-height: 1;
140
+ padding: 0;
141
+ margin: 0;
142
+ width: 24px;
143
+ height: 24px;
144
+ display: flex;
145
+ align-items: center;
146
+ justify-content: center;
147
+ border-radius: 4px;
148
+ transition: background-color 0.2s;
149
+ flex: none;
150
+ }
151
+
152
+ .directive-typst .typst-error-close:hover {
153
+ background-color: rgba(255, 255, 255, 0.2);
154
+ }
155
+
156
+ .directive-typst .typst-error-message {
157
+ padding: 16px;
158
+ color: #dc2626;
159
+ font-family: monospace;
160
+ font-size: 13px;
161
+ white-space: pre-wrap;
162
+ word-break: break-word;
163
+ line-height: 1.5;
164
+ }
165
+
166
+ .directive-typst .editor-container {
167
+ width: 100%;
168
+ display: flex;
169
+ flex-direction: column;
170
+ height: 400px;
171
+ }
172
+
173
+ .directive-typst .file-tabs {
174
+ display: flex;
175
+ align-items: center;
176
+ gap: 4px;
177
+ background-color: var(--color--background);
178
+ border: 1px solid var(--color-spacer);
179
+ border-bottom: none;
180
+ border-radius: 8px 8px 0 0;
181
+ padding: 4px;
182
+ overflow-x: auto;
183
+ }
184
+
185
+ .directive-typst .tabs-list {
186
+ display: flex;
187
+ gap: 4px;
188
+ flex: 1;
189
+ overflow-x: auto;
190
+ padding: 2px;
191
+ }
192
+
193
+ .directive-typst .file-tab {
194
+ display: flex;
195
+ align-items: center;
196
+ gap: 6px;
197
+ padding: 6px 12px;
198
+ background-color: var(--color--background);
199
+ border: 1px solid var(--color-spacer);
200
+ border-radius: 4px;
201
+ cursor: pointer;
202
+ white-space: nowrap;
203
+ font-size: 14px;
204
+ transition: all 0.2s;
205
+ }
206
+
207
+ .directive-typst .file-tab:hover {
208
+ background-color: var(--color-spacer);
209
+ }
210
+
211
+ .directive-typst .file-tab.active {
212
+ background-color: var(--color-brand, #3b82f6);
213
+ color: var(--color-brand-text);
214
+ border-color: var(--color-brand, #3b82f6);
215
+ }
216
+
217
+ .directive-typst .tab-name {
218
+ flex: 1;
219
+ }
220
+
221
+ .directive-typst .tab-delete {
222
+ background: none;
223
+ border: none;
224
+ color: inherit;
225
+ cursor: pointer;
226
+ font-size: 18px;
227
+ line-height: 1;
228
+ padding: 0;
229
+ margin: 0;
230
+ width: 18px;
231
+ height: 18px;
232
+ display: flex;
233
+ align-items: center;
234
+ justify-content: center;
235
+ border-radius: 2px;
236
+ flex-shrink: 0;
237
+ }
238
+
239
+ .directive-typst .tab-delete:hover {
240
+ background-color: rgba(0, 0, 0, 0.1);
241
+ }
242
+
243
+ .directive-typst .file-tab.active .tab-delete:hover {
244
+ background-color: rgba(255, 255, 255, 0.2);
245
+ }
246
+
247
+ .directive-typst .add-source-file {
248
+ padding: 6px 12px;
249
+ font-size: 16px;
250
+ flex: none;
251
+ font-weight: bold;
252
+ white-space: nowrap;
253
+ border: 1px solid var(--color-spacer);
254
+ border-radius: 4px;
255
+ background-color: var(--color--background);
256
+ color: var(--color-text);
257
+ cursor: pointer;
258
+ min-width: 32px;
259
+ }
260
+
261
+ .directive-typst .add-source-file:hover {
262
+ background-color: var(--color-spacer);
263
+ }
264
+
265
+ .directive-typst .binary-files-section {
266
+ border: 1px solid var(--color-spacer);
267
+ border-top: none;
268
+ border-bottom: none;
269
+ background-color: var(--color--background);
270
+ margin-bottom: 0;
271
+ }
272
+
273
+ .directive-typst .binary-files-section summary {
274
+ padding: 8px 12px;
275
+ cursor: pointer;
276
+ font-weight: 500;
277
+ display: flex;
278
+ align-items: center;
279
+ user-select: none;
280
+ background-color: var(--color--background);
281
+ list-style: none;
282
+ }
283
+
284
+ .directive-typst .binary-files-section summary::-webkit-details-marker {
285
+ display: none;
286
+ }
287
+
288
+ .directive-typst .binary-files-section summary .summary-text {
289
+ display: flex;
290
+ align-items: center;
291
+ gap: 8px;
292
+ }
293
+
294
+ .directive-typst .binary-files-section summary .summary-indicator {
295
+ transition: transform 0.2s;
296
+ display: inline-block;
297
+ font-size: 12px;
298
+ }
299
+
300
+ .directive-typst .binary-files-section[open] summary .summary-indicator {
301
+ transform: rotate(90deg);
302
+ }
303
+
304
+ .directive-typst .binary-files-section summary:hover {
305
+ background-color: var(--color-spacer);
306
+ }
307
+
308
+ .directive-typst .add-binary-file {
309
+ padding: 6px 12px;
310
+ font-size: 14px;
311
+ border: 1px solid var(--color-spacer);
312
+ border-radius: 4px;
313
+ background-color: var(--color--background);
314
+ color: var(--color-text);
315
+ cursor: pointer;
316
+ width: 100%;
317
+ }
318
+
319
+ .directive-typst .add-binary-file:hover {
320
+ background-color: var(--color-spacer);
321
+ }
322
+
323
+ .directive-typst .binary-files-actions {
324
+ padding: 8px;
325
+ }
326
+
327
+ .directive-typst .binary-files-list {
328
+ padding: 8px;
329
+ display: flex;
330
+ flex-direction: column;
331
+ gap: 4px;
332
+ }
333
+
334
+ .directive-typst .binary-files-empty {
335
+ padding: 12px;
336
+ text-align: center;
337
+ color: var(--color-text);
338
+ opacity: 0.6;
339
+ font-style: italic;
340
+ font-size: 14px;
341
+ }
342
+
343
+ .directive-typst .binary-file-item {
344
+ display: flex;
345
+ align-items: center;
346
+ gap: 8px;
347
+ padding: 8px 12px;
348
+ font-size: 14px;
349
+ }
350
+
351
+ .directive-typst .binary-file-icon {
352
+ font-size: 16px;
353
+ flex-shrink: 0;
354
+ }
355
+
356
+ .directive-typst .binary-file-name {
357
+ flex: 1;
358
+ word-break: break-all;
359
+ }
360
+
361
+ .directive-typst .binary-file-delete {
362
+ background: none;
363
+ border: none;
364
+ color: var(--color-text);
365
+ cursor: pointer;
366
+ font-size: 18px;
367
+ line-height: 1;
368
+ padding: 0;
369
+ margin: 0;
370
+ width: 20px;
371
+ height: 20px;
372
+ display: flex;
373
+ align-items: center;
374
+ justify-content: center;
375
+ border-radius: 2px;
376
+ flex: none;
377
+ }
378
+
379
+ .directive-typst .binary-file-delete:hover {
380
+ background-color: rgba(220, 38, 38, 0.1);
381
+ color: #dc2626;
382
+ }
383
+
384
+ .directive-typst .editor {
385
+ width: 100%;
386
+ border: 1px solid var(--color-spacer);
387
+ flex: 1;
388
+ }
389
+
390
+ .directive-typst .editor:not(.active) {
391
+ display: none;
392
+ }
393
+
394
+ .directive-typst .buttons {
395
+ display: flex;
396
+ border: 1px solid var(--color-spacer);
397
+ border-radius: 8px;
398
+ border-bottom: none;
399
+ border-bottom-left-radius: 0;
400
+ border-bottom-right-radius: 0;
401
+ }
402
+
403
+ .directive-typst .buttons.bottom {
404
+ border: 1px solid var(--color-spacer);
405
+ border-radius: 8px;
406
+ border-top: none;
407
+ border-top-left-radius: 0;
408
+ border-top-right-radius: 0;
409
+ }
410
+
411
+ .directive-typst .buttons-container {
412
+ display: flex;
413
+ justify-content: center;
414
+ width: 100%;
415
+ }
416
+
417
+ .directive-typst button {
418
+ flex: 1;
419
+ padding: 8px 16px;
420
+ border: none;
421
+ border-right: 1px solid var(--color-spacer);
422
+ background-color: var(--color--background);
423
+ color: var(--color-text);
424
+ cursor: pointer;
425
+ }
426
+
427
+ .directive-typst button:not(.active) {
428
+ opacity: 0.6;
429
+ }
430
+
431
+ .directive-typst .buttons:last-child {
432
+ border-right: none;
433
+ }
434
+
435
+ .directive-typst button:hover {
436
+ background-color: var(--color-spacer);
437
+ }
438
+
439
+ .directive-typst .buttons-container button {
440
+ flex: none;
441
+ border: 1px solid var(--color-spacer);
442
+ border-radius: 8px;
443
+ padding: 8px 24px;
444
+ }
445
+
446
+ .directive-typst .hidden {
447
+ display: none !important;
448
+ }
449
+
450
+ @media screen and (min-width: 1024px) {
451
+ .directive-typst:not(.preview-only) {
452
+ flex-direction: row;
453
+ height: calc(100dvh - 128px);
454
+
455
+ .preview-container {
456
+ flex: 1;
457
+ height: 100% !important;
458
+ }
459
+
460
+ .editor-container {
461
+ flex: 1;
462
+ height: 100%;
463
+ overflow: hidden;
464
+ }
465
+ }
466
+ }
@@ -0,0 +1,182 @@
1
+
2
+ const comment = [
3
+ {
4
+ pattern: /\/\*[\s\S]*?\*\//,
5
+ greedy: true,
6
+ },
7
+ {
8
+ pattern: /\/\/.*/,
9
+ greedy: true,
10
+ },
11
+ ];
12
+
13
+ const raw = [
14
+ {
15
+ pattern: /^```[\s\S]*?^```$/m,
16
+ greedy: true,
17
+ },
18
+ {
19
+ pattern: /`[\s\S]*?`/,
20
+ greedy: true,
21
+ }
22
+ ];
23
+
24
+ const label = {
25
+ pattern: /<[\w\-.:]*>/, // starting with ([^\\]) not necessary anymore when matching "escaped" before
26
+ };
27
+
28
+ const general_escapes = [
29
+ /\\u{[\da-fA-F]+?\}/,
30
+ /\\\S/,
31
+ /\\\s/,
32
+ ]
33
+
34
+ Prism.languages["typst-math"] = {
35
+ comment: comment,
36
+ raw: raw,
37
+ escaped: general_escapes,
38
+ operator: [
39
+ /<=>|<==>|<-->|\[\||\|\]|\|\||:=|::=|\.\.\.|=:|!=|>>>|>=|<<<|<==|<=|\|->|=>|\|=>|==>|-->|~~>|~>|>->|->>|<--|<~~|<~|<-<|<<-|<->|->|<-|<<|>>/,
40
+ /[_\\\^\+\-\*\/&']/,
41
+ ],
42
+ string: [
43
+ /"(?:\\.|[^\\"])*"/,
44
+ /\$/
45
+ ],
46
+ function: /\b[a-zA-Z][\w-]*(?=\[|\()/,
47
+ symbol: [
48
+ /[a-zA-Z][\w]+/,
49
+ /#[a-zA-Z][\w]*/,
50
+ ]
51
+ }
52
+
53
+ const math = [
54
+ {
55
+ pattern: /\$(?:\\.|[^\\$])*?\$/,
56
+ inside: Prism.languages["typst-math"],
57
+ // greedy: true,
58
+ },
59
+ ]
60
+
61
+
62
+ Prism.languages["typst-code"] = {
63
+ typst: {
64
+ // pattern: /\[[\s\S]*\]/,
65
+ pattern: /\[(?:[^\]\[]|\[(?:[^\]\[]|\[(?:[^\]\[]|\[[^\]\[]*\])*\])*\])*\]/,
66
+ inside: Prism.languages["typst"],
67
+ greedy: true
68
+ },
69
+ comment: comment,
70
+ math: math,
71
+ function: [
72
+ {
73
+ pattern: /#?[a-zA-Z][\w\-]*?(?=\[|\()/,
74
+ greedy: true
75
+ },
76
+ /(?<=show [\w.]*)[a-zA-Z][\w-]*\s*:/,
77
+ /(?<=show\s*:\s*)[a-zA-Z][\w-]*/,
78
+ ],
79
+ keyword: /(?:#|\b)(?:none|auto|let|return|if|else|set|show|context|for|while|not|in|continue|break|include|import|as)\b/,
80
+ boolean: /(?:#|\b)(?:true|false)\b/,
81
+ string: {
82
+ pattern: /"(?:\\.|[^\\"])*"/,
83
+ greedy: true,
84
+ },
85
+ label: label,
86
+ number: [
87
+ /0b[01]+/,
88
+ /0o[0-7]+/,
89
+ /0x[\da-fA-F]+/,
90
+ /(?<![\w-])-?[\d]+\.?[\d]*(e\d+)?(?:in|mm|cm|pt|em|deg|rad|fr|%)?/,
91
+ ],
92
+ symbol: /#[\w\-.]+\./,
93
+ operator: /==|=|\+|\-|\*|\/|\+=|\-=|\*=|\/=|=>|<=|\.\.|<|>/,
94
+ punctuation: /[\{\}\(\):\,\;\.]/
95
+ };
96
+
97
+
98
+ Prism.languages.typst = {
99
+ comment: comment,
100
+ raw: raw,
101
+ math: math,
102
+ "code-mode": [
103
+ {
104
+ // enter code mode via #my-func() or #()
105
+ // pattern: /(?<=#[a-zA-Z][\w-.]*\()(?:[^)(]|\((?:[^)(]|\((?:[^)(]|\([^)(]*\))*\))*\))*\)/,
106
+ // pattern: /(?<=#([a-zA-Z][\w-.]*)?\()(?:[^)(]|\((?:[^)(]|\((?:[^)(]|\((?:[^)(]|\((?:[^)(]|\([^)(]*\))*\))*\))*\))*\))*\)/,
107
+ // between # and ( either
108
+ // - nothing: #(
109
+ // - Declaration: #let ... (
110
+ // - Function call: #my-func2(
111
+ // #
112
+ pattern: /(?<!\\)#.*?\((?:[^)(]|\((?:[^)(]|\((?:[^)(]|\((?:[^)(]|\((?:[^)(]|\([^)(]*\))*\))*\))*\))*\))*\)(?![ \t]*=)/,
113
+ // pattern: /(?:#(?:(?:let.*?)|(?:[\w\-.]+?)|(?:)))\((?:[^)(]|\((?:[^)(]|\((?:[^)(]|\((?:[^)(]|\((?:[^)(]|\([^)(]*\))*\))*\))*\))*\))*\)(?!\s*=)/,
114
+ // lookbehind: true,
115
+ inside: Prism.languages["typst-code"],
116
+ greedy: true,
117
+ },
118
+ // {
119
+ // // enter code mode via #{}
120
+ // // pattern: /(?<=#)\{[\s\S]*\}/,
121
+ // // pattern: /#.*\{(?:[^}{]|\{(?:[^}{]|\{(?:[^}{]|\{[^}{]*\})*\})*\})*\}/,
122
+ // // pattern: /(?<=#).*\{(?:[^}{]|\{(?:[^}{]|\{(?:[^}{]|\{[^}{]*\})*\})*\})*\}/,
123
+ // pattern: /#.*\{(?:[^}{]|\{(?:[^}{]|\{(?:[^}{]|\{[^}{]*\})*\})*\})*\}/,
124
+ // inside: Prism.languages["typst-code"],
125
+ // greedy: true,
126
+ // },
127
+ {
128
+ pattern: /(?<!\\)#.*?(?:\((?:[^)(]|\((?:[^)(]|\((?:[^)(]|\((?:[^)(]|\((?:[^)(]|\([^)(]*\))*\))*\))*\))*\))*\))?.*?\{(?:[^}{]|\{(?:[^}{]|\{(?:[^}{]|\{[^}{]*\})*\})*\})*\}/,
129
+ inside: Prism.languages["typst-code"],
130
+ greedy: true,
131
+ },
132
+ {
133
+ pattern: /(?<=set .*?) if/,
134
+ inside: Prism.languages["typst-code"],
135
+ greedy: true,
136
+ },
137
+ {
138
+ pattern: /(?<!\\)#(?:import|let|if|context|set|show|include).*/,
139
+ inside: Prism.languages["typst-code"],
140
+ greedy: true,
141
+ },
142
+ ],
143
+ function: [
144
+ {
145
+ pattern: /#[a-zA-Z][\w-]*(?=\[|\()/,
146
+ greedy: true,
147
+ },
148
+ /(?<=#[\w.]+)[a-zA-Z][\w-]*(?=\[|\()/,
149
+ ],
150
+ string: {
151
+ pattern: /#"(?:\\.|[^\\"])*"/,
152
+ greedy: true,
153
+ },
154
+ url: {
155
+ pattern: /https?\:\/\/[\w.\/\-@:%._\+~#=]*[\w\/]/,
156
+ greedy: true
157
+ },
158
+ escaped: general_escapes.concat([/~|---|--|-\?|\.\.\.|-/]),
159
+ label: label,
160
+ reference: {
161
+ pattern: /@[\w\-.:]*/,
162
+ lookbehind: true,
163
+ },
164
+ boltalic: [
165
+ /_\*.*?\*_/,
166
+ /\*_.*?_\*/,
167
+ ],
168
+ bold: /\*.*?\*/,
169
+ italic: /_.*?_/,
170
+ heading: /^\s*=+ .*/m,
171
+ symbol: /#[\w\-.]*[\w-]+/,
172
+ };
173
+
174
+
175
+ Prism.languages["typst-code"].typst = {
176
+ pattern: /\[(?:[^\]\[]|\[(?:[^\]\[]|\[(?:[^\]\[]|\[[^\]\[]*\])*\])*\])*\]/,
177
+ inside: Prism.languages["typst"],
178
+ greedy: true
179
+ },
180
+
181
+ Prism.languages.typ = Prism.languages.typst;
182
+ Prism.languages.typc = Prism.languages["typst-code"];