@frontlit/text-editor 0.1.0-alpha.1 → 0.1.0-alpha.2
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/README.md +45 -0
- package/dist/docs.d.ts +90 -0
- package/dist/docs.js +905 -0
- package/dist/docs.js.map +1 -0
- package/dist/headings.d.ts +17 -0
- package/dist/headings.js +35 -0
- package/dist/headings.js.map +1 -0
- package/dist/index.d.ts +13 -7
- package/dist/index.js +264 -128
- package/dist/index.js.map +1 -1
- package/dist/prose.css +191 -193
- package/dist/renderer/index.d.ts +70 -0
- package/dist/renderer/index.js +356 -0
- package/dist/renderer/index.js.map +1 -0
- package/dist/renderer/islands/copy-code-button.js +56 -0
- package/dist/renderer/islands/copy-code-button.js.map +1 -0
- package/dist/styles.css +114 -63
- package/dist/tokens.css +43 -43
- package/package.json +36 -11
package/dist/prose.css
CHANGED
|
@@ -1,76 +1,76 @@
|
|
|
1
1
|
/* Editing surface (Editor / ProseMirror) */
|
|
2
2
|
|
|
3
3
|
.tiptap-editor {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
4
|
+
display: flex;
|
|
5
|
+
flex-direction: column;
|
|
6
|
+
gap: 0.75rem;
|
|
7
|
+
border-color: var(--border);
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
.tiptap-editor .ProseMirror:not([class*="min-h-"]) {
|
|
11
|
-
|
|
11
|
+
min-height: 12.5rem;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
.tiptap-editor .ProseMirror {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
15
|
+
padding: 1rem;
|
|
16
|
+
border-radius: 0.5rem;
|
|
17
|
+
outline: none;
|
|
18
|
+
word-break: break-word;
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
.tiptap-editor .ProseMirror.writing-editor-content {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
22
|
+
min-height: 26rem;
|
|
23
|
+
padding: 0 2.5rem 8rem;
|
|
24
|
+
font-size: 1.0625rem;
|
|
25
|
+
line-height: 1.75;
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
.tiptap-editor .ProseMirror.writing-editor-content p {
|
|
29
|
-
|
|
29
|
+
margin: 0 0 1.35rem;
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
@media (max-width: 640px) {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
33
|
+
.tiptap-editor .ProseMirror.writing-editor-content {
|
|
34
|
+
padding-right: 1.5rem;
|
|
35
|
+
padding-left: 1.5rem;
|
|
36
|
+
}
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
.tiptap-editor .ProseMirror p.is-editor-empty:first-child::before {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
40
|
+
color: var(--muted-foreground);
|
|
41
|
+
content: attr(data-placeholder);
|
|
42
|
+
float: left;
|
|
43
|
+
height: 0;
|
|
44
|
+
pointer-events: none;
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
.tiptap-editor .ProseMirror a {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
48
|
+
color: var(--primary);
|
|
49
|
+
text-decoration: underline;
|
|
50
|
+
text-decoration-thickness: 0.1em;
|
|
51
|
+
text-decoration-color: var(--primary);
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
.tiptap-editor .ProseMirror ul,
|
|
55
55
|
.tiptap-editor .ProseMirror ol {
|
|
56
|
-
|
|
57
|
-
|
|
56
|
+
padding-left: 1.5rem;
|
|
57
|
+
margin: 0.75rem 0;
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
.tiptap-editor .ProseMirror ul li {
|
|
61
|
-
|
|
61
|
+
list-style: disc;
|
|
62
62
|
}
|
|
63
63
|
|
|
64
64
|
.tiptap-editor .ProseMirror ol li {
|
|
65
|
-
|
|
65
|
+
list-style: decimal;
|
|
66
66
|
}
|
|
67
67
|
|
|
68
68
|
.tiptap-editor .ProseMirror blockquote {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
69
|
+
border-left: 3px solid var(--border);
|
|
70
|
+
margin: 0.75rem 0;
|
|
71
|
+
padding-left: 1rem;
|
|
72
|
+
color: var(--muted-foreground);
|
|
73
|
+
font-style: italic;
|
|
74
74
|
}
|
|
75
75
|
|
|
76
76
|
.tiptap-editor .ProseMirror h1,
|
|
@@ -79,176 +79,176 @@
|
|
|
79
79
|
.tiptap-editor .ProseMirror h4,
|
|
80
80
|
.tiptap-editor .ProseMirror h5,
|
|
81
81
|
.tiptap-editor .ProseMirror h6 {
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
82
|
+
font-weight: 600;
|
|
83
|
+
line-height: 1.25;
|
|
84
|
+
margin: 1.5rem 0 0.75rem;
|
|
85
85
|
}
|
|
86
86
|
|
|
87
87
|
.tiptap-editor .ProseMirror h1 {
|
|
88
|
-
|
|
88
|
+
font-size: clamp(2rem, 3vw, 2.5rem);
|
|
89
89
|
}
|
|
90
90
|
|
|
91
91
|
.tiptap-editor .ProseMirror h2 {
|
|
92
|
-
|
|
92
|
+
font-size: clamp(1.75rem, 2.5vw, 2rem);
|
|
93
93
|
}
|
|
94
94
|
|
|
95
95
|
.tiptap-editor .ProseMirror h3 {
|
|
96
|
-
|
|
96
|
+
font-size: clamp(1.5rem, 2vw, 1.75rem);
|
|
97
97
|
}
|
|
98
98
|
|
|
99
99
|
.tiptap-editor .ProseMirror pre {
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
100
|
+
background-color: var(--muted, hsl(210 40% 96.1%));
|
|
101
|
+
border: 1px solid var(--border, hsl(214.3 31.8% 91.4%));
|
|
102
|
+
border-radius: 0.5rem;
|
|
103
|
+
color: var(--foreground, hsl(222.2 84% 4.9%));
|
|
104
|
+
font-family:
|
|
105
|
+
ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
|
|
106
|
+
monospace;
|
|
107
|
+
font-size: 0.875rem;
|
|
108
|
+
margin: 0.75rem 0;
|
|
109
|
+
padding: 1rem;
|
|
110
|
+
overflow-x: auto;
|
|
111
111
|
}
|
|
112
112
|
|
|
113
113
|
.tiptap-editor .ProseMirror pre code {
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
114
|
+
background: none;
|
|
115
|
+
color: inherit;
|
|
116
|
+
padding: 0;
|
|
117
117
|
}
|
|
118
118
|
|
|
119
119
|
.tiptap-editor .ProseMirror code {
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
120
|
+
background-color: var(--muted, hsl(210 40% 96.1%));
|
|
121
|
+
border-radius: 0.375rem;
|
|
122
|
+
padding: 0.125rem 0.375rem;
|
|
123
|
+
font-size: 0.875em;
|
|
124
|
+
font-family:
|
|
125
|
+
ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
|
|
126
|
+
monospace;
|
|
127
127
|
}
|
|
128
128
|
|
|
129
129
|
.tiptap-editor .ProseMirror hr {
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
130
|
+
border: none;
|
|
131
|
+
border-top: 1px solid var(--border);
|
|
132
|
+
margin: 1.5rem 0;
|
|
133
133
|
}
|
|
134
134
|
|
|
135
135
|
.tiptap-editor .ProseMirror table {
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
136
|
+
border-collapse: collapse;
|
|
137
|
+
border: 1px solid var(--border);
|
|
138
|
+
margin: 1rem 0;
|
|
139
|
+
width: 100%;
|
|
140
|
+
table-layout: fixed;
|
|
141
141
|
}
|
|
142
142
|
|
|
143
143
|
.tiptap-editor .ProseMirror table th,
|
|
144
144
|
.tiptap-editor .ProseMirror table td {
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
145
|
+
border: 1px solid var(--border);
|
|
146
|
+
padding: 0.5rem;
|
|
147
|
+
vertical-align: top;
|
|
148
148
|
}
|
|
149
149
|
|
|
150
150
|
.tiptap-editor .ProseMirror table th {
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
151
|
+
background-color: var(--muted);
|
|
152
|
+
font-weight: 600;
|
|
153
|
+
text-align: left;
|
|
154
154
|
}
|
|
155
155
|
|
|
156
156
|
.tiptap-editor .ProseMirror img {
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
157
|
+
display: block;
|
|
158
|
+
max-width: 100%;
|
|
159
|
+
height: auto;
|
|
160
|
+
border-radius: 0.5rem;
|
|
161
|
+
margin: 1rem auto;
|
|
162
162
|
}
|
|
163
163
|
|
|
164
164
|
.tiptap-editor .ProseMirror iframe {
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
165
|
+
width: 100%;
|
|
166
|
+
aspect-ratio: 16 / 9;
|
|
167
|
+
border: 0;
|
|
168
|
+
border-radius: 0.75rem;
|
|
169
|
+
background-color: #000;
|
|
170
|
+
margin: 1.5rem 0;
|
|
171
171
|
}
|
|
172
172
|
|
|
173
173
|
/* Not nested under `.tiptap-editor` — TipTap portals this to <body>. */
|
|
174
174
|
.bubble-menu {
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
175
|
+
position: absolute;
|
|
176
|
+
display: flex;
|
|
177
|
+
align-items: center;
|
|
178
|
+
gap: 0.375rem;
|
|
179
|
+
padding: 0.5rem;
|
|
180
|
+
border-radius: 0.5rem;
|
|
181
|
+
border: 1px solid var(--border, hsl(214.3 31.8% 91.4%));
|
|
182
|
+
background-color: var(--popover, hsl(0 0% 100%));
|
|
183
|
+
color: var(--popover-foreground, hsl(222.2 84% 4.9%));
|
|
184
|
+
box-shadow: var(--shadow-popover, 0 10px 15px -3px rgba(15, 23, 42, 0.12));
|
|
185
|
+
z-index: 50;
|
|
186
186
|
}
|
|
187
187
|
|
|
188
188
|
.te-popover {
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
189
|
+
background-color: var(--popover, hsl(0 0% 100%));
|
|
190
|
+
color: var(--popover-foreground, hsl(222.2 84% 4.9%));
|
|
191
|
+
border: 1px solid var(--border, hsl(214.3 31.8% 91.4%));
|
|
192
192
|
}
|
|
193
193
|
|
|
194
194
|
.tiptap-editor .ProseMirror pre .hljs-comment,
|
|
195
195
|
.tiptap-editor .ProseMirror pre .hljs-quote,
|
|
196
196
|
.tiptap-renderer pre .hljs-comment,
|
|
197
197
|
.tiptap-renderer pre .hljs-quote {
|
|
198
|
-
|
|
198
|
+
color: #64748b;
|
|
199
199
|
}
|
|
200
200
|
|
|
201
201
|
.tiptap-editor .ProseMirror pre .hljs-keyword,
|
|
202
202
|
.tiptap-editor .ProseMirror pre .hljs-selector-tag,
|
|
203
203
|
.tiptap-renderer pre .hljs-keyword,
|
|
204
204
|
.tiptap-renderer pre .hljs-selector-tag {
|
|
205
|
-
|
|
205
|
+
color: #6d28d9;
|
|
206
206
|
}
|
|
207
207
|
|
|
208
208
|
.tiptap-editor .ProseMirror pre .hljs-string,
|
|
209
209
|
.tiptap-editor .ProseMirror pre .hljs-attr,
|
|
210
210
|
.tiptap-renderer pre .hljs-string,
|
|
211
211
|
.tiptap-renderer pre .hljs-attr {
|
|
212
|
-
|
|
212
|
+
color: #047857;
|
|
213
213
|
}
|
|
214
214
|
|
|
215
215
|
.tiptap-editor .ProseMirror pre .hljs-number,
|
|
216
216
|
.tiptap-editor .ProseMirror pre .hljs-literal,
|
|
217
217
|
.tiptap-renderer pre .hljs-number,
|
|
218
218
|
.tiptap-renderer pre .hljs-literal {
|
|
219
|
-
|
|
219
|
+
color: #c2410c;
|
|
220
220
|
}
|
|
221
221
|
|
|
222
222
|
.tiptap-editor .ProseMirror pre .hljs-title,
|
|
223
223
|
.tiptap-editor .ProseMirror pre .hljs-function,
|
|
224
224
|
.tiptap-renderer pre .hljs-title,
|
|
225
225
|
.tiptap-renderer pre .hljs-function {
|
|
226
|
-
|
|
226
|
+
color: #1d4ed8;
|
|
227
227
|
}
|
|
228
228
|
|
|
229
229
|
.tiptap-editor .ProseMirror pre .hljs-built_in,
|
|
230
230
|
.tiptap-editor .ProseMirror pre .hljs-type,
|
|
231
231
|
.tiptap-renderer pre .hljs-built_in,
|
|
232
232
|
.tiptap-renderer pre .hljs-type {
|
|
233
|
-
|
|
233
|
+
color: #a16207;
|
|
234
234
|
}
|
|
235
235
|
|
|
236
236
|
.tiptap-editor .ProseMirror pre .hljs-variable,
|
|
237
237
|
.tiptap-editor .ProseMirror pre .hljs-template-variable,
|
|
238
238
|
.tiptap-renderer pre .hljs-variable,
|
|
239
239
|
.tiptap-renderer pre .hljs-template-variable {
|
|
240
|
-
|
|
240
|
+
color: #be185d;
|
|
241
241
|
}
|
|
242
242
|
|
|
243
243
|
/* Static rendering surface (TextRenderer) */
|
|
244
244
|
|
|
245
245
|
.tiptap-renderer {
|
|
246
|
-
|
|
247
|
-
|
|
246
|
+
line-height: 1.7;
|
|
247
|
+
color: inherit;
|
|
248
248
|
}
|
|
249
249
|
|
|
250
250
|
.tiptap-renderer p {
|
|
251
|
-
|
|
251
|
+
margin: 0.75rem 0;
|
|
252
252
|
}
|
|
253
253
|
|
|
254
254
|
.tiptap-renderer h1,
|
|
@@ -257,147 +257,145 @@
|
|
|
257
257
|
.tiptap-renderer h4,
|
|
258
258
|
.tiptap-renderer h5,
|
|
259
259
|
.tiptap-renderer h6 {
|
|
260
|
-
|
|
261
|
-
|
|
260
|
+
line-height: 1.25;
|
|
261
|
+
margin: 1.5rem 0 0.75rem;
|
|
262
262
|
}
|
|
263
263
|
|
|
264
264
|
.tiptap-renderer h1:not([class*="text-"]) {
|
|
265
|
-
|
|
266
|
-
|
|
265
|
+
font-size: clamp(1.75rem, 3vw, 2.25rem);
|
|
266
|
+
font-weight: 700;
|
|
267
267
|
}
|
|
268
268
|
|
|
269
269
|
.tiptap-renderer h2:not([class*="text-"]) {
|
|
270
|
-
|
|
271
|
-
|
|
270
|
+
font-size: clamp(1.35rem, 2.4vw, 1.75rem);
|
|
271
|
+
font-weight: 650;
|
|
272
272
|
}
|
|
273
273
|
|
|
274
274
|
.tiptap-renderer h3:not([class*="text-"]) {
|
|
275
|
-
|
|
276
|
-
|
|
275
|
+
font-size: 1.25rem;
|
|
276
|
+
font-weight: 600;
|
|
277
277
|
}
|
|
278
278
|
|
|
279
279
|
.tiptap-renderer ul,
|
|
280
280
|
.tiptap-renderer ol {
|
|
281
|
-
|
|
282
|
-
|
|
281
|
+
padding-left: 1.5rem;
|
|
282
|
+
margin: 0.75rem 0;
|
|
283
283
|
}
|
|
284
284
|
|
|
285
285
|
.tiptap-renderer ul li {
|
|
286
|
-
|
|
286
|
+
list-style: disc;
|
|
287
287
|
}
|
|
288
288
|
|
|
289
289
|
.tiptap-renderer ol li {
|
|
290
|
-
|
|
290
|
+
list-style: decimal;
|
|
291
291
|
}
|
|
292
292
|
|
|
293
293
|
.tiptap-renderer blockquote {
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
294
|
+
border-left: 3px solid var(--border, hsl(214.3 31.8% 91.4%));
|
|
295
|
+
margin: 0.75rem 0;
|
|
296
|
+
padding-left: 1rem;
|
|
297
|
+
color: var(--muted-foreground, hsl(215.4 16.3% 46.9%));
|
|
298
|
+
font-style: italic;
|
|
299
299
|
}
|
|
300
300
|
|
|
301
301
|
.tiptap-renderer .te-code-block {
|
|
302
|
-
|
|
303
|
-
|
|
302
|
+
position: relative;
|
|
303
|
+
margin: 0.75rem 0;
|
|
304
304
|
}
|
|
305
305
|
|
|
306
306
|
.tiptap-renderer pre {
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
307
|
+
background-color: var(--muted, hsl(210 40% 96.1%));
|
|
308
|
+
border: 1px solid var(--border, hsl(214.3 31.8% 91.4%));
|
|
309
|
+
border-radius: 0.5rem;
|
|
310
|
+
color: var(--foreground, hsl(222.2 84% 4.9%));
|
|
311
|
+
font-family:
|
|
312
|
+
ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
|
|
313
|
+
monospace;
|
|
314
|
+
font-size: 0.875rem;
|
|
315
|
+
margin: 0.75rem 0;
|
|
316
|
+
padding: 1rem;
|
|
317
|
+
overflow-x: auto;
|
|
318
318
|
}
|
|
319
319
|
|
|
320
320
|
.tiptap-renderer .te-code-block pre {
|
|
321
|
-
|
|
322
|
-
|
|
321
|
+
margin: 0;
|
|
322
|
+
padding-right: 2.75rem;
|
|
323
323
|
}
|
|
324
324
|
|
|
325
325
|
.tiptap-renderer .te-code-copy {
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
326
|
+
appearance: none;
|
|
327
|
+
position: absolute;
|
|
328
|
+
top: 0.45rem;
|
|
329
|
+
right: 0.45rem;
|
|
330
|
+
display: inline-flex;
|
|
331
|
+
align-items: center;
|
|
332
|
+
justify-content: center;
|
|
333
|
+
width: 1.75rem;
|
|
334
|
+
height: 1.75rem;
|
|
335
|
+
padding: 0;
|
|
336
|
+
border: 1px solid var(--border, hsl(214.3 31.8% 91.4%));
|
|
337
|
+
border-radius: 0.375rem;
|
|
338
|
+
background: var(--background, hsl(0 0% 100%));
|
|
339
|
+
color: var(--muted-foreground, hsl(215.4 16.3% 46.9%));
|
|
340
|
+
cursor: pointer;
|
|
341
341
|
}
|
|
342
342
|
|
|
343
343
|
.tiptap-renderer .te-code-copy:hover {
|
|
344
|
-
|
|
345
|
-
|
|
344
|
+
color: var(--foreground, hsl(222.2 84% 4.9%));
|
|
345
|
+
background: var(--card, hsl(0 0% 100%));
|
|
346
346
|
}
|
|
347
347
|
|
|
348
348
|
.tiptap-renderer .te-code-copy__icon {
|
|
349
|
-
|
|
350
|
-
|
|
349
|
+
width: 0.875rem;
|
|
350
|
+
height: 0.875rem;
|
|
351
351
|
}
|
|
352
352
|
|
|
353
353
|
.tiptap-renderer pre code {
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
354
|
+
background: none;
|
|
355
|
+
color: inherit;
|
|
356
|
+
padding: 0;
|
|
357
357
|
}
|
|
358
358
|
|
|
359
359
|
.tiptap-renderer code {
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
360
|
+
background-color: var(--muted, hsl(210 40% 96.1%));
|
|
361
|
+
border-radius: 0.375rem;
|
|
362
|
+
padding: 0.125rem 0.375rem;
|
|
363
|
+
font-size: 0.875em;
|
|
364
|
+
font-family:
|
|
365
|
+
ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
|
|
366
|
+
monospace;
|
|
367
367
|
}
|
|
368
368
|
|
|
369
369
|
.tiptap-renderer hr {
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
370
|
+
border: none;
|
|
371
|
+
border-top: 1px solid var(--border);
|
|
372
|
+
margin: 1.5rem 0;
|
|
373
373
|
}
|
|
374
374
|
|
|
375
375
|
.tiptap-renderer table {
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
376
|
+
border-collapse: collapse;
|
|
377
|
+
border: 1px solid var(--border);
|
|
378
|
+
margin: 1rem 0;
|
|
379
|
+
width: 100%;
|
|
380
|
+
table-layout: fixed;
|
|
381
381
|
}
|
|
382
382
|
|
|
383
383
|
.tiptap-renderer table th,
|
|
384
384
|
.tiptap-renderer table td {
|
|
385
|
-
|
|
386
|
-
|
|
385
|
+
border: 1px solid var(--border);
|
|
386
|
+
padding: 0.5rem;
|
|
387
387
|
}
|
|
388
388
|
|
|
389
389
|
.tiptap-renderer table th {
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
390
|
+
background-color: var(--muted);
|
|
391
|
+
font-weight: 600;
|
|
392
|
+
text-align: left;
|
|
393
393
|
}
|
|
394
394
|
|
|
395
395
|
.tiptap-renderer img {
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
396
|
+
display: block;
|
|
397
|
+
max-width: 100%;
|
|
398
|
+
height: auto;
|
|
399
|
+
border-radius: 0.5rem;
|
|
400
|
+
margin: 1rem auto;
|
|
401
401
|
}
|
|
402
|
-
|
|
403
|
-
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
interface TextEditorContent {
|
|
4
|
+
type: "doc";
|
|
5
|
+
content: Record<string, unknown>[];
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* A loose, structural subset of a design system's theme — just enough for
|
|
10
|
+
* `TextRenderer` to apply theme-aware typography to rendered headings,
|
|
11
|
+
* paragraphs and links.
|
|
12
|
+
*
|
|
13
|
+
* This package intentionally has no dependency on `@frontlit/page-builder`
|
|
14
|
+
* (that would create a circular dependency, since page-builder depends on
|
|
15
|
+
* this package for editing/rendering). Any object shaped like this —
|
|
16
|
+
* including page-builder's full `ThemeStyle` — is structurally assignable
|
|
17
|
+
* here without either package needing to import the other's types.
|
|
18
|
+
*/
|
|
19
|
+
interface RendererTypography {
|
|
20
|
+
fontFamily?: string;
|
|
21
|
+
fontSize?: string;
|
|
22
|
+
fontWeight?: string;
|
|
23
|
+
lineHeight?: string;
|
|
24
|
+
letterSpacing?: string;
|
|
25
|
+
textTransform?: string;
|
|
26
|
+
textDecoration?: string;
|
|
27
|
+
textOverflow?: string;
|
|
28
|
+
}
|
|
29
|
+
interface RendererLinkInteractiveStyle {
|
|
30
|
+
padding?: {
|
|
31
|
+
x?: string;
|
|
32
|
+
y?: string;
|
|
33
|
+
};
|
|
34
|
+
border?: {
|
|
35
|
+
width?: string;
|
|
36
|
+
radius?: string;
|
|
37
|
+
style?: string;
|
|
38
|
+
};
|
|
39
|
+
textShadow?: string;
|
|
40
|
+
custom?: string;
|
|
41
|
+
}
|
|
42
|
+
interface TextRendererTheme {
|
|
43
|
+
typography?: {
|
|
44
|
+
header1?: RendererTypography;
|
|
45
|
+
header2?: RendererTypography;
|
|
46
|
+
header3?: RendererTypography;
|
|
47
|
+
header4?: RendererTypography;
|
|
48
|
+
text1?: RendererTypography;
|
|
49
|
+
link?: RendererTypography;
|
|
50
|
+
};
|
|
51
|
+
interactives?: {
|
|
52
|
+
link?: RendererLinkInteractiveStyle;
|
|
53
|
+
};
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
interface TextRendererProps {
|
|
57
|
+
profile?: "default" | "documentation";
|
|
58
|
+
json: TextEditorContent;
|
|
59
|
+
className?: string;
|
|
60
|
+
theme?: TextRendererTheme;
|
|
61
|
+
}
|
|
62
|
+
/**
|
|
63
|
+
* Renders TipTap `TextEditorContent` JSON as static React elements — used to
|
|
64
|
+
* display rich text saved by the `Editor` (e.g. inside a block's body). When
|
|
65
|
+
* a `theme` is provided, headings/paragraphs/links pick up its typography;
|
|
66
|
+
* otherwise plain semantic HTML tags are used.
|
|
67
|
+
*/
|
|
68
|
+
declare function TextRenderer({ json, className, theme, profile, }: TextRendererProps): React.JSX.Element;
|
|
69
|
+
|
|
70
|
+
export { TextRenderer };
|