@brevitaz/brv-text-editor 1.0.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/README.md +348 -0
- package/dist/brv-text-editor.css +395 -0
- package/dist/brv-text-editor.es.js +21716 -0
- package/dist/brv-text-editor.es.js.map +1 -0
- package/dist/brv-text-editor.umd.js +21717 -0
- package/dist/brv-text-editor.umd.js.map +1 -0
- package/package.json +81 -0
|
@@ -0,0 +1,395 @@
|
|
|
1
|
+
*, *::before, *::after {
|
|
2
|
+
box-sizing: border-box;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
body {
|
|
6
|
+
margin: 0;
|
|
7
|
+
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
|
|
8
|
+
background: #f0f4f8;
|
|
9
|
+
color: #1a202c;
|
|
10
|
+
-webkit-font-smoothing: antialiased;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
/* ─── Design Tokens ─────────────────────────────────────────────────────────
|
|
14
|
+
*
|
|
15
|
+
* All visual values in RichTextEditor and RichTextPreview are driven by these
|
|
16
|
+
* CSS custom properties. To create a custom theme you have two options:
|
|
17
|
+
*
|
|
18
|
+
* 1. CSS override (recommended for design systems):
|
|
19
|
+
* .my-app .rte-root { --rte-color-primary: #7c3aed; }
|
|
20
|
+
*
|
|
21
|
+
* 2. Inline themeVars prop (recommended for per-instance overrides):
|
|
22
|
+
* <RichTextEditor themeVars={{ '--rte-color-primary': '#7c3aed' }} />
|
|
23
|
+
*
|
|
24
|
+
* 3. Named preset via theme prop:
|
|
25
|
+
* <RichTextEditor theme="classic" />
|
|
26
|
+
*
|
|
27
|
+
* ─────────────────────────────────────────────────────────────────────────── */
|
|
28
|
+
|
|
29
|
+
/* Default theme — UnleashTeams teal/cyan palette */
|
|
30
|
+
.rte-root {
|
|
31
|
+
/* ── Brand ───────────────────────────────────────────── */
|
|
32
|
+
--rte-color-primary: #065666; /* primary CTA / active icon color */
|
|
33
|
+
--rte-color-primary-hover: #f0fbff; /* very light teal hover background */
|
|
34
|
+
--rte-btn-active-bg: #c4f1f9; /* active toolbar button background */
|
|
35
|
+
--rte-btn-active-color: #065666; /* active toolbar button icon/text */
|
|
36
|
+
--rte-color-link: #0a66b7; /* hyperlink color */
|
|
37
|
+
|
|
38
|
+
/* ── Surface ─────────────────────────────────────────── */
|
|
39
|
+
--rte-surface: #ffffff;
|
|
40
|
+
--rte-surface-toolbar: #ffffff;
|
|
41
|
+
--rte-surface-subtle: #f7fafc; /* code blocks, pre, alt rows */
|
|
42
|
+
|
|
43
|
+
/* ── Border ──────────────────────────────────────────── */
|
|
44
|
+
--rte-border: #cbd5e0; /* main wrapper border */
|
|
45
|
+
--rte-border-toolbar: #e2e8f0; /* toolbar bottom / footer top */
|
|
46
|
+
--rte-border-subtle: #e2e8f0; /* divider between toolbar groups */
|
|
47
|
+
|
|
48
|
+
/* ── Text ────────────────────────────────────────────── */
|
|
49
|
+
--rte-text: #1a202c;
|
|
50
|
+
--rte-text-muted: #718096;
|
|
51
|
+
--rte-text-placeholder: #a0aec0;
|
|
52
|
+
|
|
53
|
+
/* ── Toolbar buttons ─────────────────────────────────── */
|
|
54
|
+
--rte-btn-hover-bg: #f7fafc;
|
|
55
|
+
--rte-btn-disabled-color: #cbd5e0;
|
|
56
|
+
|
|
57
|
+
/* ── Focus ring ──────────────────────────────────────── */
|
|
58
|
+
--rte-focus-border: #6eb8d4;
|
|
59
|
+
--rte-focus-ring: rgba(6, 86, 102, 0.18);
|
|
60
|
+
|
|
61
|
+
/* ── Content ─────────────────────────────────────────── */
|
|
62
|
+
--rte-code-bg: #edf2f7;
|
|
63
|
+
--rte-code-color: #c53030;
|
|
64
|
+
--rte-blockquote-border: #6eb8d4;
|
|
65
|
+
--rte-blockquote-color: #718096;
|
|
66
|
+
--rte-selection-bg: #c4f1f9;
|
|
67
|
+
--rte-checkbox-accent: #065666;
|
|
68
|
+
--rte-hr-color: #e2e8f0;
|
|
69
|
+
|
|
70
|
+
/* ── Typography ──────────────────────────────────────── */
|
|
71
|
+
--rte-font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
72
|
+
--rte-font-size: 14px;
|
|
73
|
+
--rte-line-height: 1.65;
|
|
74
|
+
|
|
75
|
+
/* ── Shape ───────────────────────────────────────────── */
|
|
76
|
+
--rte-radius: 6px;
|
|
77
|
+
--rte-radius-sm: 4px;
|
|
78
|
+
--rte-radius-lg: 8px;
|
|
79
|
+
|
|
80
|
+
/* ── Shadow ──────────────────────────────────────────── */
|
|
81
|
+
--rte-dropdown-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.06);
|
|
82
|
+
|
|
83
|
+
/* Apply font to component root */
|
|
84
|
+
font-family: var(--rte-font-family);
|
|
85
|
+
font-size: var(--rte-font-size);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
/* ─── Classic theme preset (warm Basecamp-inspired palette) ─────────────── */
|
|
90
|
+
.rte-root[data-rte-theme="classic"] {
|
|
91
|
+
--rte-color-primary: #1a6b3c;
|
|
92
|
+
--rte-color-primary-hover: #f0fdf4;
|
|
93
|
+
--rte-btn-active-bg: #e0ddd8;
|
|
94
|
+
--rte-btn-active-color: #1d1d1f;
|
|
95
|
+
--rte-color-link: #1569c7;
|
|
96
|
+
|
|
97
|
+
--rte-surface-toolbar: #faf9f7;
|
|
98
|
+
--rte-surface-subtle: #f0ede8;
|
|
99
|
+
|
|
100
|
+
--rte-border: #d8d5d0;
|
|
101
|
+
--rte-border-toolbar: #eceae6;
|
|
102
|
+
--rte-border-subtle: #ddd9d4;
|
|
103
|
+
|
|
104
|
+
--rte-text: #1d1d1f;
|
|
105
|
+
--rte-text-muted: #888888;
|
|
106
|
+
--rte-text-placeholder: #aaaaaa;
|
|
107
|
+
|
|
108
|
+
--rte-btn-hover-bg: #eceae6;
|
|
109
|
+
--rte-btn-disabled-color: #c5c2bc;
|
|
110
|
+
|
|
111
|
+
--rte-focus-border: #aac8f5;
|
|
112
|
+
--rte-focus-ring: rgba(90, 156, 248, 0.18);
|
|
113
|
+
|
|
114
|
+
--rte-code-bg: #f0ede8;
|
|
115
|
+
--rte-code-color: #d04a4a;
|
|
116
|
+
--rte-blockquote-border: #c2c2bf;
|
|
117
|
+
--rte-blockquote-color: #6a6a6a;
|
|
118
|
+
--rte-selection-bg: #b3d4fc;
|
|
119
|
+
--rte-checkbox-accent: #1a6b3c;
|
|
120
|
+
--rte-hr-color: #e8e5e0;
|
|
121
|
+
|
|
122
|
+
--rte-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
/* ─── Tiptap / ProseMirror editor content ───────────────────────────────── */
|
|
127
|
+
|
|
128
|
+
.rte-root .ProseMirror {
|
|
129
|
+
outline: none;
|
|
130
|
+
min-height: 120px;
|
|
131
|
+
padding: 12px 16px;
|
|
132
|
+
font-size: var(--rte-font-size);
|
|
133
|
+
font-family: var(--rte-font-family);
|
|
134
|
+
line-height: var(--rte-line-height);
|
|
135
|
+
color: var(--rte-text);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.rte-root .ProseMirror p {
|
|
139
|
+
margin: 0 0 0.5em 0;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.rte-root .ProseMirror p:last-child {
|
|
143
|
+
margin-bottom: 0;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.rte-root .ProseMirror h1,
|
|
147
|
+
.rte-root .ProseMirror h2,
|
|
148
|
+
.rte-root .ProseMirror h3 {
|
|
149
|
+
font-weight: 700;
|
|
150
|
+
margin: 0.75em 0 0.3em;
|
|
151
|
+
line-height: 1.25;
|
|
152
|
+
color: var(--rte-text);
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.rte-root .ProseMirror h1 { font-size: 1.5em; }
|
|
156
|
+
.rte-root .ProseMirror h2 { font-size: 1.25em; }
|
|
157
|
+
.rte-root .ProseMirror h3 { font-size: 1.1em; }
|
|
158
|
+
|
|
159
|
+
.rte-root .ProseMirror ul,
|
|
160
|
+
.rte-root .ProseMirror ol {
|
|
161
|
+
padding-left: 1.4em;
|
|
162
|
+
margin: 0.4em 0;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.rte-root .ProseMirror li {
|
|
166
|
+
margin: 0.15em 0;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.rte-root .ProseMirror li p {
|
|
170
|
+
margin: 0;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.rte-root .ProseMirror blockquote {
|
|
174
|
+
border-left: 3px solid var(--rte-blockquote-border);
|
|
175
|
+
padding-left: 1em;
|
|
176
|
+
margin: 0.5em 0;
|
|
177
|
+
color: var(--rte-blockquote-color);
|
|
178
|
+
font-style: italic;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.rte-root .ProseMirror code {
|
|
182
|
+
background: var(--rte-code-bg);
|
|
183
|
+
border-radius: 3px;
|
|
184
|
+
padding: 0.1em 0.35em;
|
|
185
|
+
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
|
|
186
|
+
font-size: 0.875em;
|
|
187
|
+
color: var(--rte-code-color);
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.rte-root .ProseMirror pre {
|
|
191
|
+
background: var(--rte-code-bg);
|
|
192
|
+
border-radius: var(--rte-radius);
|
|
193
|
+
padding: 0.75em 1em;
|
|
194
|
+
margin: 0.5em 0;
|
|
195
|
+
overflow-x: auto;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.rte-root .ProseMirror pre code {
|
|
199
|
+
background: none;
|
|
200
|
+
padding: 0;
|
|
201
|
+
color: var(--rte-text);
|
|
202
|
+
font-size: 0.875em;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.rte-root .ProseMirror a {
|
|
206
|
+
color: var(--rte-color-link);
|
|
207
|
+
text-decoration: underline;
|
|
208
|
+
cursor: pointer;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.rte-root .ProseMirror hr {
|
|
212
|
+
border: none;
|
|
213
|
+
border-top: 2px solid var(--rte-hr-color);
|
|
214
|
+
margin: 1em 0;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
.rte-root .ProseMirror img {
|
|
218
|
+
max-width: 100%;
|
|
219
|
+
height: auto;
|
|
220
|
+
border-radius: var(--rte-radius-sm);
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
/* Task list */
|
|
224
|
+
.rte-root .ProseMirror ul[data-type="taskList"] {
|
|
225
|
+
list-style: none;
|
|
226
|
+
padding-left: 0.25em;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.rte-root .ProseMirror ul[data-type="taskList"] li {
|
|
230
|
+
display: flex;
|
|
231
|
+
align-items: flex-start;
|
|
232
|
+
gap: 0.5em;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
.rte-root .ProseMirror ul[data-type="taskList"] li > label {
|
|
236
|
+
flex-shrink: 0;
|
|
237
|
+
margin-top: 3px;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
.rte-root .ProseMirror ul[data-type="taskList"] li > label input[type="checkbox"] {
|
|
241
|
+
width: 15px;
|
|
242
|
+
height: 15px;
|
|
243
|
+
cursor: pointer;
|
|
244
|
+
accent-color: var(--rte-checkbox-accent);
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
.rte-root .ProseMirror ul[data-type="taskList"] li > div {
|
|
248
|
+
flex: 1;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
.rte-root .ProseMirror ul[data-type="taskList"] li[data-checked="true"] > div {
|
|
252
|
+
text-decoration: line-through;
|
|
253
|
+
color: var(--rte-text-muted);
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
/* Placeholder */
|
|
257
|
+
.rte-root .ProseMirror p.is-editor-empty:first-child::before {
|
|
258
|
+
color: var(--rte-text-placeholder);
|
|
259
|
+
content: attr(data-placeholder);
|
|
260
|
+
float: left;
|
|
261
|
+
height: 0;
|
|
262
|
+
pointer-events: none;
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
/* Selection */
|
|
266
|
+
.rte-root .ProseMirror ::selection {
|
|
267
|
+
background: var(--rte-selection-bg);
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
/* Focus ring */
|
|
271
|
+
.rte-root.editor-wrapper:focus-within {
|
|
272
|
+
border-color: var(--rte-focus-border) !important;
|
|
273
|
+
box-shadow: 0 0 0 3px var(--rte-focus-ring);
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
/* Tooltip hover */
|
|
277
|
+
.rte-root .tooltip-wrapper:hover .tooltip-label {
|
|
278
|
+
opacity: 1 !important;
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
|
|
282
|
+
/* ─── RichTextPreview (rtp-*) ────────────────────────────────────────────── */
|
|
283
|
+
|
|
284
|
+
@keyframes rtp-slideDown {
|
|
285
|
+
from { opacity: 0; transform: translateY(-8px); }
|
|
286
|
+
to { opacity: 1; transform: translateY(0); }
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
.rte-root .rtp-content {
|
|
290
|
+
font-family: var(--rte-font-family);
|
|
291
|
+
font-size: var(--rte-font-size);
|
|
292
|
+
line-height: var(--rte-line-height);
|
|
293
|
+
color: var(--rte-text);
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
.rte-root .rtp-content h1,
|
|
297
|
+
.rte-root .rtp-content h2,
|
|
298
|
+
.rte-root .rtp-content h3 {
|
|
299
|
+
font-weight: 700;
|
|
300
|
+
margin: 0.6em 0 0.25em;
|
|
301
|
+
line-height: 1.25;
|
|
302
|
+
color: var(--rte-text);
|
|
303
|
+
}
|
|
304
|
+
.rte-root .rtp-content h1 { font-size: 1.5em; }
|
|
305
|
+
.rte-root .rtp-content h2 { font-size: 1.25em; }
|
|
306
|
+
.rte-root .rtp-content h3 { font-size: 1.1em; }
|
|
307
|
+
|
|
308
|
+
.rte-root .rtp-content p {
|
|
309
|
+
margin: 0 0 0.5em;
|
|
310
|
+
}
|
|
311
|
+
.rte-root .rtp-content p:last-child { margin-bottom: 0; }
|
|
312
|
+
|
|
313
|
+
.rte-root .rtp-content ul,
|
|
314
|
+
.rte-root .rtp-content ol {
|
|
315
|
+
padding-left: 1.4em;
|
|
316
|
+
margin: 0.4em 0;
|
|
317
|
+
}
|
|
318
|
+
.rte-root .rtp-content li { margin: 0.15em 0; }
|
|
319
|
+
.rte-root .rtp-content li p { margin: 0; }
|
|
320
|
+
|
|
321
|
+
.rte-root .rtp-content blockquote {
|
|
322
|
+
border-left: 3px solid var(--rte-blockquote-border);
|
|
323
|
+
padding-left: 1em;
|
|
324
|
+
margin: 0.5em 0;
|
|
325
|
+
color: var(--rte-blockquote-color);
|
|
326
|
+
font-style: italic;
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
.rte-root .rtp-content code {
|
|
330
|
+
background: var(--rte-code-bg);
|
|
331
|
+
border-radius: 3px;
|
|
332
|
+
padding: 0.1em 0.35em;
|
|
333
|
+
font-family: 'SFMono-Regular', Consolas, monospace;
|
|
334
|
+
font-size: 0.875em;
|
|
335
|
+
color: var(--rte-code-color);
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
.rte-root .rtp-content pre {
|
|
339
|
+
background: var(--rte-code-bg);
|
|
340
|
+
border-radius: var(--rte-radius);
|
|
341
|
+
padding: 0.75em 1em;
|
|
342
|
+
margin: 0.5em 0;
|
|
343
|
+
overflow-x: auto;
|
|
344
|
+
}
|
|
345
|
+
.rte-root .rtp-content pre code {
|
|
346
|
+
background: none;
|
|
347
|
+
padding: 0;
|
|
348
|
+
color: var(--rte-text);
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
.rte-root .rtp-content a {
|
|
352
|
+
color: var(--rte-color-link);
|
|
353
|
+
text-decoration: underline;
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
.rte-root .rtp-content hr {
|
|
357
|
+
border: none;
|
|
358
|
+
border-top: 2px solid var(--rte-hr-color);
|
|
359
|
+
margin: 1em 0;
|
|
360
|
+
}
|
|
361
|
+
|
|
362
|
+
.rte-root .rtp-content img {
|
|
363
|
+
max-width: 100%;
|
|
364
|
+
height: auto;
|
|
365
|
+
border-radius: var(--rte-radius-sm);
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
/* Task list in preview */
|
|
369
|
+
.rte-root .rtp-content ul[data-type="taskList"] {
|
|
370
|
+
list-style: none;
|
|
371
|
+
padding-left: 0.25em;
|
|
372
|
+
}
|
|
373
|
+
.rte-root .rtp-content ul[data-type="taskList"] li {
|
|
374
|
+
display: flex;
|
|
375
|
+
align-items: flex-start;
|
|
376
|
+
gap: 0.5em;
|
|
377
|
+
}
|
|
378
|
+
.rte-root .rtp-content ul[data-type="taskList"] li label {
|
|
379
|
+
flex-shrink: 0;
|
|
380
|
+
margin-top: 3px;
|
|
381
|
+
}
|
|
382
|
+
.rte-root .rtp-content ul[data-type="taskList"] li input[type="checkbox"] {
|
|
383
|
+
width: 15px;
|
|
384
|
+
height: 15px;
|
|
385
|
+
accent-color: var(--rte-checkbox-accent);
|
|
386
|
+
}
|
|
387
|
+
.rte-root .rtp-content ul[data-type="taskList"] li[data-checked="true"] > div {
|
|
388
|
+
text-decoration: line-through;
|
|
389
|
+
color: var(--rte-text-muted);
|
|
390
|
+
}
|
|
391
|
+
|
|
392
|
+
/* Text alignment */
|
|
393
|
+
.rte-root .rtp-content [style*="text-align: center"] { text-align: center; }
|
|
394
|
+
.rte-root .rtp-content [style*="text-align: right"] { text-align: right; }
|
|
395
|
+
.rte-root .rtp-content [style*="text-align: left"] { text-align: left; }
|