@editora/text-color 1.0.1
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/index.es.js +427 -0
- package/dist/index.umd.js +236 -0
- package/package.json +36 -0
package/dist/index.es.js
ADDED
|
@@ -0,0 +1,427 @@
|
|
|
1
|
+
let n = null, f = null, x = null, i = "#000000";
|
|
2
|
+
const w = [
|
|
3
|
+
"#000000",
|
|
4
|
+
"#ffffff",
|
|
5
|
+
"#808080",
|
|
6
|
+
"#ff0000",
|
|
7
|
+
"#00ff00",
|
|
8
|
+
"#0000ff",
|
|
9
|
+
"#ffff00",
|
|
10
|
+
"#ff00ff",
|
|
11
|
+
"#00ffff",
|
|
12
|
+
"#ffa500",
|
|
13
|
+
"#800080",
|
|
14
|
+
"#ffc0cb"
|
|
15
|
+
];
|
|
16
|
+
function u(e) {
|
|
17
|
+
try {
|
|
18
|
+
if (x) {
|
|
19
|
+
const s = window.getSelection();
|
|
20
|
+
s && (s.removeAllRanges(), s.addRange(x));
|
|
21
|
+
}
|
|
22
|
+
const o = window.getSelection();
|
|
23
|
+
if (!o || o.rangeCount === 0 || o.isCollapsed)
|
|
24
|
+
return !1;
|
|
25
|
+
const t = o.getRangeAt(0), l = t.startContainer.nodeType === Node.TEXT_NODE ? t.startContainer.parentElement : t.startContainer, c = t.endContainer.nodeType === Node.TEXT_NODE ? t.endContainer.parentElement : t.endContainer;
|
|
26
|
+
let r = null, a = l;
|
|
27
|
+
for (; a && a !== document.body; ) {
|
|
28
|
+
if (a.classList.contains("rte-text-color")) {
|
|
29
|
+
const s = document.createRange();
|
|
30
|
+
if (s.selectNodeContents(a), s.compareBoundaryPoints(Range.START_TO_START, t) <= 0 && s.compareBoundaryPoints(Range.END_TO_END, t) >= 0) {
|
|
31
|
+
r = a;
|
|
32
|
+
break;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
a = a.parentElement;
|
|
36
|
+
}
|
|
37
|
+
if (r)
|
|
38
|
+
return r.style.color = e, !0;
|
|
39
|
+
const p = document.createElement("span");
|
|
40
|
+
p.style.color = e, p.className = "rte-text-color";
|
|
41
|
+
const h = t.extractContents();
|
|
42
|
+
return p.appendChild(h), t.insertNode(p), t.setStartAfter(p), t.collapse(!0), o.removeAllRanges(), o.addRange(t), !0;
|
|
43
|
+
} catch (o) {
|
|
44
|
+
return console.error("Failed to set text color:", o), !1;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
function y() {
|
|
48
|
+
const e = window.getSelection();
|
|
49
|
+
if (!e || e.rangeCount === 0) return "#000000";
|
|
50
|
+
let t = e.getRangeAt(0).startContainer;
|
|
51
|
+
for (; t && t !== document.body; ) {
|
|
52
|
+
if (t.nodeType === Node.ELEMENT_NODE) {
|
|
53
|
+
const l = t, c = l.style.color || window.getComputedStyle(l).color;
|
|
54
|
+
if (c && c !== "rgb(0, 0, 0)")
|
|
55
|
+
return C(c);
|
|
56
|
+
}
|
|
57
|
+
t = t.parentNode;
|
|
58
|
+
}
|
|
59
|
+
return "#000000";
|
|
60
|
+
}
|
|
61
|
+
function C(e) {
|
|
62
|
+
if (e.startsWith("#")) return e;
|
|
63
|
+
const o = e.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
|
|
64
|
+
if (!o) return "#000000";
|
|
65
|
+
const t = parseInt(o[1]), l = parseInt(o[2]), c = parseInt(o[3]);
|
|
66
|
+
return "#" + [t, l, c].map((r) => {
|
|
67
|
+
const a = r.toString(16);
|
|
68
|
+
return a.length === 1 ? "0" + a : a;
|
|
69
|
+
}).join("");
|
|
70
|
+
}
|
|
71
|
+
function v(e) {
|
|
72
|
+
const o = window.getSelection();
|
|
73
|
+
o && o.rangeCount > 0 && (x = o.getRangeAt(0).cloneRange()), i = y(), n = document.createElement("div"), n.className = "rte-inline-color-picker", n.addEventListener("click", (l) => l.stopPropagation()), n.innerHTML = `
|
|
74
|
+
<div class="rte-color-picker-header">
|
|
75
|
+
<span class="rte-color-picker-title">Text Color</span>
|
|
76
|
+
<button class="rte-color-picker-close" aria-label="Close">×</button>
|
|
77
|
+
</div>
|
|
78
|
+
|
|
79
|
+
<div class="rte-color-picker-body">
|
|
80
|
+
<!-- Current Color Preview -->
|
|
81
|
+
<div class="rte-color-preview-section">
|
|
82
|
+
<div class="rte-color-preview-box" style="background-color: ${i}; ${i === "#ffffff" ? "border: 1px solid #ccc;" : ""}"></div>
|
|
83
|
+
<span class="rte-color-preview-label">${i.toUpperCase()}</span>
|
|
84
|
+
</div>
|
|
85
|
+
|
|
86
|
+
<!-- Preset Colors -->
|
|
87
|
+
<div class="rte-color-section">
|
|
88
|
+
<label class="rte-color-section-label">Colors</label>
|
|
89
|
+
<div class="rte-color-palette">
|
|
90
|
+
${w.map((l) => `
|
|
91
|
+
<button
|
|
92
|
+
class="rte-color-swatch ${i === l ? "selected" : ""}"
|
|
93
|
+
style="background-color: ${l}; ${l === "#ffffff" ? "border: 1px solid #ccc;" : ""}"
|
|
94
|
+
data-color="${l}"
|
|
95
|
+
title="${l.toUpperCase()}"
|
|
96
|
+
aria-label="${l.toUpperCase()}"
|
|
97
|
+
></button>
|
|
98
|
+
`).join("")}
|
|
99
|
+
</div>
|
|
100
|
+
</div>
|
|
101
|
+
|
|
102
|
+
<!-- Custom Color -->
|
|
103
|
+
<div class="rte-color-section">
|
|
104
|
+
<label class="rte-color-section-label">Custom</label>
|
|
105
|
+
<div class="rte-custom-color-inputs">
|
|
106
|
+
<input
|
|
107
|
+
type="color"
|
|
108
|
+
value="${i}"
|
|
109
|
+
class="rte-color-input-native"
|
|
110
|
+
aria-label="Color picker"
|
|
111
|
+
/>
|
|
112
|
+
<input
|
|
113
|
+
type="text"
|
|
114
|
+
value="${i}"
|
|
115
|
+
placeholder="#000000"
|
|
116
|
+
pattern="^#[0-9A-Fa-f]{6}$"
|
|
117
|
+
class="rte-color-input-text"
|
|
118
|
+
aria-label="Hex color input"
|
|
119
|
+
/>
|
|
120
|
+
</div>
|
|
121
|
+
</div>
|
|
122
|
+
</div>
|
|
123
|
+
`;
|
|
124
|
+
const t = e.getBoundingClientRect();
|
|
125
|
+
n.style.position = "absolute", n.style.top = `${t.bottom + window.scrollY + 4}px`, n.style.left = `${t.left + window.scrollX}px`, n.style.zIndex = "10000", document.body.appendChild(n), f = e, k();
|
|
126
|
+
}
|
|
127
|
+
function k() {
|
|
128
|
+
if (!n) return;
|
|
129
|
+
n.querySelector(".rte-color-picker-close")?.addEventListener("click", () => d()), n.querySelectorAll(".rte-color-swatch").forEach((c) => {
|
|
130
|
+
c.addEventListener("click", () => {
|
|
131
|
+
const r = c.getAttribute("data-color");
|
|
132
|
+
r && (i = r, typeof window < "u" && window.execEditorCommand ? window.execEditorCommand("setTextColor", r) : u(r), d());
|
|
133
|
+
});
|
|
134
|
+
});
|
|
135
|
+
const t = n.querySelector(".rte-color-input-native");
|
|
136
|
+
t?.addEventListener("change", (c) => {
|
|
137
|
+
const r = c.target.value;
|
|
138
|
+
i = r, typeof window < "u" && window.execEditorCommand ? window.execEditorCommand("setTextColor", r) : u(r), d();
|
|
139
|
+
});
|
|
140
|
+
const l = n.querySelector(".rte-color-input-text");
|
|
141
|
+
l?.addEventListener("change", (c) => {
|
|
142
|
+
const r = c.target.value;
|
|
143
|
+
/^#[0-9A-Fa-f]{6}$/.test(r) && (i = r, typeof window < "u" && window.execEditorCommand ? window.execEditorCommand("setTextColor", r) : u(r), d());
|
|
144
|
+
}), t?.addEventListener("input", (c) => {
|
|
145
|
+
const r = c.target.value;
|
|
146
|
+
i = r, g(r), m(r), T(r);
|
|
147
|
+
}), l?.addEventListener("input", (c) => {
|
|
148
|
+
const r = c.target.value;
|
|
149
|
+
/^#[0-9A-Fa-f]{6}$/.test(r) && (i = r, g(r), m(r), E(r));
|
|
150
|
+
});
|
|
151
|
+
}
|
|
152
|
+
function g(e) {
|
|
153
|
+
if (!n) return;
|
|
154
|
+
const o = n.querySelector(".rte-color-preview-box"), t = n.querySelector(".rte-color-preview-label");
|
|
155
|
+
o && (o.style.backgroundColor = e, o.style.border = e === "#ffffff" ? "1px solid #ccc" : "none"), t && (t.textContent = e.toUpperCase());
|
|
156
|
+
}
|
|
157
|
+
function m(e) {
|
|
158
|
+
if (!n) return;
|
|
159
|
+
n.querySelectorAll(".rte-color-swatch").forEach((t) => {
|
|
160
|
+
t.getAttribute("data-color") === e ? t.classList.add("selected") : t.classList.remove("selected");
|
|
161
|
+
});
|
|
162
|
+
}
|
|
163
|
+
function E(e) {
|
|
164
|
+
if (!n) return;
|
|
165
|
+
const o = n.querySelector(".rte-color-input-native");
|
|
166
|
+
o && (o.value = e);
|
|
167
|
+
}
|
|
168
|
+
function T(e) {
|
|
169
|
+
if (!n) return;
|
|
170
|
+
const o = n.querySelector(".rte-color-input-text");
|
|
171
|
+
o && (o.value = e);
|
|
172
|
+
}
|
|
173
|
+
function d() {
|
|
174
|
+
n && (n.remove(), n = null), f = null, x = null;
|
|
175
|
+
}
|
|
176
|
+
function S() {
|
|
177
|
+
if (n)
|
|
178
|
+
return d(), !0;
|
|
179
|
+
const e = document.querySelector('[data-command="openTextColorPicker"]');
|
|
180
|
+
return e ? (v(e), !0) : !1;
|
|
181
|
+
}
|
|
182
|
+
function b() {
|
|
183
|
+
if (!window.__textColorPluginInitialized && (window.__textColorPluginInitialized = !0, document.addEventListener("click", (e) => {
|
|
184
|
+
if (n && f) {
|
|
185
|
+
const o = e.target;
|
|
186
|
+
!n.contains(o) && !f.contains(o) && d();
|
|
187
|
+
}
|
|
188
|
+
}), !document.getElementById("text-color-plugin-styles"))) {
|
|
189
|
+
const e = document.createElement("style");
|
|
190
|
+
e.id = "text-color-plugin-styles", e.textContent = `
|
|
191
|
+
.rte-inline-color-picker {
|
|
192
|
+
background: white;
|
|
193
|
+
border-radius: 8px;
|
|
194
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
195
|
+
width: 220px;
|
|
196
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.rte-color-picker-header {
|
|
200
|
+
padding: 12px 16px;
|
|
201
|
+
border-bottom: 1px solid #eee;
|
|
202
|
+
display: flex;
|
|
203
|
+
justify-content: space-between;
|
|
204
|
+
align-items: center;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
.rte-color-picker-title {
|
|
208
|
+
font-size: 14px;
|
|
209
|
+
font-weight: 600;
|
|
210
|
+
color: #333;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.rte-color-picker-close {
|
|
214
|
+
background: none;
|
|
215
|
+
border: none;
|
|
216
|
+
font-size: 24px;
|
|
217
|
+
cursor: pointer;
|
|
218
|
+
color: #999;
|
|
219
|
+
padding: 0;
|
|
220
|
+
width: 24px;
|
|
221
|
+
height: 24px;
|
|
222
|
+
display: flex;
|
|
223
|
+
align-items: center;
|
|
224
|
+
justify-content: center;
|
|
225
|
+
line-height: 1;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
.rte-color-picker-close:hover {
|
|
229
|
+
color: #333;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.rte-color-picker-body {
|
|
233
|
+
padding: 8px;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.rte-color-preview-section {
|
|
237
|
+
display: flex;
|
|
238
|
+
align-items: center;
|
|
239
|
+
gap: 12px;
|
|
240
|
+
margin-bottom: 8px;
|
|
241
|
+
padding: 6px;
|
|
242
|
+
background-color: #f8f9fa;
|
|
243
|
+
border-radius: 6px;
|
|
244
|
+
border: 1px solid #e0e0e0;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
.rte-color-preview-box {
|
|
248
|
+
width: 24px;
|
|
249
|
+
height: 24px;
|
|
250
|
+
border-radius: 4px;
|
|
251
|
+
flex-shrink: 0;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
.rte-color-preview-label {
|
|
255
|
+
font-size: 13px;
|
|
256
|
+
font-weight: 500;
|
|
257
|
+
color: #666;
|
|
258
|
+
font-family: monospace;
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
.rte-color-section {
|
|
262
|
+
margin-bottom: 16px;
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
.rte-color-section:last-child {
|
|
266
|
+
margin-bottom: 0;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
.rte-color-section-label {
|
|
270
|
+
display: block;
|
|
271
|
+
font-size: 12px;
|
|
272
|
+
font-weight: 600;
|
|
273
|
+
color: #666;
|
|
274
|
+
margin-bottom: 8px;
|
|
275
|
+
text-transform: uppercase;
|
|
276
|
+
letter-spacing: 0.5px;
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
.rte-color-palette {
|
|
280
|
+
display: grid;
|
|
281
|
+
grid-template-columns: repeat(7, 1fr);
|
|
282
|
+
gap: 6px;
|
|
283
|
+
max-width: 180px;
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
.rte-color-swatch {
|
|
287
|
+
width: 100%;
|
|
288
|
+
aspect-ratio: 1;
|
|
289
|
+
border: 1px solid #e0e0e0;
|
|
290
|
+
border-radius: 3px;
|
|
291
|
+
cursor: pointer;
|
|
292
|
+
transition: all 0.15s ease;
|
|
293
|
+
padding: 0;
|
|
294
|
+
min-height: 20px;
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
.rte-color-swatch:hover {
|
|
298
|
+
transform: scale(1.05);
|
|
299
|
+
border-color: #ccc;
|
|
300
|
+
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
.rte-color-swatch.selected {
|
|
304
|
+
border-color: #1976d2;
|
|
305
|
+
box-shadow: 0 0 0 1px rgba(25, 118, 210, 0.3);
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
.rte-custom-color-inputs {
|
|
309
|
+
display: flex;
|
|
310
|
+
gap: 8px;
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
.rte-color-input-native {
|
|
314
|
+
width: 50px;
|
|
315
|
+
height: 26px;
|
|
316
|
+
border: 1px solid #ddd;
|
|
317
|
+
border-radius: 4px;
|
|
318
|
+
cursor: pointer;
|
|
319
|
+
padding: 2px;
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
.rte-color-input-text {
|
|
323
|
+
flex: 1;
|
|
324
|
+
height: 26px;
|
|
325
|
+
width: 50px;
|
|
326
|
+
border: 1px solid #ddd;
|
|
327
|
+
border-radius: 4px;
|
|
328
|
+
padding: 0 12px;
|
|
329
|
+
font-size: 13px;
|
|
330
|
+
font-family: monospace;
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
.rte-color-input-text:focus {
|
|
334
|
+
outline: none;
|
|
335
|
+
border-color: #1976d2;
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
.rte-color-picker-footer {
|
|
339
|
+
padding: 12px 16px;
|
|
340
|
+
border-top: 1px solid #eee;
|
|
341
|
+
display: flex;
|
|
342
|
+
gap: 8px;
|
|
343
|
+
justify-content: flex-end;
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
.rte-btn-primary,
|
|
347
|
+
.rte-btn-secondary {
|
|
348
|
+
padding: 6px 16px;
|
|
349
|
+
border-radius: 4px;
|
|
350
|
+
font-size: 13px;
|
|
351
|
+
font-weight: 500;
|
|
352
|
+
cursor: pointer;
|
|
353
|
+
transition: all 0.2s;
|
|
354
|
+
border: none;
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
.rte-btn-primary {
|
|
358
|
+
background-color: #1976d2;
|
|
359
|
+
color: white;
|
|
360
|
+
}
|
|
361
|
+
|
|
362
|
+
.rte-btn-primary:hover {
|
|
363
|
+
background-color: #1565c0;
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
.rte-btn-secondary {
|
|
367
|
+
background-color: #f5f5f5;
|
|
368
|
+
color: #333;
|
|
369
|
+
border: 1px solid #ddd;
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
.rte-btn-secondary:hover {
|
|
373
|
+
background-color: #eeeeee;
|
|
374
|
+
}
|
|
375
|
+
`, document.head.appendChild(e);
|
|
376
|
+
}
|
|
377
|
+
}
|
|
378
|
+
document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", b) : setTimeout(b, 100);
|
|
379
|
+
const R = () => ({
|
|
380
|
+
name: "textColor",
|
|
381
|
+
marks: {
|
|
382
|
+
textColor: {
|
|
383
|
+
attrs: {
|
|
384
|
+
color: { default: "#000000" }
|
|
385
|
+
},
|
|
386
|
+
parseDOM: [
|
|
387
|
+
{
|
|
388
|
+
tag: "span[style*=color]",
|
|
389
|
+
getAttrs: (e) => {
|
|
390
|
+
const t = (e.getAttribute("style") || "").match(/color:\s*([^;]+)/);
|
|
391
|
+
return t ? { color: t[1] } : null;
|
|
392
|
+
}
|
|
393
|
+
},
|
|
394
|
+
{
|
|
395
|
+
tag: "font[color]",
|
|
396
|
+
getAttrs: (e) => {
|
|
397
|
+
const o = e.getAttribute("color");
|
|
398
|
+
return o ? { color: o } : null;
|
|
399
|
+
}
|
|
400
|
+
}
|
|
401
|
+
],
|
|
402
|
+
toDOM: (e) => [
|
|
403
|
+
"span",
|
|
404
|
+
{
|
|
405
|
+
style: `color: ${e.attrs?.color || "#000000"}`,
|
|
406
|
+
class: "rte-text-color"
|
|
407
|
+
},
|
|
408
|
+
0
|
|
409
|
+
]
|
|
410
|
+
}
|
|
411
|
+
},
|
|
412
|
+
toolbar: [
|
|
413
|
+
{
|
|
414
|
+
label: "Text Color",
|
|
415
|
+
command: "openTextColorPicker",
|
|
416
|
+
icon: '<svg width="24" height="24" focusable="false"><g fill-rule="evenodd"><path class="tox-icon-text-color__color" d="M3 18h18v3H3z" fill="currentColor"></path><path d="M8.7 16h-.8a.5.5 0 0 1-.5-.6l2.7-9c.1-.3.3-.4.5-.4h2.8c.2 0 .4.1.5.4l2.7 9a.5.5 0 0 1-.5.6h-.8a.5.5 0 0 1-.4-.4l-.7-2.2c0-.3-.3-.4-.5-.4h-3.4c-.2 0-.4.1-.5.4l-.7 2.2c0 .3-.2.4-.4.4Zm2.6-7.6-.6 2a.5.5 0 0 0 .5.6h1.6a.5.5 0 0 0 .5-.6l-.6-2c0-.3-.3-.4-.5-.4h-.4c-.2 0-.4.1-.5.4Z"></path></g></svg>'
|
|
417
|
+
}
|
|
418
|
+
],
|
|
419
|
+
commands: {
|
|
420
|
+
openTextColorPicker: () => S(),
|
|
421
|
+
setTextColor: (e) => e ? u(e) : !1
|
|
422
|
+
},
|
|
423
|
+
keymap: {}
|
|
424
|
+
});
|
|
425
|
+
export {
|
|
426
|
+
R as TextColorPlugin
|
|
427
|
+
};
|
|
@@ -0,0 +1,236 @@
|
|
|
1
|
+
(function(d,r){typeof exports=="object"&&typeof module<"u"?r(exports):typeof define=="function"&&define.amd?define(["exports"],r):(d=typeof globalThis<"u"?globalThis:d||self,r(d.text_colorPlugin={}))})(this,(function(d){"use strict";let r=null,f=null,x=null,i="#000000";const w=["#000000","#ffffff","#808080","#ff0000","#00ff00","#0000ff","#ffff00","#ff00ff","#00ffff","#ffa500","#800080","#ffc0cb"];function g(e){try{if(x){const s=window.getSelection();s&&(s.removeAllRanges(),s.addRange(x))}const o=window.getSelection();if(!o||o.rangeCount===0||o.isCollapsed)return!1;const t=o.getRangeAt(0),l=t.startContainer.nodeType===Node.TEXT_NODE?t.startContainer.parentElement:t.startContainer,c=t.endContainer.nodeType===Node.TEXT_NODE?t.endContainer.parentElement:t.endContainer;let n=null,a=l;for(;a&&a!==document.body;){if(a.classList.contains("rte-text-color")){const s=document.createRange();if(s.selectNodeContents(a),s.compareBoundaryPoints(Range.START_TO_START,t)<=0&&s.compareBoundaryPoints(Range.END_TO_END,t)>=0){n=a;break}}a=a.parentElement}if(n)return n.style.color=e,!0;const u=document.createElement("span");u.style.color=e,u.className="rte-text-color";const R=t.extractContents();return u.appendChild(R),t.insertNode(u),t.setStartAfter(u),t.collapse(!0),o.removeAllRanges(),o.addRange(t),!0}catch(o){return console.error("Failed to set text color:",o),!1}}function y(){const e=window.getSelection();if(!e||e.rangeCount===0)return"#000000";let t=e.getRangeAt(0).startContainer;for(;t&&t!==document.body;){if(t.nodeType===Node.ELEMENT_NODE){const l=t,c=l.style.color||window.getComputedStyle(l).color;if(c&&c!=="rgb(0, 0, 0)")return C(c)}t=t.parentNode}return"#000000"}function C(e){if(e.startsWith("#"))return e;const o=e.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);if(!o)return"#000000";const t=parseInt(o[1]),l=parseInt(o[2]),c=parseInt(o[3]);return"#"+[t,l,c].map(n=>{const a=n.toString(16);return a.length===1?"0"+a:a}).join("")}function v(e){const o=window.getSelection();o&&o.rangeCount>0&&(x=o.getRangeAt(0).cloneRange()),i=y(),r=document.createElement("div"),r.className="rte-inline-color-picker",r.addEventListener("click",l=>l.stopPropagation()),r.innerHTML=`
|
|
2
|
+
<div class="rte-color-picker-header">
|
|
3
|
+
<span class="rte-color-picker-title">Text Color</span>
|
|
4
|
+
<button class="rte-color-picker-close" aria-label="Close">×</button>
|
|
5
|
+
</div>
|
|
6
|
+
|
|
7
|
+
<div class="rte-color-picker-body">
|
|
8
|
+
<!-- Current Color Preview -->
|
|
9
|
+
<div class="rte-color-preview-section">
|
|
10
|
+
<div class="rte-color-preview-box" style="background-color: ${i}; ${i==="#ffffff"?"border: 1px solid #ccc;":""}"></div>
|
|
11
|
+
<span class="rte-color-preview-label">${i.toUpperCase()}</span>
|
|
12
|
+
</div>
|
|
13
|
+
|
|
14
|
+
<!-- Preset Colors -->
|
|
15
|
+
<div class="rte-color-section">
|
|
16
|
+
<label class="rte-color-section-label">Colors</label>
|
|
17
|
+
<div class="rte-color-palette">
|
|
18
|
+
${w.map(l=>`
|
|
19
|
+
<button
|
|
20
|
+
class="rte-color-swatch ${i===l?"selected":""}"
|
|
21
|
+
style="background-color: ${l}; ${l==="#ffffff"?"border: 1px solid #ccc;":""}"
|
|
22
|
+
data-color="${l}"
|
|
23
|
+
title="${l.toUpperCase()}"
|
|
24
|
+
aria-label="${l.toUpperCase()}"
|
|
25
|
+
></button>
|
|
26
|
+
`).join("")}
|
|
27
|
+
</div>
|
|
28
|
+
</div>
|
|
29
|
+
|
|
30
|
+
<!-- Custom Color -->
|
|
31
|
+
<div class="rte-color-section">
|
|
32
|
+
<label class="rte-color-section-label">Custom</label>
|
|
33
|
+
<div class="rte-custom-color-inputs">
|
|
34
|
+
<input
|
|
35
|
+
type="color"
|
|
36
|
+
value="${i}"
|
|
37
|
+
class="rte-color-input-native"
|
|
38
|
+
aria-label="Color picker"
|
|
39
|
+
/>
|
|
40
|
+
<input
|
|
41
|
+
type="text"
|
|
42
|
+
value="${i}"
|
|
43
|
+
placeholder="#000000"
|
|
44
|
+
pattern="^#[0-9A-Fa-f]{6}$"
|
|
45
|
+
class="rte-color-input-text"
|
|
46
|
+
aria-label="Hex color input"
|
|
47
|
+
/>
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
`;const t=e.getBoundingClientRect();r.style.position="absolute",r.style.top=`${t.bottom+window.scrollY+4}px`,r.style.left=`${t.left+window.scrollX}px`,r.style.zIndex="10000",document.body.appendChild(r),f=e,k()}function k(){if(!r)return;r.querySelector(".rte-color-picker-close")?.addEventListener("click",()=>p()),r.querySelectorAll(".rte-color-swatch").forEach(c=>{c.addEventListener("click",()=>{const n=c.getAttribute("data-color");n&&(i=n,typeof window<"u"&&window.execEditorCommand?window.execEditorCommand("setTextColor",n):g(n),p())})});const t=r.querySelector(".rte-color-input-native");t?.addEventListener("change",c=>{const n=c.target.value;i=n,typeof window<"u"&&window.execEditorCommand?window.execEditorCommand("setTextColor",n):g(n),p()});const l=r.querySelector(".rte-color-input-text");l?.addEventListener("change",c=>{const n=c.target.value;/^#[0-9A-Fa-f]{6}$/.test(n)&&(i=n,typeof window<"u"&&window.execEditorCommand?window.execEditorCommand("setTextColor",n):g(n),p())}),t?.addEventListener("input",c=>{const n=c.target.value;i=n,m(n),b(n),T(n)}),l?.addEventListener("input",c=>{const n=c.target.value;/^#[0-9A-Fa-f]{6}$/.test(n)&&(i=n,m(n),b(n),E(n))})}function m(e){if(!r)return;const o=r.querySelector(".rte-color-preview-box"),t=r.querySelector(".rte-color-preview-label");o&&(o.style.backgroundColor=e,o.style.border=e==="#ffffff"?"1px solid #ccc":"none"),t&&(t.textContent=e.toUpperCase())}function b(e){if(!r)return;r.querySelectorAll(".rte-color-swatch").forEach(t=>{t.getAttribute("data-color")===e?t.classList.add("selected"):t.classList.remove("selected")})}function E(e){if(!r)return;const o=r.querySelector(".rte-color-input-native");o&&(o.value=e)}function T(e){if(!r)return;const o=r.querySelector(".rte-color-input-text");o&&(o.value=e)}function p(){r&&(r.remove(),r=null),f=null,x=null}function S(){if(r)return p(),!0;const e=document.querySelector('[data-command="openTextColorPicker"]');return e?(v(e),!0):!1}function h(){if(!window.__textColorPluginInitialized&&(window.__textColorPluginInitialized=!0,document.addEventListener("click",e=>{if(r&&f){const o=e.target;!r.contains(o)&&!f.contains(o)&&p()}}),!document.getElementById("text-color-plugin-styles"))){const e=document.createElement("style");e.id="text-color-plugin-styles",e.textContent=`
|
|
52
|
+
.rte-inline-color-picker {
|
|
53
|
+
background: white;
|
|
54
|
+
border-radius: 8px;
|
|
55
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
56
|
+
width: 220px;
|
|
57
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.rte-color-picker-header {
|
|
61
|
+
padding: 12px 16px;
|
|
62
|
+
border-bottom: 1px solid #eee;
|
|
63
|
+
display: flex;
|
|
64
|
+
justify-content: space-between;
|
|
65
|
+
align-items: center;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.rte-color-picker-title {
|
|
69
|
+
font-size: 14px;
|
|
70
|
+
font-weight: 600;
|
|
71
|
+
color: #333;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.rte-color-picker-close {
|
|
75
|
+
background: none;
|
|
76
|
+
border: none;
|
|
77
|
+
font-size: 24px;
|
|
78
|
+
cursor: pointer;
|
|
79
|
+
color: #999;
|
|
80
|
+
padding: 0;
|
|
81
|
+
width: 24px;
|
|
82
|
+
height: 24px;
|
|
83
|
+
display: flex;
|
|
84
|
+
align-items: center;
|
|
85
|
+
justify-content: center;
|
|
86
|
+
line-height: 1;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.rte-color-picker-close:hover {
|
|
90
|
+
color: #333;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.rte-color-picker-body {
|
|
94
|
+
padding: 8px;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.rte-color-preview-section {
|
|
98
|
+
display: flex;
|
|
99
|
+
align-items: center;
|
|
100
|
+
gap: 12px;
|
|
101
|
+
margin-bottom: 8px;
|
|
102
|
+
padding: 6px;
|
|
103
|
+
background-color: #f8f9fa;
|
|
104
|
+
border-radius: 6px;
|
|
105
|
+
border: 1px solid #e0e0e0;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.rte-color-preview-box {
|
|
109
|
+
width: 24px;
|
|
110
|
+
height: 24px;
|
|
111
|
+
border-radius: 4px;
|
|
112
|
+
flex-shrink: 0;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.rte-color-preview-label {
|
|
116
|
+
font-size: 13px;
|
|
117
|
+
font-weight: 500;
|
|
118
|
+
color: #666;
|
|
119
|
+
font-family: monospace;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.rte-color-section {
|
|
123
|
+
margin-bottom: 16px;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.rte-color-section:last-child {
|
|
127
|
+
margin-bottom: 0;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.rte-color-section-label {
|
|
131
|
+
display: block;
|
|
132
|
+
font-size: 12px;
|
|
133
|
+
font-weight: 600;
|
|
134
|
+
color: #666;
|
|
135
|
+
margin-bottom: 8px;
|
|
136
|
+
text-transform: uppercase;
|
|
137
|
+
letter-spacing: 0.5px;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.rte-color-palette {
|
|
141
|
+
display: grid;
|
|
142
|
+
grid-template-columns: repeat(7, 1fr);
|
|
143
|
+
gap: 6px;
|
|
144
|
+
max-width: 180px;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.rte-color-swatch {
|
|
148
|
+
width: 100%;
|
|
149
|
+
aspect-ratio: 1;
|
|
150
|
+
border: 1px solid #e0e0e0;
|
|
151
|
+
border-radius: 3px;
|
|
152
|
+
cursor: pointer;
|
|
153
|
+
transition: all 0.15s ease;
|
|
154
|
+
padding: 0;
|
|
155
|
+
min-height: 20px;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.rte-color-swatch:hover {
|
|
159
|
+
transform: scale(1.05);
|
|
160
|
+
border-color: #ccc;
|
|
161
|
+
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.rte-color-swatch.selected {
|
|
165
|
+
border-color: #1976d2;
|
|
166
|
+
box-shadow: 0 0 0 1px rgba(25, 118, 210, 0.3);
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.rte-custom-color-inputs {
|
|
170
|
+
display: flex;
|
|
171
|
+
gap: 8px;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.rte-color-input-native {
|
|
175
|
+
width: 50px;
|
|
176
|
+
height: 26px;
|
|
177
|
+
border: 1px solid #ddd;
|
|
178
|
+
border-radius: 4px;
|
|
179
|
+
cursor: pointer;
|
|
180
|
+
padding: 2px;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.rte-color-input-text {
|
|
184
|
+
flex: 1;
|
|
185
|
+
height: 26px;
|
|
186
|
+
width: 50px;
|
|
187
|
+
border: 1px solid #ddd;
|
|
188
|
+
border-radius: 4px;
|
|
189
|
+
padding: 0 12px;
|
|
190
|
+
font-size: 13px;
|
|
191
|
+
font-family: monospace;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.rte-color-input-text:focus {
|
|
195
|
+
outline: none;
|
|
196
|
+
border-color: #1976d2;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.rte-color-picker-footer {
|
|
200
|
+
padding: 12px 16px;
|
|
201
|
+
border-top: 1px solid #eee;
|
|
202
|
+
display: flex;
|
|
203
|
+
gap: 8px;
|
|
204
|
+
justify-content: flex-end;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
.rte-btn-primary,
|
|
208
|
+
.rte-btn-secondary {
|
|
209
|
+
padding: 6px 16px;
|
|
210
|
+
border-radius: 4px;
|
|
211
|
+
font-size: 13px;
|
|
212
|
+
font-weight: 500;
|
|
213
|
+
cursor: pointer;
|
|
214
|
+
transition: all 0.2s;
|
|
215
|
+
border: none;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
.rte-btn-primary {
|
|
219
|
+
background-color: #1976d2;
|
|
220
|
+
color: white;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.rte-btn-primary:hover {
|
|
224
|
+
background-color: #1565c0;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.rte-btn-secondary {
|
|
228
|
+
background-color: #f5f5f5;
|
|
229
|
+
color: #333;
|
|
230
|
+
border: 1px solid #ddd;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.rte-btn-secondary:hover {
|
|
234
|
+
background-color: #eeeeee;
|
|
235
|
+
}
|
|
236
|
+
`,document.head.appendChild(e)}}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",h):setTimeout(h,100);const P=()=>({name:"textColor",marks:{textColor:{attrs:{color:{default:"#000000"}},parseDOM:[{tag:"span[style*=color]",getAttrs:e=>{const t=(e.getAttribute("style")||"").match(/color:\s*([^;]+)/);return t?{color:t[1]}:null}},{tag:"font[color]",getAttrs:e=>{const o=e.getAttribute("color");return o?{color:o}:null}}],toDOM:e=>["span",{style:`color: ${e.attrs?.color||"#000000"}`,class:"rte-text-color"},0]}},toolbar:[{label:"Text Color",command:"openTextColorPicker",icon:'<svg width="24" height="24" focusable="false"><g fill-rule="evenodd"><path class="tox-icon-text-color__color" d="M3 18h18v3H3z" fill="currentColor"></path><path d="M8.7 16h-.8a.5.5 0 0 1-.5-.6l2.7-9c.1-.3.3-.4.5-.4h2.8c.2 0 .4.1.5.4l2.7 9a.5.5 0 0 1-.5.6h-.8a.5.5 0 0 1-.4-.4l-.7-2.2c0-.3-.3-.4-.5-.4h-3.4c-.2 0-.4.1-.5.4l-.7 2.2c0 .3-.2.4-.4.4Zm2.6-7.6-.6 2a.5.5 0 0 0 .5.6h1.6a.5.5 0 0 0 .5-.6l-.6-2c0-.3-.3-.4-.5-.4h-.4c-.2 0-.4.1-.5.4Z"></path></g></svg>'}],commands:{openTextColorPicker:()=>S(),setTextColor:e=>e?g(e):!1},keymap:{}});d.TextColorPlugin=P,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})}));
|
package/package.json
ADDED
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@editora/text-color",
|
|
3
|
+
"version": "1.0.1",
|
|
4
|
+
"description": "Text color plugin for Rich Text Editor",
|
|
5
|
+
"authors": [
|
|
6
|
+
"Ajay Kumar <ajaykr089@gmail.com>"
|
|
7
|
+
],
|
|
8
|
+
"main": "dist/index.cjs.js",
|
|
9
|
+
"module": "dist/index.esm.js",
|
|
10
|
+
"types": "dist/index.d.ts",
|
|
11
|
+
"files": [
|
|
12
|
+
"dist"
|
|
13
|
+
],
|
|
14
|
+
"scripts": {
|
|
15
|
+
"build": "vite build",
|
|
16
|
+
"dev": "vite build --watch",
|
|
17
|
+
"clean": "rm -rf dist"
|
|
18
|
+
},
|
|
19
|
+
"peerDependencies": {
|
|
20
|
+
"@editora/core": "^1.0.5"
|
|
21
|
+
},
|
|
22
|
+
"devDependencies": {
|
|
23
|
+
"@types/react": "^18.0.0",
|
|
24
|
+
"typescript": "^5.0.0",
|
|
25
|
+
"vite": "^7.3.1"
|
|
26
|
+
},
|
|
27
|
+
"keywords": [
|
|
28
|
+
"editora",
|
|
29
|
+
"rich-text-editor",
|
|
30
|
+
"plugin",
|
|
31
|
+
"text-color",
|
|
32
|
+
"color"
|
|
33
|
+
],
|
|
34
|
+
"author": "",
|
|
35
|
+
"license": "MIT"
|
|
36
|
+
}
|