@blocknote/xl-pdf-exporter 0.22.0 → 0.23.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/GeistMono-Regular-D4rKXxwr.js +5 -0
- package/dist/GeistMono-Regular-D4rKXxwr.js.map +1 -0
- package/dist/blocknote-xl-pdf-exporter.js +228 -2293
- package/dist/blocknote-xl-pdf-exporter.js.map +1 -1
- package/dist/blocknote-xl-pdf-exporter.umd.cjs +2 -68
- package/dist/blocknote-xl-pdf-exporter.umd.cjs.map +1 -1
- package/dist/webpack-stats.json +1 -1
- package/package.json +5 -4
- package/src/pdf/__snapshots__/example.jsx +910 -567
- package/src/pdf/__snapshots__/exampleWithHeaderAndFooter.jsx +934 -576
- package/src/pdf/defaultSchema/blocks.tsx +35 -2
- package/src/pdf/defaultSchema/styles.tsx +1 -1
- package/src/pdf/pdfExporter.test.tsx +12 -7
- package/src/pdf/pdfExporter.tsx +14 -4
- package/types/src/pdf/defaultSchema/blocks.d.ts +2 -2
- package/types/src/pdf/defaultSchema/index.d.ts +17 -0
- package/types/src/pdf/pdfExporter.d.ts +0 -1
|
@@ -1,602 +1,960 @@
|
|
|
1
|
-
<
|
|
2
|
-
<
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
<DOCUMENT>
|
|
2
|
+
<PAGE
|
|
3
|
+
dpi={100}
|
|
4
|
+
size="A4"
|
|
5
|
+
style={{
|
|
6
|
+
fontFamily: 'Inter',
|
|
7
|
+
fontSize: 12,
|
|
8
|
+
lineHeight: 1.5,
|
|
9
|
+
paddingBottom: 65,
|
|
10
|
+
paddingHorizontal: 35,
|
|
11
|
+
paddingTop: 35
|
|
12
|
+
}}
|
|
13
|
+
>
|
|
14
|
+
<VIEW
|
|
15
|
+
fixed
|
|
16
|
+
style={{}}
|
|
6
17
|
>
|
|
7
|
-
<
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
<
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
</text>
|
|
27
|
-
</text>
|
|
28
|
-
</view>
|
|
29
|
-
<view
|
|
30
|
-
style="margin-left: 18px;"
|
|
31
|
-
>
|
|
32
|
-
<view
|
|
33
|
-
style="text-align: left;"
|
|
18
|
+
<TEXT>
|
|
19
|
+
Header
|
|
20
|
+
</TEXT>
|
|
21
|
+
</VIEW>
|
|
22
|
+
<React.Fragment key=".1:0">
|
|
23
|
+
<VIEW
|
|
24
|
+
style={{
|
|
25
|
+
alignItems: undefined,
|
|
26
|
+
backgroundColor: undefined,
|
|
27
|
+
color: undefined,
|
|
28
|
+
paddingVertical: 2.25,
|
|
29
|
+
textAlign: 'left'
|
|
30
|
+
}}
|
|
31
|
+
>
|
|
32
|
+
<TEXT>
|
|
33
|
+
<TEXT
|
|
34
|
+
style={{
|
|
35
|
+
fontStyle: 'italic'
|
|
36
|
+
}}
|
|
34
37
|
>
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
style="margin-left: 18px;"
|
|
38
|
+
Welcome to this
|
|
39
|
+
</TEXT>
|
|
40
|
+
<TEXT
|
|
41
|
+
style={{
|
|
42
|
+
fontStyle: 'italic',
|
|
43
|
+
fontWeight: 'bold'
|
|
44
|
+
}}
|
|
43
45
|
>
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
This paragraph has a background color
|
|
63
|
-
</text>
|
|
64
|
-
</text>
|
|
65
|
-
</view>
|
|
66
|
-
<view
|
|
67
|
-
style="text-align: left;"
|
|
68
|
-
>
|
|
69
|
-
<text>
|
|
70
|
-
<text>
|
|
71
|
-
Paragraph
|
|
72
|
-
</text>
|
|
73
|
-
</text>
|
|
74
|
-
</view>
|
|
75
|
-
<view
|
|
76
|
-
style="text-align: left;"
|
|
77
|
-
>
|
|
78
|
-
<text
|
|
79
|
-
style="font-size: 24px; font-weight: 700;"
|
|
46
|
+
demo 🙌!
|
|
47
|
+
</TEXT>
|
|
48
|
+
</TEXT>
|
|
49
|
+
</VIEW>
|
|
50
|
+
<VIEW
|
|
51
|
+
style={{
|
|
52
|
+
marginLeft: 18
|
|
53
|
+
}}
|
|
54
|
+
>
|
|
55
|
+
<React.Fragment key=".0">
|
|
56
|
+
<VIEW
|
|
57
|
+
style={{
|
|
58
|
+
alignItems: undefined,
|
|
59
|
+
backgroundColor: undefined,
|
|
60
|
+
color: undefined,
|
|
61
|
+
paddingVertical: 2.25,
|
|
62
|
+
textAlign: 'left'
|
|
63
|
+
}}
|
|
80
64
|
>
|
|
81
|
-
<
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
65
|
+
<TEXT>
|
|
66
|
+
<TEXT style={{}}>
|
|
67
|
+
Hello World nested
|
|
68
|
+
</TEXT>
|
|
69
|
+
</TEXT>
|
|
70
|
+
</VIEW>
|
|
71
|
+
<VIEW
|
|
72
|
+
style={{
|
|
73
|
+
marginLeft: 18
|
|
74
|
+
}}
|
|
91
75
|
>
|
|
92
|
-
<
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
</
|
|
110
|
-
</
|
|
111
|
-
|
|
112
|
-
|
|
76
|
+
<React.Fragment key=".0">
|
|
77
|
+
<VIEW
|
|
78
|
+
style={{
|
|
79
|
+
alignItems: undefined,
|
|
80
|
+
backgroundColor: undefined,
|
|
81
|
+
color: undefined,
|
|
82
|
+
paddingVertical: 2.25,
|
|
83
|
+
textAlign: 'left'
|
|
84
|
+
}}
|
|
85
|
+
>
|
|
86
|
+
<TEXT>
|
|
87
|
+
<TEXT style={{}}>
|
|
88
|
+
Hello World double nested
|
|
89
|
+
</TEXT>
|
|
90
|
+
</TEXT>
|
|
91
|
+
</VIEW>
|
|
92
|
+
</React.Fragment>
|
|
93
|
+
</VIEW>
|
|
94
|
+
</React.Fragment>
|
|
95
|
+
</VIEW>
|
|
96
|
+
</React.Fragment>
|
|
97
|
+
<React.Fragment key=".1:1">
|
|
98
|
+
<VIEW
|
|
99
|
+
style={{
|
|
100
|
+
alignItems: undefined,
|
|
101
|
+
backgroundColor: '#fbe4e4',
|
|
102
|
+
color: undefined,
|
|
103
|
+
paddingVertical: 2.25,
|
|
104
|
+
textAlign: 'left'
|
|
105
|
+
}}
|
|
106
|
+
>
|
|
107
|
+
<TEXT>
|
|
108
|
+
<TEXT
|
|
109
|
+
style={{
|
|
110
|
+
fontWeight: 'bold'
|
|
111
|
+
}}
|
|
112
|
+
>
|
|
113
|
+
This paragraph has a background color
|
|
114
|
+
</TEXT>
|
|
115
|
+
</TEXT>
|
|
116
|
+
</VIEW>
|
|
117
|
+
</React.Fragment>
|
|
118
|
+
<React.Fragment key=".1:2">
|
|
119
|
+
<VIEW
|
|
120
|
+
style={{
|
|
121
|
+
alignItems: undefined,
|
|
122
|
+
backgroundColor: undefined,
|
|
123
|
+
color: undefined,
|
|
124
|
+
paddingVertical: 2.25,
|
|
125
|
+
textAlign: 'left'
|
|
126
|
+
}}
|
|
127
|
+
>
|
|
128
|
+
<TEXT>
|
|
129
|
+
<TEXT style={{}}>
|
|
130
|
+
Paragraph
|
|
131
|
+
</TEXT>
|
|
132
|
+
</TEXT>
|
|
133
|
+
</VIEW>
|
|
134
|
+
</React.Fragment>
|
|
135
|
+
<React.Fragment key=".1:3">
|
|
136
|
+
<VIEW
|
|
137
|
+
style={{
|
|
138
|
+
alignItems: undefined,
|
|
139
|
+
backgroundColor: undefined,
|
|
140
|
+
color: undefined,
|
|
141
|
+
paddingVertical: 2.25,
|
|
142
|
+
textAlign: 'left'
|
|
143
|
+
}}
|
|
144
|
+
>
|
|
145
|
+
<TEXT
|
|
146
|
+
style={{
|
|
147
|
+
fontSize: 24,
|
|
148
|
+
fontWeight: 700
|
|
149
|
+
}}
|
|
113
150
|
>
|
|
114
|
-
<
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
151
|
+
<TEXT style={{}}>
|
|
152
|
+
Heading
|
|
153
|
+
</TEXT>
|
|
154
|
+
</TEXT>
|
|
155
|
+
</VIEW>
|
|
156
|
+
</React.Fragment>
|
|
157
|
+
<React.Fragment key=".1:4">
|
|
158
|
+
<VIEW
|
|
159
|
+
style={{
|
|
160
|
+
alignItems: 'flex-end',
|
|
161
|
+
backgroundColor: undefined,
|
|
162
|
+
color: undefined,
|
|
163
|
+
paddingVertical: 2.25,
|
|
164
|
+
textAlign: 'right'
|
|
165
|
+
}}
|
|
166
|
+
>
|
|
167
|
+
<TEXT
|
|
168
|
+
style={{
|
|
169
|
+
fontSize: 24,
|
|
170
|
+
fontWeight: 700
|
|
171
|
+
}}
|
|
129
172
|
>
|
|
130
|
-
<
|
|
131
|
-
|
|
173
|
+
<TEXT style={{}}>
|
|
174
|
+
Heading right
|
|
175
|
+
</TEXT>
|
|
176
|
+
</TEXT>
|
|
177
|
+
</VIEW>
|
|
178
|
+
</React.Fragment>
|
|
179
|
+
<React.Fragment key=".1:5">
|
|
180
|
+
<VIEW
|
|
181
|
+
style={{
|
|
182
|
+
alignItems: undefined,
|
|
183
|
+
backgroundColor: undefined,
|
|
184
|
+
color: undefined,
|
|
185
|
+
paddingVertical: 2.25,
|
|
186
|
+
textAlign: 'justify'
|
|
187
|
+
}}
|
|
188
|
+
>
|
|
189
|
+
<TEXT>
|
|
190
|
+
<TEXT style={{}}>
|
|
191
|
+
justified paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
192
|
+
</TEXT>
|
|
193
|
+
</TEXT>
|
|
194
|
+
</VIEW>
|
|
195
|
+
</React.Fragment>
|
|
196
|
+
<VIEW break />
|
|
197
|
+
<React.Fragment key=".1:7">
|
|
198
|
+
<VIEW
|
|
199
|
+
style={{
|
|
200
|
+
alignItems: undefined,
|
|
201
|
+
backgroundColor: undefined,
|
|
202
|
+
color: undefined,
|
|
203
|
+
paddingVertical: 2.25,
|
|
204
|
+
textAlign: 'left'
|
|
205
|
+
}}
|
|
206
|
+
>
|
|
207
|
+
<ListItem listMarker="•">
|
|
208
|
+
<TEXT>
|
|
209
|
+
<TEXT style={{}}>
|
|
210
|
+
Bullet List Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
211
|
+
</TEXT>
|
|
212
|
+
</TEXT>
|
|
213
|
+
</ListItem>
|
|
214
|
+
</VIEW>
|
|
215
|
+
<VIEW
|
|
216
|
+
style={{
|
|
217
|
+
marginLeft: 18
|
|
218
|
+
}}
|
|
219
|
+
>
|
|
220
|
+
<React.Fragment key=".0">
|
|
221
|
+
<VIEW
|
|
222
|
+
style={{
|
|
223
|
+
alignItems: undefined,
|
|
224
|
+
backgroundColor: undefined,
|
|
225
|
+
color: undefined,
|
|
226
|
+
paddingVertical: 2.25,
|
|
227
|
+
textAlign: 'left'
|
|
228
|
+
}}
|
|
132
229
|
>
|
|
133
|
-
<
|
|
134
|
-
<
|
|
135
|
-
<
|
|
136
|
-
•
|
|
137
|
-
</text>
|
|
138
|
-
</view>
|
|
139
|
-
<text>
|
|
140
|
-
<text>
|
|
230
|
+
<ListItem listMarker="•">
|
|
231
|
+
<TEXT>
|
|
232
|
+
<TEXT style={{}}>
|
|
141
233
|
Bullet List Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
142
|
-
</
|
|
143
|
-
</
|
|
144
|
-
</
|
|
145
|
-
</
|
|
146
|
-
|
|
147
|
-
|
|
234
|
+
</TEXT>
|
|
235
|
+
</TEXT>
|
|
236
|
+
</ListItem>
|
|
237
|
+
</VIEW>
|
|
238
|
+
</React.Fragment>
|
|
239
|
+
<React.Fragment key=".1">
|
|
240
|
+
<VIEW
|
|
241
|
+
style={{
|
|
242
|
+
alignItems: 'flex-end',
|
|
243
|
+
backgroundColor: undefined,
|
|
244
|
+
color: undefined,
|
|
245
|
+
paddingVertical: 2.25,
|
|
246
|
+
textAlign: 'right'
|
|
247
|
+
}}
|
|
148
248
|
>
|
|
149
|
-
<
|
|
150
|
-
<
|
|
151
|
-
<
|
|
152
|
-
•
|
|
153
|
-
</text>
|
|
154
|
-
</view>
|
|
155
|
-
<text>
|
|
156
|
-
<text>
|
|
249
|
+
<ListItem listMarker="•">
|
|
250
|
+
<TEXT>
|
|
251
|
+
<TEXT style={{}}>
|
|
157
252
|
Bullet List Item right. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
158
|
-
</
|
|
159
|
-
</
|
|
160
|
-
</
|
|
161
|
-
</
|
|
162
|
-
|
|
163
|
-
|
|
253
|
+
</TEXT>
|
|
254
|
+
</TEXT>
|
|
255
|
+
</ListItem>
|
|
256
|
+
</VIEW>
|
|
257
|
+
</React.Fragment>
|
|
258
|
+
<React.Fragment key=".2">
|
|
259
|
+
<VIEW
|
|
260
|
+
style={{
|
|
261
|
+
alignItems: undefined,
|
|
262
|
+
backgroundColor: undefined,
|
|
263
|
+
color: undefined,
|
|
264
|
+
paddingVertical: 2.25,
|
|
265
|
+
textAlign: 'left'
|
|
266
|
+
}}
|
|
164
267
|
>
|
|
165
|
-
<
|
|
166
|
-
<
|
|
167
|
-
<
|
|
168
|
-
1.
|
|
169
|
-
</text>
|
|
170
|
-
</view>
|
|
171
|
-
<text>
|
|
172
|
-
<text>
|
|
268
|
+
<ListItem listMarker="1.">
|
|
269
|
+
<TEXT>
|
|
270
|
+
<TEXT style={{}}>
|
|
173
271
|
Numbered List Item 1
|
|
174
|
-
</
|
|
175
|
-
</
|
|
176
|
-
</
|
|
177
|
-
</
|
|
178
|
-
|
|
179
|
-
|
|
272
|
+
</TEXT>
|
|
273
|
+
</TEXT>
|
|
274
|
+
</ListItem>
|
|
275
|
+
</VIEW>
|
|
276
|
+
</React.Fragment>
|
|
277
|
+
<React.Fragment key=".3">
|
|
278
|
+
<VIEW
|
|
279
|
+
style={{
|
|
280
|
+
alignItems: undefined,
|
|
281
|
+
backgroundColor: undefined,
|
|
282
|
+
color: undefined,
|
|
283
|
+
paddingVertical: 2.25,
|
|
284
|
+
textAlign: 'left'
|
|
285
|
+
}}
|
|
180
286
|
>
|
|
181
|
-
<
|
|
182
|
-
<
|
|
183
|
-
<
|
|
184
|
-
2.
|
|
185
|
-
</text>
|
|
186
|
-
</view>
|
|
187
|
-
<text>
|
|
188
|
-
<text>
|
|
287
|
+
<ListItem listMarker="2.">
|
|
288
|
+
<TEXT>
|
|
289
|
+
<TEXT style={{}}>
|
|
189
290
|
Numbered List Item 2
|
|
190
|
-
</
|
|
191
|
-
</
|
|
192
|
-
</
|
|
193
|
-
</
|
|
194
|
-
<
|
|
195
|
-
style=
|
|
291
|
+
</TEXT>
|
|
292
|
+
</TEXT>
|
|
293
|
+
</ListItem>
|
|
294
|
+
</VIEW>
|
|
295
|
+
<VIEW
|
|
296
|
+
style={{
|
|
297
|
+
marginLeft: 18
|
|
298
|
+
}}
|
|
196
299
|
>
|
|
197
|
-
<
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
<text>
|
|
207
|
-
<text>
|
|
208
|
-
Numbered List Item Nested 1
|
|
209
|
-
</text>
|
|
210
|
-
</text>
|
|
211
|
-
</view>
|
|
212
|
-
</view>
|
|
213
|
-
<view
|
|
214
|
-
style="text-align: left;"
|
|
215
|
-
>
|
|
216
|
-
<view>
|
|
217
|
-
<view>
|
|
218
|
-
<text>
|
|
219
|
-
2.
|
|
220
|
-
</text>
|
|
221
|
-
</view>
|
|
222
|
-
<text>
|
|
223
|
-
<text>
|
|
224
|
-
Numbered List Item Nested 2
|
|
225
|
-
</text>
|
|
226
|
-
</text>
|
|
227
|
-
</view>
|
|
228
|
-
</view>
|
|
229
|
-
<view
|
|
230
|
-
style="text-align: right; background-color: rgb(251, 228, 228); color: rgb(11, 110, 153); align-items: flex-end;"
|
|
231
|
-
>
|
|
232
|
-
<view>
|
|
233
|
-
<view>
|
|
234
|
-
<text>
|
|
235
|
-
3.
|
|
236
|
-
</text>
|
|
237
|
-
</view>
|
|
238
|
-
<text>
|
|
239
|
-
<text>
|
|
240
|
-
Numbered List Item Nested funky right
|
|
241
|
-
</text>
|
|
242
|
-
</text>
|
|
243
|
-
</view>
|
|
244
|
-
</view>
|
|
245
|
-
<view
|
|
246
|
-
style="text-align: center; background-color: rgb(251, 228, 228); color: rgb(11, 110, 153); align-items: center;"
|
|
247
|
-
>
|
|
248
|
-
<view>
|
|
249
|
-
<view>
|
|
250
|
-
<text>
|
|
251
|
-
4.
|
|
252
|
-
</text>
|
|
253
|
-
</view>
|
|
254
|
-
<text>
|
|
255
|
-
<text>
|
|
256
|
-
Numbered List Item Nested funky center
|
|
257
|
-
</text>
|
|
258
|
-
</text>
|
|
259
|
-
</view>
|
|
260
|
-
</view>
|
|
261
|
-
</view>
|
|
262
|
-
</view>
|
|
263
|
-
<view
|
|
264
|
-
style="text-align: left;"
|
|
265
|
-
>
|
|
266
|
-
<view>
|
|
267
|
-
<view>
|
|
268
|
-
<text>
|
|
269
|
-
1.
|
|
270
|
-
</text>
|
|
271
|
-
</view>
|
|
272
|
-
<text>
|
|
273
|
-
<text>
|
|
274
|
-
Numbered List Item
|
|
275
|
-
</text>
|
|
276
|
-
</text>
|
|
277
|
-
</view>
|
|
278
|
-
</view>
|
|
279
|
-
<view
|
|
280
|
-
style="text-align: left;"
|
|
281
|
-
>
|
|
282
|
-
<view>
|
|
283
|
-
<view>
|
|
284
|
-
<svg
|
|
285
|
-
fill="undefined"
|
|
286
|
-
height="12"
|
|
287
|
-
style="margin-top: 2px;"
|
|
288
|
-
viewbox="0 -960 960 960"
|
|
289
|
-
width="12"
|
|
300
|
+
<React.Fragment key=".0">
|
|
301
|
+
<VIEW
|
|
302
|
+
style={{
|
|
303
|
+
alignItems: undefined,
|
|
304
|
+
backgroundColor: undefined,
|
|
305
|
+
color: undefined,
|
|
306
|
+
paddingVertical: 2.25,
|
|
307
|
+
textAlign: 'left'
|
|
308
|
+
}}
|
|
290
309
|
>
|
|
291
|
-
<
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
</text>
|
|
310
|
-
</view>
|
|
311
|
-
<view>
|
|
312
|
-
<text>
|
|
313
|
-
Table Cell
|
|
314
|
-
</text>
|
|
315
|
-
</view>
|
|
316
|
-
<view>
|
|
317
|
-
<text>
|
|
318
|
-
Table Cell
|
|
319
|
-
</text>
|
|
320
|
-
</view>
|
|
321
|
-
</view>
|
|
322
|
-
<view>
|
|
323
|
-
<view>
|
|
324
|
-
<text>
|
|
325
|
-
Wide Cell
|
|
326
|
-
</text>
|
|
327
|
-
</view>
|
|
328
|
-
<view>
|
|
329
|
-
<text>
|
|
330
|
-
Table Cell
|
|
331
|
-
</text>
|
|
332
|
-
</view>
|
|
333
|
-
<view>
|
|
334
|
-
<text>
|
|
335
|
-
Table Cell
|
|
336
|
-
</text>
|
|
337
|
-
</view>
|
|
338
|
-
</view>
|
|
339
|
-
<view>
|
|
340
|
-
<view>
|
|
341
|
-
<text>
|
|
342
|
-
Wide Cell
|
|
343
|
-
</text>
|
|
344
|
-
</view>
|
|
345
|
-
<view>
|
|
346
|
-
<text>
|
|
347
|
-
Table Cell
|
|
348
|
-
</text>
|
|
349
|
-
</view>
|
|
350
|
-
<view>
|
|
351
|
-
<text>
|
|
352
|
-
Table Cell
|
|
353
|
-
</text>
|
|
354
|
-
</view>
|
|
355
|
-
</view>
|
|
356
|
-
</view>
|
|
357
|
-
</view>
|
|
358
|
-
<view>
|
|
359
|
-
<view>
|
|
360
|
-
<link
|
|
361
|
-
src=""
|
|
362
|
-
>
|
|
363
|
-
<view
|
|
364
|
-
style="display: flex; gap: 6px; flex-direction: row;"
|
|
310
|
+
<ListItem listMarker="1.">
|
|
311
|
+
<TEXT>
|
|
312
|
+
<TEXT style={{}}>
|
|
313
|
+
Numbered List Item Nested 1
|
|
314
|
+
</TEXT>
|
|
315
|
+
</TEXT>
|
|
316
|
+
</ListItem>
|
|
317
|
+
</VIEW>
|
|
318
|
+
</React.Fragment>
|
|
319
|
+
<React.Fragment key=".1">
|
|
320
|
+
<VIEW
|
|
321
|
+
style={{
|
|
322
|
+
alignItems: undefined,
|
|
323
|
+
backgroundColor: undefined,
|
|
324
|
+
color: undefined,
|
|
325
|
+
paddingVertical: 2.25,
|
|
326
|
+
textAlign: 'left'
|
|
327
|
+
}}
|
|
365
328
|
>
|
|
366
|
-
<
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
style="text-align: left;"
|
|
385
|
-
>
|
|
386
|
-
<view>
|
|
387
|
-
<image
|
|
388
|
-
src="[object Blob]"
|
|
389
|
-
style="width: 384px;"
|
|
390
|
-
/>
|
|
391
|
-
<text
|
|
392
|
-
style="width: 384px; font-size: 9.600000000000001px;"
|
|
393
|
-
>
|
|
394
|
-
From https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg
|
|
395
|
-
</text>
|
|
396
|
-
</view>
|
|
397
|
-
</view>
|
|
398
|
-
<view
|
|
399
|
-
style="text-align: right; align-items: flex-end;"
|
|
400
|
-
>
|
|
401
|
-
<view>
|
|
402
|
-
<image
|
|
403
|
-
src="[object Blob]"
|
|
404
|
-
style="width: 150px;"
|
|
405
|
-
/>
|
|
406
|
-
</view>
|
|
407
|
-
</view>
|
|
408
|
-
<view
|
|
409
|
-
style="text-align: left;"
|
|
410
|
-
>
|
|
411
|
-
<view>
|
|
412
|
-
<link
|
|
413
|
-
src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
|
|
414
|
-
>
|
|
415
|
-
<view
|
|
416
|
-
style="display: flex; gap: 6px; flex-direction: row;"
|
|
329
|
+
<ListItem listMarker="2.">
|
|
330
|
+
<TEXT>
|
|
331
|
+
<TEXT style={{}}>
|
|
332
|
+
Numbered List Item Nested 2
|
|
333
|
+
</TEXT>
|
|
334
|
+
</TEXT>
|
|
335
|
+
</ListItem>
|
|
336
|
+
</VIEW>
|
|
337
|
+
</React.Fragment>
|
|
338
|
+
<React.Fragment key=".2">
|
|
339
|
+
<VIEW
|
|
340
|
+
style={{
|
|
341
|
+
alignItems: 'flex-end',
|
|
342
|
+
backgroundColor: '#fbe4e4',
|
|
343
|
+
color: '#0b6e99',
|
|
344
|
+
paddingVertical: 2.25,
|
|
345
|
+
textAlign: 'right'
|
|
346
|
+
}}
|
|
417
347
|
>
|
|
418
|
-
<
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
From https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm
|
|
437
|
-
</text>
|
|
438
|
-
</view>
|
|
439
|
-
</view>
|
|
440
|
-
<view>
|
|
441
|
-
<view>
|
|
442
|
-
<link
|
|
443
|
-
src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"
|
|
444
|
-
>
|
|
445
|
-
<view
|
|
446
|
-
style="display: flex; gap: 6px; flex-direction: row;"
|
|
348
|
+
<ListItem listMarker="3.">
|
|
349
|
+
<TEXT>
|
|
350
|
+
<TEXT style={{}}>
|
|
351
|
+
Numbered List Item Nested funky right
|
|
352
|
+
</TEXT>
|
|
353
|
+
</TEXT>
|
|
354
|
+
</ListItem>
|
|
355
|
+
</VIEW>
|
|
356
|
+
</React.Fragment>
|
|
357
|
+
<React.Fragment key=".3">
|
|
358
|
+
<VIEW
|
|
359
|
+
style={{
|
|
360
|
+
alignItems: 'center',
|
|
361
|
+
backgroundColor: '#fbe4e4',
|
|
362
|
+
color: '#0b6e99',
|
|
363
|
+
paddingVertical: 2.25,
|
|
364
|
+
textAlign: 'center'
|
|
365
|
+
}}
|
|
447
366
|
>
|
|
448
|
-
<
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
367
|
+
<ListItem listMarker="4.">
|
|
368
|
+
<TEXT>
|
|
369
|
+
<TEXT style={{}}>
|
|
370
|
+
Numbered List Item Nested funky center
|
|
371
|
+
</TEXT>
|
|
372
|
+
</TEXT>
|
|
373
|
+
</ListItem>
|
|
374
|
+
</VIEW>
|
|
375
|
+
</React.Fragment>
|
|
376
|
+
</VIEW>
|
|
377
|
+
</React.Fragment>
|
|
378
|
+
</VIEW>
|
|
379
|
+
</React.Fragment>
|
|
380
|
+
<React.Fragment key=".1:8">
|
|
381
|
+
<VIEW
|
|
382
|
+
style={{
|
|
383
|
+
alignItems: undefined,
|
|
384
|
+
backgroundColor: undefined,
|
|
385
|
+
color: undefined,
|
|
386
|
+
paddingVertical: 2.25,
|
|
387
|
+
textAlign: 'left'
|
|
388
|
+
}}
|
|
389
|
+
>
|
|
390
|
+
<ListItem listMarker="1.">
|
|
391
|
+
<TEXT>
|
|
392
|
+
<TEXT style={{}}>
|
|
393
|
+
Numbered List Item
|
|
394
|
+
</TEXT>
|
|
395
|
+
</TEXT>
|
|
396
|
+
</ListItem>
|
|
397
|
+
</VIEW>
|
|
398
|
+
</React.Fragment>
|
|
399
|
+
<React.Fragment key=".1:9">
|
|
400
|
+
<VIEW
|
|
401
|
+
style={{
|
|
402
|
+
alignItems: undefined,
|
|
403
|
+
backgroundColor: undefined,
|
|
404
|
+
color: undefined,
|
|
405
|
+
paddingVertical: 2.25,
|
|
406
|
+
textAlign: 'left'
|
|
407
|
+
}}
|
|
408
|
+
>
|
|
409
|
+
<ListItem listMarker={<SVG fill="undefined" height="12" style={{marginTop: 2}} viewBox="0 -960 960 960" width="12"><PATH d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Z" /></SVG>}>
|
|
410
|
+
<TEXT>
|
|
411
|
+
<TEXT style={{}}>
|
|
412
|
+
Check List Item
|
|
413
|
+
</TEXT>
|
|
414
|
+
</TEXT>
|
|
415
|
+
</ListItem>
|
|
416
|
+
</VIEW>
|
|
417
|
+
</React.Fragment>
|
|
418
|
+
<React.Fragment key=".1:a">
|
|
419
|
+
<VIEW
|
|
420
|
+
style={{
|
|
421
|
+
alignItems: undefined,
|
|
422
|
+
backgroundColor: undefined,
|
|
423
|
+
color: undefined,
|
|
424
|
+
paddingVertical: 2.25,
|
|
425
|
+
textAlign: undefined
|
|
426
|
+
}}
|
|
427
|
+
>
|
|
428
|
+
<Table
|
|
429
|
+
data={{
|
|
430
|
+
columnWidths: [
|
|
431
|
+
200,
|
|
432
|
+
undefined,
|
|
433
|
+
undefined
|
|
434
|
+
],
|
|
435
|
+
rows: [
|
|
436
|
+
{
|
|
437
|
+
cells: [
|
|
438
|
+
[
|
|
439
|
+
{
|
|
440
|
+
styles: {},
|
|
441
|
+
text: 'Wide Cell',
|
|
442
|
+
type: 'text'
|
|
443
|
+
}
|
|
444
|
+
],
|
|
445
|
+
[
|
|
446
|
+
{
|
|
447
|
+
styles: {},
|
|
448
|
+
text: 'Table Cell',
|
|
449
|
+
type: 'text'
|
|
450
|
+
}
|
|
451
|
+
],
|
|
452
|
+
[
|
|
453
|
+
{
|
|
454
|
+
styles: {},
|
|
455
|
+
text: 'Table Cell',
|
|
456
|
+
type: 'text'
|
|
457
|
+
}
|
|
458
|
+
]
|
|
459
|
+
]
|
|
460
|
+
},
|
|
461
|
+
{
|
|
462
|
+
cells: [
|
|
463
|
+
[
|
|
464
|
+
{
|
|
465
|
+
styles: {},
|
|
466
|
+
text: 'Wide Cell',
|
|
467
|
+
type: 'text'
|
|
468
|
+
}
|
|
469
|
+
],
|
|
470
|
+
[
|
|
471
|
+
{
|
|
472
|
+
styles: {},
|
|
473
|
+
text: 'Table Cell',
|
|
474
|
+
type: 'text'
|
|
475
|
+
}
|
|
476
|
+
],
|
|
477
|
+
[
|
|
478
|
+
{
|
|
479
|
+
styles: {},
|
|
480
|
+
text: 'Table Cell',
|
|
481
|
+
type: 'text'
|
|
482
|
+
}
|
|
483
|
+
]
|
|
484
|
+
]
|
|
485
|
+
},
|
|
486
|
+
{
|
|
487
|
+
cells: [
|
|
488
|
+
[
|
|
489
|
+
{
|
|
490
|
+
styles: {},
|
|
491
|
+
text: 'Wide Cell',
|
|
492
|
+
type: 'text'
|
|
493
|
+
}
|
|
494
|
+
],
|
|
495
|
+
[
|
|
496
|
+
{
|
|
497
|
+
styles: {},
|
|
498
|
+
text: 'Table Cell',
|
|
499
|
+
type: 'text'
|
|
500
|
+
}
|
|
501
|
+
],
|
|
502
|
+
[
|
|
503
|
+
{
|
|
504
|
+
styles: {},
|
|
505
|
+
text: 'Table Cell',
|
|
506
|
+
type: 'text'
|
|
507
|
+
}
|
|
508
|
+
]
|
|
509
|
+
]
|
|
510
|
+
}
|
|
511
|
+
],
|
|
512
|
+
type: 'tableContent'
|
|
513
|
+
}}
|
|
514
|
+
transformer={[object Object]}
|
|
515
|
+
/>
|
|
516
|
+
</VIEW>
|
|
517
|
+
</React.Fragment>
|
|
518
|
+
<React.Fragment key=".1:b">
|
|
519
|
+
<VIEW
|
|
520
|
+
style={{
|
|
521
|
+
alignItems: undefined,
|
|
522
|
+
backgroundColor: undefined,
|
|
523
|
+
color: undefined,
|
|
524
|
+
paddingVertical: 2.25,
|
|
525
|
+
textAlign: undefined
|
|
526
|
+
}}
|
|
527
|
+
>
|
|
528
|
+
<VIEW>
|
|
529
|
+
<LINK src="">
|
|
530
|
+
<VIEW
|
|
531
|
+
style={{
|
|
532
|
+
display: 'flex',
|
|
533
|
+
flexDirection: 'row',
|
|
534
|
+
gap: 6
|
|
535
|
+
}}
|
|
465
536
|
>
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
537
|
+
<SVG
|
|
538
|
+
fill="currentColor"
|
|
539
|
+
height={16}
|
|
540
|
+
viewBox="0 0 24 24"
|
|
541
|
+
width={16}
|
|
542
|
+
>
|
|
543
|
+
<PATH d="M3 8L9.00319 2H19.9978C20.5513 2 21 2.45531 21 2.9918V21.0082C21 21.556 20.5551 22 20.0066 22H3.9934C3.44476 22 3 21.5501 3 20.9932V8ZM10 4V9H5V20H19V4H10Z" />
|
|
544
|
+
</SVG>
|
|
545
|
+
<TEXT>
|
|
546
|
+
Open file
|
|
547
|
+
</TEXT>
|
|
548
|
+
</VIEW>
|
|
549
|
+
</LINK>
|
|
550
|
+
</VIEW>
|
|
551
|
+
</VIEW>
|
|
552
|
+
</React.Fragment>
|
|
553
|
+
<React.Fragment key=".1:c">
|
|
554
|
+
<VIEW
|
|
555
|
+
style={{
|
|
556
|
+
alignItems: undefined,
|
|
557
|
+
backgroundColor: undefined,
|
|
558
|
+
color: undefined,
|
|
559
|
+
paddingVertical: 2.25,
|
|
560
|
+
textAlign: 'left'
|
|
561
|
+
}}
|
|
562
|
+
>
|
|
563
|
+
<VIEW>
|
|
564
|
+
<IMAGE
|
|
565
|
+
src={[object Blob]}
|
|
566
|
+
style={{
|
|
567
|
+
width: 384
|
|
568
|
+
}}
|
|
569
|
+
/>
|
|
570
|
+
<TEXT
|
|
571
|
+
style={{
|
|
572
|
+
fontSize: 9.600000000000001,
|
|
573
|
+
width: 384
|
|
574
|
+
}}
|
|
575
|
+
>
|
|
576
|
+
From https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg
|
|
577
|
+
</TEXT>
|
|
578
|
+
</VIEW>
|
|
579
|
+
</VIEW>
|
|
580
|
+
</React.Fragment>
|
|
581
|
+
<React.Fragment key=".1:d">
|
|
582
|
+
<VIEW
|
|
583
|
+
style={{
|
|
584
|
+
alignItems: 'flex-end',
|
|
585
|
+
backgroundColor: undefined,
|
|
586
|
+
color: undefined,
|
|
587
|
+
paddingVertical: 2.25,
|
|
588
|
+
textAlign: 'right'
|
|
589
|
+
}}
|
|
590
|
+
>
|
|
591
|
+
<VIEW>
|
|
592
|
+
<IMAGE
|
|
593
|
+
src={[object Blob]}
|
|
594
|
+
style={{
|
|
595
|
+
width: 150
|
|
596
|
+
}}
|
|
597
|
+
/>
|
|
598
|
+
</VIEW>
|
|
599
|
+
</VIEW>
|
|
600
|
+
</React.Fragment>
|
|
601
|
+
<React.Fragment key=".1:e">
|
|
602
|
+
<VIEW
|
|
603
|
+
style={{
|
|
604
|
+
alignItems: undefined,
|
|
605
|
+
backgroundColor: undefined,
|
|
606
|
+
color: undefined,
|
|
607
|
+
paddingVertical: 2.25,
|
|
608
|
+
textAlign: 'left'
|
|
609
|
+
}}
|
|
610
|
+
>
|
|
611
|
+
<VIEW>
|
|
612
|
+
<LINK src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm">
|
|
613
|
+
<VIEW
|
|
614
|
+
style={{
|
|
615
|
+
display: 'flex',
|
|
616
|
+
flexDirection: 'row',
|
|
617
|
+
gap: 6
|
|
618
|
+
}}
|
|
479
619
|
>
|
|
480
|
-
<
|
|
481
|
-
|
|
620
|
+
<SVG
|
|
621
|
+
fill="currentColor"
|
|
622
|
+
height={14}
|
|
623
|
+
viewBox="0 0 24 24"
|
|
624
|
+
width={14}
|
|
482
625
|
>
|
|
483
|
-
<
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
626
|
+
<PATH d="M2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM8 5V19H16V5H8ZM4 5V7H6V5H4ZM18 5V7H20V5H18ZM4 9V11H6V9H4ZM18 9V11H20V9H18ZM4 13V15H6V13H4ZM18 13V15H20V13H18ZM4 17V19H6V17H4ZM18 17V19H20V17H18Z" />
|
|
627
|
+
</SVG>
|
|
628
|
+
<TEXT>
|
|
629
|
+
Open video file
|
|
630
|
+
</TEXT>
|
|
631
|
+
</VIEW>
|
|
632
|
+
</LINK>
|
|
633
|
+
<TEXT
|
|
634
|
+
style={{
|
|
635
|
+
fontSize: 9.600000000000001,
|
|
636
|
+
width: 384
|
|
637
|
+
}}
|
|
638
|
+
>
|
|
639
|
+
From https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm
|
|
640
|
+
</TEXT>
|
|
641
|
+
</VIEW>
|
|
642
|
+
</VIEW>
|
|
643
|
+
</React.Fragment>
|
|
644
|
+
<React.Fragment key=".1:f">
|
|
645
|
+
<VIEW
|
|
646
|
+
style={{
|
|
647
|
+
alignItems: undefined,
|
|
648
|
+
backgroundColor: undefined,
|
|
649
|
+
color: undefined,
|
|
650
|
+
paddingVertical: 2.25,
|
|
651
|
+
textAlign: undefined
|
|
652
|
+
}}
|
|
653
|
+
>
|
|
654
|
+
<VIEW>
|
|
655
|
+
<LINK src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3">
|
|
656
|
+
<VIEW
|
|
657
|
+
style={{
|
|
658
|
+
display: 'flex',
|
|
659
|
+
flexDirection: 'row',
|
|
660
|
+
gap: 6
|
|
661
|
+
}}
|
|
500
662
|
>
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
663
|
+
<SVG
|
|
664
|
+
fill="currentColor"
|
|
665
|
+
height={14}
|
|
666
|
+
viewBox="0 0 24 24"
|
|
667
|
+
width={14}
|
|
668
|
+
>
|
|
669
|
+
<PATH d="M2 16.0001H5.88889L11.1834 20.3319C11.2727 20.405 11.3846 20.4449 11.5 20.4449C11.7761 20.4449 12 20.2211 12 19.9449V4.05519C12 3.93977 11.9601 3.8279 11.887 3.73857C11.7121 3.52485 11.3971 3.49335 11.1834 3.66821L5.88889 8.00007H2C1.44772 8.00007 1 8.44778 1 9.00007V15.0001C1 15.5524 1.44772 16.0001 2 16.0001ZM23 12C23 15.292 21.5539 18.2463 19.2622 20.2622L17.8445 18.8444C19.7758 17.1937 21 14.7398 21 12C21 9.26016 19.7758 6.80629 17.8445 5.15557L19.2622 3.73779C21.5539 5.75368 23 8.70795 23 12ZM18 12C18 10.0883 17.106 8.38548 15.7133 7.28673L14.2842 8.71584C15.3213 9.43855 16 10.64 16 12C16 13.36 15.3213 14.5614 14.2842 15.2841L15.7133 16.7132C17.106 15.6145 18 13.9116 18 12Z" />
|
|
670
|
+
</SVG>
|
|
671
|
+
<TEXT>
|
|
672
|
+
Open audio file
|
|
673
|
+
</TEXT>
|
|
674
|
+
</VIEW>
|
|
675
|
+
</LINK>
|
|
676
|
+
<TEXT
|
|
677
|
+
style={{
|
|
678
|
+
fontSize: 9.600000000000001,
|
|
679
|
+
width: undefined
|
|
680
|
+
}}
|
|
681
|
+
>
|
|
682
|
+
From https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3
|
|
683
|
+
</TEXT>
|
|
684
|
+
</VIEW>
|
|
685
|
+
</VIEW>
|
|
686
|
+
</React.Fragment>
|
|
687
|
+
<React.Fragment key=".1:g">
|
|
688
|
+
<VIEW
|
|
689
|
+
style={{
|
|
690
|
+
alignItems: undefined,
|
|
691
|
+
backgroundColor: undefined,
|
|
692
|
+
color: undefined,
|
|
693
|
+
paddingVertical: 2.25,
|
|
694
|
+
textAlign: 'left'
|
|
695
|
+
}}
|
|
696
|
+
>
|
|
697
|
+
<TEXT />
|
|
698
|
+
</VIEW>
|
|
699
|
+
</React.Fragment>
|
|
700
|
+
<React.Fragment key=".1:h">
|
|
701
|
+
<VIEW
|
|
702
|
+
style={{
|
|
703
|
+
alignItems: undefined,
|
|
704
|
+
backgroundColor: undefined,
|
|
705
|
+
color: undefined,
|
|
706
|
+
paddingVertical: 2.25,
|
|
707
|
+
textAlign: undefined
|
|
708
|
+
}}
|
|
709
|
+
>
|
|
710
|
+
<VIEW>
|
|
711
|
+
<LINK src="">
|
|
712
|
+
<VIEW
|
|
713
|
+
style={{
|
|
714
|
+
display: 'flex',
|
|
715
|
+
flexDirection: 'row',
|
|
716
|
+
gap: 6
|
|
717
|
+
}}
|
|
511
718
|
>
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
719
|
+
<SVG
|
|
720
|
+
fill="currentColor"
|
|
721
|
+
height={14}
|
|
722
|
+
viewBox="0 0 24 24"
|
|
723
|
+
width={14}
|
|
724
|
+
>
|
|
725
|
+
<PATH d="M2 16.0001H5.88889L11.1834 20.3319C11.2727 20.405 11.3846 20.4449 11.5 20.4449C11.7761 20.4449 12 20.2211 12 19.9449V4.05519C12 3.93977 11.9601 3.8279 11.887 3.73857C11.7121 3.52485 11.3971 3.49335 11.1834 3.66821L5.88889 8.00007H2C1.44772 8.00007 1 8.44778 1 9.00007V15.0001C1 15.5524 1.44772 16.0001 2 16.0001ZM23 12C23 15.292 21.5539 18.2463 19.2622 20.2622L17.8445 18.8444C19.7758 17.1937 21 14.7398 21 12C21 9.26016 19.7758 6.80629 17.8445 5.15557L19.2622 3.73779C21.5539 5.75368 23 8.70795 23 12ZM18 12C18 10.0883 17.106 8.38548 15.7133 7.28673L14.2842 8.71584C15.3213 9.43855 16 10.64 16 12C16 13.36 15.3213 14.5614 14.2842 15.2841L15.7133 16.7132C17.106 15.6145 18 13.9116 18 12Z" />
|
|
726
|
+
</SVG>
|
|
727
|
+
<TEXT>
|
|
728
|
+
audio.mp3
|
|
729
|
+
</TEXT>
|
|
730
|
+
</VIEW>
|
|
731
|
+
</LINK>
|
|
732
|
+
<TEXT
|
|
733
|
+
style={{
|
|
734
|
+
fontSize: 9.600000000000001,
|
|
735
|
+
width: undefined
|
|
736
|
+
}}
|
|
737
|
+
>
|
|
738
|
+
Audio file caption
|
|
739
|
+
</TEXT>
|
|
740
|
+
</VIEW>
|
|
741
|
+
</VIEW>
|
|
742
|
+
</React.Fragment>
|
|
743
|
+
<React.Fragment key=".1:i">
|
|
744
|
+
<VIEW
|
|
745
|
+
style={{
|
|
746
|
+
alignItems: undefined,
|
|
747
|
+
backgroundColor: undefined,
|
|
748
|
+
color: undefined,
|
|
749
|
+
paddingVertical: 2.25,
|
|
750
|
+
textAlign: 'left'
|
|
751
|
+
}}
|
|
752
|
+
>
|
|
753
|
+
<TEXT>
|
|
754
|
+
<TEXT
|
|
755
|
+
style={{
|
|
756
|
+
fontWeight: 'bold'
|
|
757
|
+
}}
|
|
758
|
+
>
|
|
759
|
+
Inline Content:
|
|
760
|
+
</TEXT>
|
|
761
|
+
</TEXT>
|
|
762
|
+
</VIEW>
|
|
763
|
+
</React.Fragment>
|
|
764
|
+
<React.Fragment key=".1:j">
|
|
765
|
+
<VIEW
|
|
766
|
+
style={{
|
|
767
|
+
alignItems: undefined,
|
|
768
|
+
backgroundColor: undefined,
|
|
769
|
+
color: undefined,
|
|
770
|
+
paddingVertical: 2.25,
|
|
771
|
+
textAlign: 'left'
|
|
772
|
+
}}
|
|
773
|
+
>
|
|
774
|
+
<TEXT>
|
|
775
|
+
<TEXT
|
|
776
|
+
style={{
|
|
777
|
+
backgroundColor: '#ddebf1',
|
|
778
|
+
color: '#e03e3e',
|
|
779
|
+
fontStyle: 'italic',
|
|
780
|
+
fontWeight: 'bold'
|
|
781
|
+
}}
|
|
782
|
+
>
|
|
783
|
+
Styled Text
|
|
784
|
+
</TEXT>
|
|
785
|
+
<TEXT style={{}}>
|
|
786
|
+
{' '}
|
|
787
|
+
</TEXT>
|
|
788
|
+
<LINK href="https://www.blocknotejs.org">
|
|
789
|
+
<TEXT style={{}}>
|
|
790
|
+
Link
|
|
791
|
+
</TEXT>
|
|
792
|
+
</LINK>
|
|
793
|
+
</TEXT>
|
|
794
|
+
</VIEW>
|
|
795
|
+
</React.Fragment>
|
|
796
|
+
<React.Fragment key=".1:k">
|
|
797
|
+
<VIEW
|
|
798
|
+
style={{
|
|
799
|
+
alignItems: undefined,
|
|
800
|
+
backgroundColor: undefined,
|
|
801
|
+
color: undefined,
|
|
802
|
+
paddingVertical: 2.25,
|
|
803
|
+
textAlign: undefined
|
|
804
|
+
}}
|
|
805
|
+
>
|
|
806
|
+
<Table
|
|
807
|
+
data={{
|
|
808
|
+
columnWidths: [
|
|
809
|
+
undefined,
|
|
810
|
+
undefined,
|
|
811
|
+
undefined
|
|
812
|
+
],
|
|
813
|
+
rows: [
|
|
814
|
+
{
|
|
815
|
+
cells: [
|
|
816
|
+
[
|
|
817
|
+
{
|
|
818
|
+
styles: {},
|
|
819
|
+
text: 'Table Cell 1',
|
|
820
|
+
type: 'text'
|
|
821
|
+
}
|
|
822
|
+
],
|
|
823
|
+
[
|
|
824
|
+
{
|
|
825
|
+
styles: {},
|
|
826
|
+
text: 'Table Cell 2',
|
|
827
|
+
type: 'text'
|
|
828
|
+
}
|
|
829
|
+
],
|
|
830
|
+
[
|
|
831
|
+
{
|
|
832
|
+
styles: {},
|
|
833
|
+
text: 'Table Cell 3',
|
|
834
|
+
type: 'text'
|
|
835
|
+
}
|
|
836
|
+
]
|
|
837
|
+
]
|
|
838
|
+
},
|
|
839
|
+
{
|
|
840
|
+
cells: [
|
|
841
|
+
[
|
|
842
|
+
{
|
|
843
|
+
styles: {},
|
|
844
|
+
text: 'Table Cell 4',
|
|
845
|
+
type: 'text'
|
|
846
|
+
}
|
|
847
|
+
],
|
|
848
|
+
[
|
|
849
|
+
{
|
|
850
|
+
styles: {
|
|
851
|
+
bold: true
|
|
852
|
+
},
|
|
853
|
+
text: 'Table Cell Bold 5',
|
|
854
|
+
type: 'text'
|
|
855
|
+
}
|
|
856
|
+
],
|
|
857
|
+
[
|
|
858
|
+
{
|
|
859
|
+
styles: {},
|
|
860
|
+
text: 'Table Cell 6',
|
|
861
|
+
type: 'text'
|
|
862
|
+
}
|
|
863
|
+
]
|
|
864
|
+
]
|
|
865
|
+
},
|
|
866
|
+
{
|
|
867
|
+
cells: [
|
|
868
|
+
[
|
|
869
|
+
{
|
|
870
|
+
styles: {},
|
|
871
|
+
text: 'Table Cell 7',
|
|
872
|
+
type: 'text'
|
|
873
|
+
}
|
|
874
|
+
],
|
|
875
|
+
[
|
|
876
|
+
{
|
|
877
|
+
styles: {},
|
|
878
|
+
text: 'Table Cell 8',
|
|
879
|
+
type: 'text'
|
|
880
|
+
}
|
|
881
|
+
],
|
|
882
|
+
[
|
|
883
|
+
{
|
|
884
|
+
styles: {},
|
|
885
|
+
text: 'Table Cell 9',
|
|
886
|
+
type: 'text'
|
|
887
|
+
}
|
|
888
|
+
]
|
|
889
|
+
]
|
|
890
|
+
}
|
|
891
|
+
],
|
|
892
|
+
type: 'tableContent'
|
|
893
|
+
}}
|
|
894
|
+
transformer={[object Object]}
|
|
895
|
+
/>
|
|
896
|
+
</VIEW>
|
|
897
|
+
</React.Fragment>
|
|
898
|
+
<React.Fragment key=".1:l">
|
|
899
|
+
<VIEW
|
|
900
|
+
style={{
|
|
901
|
+
alignItems: undefined,
|
|
902
|
+
backgroundColor: undefined,
|
|
903
|
+
color: undefined,
|
|
904
|
+
paddingVertical: 2.25,
|
|
905
|
+
textAlign: undefined
|
|
906
|
+
}}
|
|
907
|
+
>
|
|
908
|
+
<VIEW
|
|
909
|
+
style={{
|
|
910
|
+
backgroundColor: '#161616',
|
|
911
|
+
color: '#ffffff',
|
|
912
|
+
fontFamily: 'GeistMono',
|
|
913
|
+
fontSize: 12,
|
|
914
|
+
lineHeight: 1.25,
|
|
915
|
+
padding: 18
|
|
916
|
+
}}
|
|
518
917
|
>
|
|
519
|
-
<
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
<view>
|
|
563
|
-
<text
|
|
564
|
-
style="font-weight: bold;"
|
|
565
|
-
>
|
|
566
|
-
Table Cell Bold 5
|
|
567
|
-
</text>
|
|
568
|
-
</view>
|
|
569
|
-
<view>
|
|
570
|
-
<text>
|
|
571
|
-
Table Cell 6
|
|
572
|
-
</text>
|
|
573
|
-
</view>
|
|
574
|
-
</view>
|
|
575
|
-
<view>
|
|
576
|
-
<view>
|
|
577
|
-
<text>
|
|
578
|
-
Table Cell 7
|
|
579
|
-
</text>
|
|
580
|
-
</view>
|
|
581
|
-
<view>
|
|
582
|
-
<text>
|
|
583
|
-
Table Cell 8
|
|
584
|
-
</text>
|
|
585
|
-
</view>
|
|
586
|
-
<view>
|
|
587
|
-
<text>
|
|
588
|
-
Table Cell 9
|
|
589
|
-
</text>
|
|
590
|
-
</view>
|
|
591
|
-
</view>
|
|
592
|
-
</view>
|
|
593
|
-
</view>
|
|
594
|
-
</view>
|
|
595
|
-
<view>
|
|
596
|
-
<text>
|
|
597
|
-
Footer
|
|
598
|
-
</text>
|
|
599
|
-
</view>
|
|
600
|
-
</page>
|
|
601
|
-
</document>
|
|
602
|
-
</div>
|
|
918
|
+
<TEXT
|
|
919
|
+
style={{
|
|
920
|
+
marginLeft: 0
|
|
921
|
+
}}
|
|
922
|
+
>
|
|
923
|
+
{`const helloWorld = (message) => {`}
|
|
924
|
+
</TEXT>
|
|
925
|
+
<TEXT
|
|
926
|
+
style={{
|
|
927
|
+
marginLeft: 14.25
|
|
928
|
+
}}
|
|
929
|
+
>
|
|
930
|
+
console.log("Hello World", message);
|
|
931
|
+
</TEXT>
|
|
932
|
+
<TEXT
|
|
933
|
+
style={{
|
|
934
|
+
marginLeft: 0
|
|
935
|
+
}}
|
|
936
|
+
>
|
|
937
|
+
{`};`}
|
|
938
|
+
</TEXT>
|
|
939
|
+
</VIEW>
|
|
940
|
+
</VIEW>
|
|
941
|
+
</React.Fragment>
|
|
942
|
+
<VIEW
|
|
943
|
+
fixed
|
|
944
|
+
style={[
|
|
945
|
+
{
|
|
946
|
+
bottom: 32.5,
|
|
947
|
+
left: 35,
|
|
948
|
+
right: 35
|
|
949
|
+
},
|
|
950
|
+
{
|
|
951
|
+
position: 'absolute'
|
|
952
|
+
}
|
|
953
|
+
]}
|
|
954
|
+
>
|
|
955
|
+
<TEXT>
|
|
956
|
+
Footer
|
|
957
|
+
</TEXT>
|
|
958
|
+
</VIEW>
|
|
959
|
+
</PAGE>
|
|
960
|
+
</DOCUMENT>
|