@hyperbook/markdown 0.45.0 → 0.46.1

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