trance-richtext-editor 0.2.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/LICENSE +21 -0
- package/README.md +191 -0
- package/dist/index.cjs +2215 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.css +854 -0
- package/dist/index.css.map +1 -0
- package/dist/index.d.cts +214 -0
- package/dist/index.d.ts +214 -0
- package/dist/index.js +2199 -0
- package/dist/index.js.map +1 -0
- package/dist/renderer.cjs +47 -0
- package/dist/renderer.cjs.map +1 -0
- package/dist/renderer.css +300 -0
- package/dist/renderer.css.map +1 -0
- package/dist/renderer.d.cts +38 -0
- package/dist/renderer.d.ts +38 -0
- package/dist/renderer.js +41 -0
- package/dist/renderer.js.map +1 -0
- package/dist/styles.css +1153 -0
- package/package.json +104 -0
|
@@ -0,0 +1,300 @@
|
|
|
1
|
+
/* src/renderer/TranceRenderer.css */
|
|
2
|
+
.trance-renderer {
|
|
3
|
+
position: relative;
|
|
4
|
+
isolation: isolate;
|
|
5
|
+
display: flex;
|
|
6
|
+
flex-direction: column;
|
|
7
|
+
height: 100%;
|
|
8
|
+
font-family: var(--trance-font-sans);
|
|
9
|
+
font-size: var(--trance-font-size-base);
|
|
10
|
+
line-height: var(--trance-line-height);
|
|
11
|
+
color: var(--trance-text);
|
|
12
|
+
-webkit-font-smoothing: antialiased;
|
|
13
|
+
-moz-osx-font-smoothing: grayscale;
|
|
14
|
+
word-wrap: break-word;
|
|
15
|
+
overflow-wrap: break-word;
|
|
16
|
+
}
|
|
17
|
+
.trance-renderer-content {
|
|
18
|
+
position: relative;
|
|
19
|
+
z-index: 1;
|
|
20
|
+
flex: 1 1 auto;
|
|
21
|
+
min-height: 200px;
|
|
22
|
+
padding: var(--trance-spacing-lg) var(--trance-spacing-xl);
|
|
23
|
+
box-sizing: border-box;
|
|
24
|
+
}
|
|
25
|
+
.trance-renderer h1 {
|
|
26
|
+
font-size: var(--trance-font-size-4xl);
|
|
27
|
+
font-weight: 800;
|
|
28
|
+
line-height: var(--trance-line-height-tight);
|
|
29
|
+
margin: 1.5em 0 0.5em 0;
|
|
30
|
+
color: var(--trance-text);
|
|
31
|
+
letter-spacing: -0.025em;
|
|
32
|
+
}
|
|
33
|
+
.trance-renderer h1:first-child {
|
|
34
|
+
margin-top: 0;
|
|
35
|
+
}
|
|
36
|
+
.trance-renderer h2 {
|
|
37
|
+
font-size: var(--trance-font-size-3xl);
|
|
38
|
+
font-weight: 700;
|
|
39
|
+
line-height: var(--trance-line-height-tight);
|
|
40
|
+
margin: 1.4em 0 0.4em 0;
|
|
41
|
+
color: var(--trance-text);
|
|
42
|
+
letter-spacing: -0.02em;
|
|
43
|
+
}
|
|
44
|
+
.trance-renderer h3 {
|
|
45
|
+
font-size: var(--trance-font-size-2xl);
|
|
46
|
+
font-weight: 600;
|
|
47
|
+
line-height: var(--trance-line-height-tight);
|
|
48
|
+
margin: 1.3em 0 0.3em 0;
|
|
49
|
+
color: var(--trance-text);
|
|
50
|
+
}
|
|
51
|
+
.trance-renderer h4 {
|
|
52
|
+
font-size: var(--trance-font-size-xl);
|
|
53
|
+
font-weight: 600;
|
|
54
|
+
line-height: var(--trance-line-height-tight);
|
|
55
|
+
margin: 1.2em 0 0.3em 0;
|
|
56
|
+
}
|
|
57
|
+
.trance-renderer h5 {
|
|
58
|
+
font-size: var(--trance-font-size-lg);
|
|
59
|
+
font-weight: 600;
|
|
60
|
+
margin: 1.1em 0 0.2em 0;
|
|
61
|
+
}
|
|
62
|
+
.trance-renderer h6 {
|
|
63
|
+
font-size: var(--trance-font-size-base);
|
|
64
|
+
font-weight: 600;
|
|
65
|
+
margin: 1em 0 0.2em 0;
|
|
66
|
+
color: var(--trance-text-secondary);
|
|
67
|
+
text-transform: uppercase;
|
|
68
|
+
letter-spacing: 0.05em;
|
|
69
|
+
}
|
|
70
|
+
.trance-renderer p {
|
|
71
|
+
margin: 0 0 0.75em 0;
|
|
72
|
+
}
|
|
73
|
+
.trance-renderer p:last-child {
|
|
74
|
+
margin-bottom: 0;
|
|
75
|
+
}
|
|
76
|
+
.trance-renderer a {
|
|
77
|
+
color: var(--trance-link-color);
|
|
78
|
+
text-decoration: underline;
|
|
79
|
+
text-underline-offset: 2px;
|
|
80
|
+
text-decoration-thickness: 1px;
|
|
81
|
+
transition: color 150ms ease, text-decoration-thickness 150ms ease;
|
|
82
|
+
}
|
|
83
|
+
.trance-renderer a:hover {
|
|
84
|
+
color: var(--trance-link-hover);
|
|
85
|
+
text-decoration-thickness: 2px;
|
|
86
|
+
}
|
|
87
|
+
.trance-renderer strong,
|
|
88
|
+
.trance-renderer b {
|
|
89
|
+
font-weight: 700;
|
|
90
|
+
}
|
|
91
|
+
.trance-renderer em,
|
|
92
|
+
.trance-renderer i {
|
|
93
|
+
font-style: italic;
|
|
94
|
+
}
|
|
95
|
+
.trance-renderer u {
|
|
96
|
+
text-decoration: underline;
|
|
97
|
+
text-underline-offset: 2px;
|
|
98
|
+
}
|
|
99
|
+
.trance-renderer s,
|
|
100
|
+
.trance-renderer del {
|
|
101
|
+
text-decoration: line-through;
|
|
102
|
+
}
|
|
103
|
+
.trance-renderer mark {
|
|
104
|
+
background-color: var(--trance-editor-highlight);
|
|
105
|
+
padding: 1px 3px;
|
|
106
|
+
border-radius: 2px;
|
|
107
|
+
}
|
|
108
|
+
.trance-renderer sub {
|
|
109
|
+
font-size: 0.75em;
|
|
110
|
+
vertical-align: sub;
|
|
111
|
+
}
|
|
112
|
+
.trance-renderer sup {
|
|
113
|
+
font-size: 0.75em;
|
|
114
|
+
vertical-align: super;
|
|
115
|
+
}
|
|
116
|
+
.trance-renderer code {
|
|
117
|
+
font-family: var(--trance-font-mono);
|
|
118
|
+
font-size: 0.9em;
|
|
119
|
+
background: var(--trance-code-bg);
|
|
120
|
+
color: var(--trance-code-text);
|
|
121
|
+
padding: 2px 6px;
|
|
122
|
+
border-radius: var(--trance-radius-sm);
|
|
123
|
+
font-weight: 500;
|
|
124
|
+
}
|
|
125
|
+
.trance-renderer pre {
|
|
126
|
+
font-family: var(--trance-font-mono);
|
|
127
|
+
font-size: var(--trance-font-size-sm);
|
|
128
|
+
background: var(--trance-code-block-bg);
|
|
129
|
+
color: var(--trance-code-block-text);
|
|
130
|
+
padding: var(--trance-spacing-lg);
|
|
131
|
+
margin: 1em 0;
|
|
132
|
+
border-radius: var(--trance-radius-md);
|
|
133
|
+
overflow-x: auto;
|
|
134
|
+
line-height: 1.6;
|
|
135
|
+
tab-size: 2;
|
|
136
|
+
}
|
|
137
|
+
.trance-renderer pre code {
|
|
138
|
+
background: transparent;
|
|
139
|
+
color: inherit;
|
|
140
|
+
padding: 0;
|
|
141
|
+
font-size: inherit;
|
|
142
|
+
border-radius: 0;
|
|
143
|
+
}
|
|
144
|
+
.trance-renderer ul {
|
|
145
|
+
list-style-type: disc;
|
|
146
|
+
padding-left: 1.5em;
|
|
147
|
+
margin: 0.75em 0;
|
|
148
|
+
}
|
|
149
|
+
.trance-renderer ol {
|
|
150
|
+
list-style-type: decimal;
|
|
151
|
+
padding-left: 1.5em;
|
|
152
|
+
margin: 0.75em 0;
|
|
153
|
+
}
|
|
154
|
+
.trance-renderer li {
|
|
155
|
+
margin: 0.25em 0;
|
|
156
|
+
}
|
|
157
|
+
.trance-renderer ul ul {
|
|
158
|
+
list-style-type: circle;
|
|
159
|
+
}
|
|
160
|
+
.trance-renderer ul ul ul {
|
|
161
|
+
list-style-type: square;
|
|
162
|
+
}
|
|
163
|
+
.trance-renderer blockquote {
|
|
164
|
+
border-left: 4px solid var(--trance-blockquote-border);
|
|
165
|
+
background: var(--trance-blockquote-bg);
|
|
166
|
+
color: var(--trance-blockquote-text);
|
|
167
|
+
margin: 1em 0;
|
|
168
|
+
padding: 0.75em 1em;
|
|
169
|
+
border-radius: 0 var(--trance-radius) var(--trance-radius) 0;
|
|
170
|
+
font-style: italic;
|
|
171
|
+
}
|
|
172
|
+
.trance-renderer blockquote p:last-child {
|
|
173
|
+
margin-bottom: 0;
|
|
174
|
+
}
|
|
175
|
+
.trance-renderer table {
|
|
176
|
+
width: 100%;
|
|
177
|
+
border-collapse: collapse;
|
|
178
|
+
margin: 1em 0;
|
|
179
|
+
font-size: var(--trance-font-size-sm);
|
|
180
|
+
border: 1px solid var(--trance-table-border);
|
|
181
|
+
border-radius: var(--trance-radius);
|
|
182
|
+
overflow: hidden;
|
|
183
|
+
}
|
|
184
|
+
.trance-renderer th {
|
|
185
|
+
background: var(--trance-table-header-bg);
|
|
186
|
+
font-weight: 600;
|
|
187
|
+
text-align: left;
|
|
188
|
+
padding: 0.5em 0.75em;
|
|
189
|
+
border: 1px solid var(--trance-table-border);
|
|
190
|
+
}
|
|
191
|
+
.trance-renderer td {
|
|
192
|
+
padding: 0.5em 0.75em;
|
|
193
|
+
border: 1px solid var(--trance-table-border);
|
|
194
|
+
vertical-align: top;
|
|
195
|
+
}
|
|
196
|
+
.trance-renderer tr:nth-child(even) {
|
|
197
|
+
background: var(--trance-table-stripe-bg);
|
|
198
|
+
}
|
|
199
|
+
.trance-renderer hr {
|
|
200
|
+
border: none;
|
|
201
|
+
height: 2px;
|
|
202
|
+
background:
|
|
203
|
+
linear-gradient(
|
|
204
|
+
90deg,
|
|
205
|
+
transparent,
|
|
206
|
+
var(--trance-border-strong),
|
|
207
|
+
transparent);
|
|
208
|
+
margin: 2em 0;
|
|
209
|
+
}
|
|
210
|
+
.trance-renderer img {
|
|
211
|
+
max-width: 100%;
|
|
212
|
+
height: auto;
|
|
213
|
+
border-radius: var(--trance-radius-md);
|
|
214
|
+
margin: 0.5em 0;
|
|
215
|
+
}
|
|
216
|
+
.trance-renderer figure {
|
|
217
|
+
margin: 1em 0;
|
|
218
|
+
display: block;
|
|
219
|
+
width: fit-content;
|
|
220
|
+
max-width: 100%;
|
|
221
|
+
}
|
|
222
|
+
.trance-renderer figure[data-align=left] {
|
|
223
|
+
margin-right: auto;
|
|
224
|
+
margin-left: 0;
|
|
225
|
+
}
|
|
226
|
+
.trance-renderer figure[data-align=center] {
|
|
227
|
+
margin-left: auto;
|
|
228
|
+
margin-right: auto;
|
|
229
|
+
}
|
|
230
|
+
.trance-renderer figure[data-align=right] {
|
|
231
|
+
margin-left: auto;
|
|
232
|
+
margin-right: 0;
|
|
233
|
+
}
|
|
234
|
+
.trance-renderer figcaption {
|
|
235
|
+
text-align: center;
|
|
236
|
+
font-size: var(--trance-font-size-sm);
|
|
237
|
+
color: var(--trance-text-muted);
|
|
238
|
+
margin-top: 0.25em;
|
|
239
|
+
font-style: italic;
|
|
240
|
+
}
|
|
241
|
+
.trance-renderer figure.trance-image-background {
|
|
242
|
+
position: absolute;
|
|
243
|
+
inset: 0;
|
|
244
|
+
z-index: -1;
|
|
245
|
+
margin: 0 !important;
|
|
246
|
+
width: 100% !important;
|
|
247
|
+
max-width: 100% !important;
|
|
248
|
+
display: block !important;
|
|
249
|
+
pointer-events: none;
|
|
250
|
+
overflow: hidden;
|
|
251
|
+
}
|
|
252
|
+
.trance-renderer figure.trance-image-background img {
|
|
253
|
+
width: 100% !important;
|
|
254
|
+
height: 100% !important;
|
|
255
|
+
object-fit: cover;
|
|
256
|
+
display: block !important;
|
|
257
|
+
border-radius: 0;
|
|
258
|
+
margin: 0 !important;
|
|
259
|
+
max-width: none !important;
|
|
260
|
+
}
|
|
261
|
+
.trance-renderer figure.trance-image-background figcaption {
|
|
262
|
+
display: none;
|
|
263
|
+
}
|
|
264
|
+
@media (max-width: 640px) {
|
|
265
|
+
.trance-renderer table {
|
|
266
|
+
display: block;
|
|
267
|
+
overflow-x: auto;
|
|
268
|
+
-webkit-overflow-scrolling: touch;
|
|
269
|
+
}
|
|
270
|
+
}
|
|
271
|
+
.trance-renderer-page-a3,
|
|
272
|
+
.trance-renderer-page-a4,
|
|
273
|
+
.trance-renderer-page-a5,
|
|
274
|
+
.trance-renderer-page-letter,
|
|
275
|
+
.trance-renderer-page-legal,
|
|
276
|
+
.trance-renderer-page-tabloid {
|
|
277
|
+
margin: 0 auto;
|
|
278
|
+
background: var(--trance-bg);
|
|
279
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
|
|
280
|
+
min-height: 200px;
|
|
281
|
+
}
|
|
282
|
+
.trance-renderer-page-a3 {
|
|
283
|
+
max-width: 297mm;
|
|
284
|
+
}
|
|
285
|
+
.trance-renderer-page-a4 {
|
|
286
|
+
max-width: 210mm;
|
|
287
|
+
}
|
|
288
|
+
.trance-renderer-page-a5 {
|
|
289
|
+
max-width: 148mm;
|
|
290
|
+
}
|
|
291
|
+
.trance-renderer-page-letter {
|
|
292
|
+
max-width: 215.9mm;
|
|
293
|
+
}
|
|
294
|
+
.trance-renderer-page-legal {
|
|
295
|
+
max-width: 215.9mm;
|
|
296
|
+
}
|
|
297
|
+
.trance-renderer-page-tabloid {
|
|
298
|
+
max-width: 279.4mm;
|
|
299
|
+
}
|
|
300
|
+
/*# sourceMappingURL=renderer.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/renderer/TranceRenderer.css"],"sourcesContent":["/* ============================================================\n trance-richtext-editor — Renderer Styles\n Beautiful typography for rendering editor HTML output.\n Variables come from variables.css (included via styles.css).\n ============================================================ */\n\n.trance-renderer {\n position: relative;\n isolation: isolate;\n display: flex;\n flex-direction: column;\n height: 100%;\n font-family: var(--trance-font-sans);\n font-size: var(--trance-font-size-base);\n line-height: var(--trance-line-height);\n color: var(--trance-text);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n word-wrap: break-word;\n overflow-wrap: break-word;\n}\n\n.trance-renderer-content {\n position: relative;\n z-index: 1;\n flex: 1 1 auto;\n min-height: 200px;\n padding: var(--trance-spacing-lg) var(--trance-spacing-xl);\n box-sizing: border-box;\n}\n\n/* ---- Headings ---- */\n.trance-renderer h1 {\n font-size: var(--trance-font-size-4xl);\n font-weight: 800;\n line-height: var(--trance-line-height-tight);\n margin: 1.5em 0 0.5em 0;\n color: var(--trance-text);\n letter-spacing: -0.025em;\n}\n\n.trance-renderer h1:first-child {\n margin-top: 0;\n}\n\n.trance-renderer h2 {\n font-size: var(--trance-font-size-3xl);\n font-weight: 700;\n line-height: var(--trance-line-height-tight);\n margin: 1.4em 0 0.4em 0;\n color: var(--trance-text);\n letter-spacing: -0.02em;\n}\n\n.trance-renderer h3 {\n font-size: var(--trance-font-size-2xl);\n font-weight: 600;\n line-height: var(--trance-line-height-tight);\n margin: 1.3em 0 0.3em 0;\n color: var(--trance-text);\n}\n\n.trance-renderer h4 {\n font-size: var(--trance-font-size-xl);\n font-weight: 600;\n line-height: var(--trance-line-height-tight);\n margin: 1.2em 0 0.3em 0;\n}\n\n.trance-renderer h5 {\n font-size: var(--trance-font-size-lg);\n font-weight: 600;\n margin: 1.1em 0 0.2em 0;\n}\n\n.trance-renderer h6 {\n font-size: var(--trance-font-size-base);\n font-weight: 600;\n margin: 1em 0 0.2em 0;\n color: var(--trance-text-secondary);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n/* ---- Paragraphs ---- */\n.trance-renderer p {\n margin: 0 0 0.75em 0;\n}\n\n.trance-renderer p:last-child {\n margin-bottom: 0;\n}\n\n/* ---- Links ---- */\n.trance-renderer a {\n color: var(--trance-link-color);\n text-decoration: underline;\n text-underline-offset: 2px;\n text-decoration-thickness: 1px;\n transition:\n color 150ms ease,\n text-decoration-thickness 150ms ease;\n}\n\n.trance-renderer a:hover {\n color: var(--trance-link-hover);\n text-decoration-thickness: 2px;\n}\n\n/* ---- Bold, Italic, etc. ---- */\n.trance-renderer strong,\n.trance-renderer b {\n font-weight: 700;\n}\n\n.trance-renderer em,\n.trance-renderer i {\n font-style: italic;\n}\n\n.trance-renderer u {\n text-decoration: underline;\n text-underline-offset: 2px;\n}\n\n.trance-renderer s,\n.trance-renderer del {\n text-decoration: line-through;\n}\n\n.trance-renderer mark {\n background-color: var(--trance-editor-highlight);\n padding: 1px 3px;\n border-radius: 2px;\n}\n\n.trance-renderer sub {\n font-size: 0.75em;\n vertical-align: sub;\n}\n\n.trance-renderer sup {\n font-size: 0.75em;\n vertical-align: super;\n}\n\n/* ---- Inline Code ---- */\n.trance-renderer code {\n font-family: var(--trance-font-mono);\n font-size: 0.9em;\n background: var(--trance-code-bg);\n color: var(--trance-code-text);\n padding: 2px 6px;\n border-radius: var(--trance-radius-sm);\n font-weight: 500;\n}\n\n/* ---- Code Block ---- */\n.trance-renderer pre {\n font-family: var(--trance-font-mono);\n font-size: var(--trance-font-size-sm);\n background: var(--trance-code-block-bg);\n color: var(--trance-code-block-text);\n padding: var(--trance-spacing-lg);\n margin: 1em 0;\n border-radius: var(--trance-radius-md);\n overflow-x: auto;\n line-height: 1.6;\n tab-size: 2;\n}\n\n.trance-renderer pre code {\n background: transparent;\n color: inherit;\n padding: 0;\n font-size: inherit;\n border-radius: 0;\n}\n\n/* ---- Lists ---- */\n.trance-renderer ul {\n list-style-type: disc;\n padding-left: 1.5em;\n margin: 0.75em 0;\n}\n\n.trance-renderer ol {\n list-style-type: decimal;\n padding-left: 1.5em;\n margin: 0.75em 0;\n}\n\n.trance-renderer li {\n margin: 0.25em 0;\n}\n\n.trance-renderer ul ul {\n list-style-type: circle;\n}\n\n.trance-renderer ul ul ul {\n list-style-type: square;\n}\n\n/* ---- Blockquote ---- */\n.trance-renderer blockquote {\n border-left: 4px solid var(--trance-blockquote-border);\n background: var(--trance-blockquote-bg);\n color: var(--trance-blockquote-text);\n margin: 1em 0;\n padding: 0.75em 1em;\n border-radius: 0 var(--trance-radius) var(--trance-radius) 0;\n font-style: italic;\n}\n\n.trance-renderer blockquote p:last-child {\n margin-bottom: 0;\n}\n\n/* ---- Tables ---- */\n.trance-renderer table {\n width: 100%;\n border-collapse: collapse;\n margin: 1em 0;\n font-size: var(--trance-font-size-sm);\n border: 1px solid var(--trance-table-border);\n border-radius: var(--trance-radius);\n overflow: hidden;\n}\n\n.trance-renderer th {\n background: var(--trance-table-header-bg);\n font-weight: 600;\n text-align: left;\n padding: 0.5em 0.75em;\n border: 1px solid var(--trance-table-border);\n}\n\n.trance-renderer td {\n padding: 0.5em 0.75em;\n border: 1px solid var(--trance-table-border);\n vertical-align: top;\n}\n\n.trance-renderer tr:nth-child(even) {\n background: var(--trance-table-stripe-bg);\n}\n\n/* ---- Horizontal Rule ---- */\n.trance-renderer hr {\n border: none;\n height: 2px;\n background: linear-gradient(90deg,\n transparent,\n var(--trance-border-strong),\n transparent);\n margin: 2em 0;\n}\n\n/* ---- Images ---- */\n.trance-renderer img {\n max-width: 100%;\n height: auto;\n border-radius: var(--trance-radius-md);\n margin: 0.5em 0;\n}\n\n.trance-renderer figure {\n margin: 1em 0;\n display: block;\n width: fit-content;\n max-width: 100%;\n}\n\n.trance-renderer figure[data-align=\"left\"] {\n margin-right: auto;\n margin-left: 0;\n}\n\n.trance-renderer figure[data-align=\"center\"] {\n margin-left: auto;\n margin-right: auto;\n}\n\n.trance-renderer figure[data-align=\"right\"] {\n margin-left: auto;\n margin-right: 0;\n}\n\n.trance-renderer figcaption {\n text-align: center;\n font-size: var(--trance-font-size-sm);\n color: var(--trance-text-muted);\n margin-top: 0.25em;\n font-style: italic;\n}\n\n.trance-renderer figure.trance-image-background {\n position: absolute;\n inset: 0;\n z-index: -1;\n margin: 0 !important;\n width: 100% !important;\n max-width: 100% !important;\n display: block !important;\n pointer-events: none;\n overflow: hidden;\n}\n\n.trance-renderer figure.trance-image-background img {\n width: 100% !important;\n height: 100% !important;\n object-fit: cover;\n display: block !important;\n border-radius: 0;\n margin: 0 !important;\n max-width: none !important;\n}\n\n.trance-renderer figure.trance-image-background figcaption {\n display: none;\n}\n\n\n\n/* ---- Responsive table wrapper ---- */\n@media (max-width: 640px) {\n .trance-renderer table {\n display: block;\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n }\n}\n\n/* ---- Page Size Modes ---- */\n.trance-renderer-page-a3,\n.trance-renderer-page-a4,\n.trance-renderer-page-a5,\n.trance-renderer-page-letter,\n.trance-renderer-page-legal,\n.trance-renderer-page-tabloid {\n margin: 0 auto;\n background: var(--trance-bg);\n box-shadow:\n 0 1px 3px rgba(0, 0, 0, 0.08),\n 0 1px 2px rgba(0, 0, 0, 0.06);\n min-height: 200px;\n}\n\n.trance-renderer-page-a3 {\n max-width: 297mm;\n}\n\n.trance-renderer-page-a4 {\n max-width: 210mm;\n}\n\n.trance-renderer-page-a5 {\n max-width: 148mm;\n}\n\n.trance-renderer-page-letter {\n max-width: 215.9mm;\n}\n\n.trance-renderer-page-legal {\n max-width: 215.9mm;\n}\n\n.trance-renderer-page-tabloid {\n max-width: 279.4mm;\n}\n"],"mappings":"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","names":[]}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
/** Standard page sizes for the renderer */
|
|
4
|
+
type PageSize = "A3" | "A4" | "A5" | "Letter" | "Legal" | "Tabloid";
|
|
5
|
+
interface TranceRendererProps {
|
|
6
|
+
/** HTML string output from TranceEditor */
|
|
7
|
+
html: string;
|
|
8
|
+
/** Additional CSS class */
|
|
9
|
+
className?: string;
|
|
10
|
+
/** Theme mode */
|
|
11
|
+
theme?: "light" | "dark" | "auto";
|
|
12
|
+
/**
|
|
13
|
+
* Constrain content to a standard page size.
|
|
14
|
+
* The renderer centers itself and adds a subtle paper-like background.
|
|
15
|
+
* When omitted, the renderer fills its parent width.
|
|
16
|
+
*/
|
|
17
|
+
pageSize?: PageSize;
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* TranceRenderer — Beautifully renders HTML output from TranceEditor.
|
|
21
|
+
*
|
|
22
|
+
* - XSS-safe via DOMPurify sanitization
|
|
23
|
+
* - Beautiful typography and styling out of the box
|
|
24
|
+
* - Supports light/dark themes via CSS custom properties
|
|
25
|
+
* - SSR-safe for Next.js/Remix
|
|
26
|
+
*
|
|
27
|
+
* @example
|
|
28
|
+
* ```tsx
|
|
29
|
+
* import { TranceRenderer } from 'trance-richtext-editor/renderer';
|
|
30
|
+
*
|
|
31
|
+
* function BlogPost({ content }: { content: string }) {
|
|
32
|
+
* return <TranceRenderer html={content} theme="dark" />;
|
|
33
|
+
* }
|
|
34
|
+
* ```
|
|
35
|
+
*/
|
|
36
|
+
declare function TranceRenderer({ html, className, theme, pageSize, }: TranceRendererProps): React.JSX.Element;
|
|
37
|
+
|
|
38
|
+
export { type PageSize, TranceRenderer, type TranceRendererProps };
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
/** Standard page sizes for the renderer */
|
|
4
|
+
type PageSize = "A3" | "A4" | "A5" | "Letter" | "Legal" | "Tabloid";
|
|
5
|
+
interface TranceRendererProps {
|
|
6
|
+
/** HTML string output from TranceEditor */
|
|
7
|
+
html: string;
|
|
8
|
+
/** Additional CSS class */
|
|
9
|
+
className?: string;
|
|
10
|
+
/** Theme mode */
|
|
11
|
+
theme?: "light" | "dark" | "auto";
|
|
12
|
+
/**
|
|
13
|
+
* Constrain content to a standard page size.
|
|
14
|
+
* The renderer centers itself and adds a subtle paper-like background.
|
|
15
|
+
* When omitted, the renderer fills its parent width.
|
|
16
|
+
*/
|
|
17
|
+
pageSize?: PageSize;
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* TranceRenderer — Beautifully renders HTML output from TranceEditor.
|
|
21
|
+
*
|
|
22
|
+
* - XSS-safe via DOMPurify sanitization
|
|
23
|
+
* - Beautiful typography and styling out of the box
|
|
24
|
+
* - Supports light/dark themes via CSS custom properties
|
|
25
|
+
* - SSR-safe for Next.js/Remix
|
|
26
|
+
*
|
|
27
|
+
* @example
|
|
28
|
+
* ```tsx
|
|
29
|
+
* import { TranceRenderer } from 'trance-richtext-editor/renderer';
|
|
30
|
+
*
|
|
31
|
+
* function BlogPost({ content }: { content: string }) {
|
|
32
|
+
* return <TranceRenderer html={content} theme="dark" />;
|
|
33
|
+
* }
|
|
34
|
+
* ```
|
|
35
|
+
*/
|
|
36
|
+
declare function TranceRenderer({ html, className, theme, pageSize, }: TranceRendererProps): React.JSX.Element;
|
|
37
|
+
|
|
38
|
+
export { type PageSize, TranceRenderer, type TranceRendererProps };
|
package/dist/renderer.js
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { useMemo } from 'react';
|
|
2
|
+
import DOMPurify from 'dompurify';
|
|
3
|
+
import { jsx } from 'react/jsx-runtime';
|
|
4
|
+
|
|
5
|
+
// src/renderer/TranceRenderer.tsx
|
|
6
|
+
function TranceRenderer({
|
|
7
|
+
html,
|
|
8
|
+
className = "",
|
|
9
|
+
theme = "light",
|
|
10
|
+
pageSize
|
|
11
|
+
}) {
|
|
12
|
+
const sanitizedHtml = useMemo(() => {
|
|
13
|
+
if (typeof window === "undefined") {
|
|
14
|
+
return html;
|
|
15
|
+
}
|
|
16
|
+
return DOMPurify.sanitize(html, {
|
|
17
|
+
ADD_TAGS: ["figure", "figcaption", "iframe"],
|
|
18
|
+
ADD_ATTR: ["target", "rel", "loading"],
|
|
19
|
+
ALLOW_DATA_ATTR: false
|
|
20
|
+
});
|
|
21
|
+
}, [html]);
|
|
22
|
+
const pageSizeClass = pageSize ? ` trance-renderer-page-${pageSize.toLowerCase()}` : "";
|
|
23
|
+
return /* @__PURE__ */ jsx(
|
|
24
|
+
"div",
|
|
25
|
+
{
|
|
26
|
+
className: `trance-renderer${pageSizeClass} ${className}`.trim(),
|
|
27
|
+
"data-trance-theme": theme,
|
|
28
|
+
children: /* @__PURE__ */ jsx(
|
|
29
|
+
"div",
|
|
30
|
+
{
|
|
31
|
+
className: "trance-renderer-content",
|
|
32
|
+
dangerouslySetInnerHTML: { __html: sanitizedHtml }
|
|
33
|
+
}
|
|
34
|
+
)
|
|
35
|
+
}
|
|
36
|
+
);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
export { TranceRenderer };
|
|
40
|
+
//# sourceMappingURL=renderer.js.map
|
|
41
|
+
//# sourceMappingURL=renderer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/renderer/TranceRenderer.tsx"],"names":[],"mappings":";;;;;AAsDO,SAAS,cAAA,CAAe;AAAA,EAC7B,IAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,KAAA,GAAQ,OAAA;AAAA,EACR;AACF,CAAA,EAAwB;AACtB,EAAA,MAAM,aAAA,GAAgB,QAAQ,MAAM;AAClC,IAAA,IAAI,OAAO,WAAW,WAAA,EAAa;AACjC,MAAA,OAAO,IAAA;AAAA,IACT;AACA,IAAA,OAAO,SAAA,CAAU,SAAS,IAAA,EAAM;AAAA,MAC9B,QAAA,EAAU,CAAC,QAAA,EAAU,YAAA,EAAc,QAAQ,CAAA;AAAA,MAC3C,QAAA,EAAU,CAAC,QAAA,EAAU,KAAA,EAAO,SAAS,CAAA;AAAA,MACrC,eAAA,EAAiB;AAAA,KAClB,CAAA;AAAA,EACH,CAAA,EAAG,CAAC,IAAI,CAAC,CAAA;AAET,EAAA,MAAM,gBAAgB,QAAA,GAClB,CAAA,sBAAA,EAAyB,QAAA,CAAS,WAAA,EAAa,CAAA,CAAA,GAC/C,EAAA;AAEJ,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAW,CAAA,eAAA,EAAkB,aAAa,CAAA,CAAA,EAAI,SAAS,GAAG,IAAA,EAAK;AAAA,MAC/D,mBAAA,EAAmB,KAAA;AAAA,MAEnB,QAAA,kBAAA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAU,yBAAA;AAAA,UACV,uBAAA,EAAyB,EAAE,MAAA,EAAQ,aAAA;AAAc;AAAA;AACnD;AAAA,GACF;AAEJ","file":"renderer.js","sourcesContent":["import React, { useMemo } from \"react\";\nimport DOMPurify from \"dompurify\";\nimport \"./TranceRenderer.css\";\n\n/** Standard page sizes for the renderer */\nexport type PageSize =\n | \"A3\"\n | \"A4\"\n | \"A5\"\n | \"Letter\"\n | \"Legal\"\n | \"Tabloid\";\n\nconst PAGE_SIZE_WIDTHS: Record<PageSize, string> = {\n A3: \"297mm\",\n A4: \"210mm\",\n A5: \"148mm\",\n Letter: \"215.9mm\",\n Legal: \"215.9mm\",\n Tabloid: \"279.4mm\",\n};\n\nexport interface TranceRendererProps {\n /** HTML string output from TranceEditor */\n html: string;\n /** Additional CSS class */\n className?: string;\n /** Theme mode */\n theme?: \"light\" | \"dark\" | \"auto\";\n /**\n * Constrain content to a standard page size.\n * The renderer centers itself and adds a subtle paper-like background.\n * When omitted, the renderer fills its parent width.\n */\n pageSize?: PageSize;\n}\n\n/**\n * TranceRenderer — Beautifully renders HTML output from TranceEditor.\n *\n * - XSS-safe via DOMPurify sanitization\n * - Beautiful typography and styling out of the box\n * - Supports light/dark themes via CSS custom properties\n * - SSR-safe for Next.js/Remix\n *\n * @example\n * ```tsx\n * import { TranceRenderer } from 'trance-richtext-editor/renderer';\n *\n * function BlogPost({ content }: { content: string }) {\n * return <TranceRenderer html={content} theme=\"dark\" />;\n * }\n * ```\n */\nexport function TranceRenderer({\n html,\n className = \"\",\n theme = \"light\",\n pageSize,\n}: TranceRendererProps) {\n const sanitizedHtml = useMemo(() => {\n if (typeof window === \"undefined\") {\n return html;\n }\n return DOMPurify.sanitize(html, {\n ADD_TAGS: [\"figure\", \"figcaption\", \"iframe\"],\n ADD_ATTR: [\"target\", \"rel\", \"loading\"],\n ALLOW_DATA_ATTR: false,\n });\n }, [html]);\n\n const pageSizeClass = pageSize\n ? ` trance-renderer-page-${pageSize.toLowerCase()}`\n : \"\";\n\n return (\n <div\n className={`trance-renderer${pageSizeClass} ${className}`.trim()}\n data-trance-theme={theme}\n >\n <div\n className=\"trance-renderer-content\"\n dangerouslySetInnerHTML={{ __html: sanitizedHtml }}\n />\n </div>\n );\n}\n"]}
|