@richhtmleditor/themes 1.1.3 → 1.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/README.md +3 -2
- package/package.json +1 -1
- package/src/richhtmleditor.css +359 -4
package/README.md
CHANGED
|
@@ -2,18 +2,19 @@
|
|
|
2
2
|
|
|
3
3
|
Shared CSS for Rich HTML Editor — toolbar, content area, outline panel, selection mini-toolbar, tables, and dark mode tokens. Pair with [`@richhtmleditor/core`](https://www.npmjs.com/package/@richhtmleditor/core) or any framework wrapper.
|
|
4
4
|
|
|
5
|
-
**Current release: 1.
|
|
5
|
+
**Current release: 1.2.0**
|
|
6
6
|
|
|
7
7
|
**Repository:** [github.com/rajkishorsahu89/richhtmleditor](https://github.com/rajkishorsahu89/richhtmleditor)
|
|
8
8
|
|
|
9
9
|
**Demo:** [richhtmleditor.vercel.app](https://richhtmleditor.vercel.app/) — [demo](https://richhtmleditor.vercel.app/demo) · [guide](https://richhtmleditor.vercel.app/guide) · [API](https://richhtmleditor.vercel.app/api). Doc Preview joint demo: [doc-preview-app.vercel.app/demo/enterprise](https://doc-preview-app.vercel.app/demo/enterprise)
|
|
10
10
|
|
|
11
|
-
### What's in 1.
|
|
11
|
+
### What's in 1.2.0
|
|
12
12
|
|
|
13
13
|
- **`richhtmleditor.css`** — complete editor chrome (toolbar rows, buttons, dropdowns, content area)
|
|
14
14
|
- **Dark mode** — `.de-root--dark` class toggled when `dark: true` is passed to `createEditor`
|
|
15
15
|
- **CSS variables** — `--de-primary`, `--de-toolbar-bg`, `--de-content-bg`, `--de-border`, and more for theming
|
|
16
16
|
- **Component styles** — outline panel, TOC nav, selection mini-toolbar, tables, collapsible sections, workflow bar slots
|
|
17
|
+
- **New in 1.2.0** — callout block styles (info/warning/success/error), embed modal overlay, word goal progress bar, dark mode toggle button; all new feature CSS
|
|
17
18
|
- **New in 1.1.0** — slash command menu, block drag handles, drop indicator, paste special modal, track changes panel styles
|
|
18
19
|
|
|
19
20
|
> Side-effect CSS package — import once globally or in your bundler entry. No JavaScript runtime.
|
package/package.json
CHANGED
package/src/richhtmleditor.css
CHANGED
|
@@ -34,6 +34,149 @@
|
|
|
34
34
|
--de-content-bg: #0f172a;
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
+
/* ── Menu bar ──────────────────────────────────────────────────────────────── */
|
|
38
|
+
|
|
39
|
+
#richhtmleditor-root .de-menubar {
|
|
40
|
+
display: flex;
|
|
41
|
+
flex-wrap: wrap;
|
|
42
|
+
gap: 1px;
|
|
43
|
+
padding: 2px 6px;
|
|
44
|
+
border-bottom: 1px solid var(--de-border);
|
|
45
|
+
background: var(--de-toolbar-bg);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
#richhtmleditor-root .de-menubar__item {
|
|
49
|
+
padding: 5px 10px;
|
|
50
|
+
border-radius: 4px;
|
|
51
|
+
font-size: 0.8125rem;
|
|
52
|
+
font-family: inherit;
|
|
53
|
+
font-weight: 400;
|
|
54
|
+
cursor: pointer;
|
|
55
|
+
border: none;
|
|
56
|
+
background: none;
|
|
57
|
+
color: var(--de-text-primary);
|
|
58
|
+
white-space: nowrap;
|
|
59
|
+
line-height: 1.4;
|
|
60
|
+
transition: background 0.1s;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
#richhtmleditor-root .de-menubar__item:hover {
|
|
64
|
+
background: color-mix(in srgb, var(--de-text-primary) 8%, transparent);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
#richhtmleditor-root .de-menubar__item--open {
|
|
68
|
+
background: var(--de-primary);
|
|
69
|
+
color: #fff;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.de-menubar__dropdown,
|
|
73
|
+
.de-menubar__subdropdown {
|
|
74
|
+
position: fixed;
|
|
75
|
+
background: #fff;
|
|
76
|
+
border: 1px solid #d0d5dd;
|
|
77
|
+
border-radius: 4px;
|
|
78
|
+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
|
|
79
|
+
min-width: 200px;
|
|
80
|
+
max-height: calc(100vh - 80px);
|
|
81
|
+
overflow-y: auto;
|
|
82
|
+
z-index: 9999;
|
|
83
|
+
padding: 3px 0;
|
|
84
|
+
font-family: system-ui, sans-serif;
|
|
85
|
+
font-size: 0.8125rem;
|
|
86
|
+
color: #1a1a1a;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.de-menubar__dropdown::-webkit-scrollbar,
|
|
90
|
+
.de-menubar__subdropdown::-webkit-scrollbar { width: 4px; }
|
|
91
|
+
.de-menubar__dropdown::-webkit-scrollbar-track,
|
|
92
|
+
.de-menubar__subdropdown::-webkit-scrollbar-track { background: transparent; }
|
|
93
|
+
.de-menubar__dropdown::-webkit-scrollbar-thumb,
|
|
94
|
+
.de-menubar__subdropdown::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 4px; }
|
|
95
|
+
.de-menubar__dropdown::-webkit-scrollbar-thumb:hover,
|
|
96
|
+
.de-menubar__subdropdown::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.28); }
|
|
97
|
+
|
|
98
|
+
.de-menubar__dropdown--dark,
|
|
99
|
+
.de-menubar__subdropdown--dark {
|
|
100
|
+
background: #1e293b;
|
|
101
|
+
border-color: #334155;
|
|
102
|
+
color: #f1f5f9;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.de-menubar__option {
|
|
106
|
+
display: flex;
|
|
107
|
+
align-items: center;
|
|
108
|
+
gap: 7px;
|
|
109
|
+
padding: 6px 12px 6px 8px;
|
|
110
|
+
cursor: pointer;
|
|
111
|
+
white-space: nowrap;
|
|
112
|
+
user-select: none;
|
|
113
|
+
border-radius: 2px;
|
|
114
|
+
margin: 0 3px;
|
|
115
|
+
transition: background 0.08s;
|
|
116
|
+
color: #1a1a1a;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.de-menubar__dropdown--dark .de-menubar__option,
|
|
120
|
+
.de-menubar__subdropdown--dark .de-menubar__option {
|
|
121
|
+
color: #f1f5f9;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.de-menubar__option:hover {
|
|
125
|
+
background: #f0f0f0;
|
|
126
|
+
color: inherit;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.de-menubar__dropdown--dark .de-menubar__option:hover,
|
|
130
|
+
.de-menubar__subdropdown--dark .de-menubar__option:hover {
|
|
131
|
+
background: #2d3f55;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.de-menubar__option--disabled {
|
|
135
|
+
opacity: 0.38;
|
|
136
|
+
pointer-events: none;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.de-menubar__option-icon {
|
|
140
|
+
min-width: 28px;
|
|
141
|
+
text-align: left;
|
|
142
|
+
flex-shrink: 0;
|
|
143
|
+
font-size: 0.75em;
|
|
144
|
+
font-weight: 600;
|
|
145
|
+
opacity: 0.6;
|
|
146
|
+
letter-spacing: -0.02em;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.de-menubar__option-label {
|
|
150
|
+
flex: 1;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.de-menubar__option-shortcut {
|
|
154
|
+
margin-left: auto;
|
|
155
|
+
padding-left: 28px;
|
|
156
|
+
color: #888;
|
|
157
|
+
font-size: 0.76rem;
|
|
158
|
+
white-space: nowrap;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.de-menubar__option-arrow {
|
|
162
|
+
font-size: 0.6em;
|
|
163
|
+
opacity: 0.45;
|
|
164
|
+
padding-left: 6px;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.de-menubar__sep {
|
|
168
|
+
border: none;
|
|
169
|
+
border-top: 1px solid #e5e7eb;
|
|
170
|
+
margin: 3px 0;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.de-menubar__dropdown--dark .de-menubar__sep,
|
|
174
|
+
.de-menubar__subdropdown--dark .de-menubar__sep {
|
|
175
|
+
border-color: #334155;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
/* ── Toolbar ───────────────────────────────────────────────────────────────── */
|
|
179
|
+
|
|
37
180
|
#richhtmleditor-root .de-toolbar {
|
|
38
181
|
display: flex;
|
|
39
182
|
flex-direction: column;
|
|
@@ -233,16 +376,20 @@
|
|
|
233
376
|
|
|
234
377
|
#richhtmleditor-root .de-status-bar {
|
|
235
378
|
display: flex;
|
|
236
|
-
|
|
237
|
-
justify-content: space-between;
|
|
238
|
-
gap: 12px;
|
|
239
|
-
padding: 4px 12px;
|
|
379
|
+
flex-direction: column;
|
|
240
380
|
border-top: 1px solid var(--de-border);
|
|
241
381
|
background: var(--de-toolbar-bg);
|
|
242
382
|
font-size: 11px;
|
|
243
383
|
color: var(--de-text-muted);
|
|
244
384
|
flex-shrink: 0;
|
|
245
385
|
}
|
|
386
|
+
#richhtmleditor-root .de-status-bar > .de-status-bar__main {
|
|
387
|
+
display: flex;
|
|
388
|
+
align-items: center;
|
|
389
|
+
justify-content: space-between;
|
|
390
|
+
gap: 12px;
|
|
391
|
+
padding: 4px 12px;
|
|
392
|
+
}
|
|
246
393
|
|
|
247
394
|
#richhtmleditor-root .de-status-bar__mode {
|
|
248
395
|
font-weight: 600;
|
|
@@ -5539,3 +5686,211 @@ figure.de-math[contenteditable="false"]:hover {
|
|
|
5539
5686
|
.de-math-modal__confirm:hover {
|
|
5540
5687
|
background: var(--de-primary-hover, #1d4ed8);
|
|
5541
5688
|
}
|
|
5689
|
+
|
|
5690
|
+
/* ── Callout blocks ─────────────────────────────────────────────────────── */
|
|
5691
|
+
#richhtmleditor-root .de-callout {
|
|
5692
|
+
position: relative;
|
|
5693
|
+
padding: 10px 12px 10px 40px;
|
|
5694
|
+
border-radius: 6px;
|
|
5695
|
+
border-left: 4px solid;
|
|
5696
|
+
margin: 4px 0;
|
|
5697
|
+
min-height: 36px;
|
|
5698
|
+
line-height: 1.5;
|
|
5699
|
+
}
|
|
5700
|
+
#richhtmleditor-root .de-callout::before {
|
|
5701
|
+
position: absolute;
|
|
5702
|
+
left: 10px;
|
|
5703
|
+
top: 10px;
|
|
5704
|
+
font-size: 16px;
|
|
5705
|
+
line-height: 1;
|
|
5706
|
+
}
|
|
5707
|
+
#richhtmleditor-root .de-callout__remove {
|
|
5708
|
+
position: absolute;
|
|
5709
|
+
top: 6px;
|
|
5710
|
+
right: 6px;
|
|
5711
|
+
width: 18px;
|
|
5712
|
+
height: 18px;
|
|
5713
|
+
border: none;
|
|
5714
|
+
background: transparent;
|
|
5715
|
+
color: var(--de-text-muted, #64748b);
|
|
5716
|
+
cursor: pointer;
|
|
5717
|
+
font-size: 12px;
|
|
5718
|
+
line-height: 18px;
|
|
5719
|
+
text-align: center;
|
|
5720
|
+
border-radius: 3px;
|
|
5721
|
+
opacity: 0;
|
|
5722
|
+
transition: opacity .15s, background .15s;
|
|
5723
|
+
padding: 0;
|
|
5724
|
+
}
|
|
5725
|
+
#richhtmleditor-root .de-callout:hover .de-callout__remove,
|
|
5726
|
+
#richhtmleditor-root .de-callout:focus-within .de-callout__remove {
|
|
5727
|
+
opacity: 1;
|
|
5728
|
+
}
|
|
5729
|
+
#richhtmleditor-root .de-callout__remove:hover {
|
|
5730
|
+
background: rgba(0,0,0,.08);
|
|
5731
|
+
color: #ef4444;
|
|
5732
|
+
}
|
|
5733
|
+
#richhtmleditor-root .de-callout--info { background: #eff6ff; border-color: #3b82f6; color: #1e40af; }
|
|
5734
|
+
#richhtmleditor-root .de-callout--info::before { content: "ℹ"; color: #3b82f6; }
|
|
5735
|
+
#richhtmleditor-root .de-callout--warning { background: #fffbeb; border-color: #f59e0b; color: #92400e; }
|
|
5736
|
+
#richhtmleditor-root .de-callout--warning::before { content: "⚠"; color: #f59e0b; }
|
|
5737
|
+
#richhtmleditor-root .de-callout--success { background: #f0fdf4; border-color: #22c55e; color: #14532d; }
|
|
5738
|
+
#richhtmleditor-root .de-callout--success::before { content: "✓"; color: #22c55e; }
|
|
5739
|
+
#richhtmleditor-root .de-callout--error { background: #fef2f2; border-color: #ef4444; color: #7f1d1d; }
|
|
5740
|
+
#richhtmleditor-root .de-callout--error::before { content: "✕"; color: #ef4444; }
|
|
5741
|
+
|
|
5742
|
+
#richhtmleditor-root.de-root--dark .de-callout--info { background: rgba(59,130,246,.12); border-color: #3b82f6; color: #93c5fd; }
|
|
5743
|
+
#richhtmleditor-root.de-root--dark .de-callout--warning { background: rgba(245,158,11,.12); border-color: #f59e0b; color: #fcd34d; }
|
|
5744
|
+
#richhtmleditor-root.de-root--dark .de-callout--success { background: rgba(34,197,94,.12); border-color: #22c55e; color: #86efac; }
|
|
5745
|
+
#richhtmleditor-root.de-root--dark .de-callout--error { background: rgba(239,68,68,.12); border-color: #ef4444; color: #fca5a5; }
|
|
5746
|
+
|
|
5747
|
+
/* ── Embed blocks ───────────────────────────────────────────────────────── */
|
|
5748
|
+
#richhtmleditor-root .de-embed-wrapper {
|
|
5749
|
+
display: block;
|
|
5750
|
+
margin: 4px 0;
|
|
5751
|
+
line-height: 0;
|
|
5752
|
+
}
|
|
5753
|
+
#richhtmleditor-root .de-embed-block {
|
|
5754
|
+
display: block;
|
|
5755
|
+
max-width: 100%;
|
|
5756
|
+
border-radius: 6px;
|
|
5757
|
+
}
|
|
5758
|
+
|
|
5759
|
+
/* ── Embed modal ────────────────────────────────────────────────────────── */
|
|
5760
|
+
#richhtmleditor-root .de-embed-modal-overlay {
|
|
5761
|
+
position: fixed;
|
|
5762
|
+
inset: 0;
|
|
5763
|
+
background: rgba(0,0,0,.45);
|
|
5764
|
+
align-items: center;
|
|
5765
|
+
justify-content: center;
|
|
5766
|
+
z-index: 9999;
|
|
5767
|
+
}
|
|
5768
|
+
#richhtmleditor-root .de-embed-modal-overlay:not([hidden]) {
|
|
5769
|
+
display: flex;
|
|
5770
|
+
}
|
|
5771
|
+
#richhtmleditor-root .de-embed-modal {
|
|
5772
|
+
background: var(--de-toolbar-bg, #fff);
|
|
5773
|
+
color: var(--de-text-primary, #1e293b);
|
|
5774
|
+
border: 1px solid var(--de-border, #e2e8f0);
|
|
5775
|
+
border-radius: 12px;
|
|
5776
|
+
padding: 20px 24px 18px;
|
|
5777
|
+
width: 420px;
|
|
5778
|
+
max-width: calc(100vw - 32px);
|
|
5779
|
+
box-shadow: 0 16px 48px rgba(0,0,0,.18);
|
|
5780
|
+
display: flex;
|
|
5781
|
+
flex-direction: column;
|
|
5782
|
+
gap: 10px;
|
|
5783
|
+
}
|
|
5784
|
+
#richhtmleditor-root .de-embed-modal__header {
|
|
5785
|
+
display: flex;
|
|
5786
|
+
align-items: center;
|
|
5787
|
+
justify-content: space-between;
|
|
5788
|
+
}
|
|
5789
|
+
#richhtmleditor-root .de-embed-modal__title {
|
|
5790
|
+
font-weight: 700;
|
|
5791
|
+
font-size: 1rem;
|
|
5792
|
+
}
|
|
5793
|
+
#richhtmleditor-root .de-embed-modal__close {
|
|
5794
|
+
background: none;
|
|
5795
|
+
border: none;
|
|
5796
|
+
cursor: pointer;
|
|
5797
|
+
font-size: 1rem;
|
|
5798
|
+
color: var(--de-text-muted, #64748b);
|
|
5799
|
+
padding: 2px 6px;
|
|
5800
|
+
border-radius: 4px;
|
|
5801
|
+
line-height: 1;
|
|
5802
|
+
}
|
|
5803
|
+
#richhtmleditor-root .de-embed-modal__close:hover {
|
|
5804
|
+
background: var(--de-border, #e2e8f0);
|
|
5805
|
+
}
|
|
5806
|
+
#richhtmleditor-root .de-embed-modal__hint {
|
|
5807
|
+
margin: 0;
|
|
5808
|
+
font-size: .85rem;
|
|
5809
|
+
color: var(--de-text-muted, #64748b);
|
|
5810
|
+
}
|
|
5811
|
+
#richhtmleditor-root .de-embed-modal__input {
|
|
5812
|
+
width: 100%;
|
|
5813
|
+
box-sizing: border-box;
|
|
5814
|
+
padding: 8px 10px;
|
|
5815
|
+
border: 1px solid var(--de-border, #e2e8f0);
|
|
5816
|
+
border-radius: 6px;
|
|
5817
|
+
font-size: .92rem;
|
|
5818
|
+
background: var(--de-content-bg, #fff);
|
|
5819
|
+
color: var(--de-text-primary, #1e293b);
|
|
5820
|
+
outline: none;
|
|
5821
|
+
}
|
|
5822
|
+
#richhtmleditor-root .de-embed-modal__input:focus {
|
|
5823
|
+
border-color: var(--de-primary, #2563eb);
|
|
5824
|
+
box-shadow: 0 0 0 2px rgba(37,99,235,.18);
|
|
5825
|
+
}
|
|
5826
|
+
#richhtmleditor-root .de-embed-modal__error {
|
|
5827
|
+
margin: 0;
|
|
5828
|
+
font-size: .82rem;
|
|
5829
|
+
color: #ef4444;
|
|
5830
|
+
}
|
|
5831
|
+
#richhtmleditor-root .de-embed-modal__chips {
|
|
5832
|
+
display: flex;
|
|
5833
|
+
gap: 6px;
|
|
5834
|
+
flex-wrap: wrap;
|
|
5835
|
+
}
|
|
5836
|
+
#richhtmleditor-root .de-embed-modal__chip {
|
|
5837
|
+
font-size: .75rem;
|
|
5838
|
+
background: var(--de-border, #e2e8f0);
|
|
5839
|
+
color: var(--de-text-muted, #64748b);
|
|
5840
|
+
border-radius: 999px;
|
|
5841
|
+
padding: 2px 9px;
|
|
5842
|
+
}
|
|
5843
|
+
#richhtmleditor-root .de-embed-modal__actions {
|
|
5844
|
+
display: flex;
|
|
5845
|
+
justify-content: flex-end;
|
|
5846
|
+
gap: 8px;
|
|
5847
|
+
margin-top: 4px;
|
|
5848
|
+
}
|
|
5849
|
+
#richhtmleditor-root .de-embed-modal__btn {
|
|
5850
|
+
padding: 7px 18px;
|
|
5851
|
+
border-radius: 6px;
|
|
5852
|
+
border: 1px solid var(--de-border, #e2e8f0);
|
|
5853
|
+
font-size: .88rem;
|
|
5854
|
+
cursor: pointer;
|
|
5855
|
+
font-weight: 500;
|
|
5856
|
+
}
|
|
5857
|
+
#richhtmleditor-root .de-embed-modal__btn--cancel {
|
|
5858
|
+
background: transparent;
|
|
5859
|
+
color: var(--de-text-primary, #1e293b);
|
|
5860
|
+
}
|
|
5861
|
+
#richhtmleditor-root .de-embed-modal__btn--cancel:hover {
|
|
5862
|
+
background: var(--de-border, #e2e8f0);
|
|
5863
|
+
}
|
|
5864
|
+
#richhtmleditor-root .de-embed-modal__btn--insert {
|
|
5865
|
+
background: var(--de-primary, #2563eb);
|
|
5866
|
+
color: #fff;
|
|
5867
|
+
border-color: var(--de-primary, #2563eb);
|
|
5868
|
+
}
|
|
5869
|
+
#richhtmleditor-root .de-embed-modal__btn--insert:hover {
|
|
5870
|
+
background: var(--de-primary-hover, #1d4ed8);
|
|
5871
|
+
border-color: var(--de-primary-hover, #1d4ed8);
|
|
5872
|
+
}
|
|
5873
|
+
|
|
5874
|
+
/* ── Status bar: goal progress bar ─────────────────────────────────────── */
|
|
5875
|
+
#richhtmleditor-root .de-status-bar__goal-wrap {
|
|
5876
|
+
display: flex;
|
|
5877
|
+
align-items: center;
|
|
5878
|
+
gap: 8px;
|
|
5879
|
+
padding: 2px 12px 4px;
|
|
5880
|
+
font-size: 0.75rem;
|
|
5881
|
+
color: var(--de-text-muted, #64748b);
|
|
5882
|
+
}
|
|
5883
|
+
#richhtmleditor-root .de-status-bar__goal-bar {
|
|
5884
|
+
flex: 1;
|
|
5885
|
+
height: 4px;
|
|
5886
|
+
background: var(--de-border, #e2e8f0);
|
|
5887
|
+
border-radius: 2px;
|
|
5888
|
+
min-width: 80px;
|
|
5889
|
+
}
|
|
5890
|
+
#richhtmleditor-root .de-status-bar__goal-fill {
|
|
5891
|
+
height: 100%;
|
|
5892
|
+
background: var(--de-primary, #2563eb);
|
|
5893
|
+
border-radius: 2px;
|
|
5894
|
+
transition: width 0.2s;
|
|
5895
|
+
max-width: 100%;
|
|
5896
|
+
}
|