trotl-texteditor 1.0.2 → 1.0.4
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.cjs +303 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.css +2 -0
- package/dist/index.css.map +1 -0
- package/dist/index.mjs +301 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +17 -12
- package/dist/index.cjs.js +0 -333
- package/dist/index.cjs.js.map +0 -1
- package/dist/index.esm.js +0 -331
- package/dist/index.esm.js.map +0 -1
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,303 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var react = require('react');
|
|
4
|
+
|
|
5
|
+
const DEFAULT_HTML = `
|
|
6
|
+
<h1>Welcome</h1>
|
|
7
|
+
<p>This is a lightweight WYSIWYG editor built without external libraries.</p>
|
|
8
|
+
<ul>
|
|
9
|
+
<li>Edit text directly</li>
|
|
10
|
+
<li>Use the toolbar for formatting</li>
|
|
11
|
+
<li>Copy, paste, and export HTML</li>
|
|
12
|
+
</ul>
|
|
13
|
+
`;
|
|
14
|
+
const COMMANDS = [{
|
|
15
|
+
cmd: "bold",
|
|
16
|
+
label: "Bold",
|
|
17
|
+
icon: "B"
|
|
18
|
+
}, {
|
|
19
|
+
cmd: "italic",
|
|
20
|
+
label: "Italic",
|
|
21
|
+
icon: "I"
|
|
22
|
+
}, {
|
|
23
|
+
cmd: "underline",
|
|
24
|
+
label: "Underline",
|
|
25
|
+
icon: "U"
|
|
26
|
+
}, {
|
|
27
|
+
cmd: "strikeThrough",
|
|
28
|
+
label: "Strike",
|
|
29
|
+
icon: "S"
|
|
30
|
+
}, {
|
|
31
|
+
cmd: "insertUnorderedList",
|
|
32
|
+
label: "Bullets",
|
|
33
|
+
icon: "•"
|
|
34
|
+
}, {
|
|
35
|
+
cmd: "insertOrderedList",
|
|
36
|
+
label: "Numbered",
|
|
37
|
+
icon: "1."
|
|
38
|
+
}, {
|
|
39
|
+
cmd: "justifyLeft",
|
|
40
|
+
label: "Left",
|
|
41
|
+
icon: "⟸"
|
|
42
|
+
}, {
|
|
43
|
+
cmd: "justifyCenter",
|
|
44
|
+
label: "Center",
|
|
45
|
+
icon: "⇔"
|
|
46
|
+
}, {
|
|
47
|
+
cmd: "justifyRight",
|
|
48
|
+
label: "Right",
|
|
49
|
+
icon: "⟹"
|
|
50
|
+
}];
|
|
51
|
+
function Editor({
|
|
52
|
+
theme = "dark",
|
|
53
|
+
tools = COMMANDS.map(item => item.cmd),
|
|
54
|
+
showHeading = true,
|
|
55
|
+
showFontSize = true,
|
|
56
|
+
showLink = true,
|
|
57
|
+
showUndoRedo = true,
|
|
58
|
+
showClear = true,
|
|
59
|
+
showPlainPaste = true,
|
|
60
|
+
showColor = true,
|
|
61
|
+
showLiveHtml = true,
|
|
62
|
+
showStats = true,
|
|
63
|
+
showCopyHtml = true,
|
|
64
|
+
onChange = () => {}
|
|
65
|
+
}) {
|
|
66
|
+
const editorRef = react.useRef(null);
|
|
67
|
+
const [html, setHtml] = react.useState("");
|
|
68
|
+
const [plainPaste, setPlainPaste] = react.useState(true);
|
|
69
|
+
const [selectionText, setSelectionText] = react.useState("");
|
|
70
|
+
const [heading, setHeading] = react.useState("p");
|
|
71
|
+
const [fontSize, setFontSize] = react.useState("16");
|
|
72
|
+
const [textColor, setTextColor] = react.useState("#1f2937");
|
|
73
|
+
const [activeToolMap, setActiveToolMap] = react.useState({});
|
|
74
|
+
react.useEffect(() => {
|
|
75
|
+
if (editorRef.current) {
|
|
76
|
+
editorRef.current.innerHTML = DEFAULT_HTML;
|
|
77
|
+
setHtml(editorRef.current.innerHTML);
|
|
78
|
+
}
|
|
79
|
+
}, []);
|
|
80
|
+
const stats = react.useMemo(() => {
|
|
81
|
+
const text = editorRef.current?.innerText || "";
|
|
82
|
+
const words = text.trim() ? text.trim().split(/\s+/).length : 0;
|
|
83
|
+
return {
|
|
84
|
+
words,
|
|
85
|
+
chars: text.length
|
|
86
|
+
};
|
|
87
|
+
}, []);
|
|
88
|
+
const exec = (cmd, value = null) => {
|
|
89
|
+
editorRef.current?.focus();
|
|
90
|
+
document.execCommand(cmd, false, value);
|
|
91
|
+
const nextHtml = editorRef.current?.innerHTML || "";
|
|
92
|
+
setHtml(nextHtml);
|
|
93
|
+
onChange({
|
|
94
|
+
html: nextHtml,
|
|
95
|
+
text: editorRef.current?.innerText || ""
|
|
96
|
+
});
|
|
97
|
+
updateToolbarState();
|
|
98
|
+
};
|
|
99
|
+
const applyHeading = next => {
|
|
100
|
+
setHeading(next);
|
|
101
|
+
if (next === "p") {
|
|
102
|
+
exec("formatBlock", "P");
|
|
103
|
+
return;
|
|
104
|
+
}
|
|
105
|
+
exec("formatBlock", next.toUpperCase());
|
|
106
|
+
};
|
|
107
|
+
const applyFontSize = next => {
|
|
108
|
+
setFontSize(next);
|
|
109
|
+
exec("fontSize", "7");
|
|
110
|
+
const fontElements = editorRef.current?.querySelectorAll("font[size='7']") || [];
|
|
111
|
+
fontElements.forEach(el => {
|
|
112
|
+
el.removeAttribute("size");
|
|
113
|
+
el.style.fontSize = `${next}px`;
|
|
114
|
+
});
|
|
115
|
+
setHtml(editorRef.current?.innerHTML || "");
|
|
116
|
+
updateToolbarState();
|
|
117
|
+
};
|
|
118
|
+
const applyTextColor = next => {
|
|
119
|
+
setTextColor(next);
|
|
120
|
+
exec("foreColor", next);
|
|
121
|
+
};
|
|
122
|
+
const insertLink = () => {
|
|
123
|
+
const url = window.prompt("Enter URL", "https://");
|
|
124
|
+
if (!url) return;
|
|
125
|
+
exec("createLink", url);
|
|
126
|
+
};
|
|
127
|
+
const removeFormat = () => exec("removeFormat");
|
|
128
|
+
const clearAll = () => {
|
|
129
|
+
if (!editorRef.current) return;
|
|
130
|
+
editorRef.current.innerHTML = "<p></p>";
|
|
131
|
+
setHtml(editorRef.current.innerHTML);
|
|
132
|
+
onChange({
|
|
133
|
+
html: editorRef.current.innerHTML,
|
|
134
|
+
text: editorRef.current.innerText || ""
|
|
135
|
+
});
|
|
136
|
+
updateToolbarState();
|
|
137
|
+
};
|
|
138
|
+
const onInput = () => {
|
|
139
|
+
const nextHtml = editorRef.current?.innerHTML || "";
|
|
140
|
+
setHtml(nextHtml);
|
|
141
|
+
onChange({
|
|
142
|
+
html: nextHtml,
|
|
143
|
+
text: editorRef.current?.innerText || ""
|
|
144
|
+
});
|
|
145
|
+
updateToolbarState();
|
|
146
|
+
};
|
|
147
|
+
const onPaste = event => {
|
|
148
|
+
if (!plainPaste) return;
|
|
149
|
+
event.preventDefault();
|
|
150
|
+
const text = event.clipboardData.getData("text/plain");
|
|
151
|
+
document.execCommand("insertText", false, text);
|
|
152
|
+
};
|
|
153
|
+
const updateToolbarState = react.useCallback(() => {
|
|
154
|
+
const selection = document.getSelection();
|
|
155
|
+
if (!selection || selection.rangeCount === 0 || !editorRef.current) return;
|
|
156
|
+
const anchorNode = selection.anchorNode;
|
|
157
|
+
const isInsideEditor = anchorNode && editorRef.current.contains(anchorNode);
|
|
158
|
+
if (!isInsideEditor) {
|
|
159
|
+
setSelectionText("");
|
|
160
|
+
setActiveToolMap({});
|
|
161
|
+
return;
|
|
162
|
+
}
|
|
163
|
+
setSelectionText(selection.toString());
|
|
164
|
+
const nextActive = {};
|
|
165
|
+
COMMANDS.forEach(item => {
|
|
166
|
+
try {
|
|
167
|
+
nextActive[item.cmd] = document.queryCommandState(item.cmd);
|
|
168
|
+
} catch {
|
|
169
|
+
nextActive[item.cmd] = false;
|
|
170
|
+
}
|
|
171
|
+
});
|
|
172
|
+
setActiveToolMap(nextActive);
|
|
173
|
+
}, []);
|
|
174
|
+
react.useEffect(() => {
|
|
175
|
+
document.addEventListener("selectionchange", updateToolbarState);
|
|
176
|
+
return () => document.removeEventListener("selectionchange", updateToolbarState);
|
|
177
|
+
}, [updateToolbarState]);
|
|
178
|
+
const exportHtml = async () => {
|
|
179
|
+
const payload = editorRef.current?.innerHTML || "";
|
|
180
|
+
await navigator.clipboard.writeText(payload);
|
|
181
|
+
alert("HTML copied to clipboard.");
|
|
182
|
+
};
|
|
183
|
+
const activeCommands = react.useMemo(() => COMMANDS.filter(item => tools.includes(item.cmd)), [tools]);
|
|
184
|
+
return /*#__PURE__*/React.createElement("section", {
|
|
185
|
+
className: `editor-root theme-${theme}${showLiveHtml ? "" : " no-preview"}`,
|
|
186
|
+
"data-theme": theme
|
|
187
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
188
|
+
className: "toolbar"
|
|
189
|
+
}, activeCommands.length > 0 && /*#__PURE__*/React.createElement("div", {
|
|
190
|
+
className: "toolbar-group"
|
|
191
|
+
}, activeCommands.map(item => /*#__PURE__*/React.createElement("button", {
|
|
192
|
+
key: item.cmd,
|
|
193
|
+
type: "button",
|
|
194
|
+
className: `toolbar-btn${activeToolMap[item.cmd] ? " active" : ""}`,
|
|
195
|
+
onMouseDown: event => event.preventDefault(),
|
|
196
|
+
onClick: () => exec(item.cmd),
|
|
197
|
+
title: item.label,
|
|
198
|
+
"aria-pressed": activeToolMap[item.cmd] || false
|
|
199
|
+
}, item.icon))), (showHeading || showFontSize || showColor) && /*#__PURE__*/React.createElement("div", {
|
|
200
|
+
className: "toolbar-group"
|
|
201
|
+
}, showHeading && /*#__PURE__*/React.createElement("label", {
|
|
202
|
+
className: "toolbar-label"
|
|
203
|
+
}, "Heading", /*#__PURE__*/React.createElement("select", {
|
|
204
|
+
value: heading,
|
|
205
|
+
onChange: event => applyHeading(event.target.value),
|
|
206
|
+
className: "toolbar-select"
|
|
207
|
+
}, /*#__PURE__*/React.createElement("option", {
|
|
208
|
+
value: "p"
|
|
209
|
+
}, "Paragraph"), /*#__PURE__*/React.createElement("option", {
|
|
210
|
+
value: "h1"
|
|
211
|
+
}, "Heading 1"), /*#__PURE__*/React.createElement("option", {
|
|
212
|
+
value: "h2"
|
|
213
|
+
}, "Heading 2"), /*#__PURE__*/React.createElement("option", {
|
|
214
|
+
value: "h3"
|
|
215
|
+
}, "Heading 3"))), showFontSize && /*#__PURE__*/React.createElement("label", {
|
|
216
|
+
className: "toolbar-label"
|
|
217
|
+
}, "Size", /*#__PURE__*/React.createElement("select", {
|
|
218
|
+
value: fontSize,
|
|
219
|
+
onChange: event => applyFontSize(event.target.value),
|
|
220
|
+
className: "toolbar-select"
|
|
221
|
+
}, /*#__PURE__*/React.createElement("option", {
|
|
222
|
+
value: "14"
|
|
223
|
+
}, "14px"), /*#__PURE__*/React.createElement("option", {
|
|
224
|
+
value: "16"
|
|
225
|
+
}, "16px"), /*#__PURE__*/React.createElement("option", {
|
|
226
|
+
value: "18"
|
|
227
|
+
}, "18px"), /*#__PURE__*/React.createElement("option", {
|
|
228
|
+
value: "22"
|
|
229
|
+
}, "22px"), /*#__PURE__*/React.createElement("option", {
|
|
230
|
+
value: "28"
|
|
231
|
+
}, "28px"))), showColor && /*#__PURE__*/React.createElement("label", {
|
|
232
|
+
className: "toolbar-label color-label"
|
|
233
|
+
}, "Color", /*#__PURE__*/React.createElement("input", {
|
|
234
|
+
type: "color",
|
|
235
|
+
className: "toolbar-color",
|
|
236
|
+
value: textColor,
|
|
237
|
+
onChange: event => applyTextColor(event.target.value),
|
|
238
|
+
"aria-label": "Text color"
|
|
239
|
+
}))), (showLink || showUndoRedo || showClear) && /*#__PURE__*/React.createElement("div", {
|
|
240
|
+
className: "toolbar-group"
|
|
241
|
+
}, showLink && /*#__PURE__*/React.createElement("button", {
|
|
242
|
+
type: "button",
|
|
243
|
+
className: "toolbar-btn",
|
|
244
|
+
onClick: insertLink
|
|
245
|
+
}, "Link"), showUndoRedo && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
|
|
246
|
+
type: "button",
|
|
247
|
+
className: "toolbar-btn",
|
|
248
|
+
onClick: () => exec("undo")
|
|
249
|
+
}, "Undo"), /*#__PURE__*/React.createElement("button", {
|
|
250
|
+
type: "button",
|
|
251
|
+
className: "toolbar-btn",
|
|
252
|
+
onClick: () => exec("redo")
|
|
253
|
+
}, "Redo")), showClear && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
|
|
254
|
+
type: "button",
|
|
255
|
+
className: "toolbar-btn",
|
|
256
|
+
onClick: removeFormat
|
|
257
|
+
}, "Clear format"), /*#__PURE__*/React.createElement("button", {
|
|
258
|
+
type: "button",
|
|
259
|
+
className: "toolbar-btn danger",
|
|
260
|
+
onClick: clearAll
|
|
261
|
+
}, "Clear all"))), showPlainPaste && /*#__PURE__*/React.createElement("div", {
|
|
262
|
+
className: "toolbar-group toggle"
|
|
263
|
+
}, /*#__PURE__*/React.createElement("label", {
|
|
264
|
+
className: "toggle-row"
|
|
265
|
+
}, /*#__PURE__*/React.createElement("input", {
|
|
266
|
+
type: "checkbox",
|
|
267
|
+
checked: plainPaste,
|
|
268
|
+
onChange: event => setPlainPaste(event.target.checked)
|
|
269
|
+
}), "Paste as plain text"))), /*#__PURE__*/React.createElement("div", {
|
|
270
|
+
className: "editor-area"
|
|
271
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
272
|
+
ref: editorRef,
|
|
273
|
+
className: "editor-surface",
|
|
274
|
+
contentEditable: true,
|
|
275
|
+
onInput: onInput,
|
|
276
|
+
onPaste: onPaste,
|
|
277
|
+
onKeyUp: updateToolbarState,
|
|
278
|
+
onMouseUp: updateToolbarState,
|
|
279
|
+
suppressContentEditableWarning: true,
|
|
280
|
+
spellCheck: true
|
|
281
|
+
})), (showStats || showCopyHtml) && /*#__PURE__*/React.createElement("footer", {
|
|
282
|
+
className: "editor-footer"
|
|
283
|
+
}, showStats && /*#__PURE__*/React.createElement("div", {
|
|
284
|
+
className: "footer-stats"
|
|
285
|
+
}, /*#__PURE__*/React.createElement("span", null, stats.words, " words"), /*#__PURE__*/React.createElement("span", null, stats.chars, " characters"), /*#__PURE__*/React.createElement("span", null, selectionText ? `${selectionText.length} selected` : "No selection")), showCopyHtml && /*#__PURE__*/React.createElement("div", {
|
|
286
|
+
className: "footer-actions"
|
|
287
|
+
}, /*#__PURE__*/React.createElement("button", {
|
|
288
|
+
type: "button",
|
|
289
|
+
className: "toolbar-btn",
|
|
290
|
+
onClick: exportHtml
|
|
291
|
+
}, "Copy HTML"))), showLiveHtml && /*#__PURE__*/React.createElement("aside", {
|
|
292
|
+
className: "editor-preview"
|
|
293
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
294
|
+
className: "preview-header"
|
|
295
|
+
}, "Live HTML"), /*#__PURE__*/React.createElement("pre", {
|
|
296
|
+
className: "preview-code"
|
|
297
|
+
}, html)));
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
// src/index.js
|
|
301
|
+
|
|
302
|
+
module.exports = Editor;
|
|
303
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../src/components/Editor.jsx","../src/index.js"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\r\n\r\nconst DEFAULT_HTML = `\r\n\t<h1>Welcome</h1>\r\n\t<p>This is a lightweight WYSIWYG editor built without external libraries.</p>\r\n\t<ul>\r\n\t\t<li>Edit text directly</li>\r\n\t\t<li>Use the toolbar for formatting</li>\r\n\t\t<li>Copy, paste, and export HTML</li>\r\n\t</ul>\r\n`;\r\n\r\nconst COMMANDS = [\r\n\t{ cmd: \"bold\", label: \"Bold\", icon: \"B\" },\r\n\t{ cmd: \"italic\", label: \"Italic\", icon: \"I\" },\r\n\t{ cmd: \"underline\", label: \"Underline\", icon: \"U\" },\r\n\t{ cmd: \"strikeThrough\", label: \"Strike\", icon: \"S\" },\r\n\t{ cmd: \"insertUnorderedList\", label: \"Bullets\", icon: \"•\" },\r\n\t{ cmd: \"insertOrderedList\", label: \"Numbered\", icon: \"1.\" },\r\n\t{ cmd: \"justifyLeft\", label: \"Left\", icon: \"⟸\" },\r\n\t{ cmd: \"justifyCenter\", label: \"Center\", icon: \"⇔\" },\r\n\t{ cmd: \"justifyRight\", label: \"Right\", icon: \"⟹\" },\r\n];\r\n\r\nexport default function Editor({\r\n\ttheme = \"dark\",\r\n\ttools = COMMANDS.map((item) => item.cmd),\r\n\tshowHeading = true,\r\n\tshowFontSize = true,\r\n\tshowLink = true,\r\n\tshowUndoRedo = true,\r\n\tshowClear = true,\r\n\tshowPlainPaste = true,\r\n\tshowColor = true,\r\n\tshowLiveHtml = true,\r\n\tshowStats = true,\r\n\tshowCopyHtml = true,\r\n\tonChange = () => {},\r\n}) {\r\n\tconst editorRef = useRef(null);\r\n\tconst [html, setHtml] = useState(\"\");\r\n\tconst [plainPaste, setPlainPaste] = useState(true);\r\n\tconst [selectionText, setSelectionText] = useState(\"\");\r\n\tconst [heading, setHeading] = useState(\"p\");\r\n\tconst [fontSize, setFontSize] = useState(\"16\");\r\n\tconst [textColor, setTextColor] = useState(\"#1f2937\");\r\n\tconst [activeToolMap, setActiveToolMap] = useState({});\r\n\r\n\tuseEffect(() => {\r\n\t\tif (editorRef.current) {\r\n\t\t\teditorRef.current.innerHTML = DEFAULT_HTML;\r\n\t\t\tsetHtml(editorRef.current.innerHTML);\r\n\t\t}\r\n\t}, []);\r\n\r\n\tconst stats = useMemo(() => {\r\n\t\tconst text = editorRef.current?.innerText || \"\";\r\n\t\tconst words = text.trim() ? text.trim().split(/\\s+/).length : 0;\r\n\t\treturn {\r\n\t\t\twords,\r\n\t\t\tchars: text.length,\r\n\t\t};\r\n\t}, []);\r\n\r\n\tconst exec = (cmd, value = null) => {\r\n\t\teditorRef.current?.focus();\r\n\t\tdocument.execCommand(cmd, false, value);\r\n\t\tconst nextHtml = editorRef.current?.innerHTML || \"\";\r\n\t\tsetHtml(nextHtml);\r\n\t\tonChange({ html: nextHtml, text: editorRef.current?.innerText || \"\" });\r\n\t\tupdateToolbarState();\r\n\t};\r\n\r\n\tconst applyHeading = (next) => {\r\n\t\tsetHeading(next);\r\n\t\tif (next === \"p\") {\r\n\t\t\texec(\"formatBlock\", \"P\");\r\n\t\t\treturn;\r\n\t\t}\r\n\t\texec(\"formatBlock\", next.toUpperCase());\r\n\t};\r\n\r\n\tconst applyFontSize = (next) => {\r\n\t\tsetFontSize(next);\r\n\t\texec(\"fontSize\", \"7\");\r\n\t\tconst fontElements = editorRef.current?.querySelectorAll(\"font[size='7']\") || [];\r\n\t\tfontElements.forEach((el) => {\r\n\t\t\tel.removeAttribute(\"size\");\r\n\t\t\tel.style.fontSize = `${next}px`;\r\n\t\t});\r\n\t\tsetHtml(editorRef.current?.innerHTML || \"\");\r\n\t\tupdateToolbarState();\r\n\t};\r\n\r\n\tconst applyTextColor = (next) => {\r\n\t\tsetTextColor(next);\r\n\t\texec(\"foreColor\", next);\r\n\t};\r\n\r\n\tconst insertLink = () => {\r\n\t\tconst url = window.prompt(\"Enter URL\", \"https://\");\r\n\t\tif (!url) return;\r\n\t\texec(\"createLink\", url);\r\n\t};\r\n\r\n\tconst removeFormat = () => exec(\"removeFormat\");\r\n\r\n\tconst clearAll = () => {\r\n\t\tif (!editorRef.current) return;\r\n\t\teditorRef.current.innerHTML = \"<p></p>\";\r\n\t\tsetHtml(editorRef.current.innerHTML);\r\n\t\tonChange({ html: editorRef.current.innerHTML, text: editorRef.current.innerText || \"\" });\r\n\t\tupdateToolbarState();\r\n\t};\r\n\r\n\tconst onInput = () => {\r\n\t\tconst nextHtml = editorRef.current?.innerHTML || \"\";\r\n\t\tsetHtml(nextHtml);\r\n\t\tonChange({ html: nextHtml, text: editorRef.current?.innerText || \"\" });\r\n\t\tupdateToolbarState();\r\n\t};\r\n\r\n\tconst onPaste = (event) => {\r\n\t\tif (!plainPaste) return;\r\n\t\tevent.preventDefault();\r\n\t\tconst text = event.clipboardData.getData(\"text/plain\");\r\n\t\tdocument.execCommand(\"insertText\", false, text);\r\n\t};\r\n\r\n\tconst updateToolbarState = useCallback(() => {\r\n\t\tconst selection = document.getSelection();\r\n\t\tif (!selection || selection.rangeCount === 0 || !editorRef.current) return;\r\n\t\tconst anchorNode = selection.anchorNode;\r\n\t\tconst isInsideEditor = anchorNode && editorRef.current.contains(anchorNode);\r\n\t\tif (!isInsideEditor) {\r\n\t\t\tsetSelectionText(\"\");\r\n\t\t\tsetActiveToolMap({});\r\n\t\t\treturn;\r\n\t\t}\r\n\t\tsetSelectionText(selection.toString());\r\n\t\tconst nextActive = {};\r\n\t\tCOMMANDS.forEach((item) => {\r\n\t\t\ttry {\r\n\t\t\t\tnextActive[item.cmd] = document.queryCommandState(item.cmd);\r\n\t\t\t} catch {\r\n\t\t\t\tnextActive[item.cmd] = false;\r\n\t\t\t}\r\n\t\t});\r\n\t\tsetActiveToolMap(nextActive);\r\n\t}, []);\r\n\r\n\tuseEffect(() => {\r\n\t\tdocument.addEventListener(\"selectionchange\", updateToolbarState);\r\n\t\treturn () => document.removeEventListener(\"selectionchange\", updateToolbarState);\r\n\t}, [updateToolbarState]);\r\n\r\n\tconst exportHtml = async () => {\r\n\t\tconst payload = editorRef.current?.innerHTML || \"\";\r\n\t\tawait navigator.clipboard.writeText(payload);\r\n\t\talert(\"HTML copied to clipboard.\");\r\n\t};\r\n\r\n\tconst activeCommands = useMemo(\r\n\t\t() => COMMANDS.filter((item) => tools.includes(item.cmd)),\r\n\t\t[tools]\r\n\t);\r\n\r\n\treturn (\r\n\t\t<section\r\n\t\t\tclassName={`editor-root theme-${theme}${showLiveHtml ? \"\" : \" no-preview\"}`}\r\n\t\t\tdata-theme={theme}\r\n\t\t>\r\n\t\t\t<div className=\"toolbar\">\r\n\t\t\t\t{activeCommands.length > 0 && (\r\n\t\t\t\t\t<div className=\"toolbar-group\">\r\n\t\t\t\t\t\t{activeCommands.map((item) => (\r\n\t\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t\tkey={item.cmd}\r\n\t\t\t\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\t\t\t\tclassName={`toolbar-btn${activeToolMap[item.cmd] ? \" active\" : \"\"}`}\r\n\t\t\t\t\t\t\t\tonMouseDown={(event) => event.preventDefault()}\r\n\t\t\t\t\t\t\t\tonClick={() => exec(item.cmd)}\r\n\t\t\t\t\t\t\t\ttitle={item.label}\r\n\t\t\t\t\t\t\t\taria-pressed={activeToolMap[item.cmd] || false}\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t{item.icon}\r\n\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t))}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t)}\r\n\t\t\t\t{(showHeading || showFontSize || showColor) && (\r\n\t\t\t\t\t<div className=\"toolbar-group\">\r\n\t\t\t\t\t\t{showHeading && (\r\n\t\t\t\t\t\t\t<label className=\"toolbar-label\">\r\n\t\t\t\t\t\t\t\tHeading\r\n\t\t\t\t\t\t\t\t<select\r\n\t\t\t\t\t\t\t\t\tvalue={heading}\r\n\t\t\t\t\t\t\t\t\tonChange={(event) => applyHeading(event.target.value)}\r\n\t\t\t\t\t\t\t\t\tclassName=\"toolbar-select\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<option value=\"p\">Paragraph</option>\r\n\t\t\t\t\t\t\t\t\t<option value=\"h1\">Heading 1</option>\r\n\t\t\t\t\t\t\t\t\t<option value=\"h2\">Heading 2</option>\r\n\t\t\t\t\t\t\t\t\t<option value=\"h3\">Heading 3</option>\r\n\t\t\t\t\t\t\t\t</select>\r\n\t\t\t\t\t\t\t</label>\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t{showFontSize && (\r\n\t\t\t\t\t\t\t<label className=\"toolbar-label\">\r\n\t\t\t\t\t\t\t\tSize\r\n\t\t\t\t\t\t\t\t<select\r\n\t\t\t\t\t\t\t\t\tvalue={fontSize}\r\n\t\t\t\t\t\t\t\t\tonChange={(event) => applyFontSize(event.target.value)}\r\n\t\t\t\t\t\t\t\t\tclassName=\"toolbar-select\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<option value=\"14\">14px</option>\r\n\t\t\t\t\t\t\t\t\t<option value=\"16\">16px</option>\r\n\t\t\t\t\t\t\t\t\t<option value=\"18\">18px</option>\r\n\t\t\t\t\t\t\t\t\t<option value=\"22\">22px</option>\r\n\t\t\t\t\t\t\t\t\t<option value=\"28\">28px</option>\r\n\t\t\t\t\t\t\t\t</select>\r\n\t\t\t\t\t\t\t</label>\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t{showColor && (\r\n\t\t\t\t\t\t\t<label className=\"toolbar-label color-label\">\r\n\t\t\t\t\t\t\t\tColor\r\n\t\t\t\t\t\t\t\t<input\r\n\t\t\t\t\t\t\t\t\ttype=\"color\"\r\n\t\t\t\t\t\t\t\t\tclassName=\"toolbar-color\"\r\n\t\t\t\t\t\t\t\t\tvalue={textColor}\r\n\t\t\t\t\t\t\t\t\tonChange={(event) => applyTextColor(event.target.value)}\r\n\t\t\t\t\t\t\t\t\taria-label=\"Text color\"\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t</label>\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t)}\r\n\t\t\t\t{(showLink || showUndoRedo || showClear) && (\r\n\t\t\t\t\t<div className=\"toolbar-group\">\r\n\t\t\t\t\t\t{showLink && (\r\n\t\t\t\t\t\t\t<button type=\"button\" className=\"toolbar-btn\" onClick={insertLink}>\r\n\t\t\t\t\t\t\t\tLink\r\n\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t{showUndoRedo && (\r\n\t\t\t\t\t\t\t<>\r\n\t\t\t\t\t\t\t\t<button type=\"button\" className=\"toolbar-btn\" onClick={() => exec(\"undo\")}>\r\n\t\t\t\t\t\t\t\t\tUndo\r\n\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t<button type=\"button\" className=\"toolbar-btn\" onClick={() => exec(\"redo\")}>\r\n\t\t\t\t\t\t\t\t\tRedo\r\n\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t</>\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t{showClear && (\r\n\t\t\t\t\t\t\t<>\r\n\t\t\t\t\t\t\t\t<button type=\"button\" className=\"toolbar-btn\" onClick={removeFormat}>\r\n\t\t\t\t\t\t\t\t\tClear format\r\n\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t<button type=\"button\" className=\"toolbar-btn danger\" onClick={clearAll}>\r\n\t\t\t\t\t\t\t\t\tClear all\r\n\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t</>\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t)}\r\n\t\t\t\t{showPlainPaste && (\r\n\t\t\t\t\t<div className=\"toolbar-group toggle\">\r\n\t\t\t\t\t\t<label className=\"toggle-row\">\r\n\t\t\t\t\t\t\t<input\r\n\t\t\t\t\t\t\t\ttype=\"checkbox\"\r\n\t\t\t\t\t\t\t\tchecked={plainPaste}\r\n\t\t\t\t\t\t\t\tonChange={(event) => setPlainPaste(event.target.checked)}\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\tPaste as plain text\r\n\t\t\t\t\t\t</label>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t)}\r\n\t\t\t</div>\r\n\r\n\t\t\t<div className=\"editor-area\">\r\n\t\t\t\t<div\r\n\t\t\t\t\tref={editorRef}\r\n\t\t\t\t\tclassName=\"editor-surface\"\r\n\t\t\t\t\tcontentEditable\r\n\t\t\t\t\tonInput={onInput}\r\n\t\t\t\t\tonPaste={onPaste}\r\n\t\t\t\t\tonKeyUp={updateToolbarState}\r\n\t\t\t\t\tonMouseUp={updateToolbarState}\r\n\t\t\t\t\tsuppressContentEditableWarning\r\n\t\t\t\t\tspellCheck\r\n\t\t\t\t/>\r\n\t\t\t</div>\r\n\r\n\t\t\t{(showStats || showCopyHtml) && (\r\n\t\t\t\t<footer className=\"editor-footer\">\r\n\t\t\t\t\t{showStats && (\r\n\t\t\t\t\t\t<div className=\"footer-stats\">\r\n\t\t\t\t\t\t\t<span>{stats.words} words</span>\r\n\t\t\t\t\t\t\t<span>{stats.chars} characters</span>\r\n\t\t\t\t\t\t\t<span>{selectionText ? `${selectionText.length} selected` : \"No selection\"}</span>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t)}\r\n\t\t\t\t\t{showCopyHtml && (\r\n\t\t\t\t\t\t<div className=\"footer-actions\">\r\n\t\t\t\t\t\t\t<button type=\"button\" className=\"toolbar-btn\" onClick={exportHtml}>\r\n\t\t\t\t\t\t\t\tCopy HTML\r\n\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t)}\r\n\t\t\t\t</footer>\r\n\t\t\t)}\r\n\r\n\t\t\t{showLiveHtml && (\r\n\t\t\t\t<aside className=\"editor-preview\">\r\n\t\t\t\t\t<div className=\"preview-header\">Live HTML</div>\r\n\t\t\t\t\t<pre className=\"preview-code\">{html}</pre>\r\n\t\t\t\t</aside>\r\n\t\t\t)}\r\n\t\t</section>\r\n\t);\r\n}\r\n","// src/index.js\r\nimport Editor from \"./components/Editor.jsx\";\r\nimport \"./index.css\";\r\n\r\n// Export default only to avoid mixing named and default exports\r\nexport default Editor;\r\n"],"names":["DEFAULT_HTML","COMMANDS","cmd","label","icon","Editor","theme","tools","map","item","showHeading","showFontSize","showLink","showUndoRedo","showClear","showPlainPaste","showColor","showLiveHtml","showStats","showCopyHtml","onChange","editorRef","useRef","html","setHtml","useState","plainPaste","setPlainPaste","selectionText","setSelectionText","heading","setHeading","fontSize","setFontSize","textColor","setTextColor","activeToolMap","setActiveToolMap","useEffect","current","innerHTML","stats","useMemo","text","innerText","words","trim","split","length","chars","exec","value","focus","document","execCommand","nextHtml","updateToolbarState","applyHeading","next","toUpperCase","applyFontSize","fontElements","querySelectorAll","forEach","el","removeAttribute","style","applyTextColor","insertLink","url","window","prompt","removeFormat","clearAll","onInput","onPaste","event","preventDefault","clipboardData","getData","useCallback","selection","getSelection","rangeCount","anchorNode","isInsideEditor","contains","toString","nextActive","queryCommandState","addEventListener","removeEventListener","exportHtml","payload","navigator","clipboard","writeText","alert","activeCommands","filter","includes","React","createElement","className","key","type","onMouseDown","onClick","title","target","Fragment","checked","ref","contentEditable","onKeyUp","onMouseUp","suppressContentEditableWarning","spellCheck"],"mappings":"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"}
|
package/dist/index.css
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
.app-shell{background:radial-gradient(circle at top,rgba(99,102,241,.12),transparent 45%),#0b0f19;min-height:100vh}.app-header,.app-shell{display:flex;flex-direction:column}.app-header{gap:6px;padding:24px 32px 12px}.app-title{font-size:24px;font-weight:600}.app-subtitle{color:rgba(226,232,240,.68);font-size:14px}.app-main{flex:1;padding:0 32px 32px}.editor-root{--editor-bg:rgba(15,23,42,.78);--editor-panel:rgba(15,23,42,.85);--editor-border:rgba(148,163,184,.12);--editor-text:#f8fafc;--editor-muted:rgba(226,232,240,.65);--editor-btn-bg:rgba(30,41,59,.65);--editor-btn-border:rgba(148,163,184,.2);--editor-btn-hover:rgba(99,102,241,.7);--editor-code-bg:rgba(2,6,23,.8);display:grid;gap:16px;grid-template-columns:1.35fr .65fr}.editor-root.theme-light{--editor-bg:hsla(0,0%,100%,.9);--editor-panel:rgba(248,250,252,.95);--editor-border:rgba(15,23,42,.12);--editor-text:#0f172a;--editor-muted:rgba(15,23,42,.6);--editor-btn-bg:hsla(0,0%,100%,.9);--editor-btn-border:rgba(15,23,42,.2);--editor-btn-hover:rgba(79,70,229,.7);--editor-code-bg:rgba(226,232,240,.8)}.editor-root.no-preview{grid-template-columns:1fr}.toolbar{backdrop-filter:blur(8px);background:var(--editor-panel);border:1px solid var(--editor-border);border-radius:2px;gap:10px;grid-column:1/-1;padding:10px}.toolbar,.toolbar-group{display:flex;flex-wrap:wrap}.toolbar-group{align-items:center;gap:8px}.toolbar-group.toggle{margin-left:auto}.toolbar-btn{background:var(--editor-btn-bg);border:1px solid var(--editor-btn-border);border-radius:2px;color:var(--editor-text);cursor:pointer;font-size:13px;padding:8px 12px;transition:all .15s ease}.toolbar-btn:hover{border-color:var(--editor-btn-hover);transform:translateY(-1px)}.toolbar-btn.active{border-color:var(--editor-btn-hover);box-shadow:0 0 0 2px rgba(99,102,241,.18)}.toolbar-btn.danger{border-color:hsla(0,91%,71%,.45);color:#fecaca}.toolbar-label{align-items:center;color:var(--editor-muted);display:flex;font-size:12px;gap:6px}.toolbar-select{background:var(--editor-panel);border:1px solid var(--editor-btn-border);border-radius:2px;color:var(--editor-text);padding:6px 10px}.color-label{gap:10px}.toolbar-color{background:transparent;border:none;cursor:pointer;height:30px;padding:0;width:34px}.toggle-row{align-items:center;color:var(--editor-muted);display:flex;font-size:12px;gap:8px}.editor-area{background:var(--editor-bg);border:1px solid var(--editor-border);border-radius:2px;min-height:520px;padding:10px}.editor-surface{color:var(--editor-text);font-size:16px;line-height:1.7;min-height:460px;outline:none}.editor-surface h1,.editor-surface h2,.editor-surface h3{margin-top:1.4em}.editor-footer{align-items:center;color:var(--editor-muted);display:flex;font-size:12px;grid-column:1/2;justify-content:space-between;padding:12px 6px 0}.editor-root.no-preview .editor-footer{grid-column:1/-1}.footer-stats{display:flex;gap:16px}.editor-preview{background:var(--editor-bg);border:1px solid var(--editor-border);border-radius:2px;display:flex;flex-direction:column;grid-column:2/3;grid-row:2/4;min-height:520px;padding:16px}.preview-header{color:var(--editor-muted);font-size:13px;margin-bottom:12px}.preview-code{background:var(--editor-code-bg);border-radius:2px;color:var(--editor-text);flex:1;font-family:JetBrains Mono,Fira Code,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:12px;margin:0;overflow:auto;padding:12px}@media (max-width:1024px){.editor-root{grid-template-columns:1fr}.editor-preview{grid-row:auto}.editor-footer,.editor-preview{grid-column:1/-1}}
|
|
2
|
+
/*# sourceMappingURL=index.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["index.css"],"names":[],"mappings":"AAEA,WAIE,sFACS,CAJT,gBAKF,CAEA,uBANE,YAAa,CACb,qBAUF,CALA,YAIE,OAAQ,CAHR,sBAIF,CAEA,WACE,cAAe,CACf,eACF,CAEA,cAEE,2BAAgC,CADhC,cAEF,CAEA,UACE,MAAO,CACP,mBACF,CAEA,aACE,8BAAmC,CACnC,iCAAsC,CACtC,qCAA0C,CAC1C,qBAAsB,CACtB,oCAAyC,CACzC,kCAAuC,CACvC,wCAA6C,CAC7C,sCAA2C,CAC3C,gCAAqC,CACrC,YAAa,CAEb,QAAS,CADT,kCAEF,CAEA,yBACE,8BAAqC,CACrC,oCAAyC,CACzC,kCAAuC,CACvC,qBAAsB,CACtB,gCAAqC,CACrC,kCAAyC,CACzC,qCAA0C,CAC1C,qCAA0C,CAC1C,qCACF,CAEA,wBACE,yBACF,CAEA,SASE,yBAA0B,CAH1B,8BAA+B,CAC/B,qCAAsC,CACtC,iBAAkB,CAJlB,QAAS,CAHT,gBAAmB,CAInB,YAKF,CAEA,wBAVE,YAAa,CACb,cAcF,CALA,eAEE,kBAAmB,CACnB,OAEF,CAEA,sBACE,gBACF,CAEA,aAEE,+BAAgC,CADhC,yCAA0C,CAI1C,iBAAkB,CAFlB,wBAAyB,CAGzB,cAAe,CACf,cAAe,CAHf,gBAAiB,CAIjB,wBACF,CAEA,mBACE,oCAAqC,CACrC,0BACF,CAEA,oBACE,oCAAqC,CACrC,yCACF,CAEA,oBACE,gCAAuC,CACvC,aACF,CAEA,eAEE,kBAAmB,CAGnB,yBAA0B,CAJ1B,YAAa,CAGb,cAAe,CADf,OAGF,CAEA,gBACE,8BAA+B,CAE/B,yCAA0C,CAC1C,iBAAkB,CAFlB,wBAAyB,CAGzB,gBACF,CAEA,aACE,QACF,CAEA,eAKE,sBAAuB,CAFvB,WAAY,CAGZ,cAAe,CAJf,WAAY,CAEZ,SAAU,CAHV,UAMF,CAEA,YAGE,kBAAmB,CAEnB,yBAA0B,CAJ1B,YAAa,CAGb,cAAe,CAFf,OAIF,CAEA,aACE,2BAA4B,CAC5B,qCAAsC,CACtC,iBAAkB,CAElB,gBAAiB,CADjB,YAEF,CAEA,gBAGE,wBAAyB,CACzB,cAAe,CACf,eAAgB,CAJhB,gBAAiB,CACjB,YAIF,CAEA,yDAGE,gBACF,CAEA,eAGE,kBAAmB,CAGnB,yBAA0B,CAJ1B,YAAa,CAKb,cAAe,CANf,eAAkB,CAGlB,6BAA8B,CAC9B,kBAGF,CAEA,uCACE,gBACF,CAEA,cACE,YAAa,CACb,QACF,CAEA,gBAGE,2BAA4B,CAC5B,qCAAsC,CACtC,iBAAkB,CAElB,YAAa,CACb,qBAAsB,CAPtB,eAAkB,CAClB,YAAe,CAOf,gBAAiB,CAHjB,YAIF,CAEA,gBAEE,yBAA0B,CAD1B,cAAe,CAEf,kBACF,CAEA,cAOE,gCAAiC,CAEjC,iBAAkB,CAHlB,wBAAyB,CALzB,MAAO,CAEP,4HAC6C,CAC7C,cAAe,CAHf,QAAS,CAQT,aAAc,CAFd,YAGF,CAEA,0BACE,aACE,yBACF,CAEA,gBAEE,aACF,CAEA,+BAJE,gBAMF,CACF","file":"index.css","sourcesContent":["\r\n\r\n.app-shell {\r\n min-height: 100vh;\r\n display: flex;\r\n flex-direction: column;\r\n background: radial-gradient(circle at top, rgba(99, 102, 241, 0.12), transparent 45%),\r\n #0b0f19;\r\n}\r\n\r\n.app-header {\r\n padding: 24px 32px 12px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 6px;\r\n}\r\n\r\n.app-title {\r\n font-size: 24px;\r\n font-weight: 600;\r\n}\r\n\r\n.app-subtitle {\r\n font-size: 14px;\r\n color: rgba(226, 232, 240, 0.68);\r\n}\r\n\r\n.app-main {\r\n flex: 1;\r\n padding: 0 32px 32px;\r\n}\r\n\r\n.editor-root {\r\n --editor-bg: rgba(15, 23, 42, 0.78);\r\n --editor-panel: rgba(15, 23, 42, 0.85);\r\n --editor-border: rgba(148, 163, 184, 0.12);\r\n --editor-text: #f8fafc;\r\n --editor-muted: rgba(226, 232, 240, 0.65);\r\n --editor-btn-bg: rgba(30, 41, 59, 0.65);\r\n --editor-btn-border: rgba(148, 163, 184, 0.2);\r\n --editor-btn-hover: rgba(99, 102, 241, 0.7);\r\n --editor-code-bg: rgba(2, 6, 23, 0.8);\r\n display: grid;\r\n grid-template-columns: 1.35fr 0.65fr;\r\n gap: 16px;\r\n}\r\n\r\n.editor-root.theme-light {\r\n --editor-bg: rgba(255, 255, 255, 0.9);\r\n --editor-panel: rgba(248, 250, 252, 0.95);\r\n --editor-border: rgba(15, 23, 42, 0.12);\r\n --editor-text: #0f172a;\r\n --editor-muted: rgba(15, 23, 42, 0.6);\r\n --editor-btn-bg: rgba(255, 255, 255, 0.9);\r\n --editor-btn-border: rgba(15, 23, 42, 0.2);\r\n --editor-btn-hover: rgba(79, 70, 229, 0.7);\r\n --editor-code-bg: rgba(226, 232, 240, 0.8);\r\n}\r\n\r\n.editor-root.no-preview {\r\n grid-template-columns: 1fr;\r\n}\r\n\r\n.toolbar {\r\n grid-column: 1 / -1;\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 10px;\r\n padding: 10px;\r\n background: var(--editor-panel);\r\n border: 1px solid var(--editor-border);\r\n border-radius: 2px;\r\n backdrop-filter: blur(8px);\r\n}\r\n\r\n.toolbar-group {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n flex-wrap: wrap;\r\n}\r\n\r\n.toolbar-group.toggle {\r\n margin-left: auto;\r\n}\r\n\r\n.toolbar-btn {\r\n border: 1px solid var(--editor-btn-border);\r\n background: var(--editor-btn-bg);\r\n color: var(--editor-text);\r\n padding: 8px 12px;\r\n border-radius: 2px;\r\n cursor: pointer;\r\n font-size: 13px;\r\n transition: all 0.15s ease;\r\n}\r\n\r\n.toolbar-btn:hover {\r\n border-color: var(--editor-btn-hover);\r\n transform: translateY(-1px);\r\n}\r\n\r\n.toolbar-btn.active {\r\n border-color: var(--editor-btn-hover);\r\n box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.18);\r\n}\r\n\r\n.toolbar-btn.danger {\r\n border-color: rgba(248, 113, 113, 0.45);\r\n color: #fecaca;\r\n}\r\n\r\n.toolbar-label {\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n font-size: 12px;\r\n color: var(--editor-muted);\r\n}\r\n\r\n.toolbar-select {\r\n background: var(--editor-panel);\r\n color: var(--editor-text);\r\n border: 1px solid var(--editor-btn-border);\r\n border-radius: 2px;\r\n padding: 6px 10px;\r\n}\r\n\r\n.color-label {\r\n gap: 10px;\r\n}\r\n\r\n.toolbar-color {\r\n width: 34px;\r\n height: 30px;\r\n border: none;\r\n padding: 0;\r\n background: transparent;\r\n cursor: pointer;\r\n}\r\n\r\n.toggle-row {\r\n display: flex;\r\n gap: 8px;\r\n align-items: center;\r\n font-size: 12px;\r\n color: var(--editor-muted);\r\n}\r\n\r\n.editor-area {\r\n background: var(--editor-bg);\r\n border: 1px solid var(--editor-border);\r\n border-radius: 2px;\r\n padding: 10px;\r\n min-height: 520px;\r\n}\r\n\r\n.editor-surface {\r\n min-height: 460px;\r\n outline: none;\r\n color: var(--editor-text);\r\n font-size: 16px;\r\n line-height: 1.7;\r\n}\r\n\r\n.editor-surface h1,\r\n.editor-surface h2,\r\n.editor-surface h3 {\r\n margin-top: 1.4em;\r\n}\r\n\r\n.editor-footer {\r\n grid-column: 1 / 2;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 12px 6px 0;\r\n color: var(--editor-muted);\r\n font-size: 12px;\r\n}\r\n\r\n.editor-root.no-preview .editor-footer {\r\n grid-column: 1 / -1;\r\n}\r\n\r\n.footer-stats {\r\n display: flex;\r\n gap: 16px;\r\n}\r\n\r\n.editor-preview {\r\n grid-column: 2 / 3;\r\n grid-row: 2 / 4;\r\n background: var(--editor-bg);\r\n border: 1px solid var(--editor-border);\r\n border-radius: 2px;\r\n padding: 16px;\r\n display: flex;\r\n flex-direction: column;\r\n min-height: 520px;\r\n}\r\n\r\n.preview-header {\r\n font-size: 13px;\r\n color: var(--editor-muted);\r\n margin-bottom: 12px;\r\n}\r\n\r\n.preview-code {\r\n flex: 1;\r\n margin: 0;\r\n font-family: \"JetBrains Mono\", \"Fira Code\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,\r\n \"Liberation Mono\", \"Courier New\", monospace;\r\n font-size: 12px;\r\n color: var(--editor-text);\r\n background: var(--editor-code-bg);\r\n padding: 12px;\r\n border-radius: 2px;\r\n overflow: auto;\r\n}\r\n\r\n@media (max-width: 1024px) {\r\n .editor-root {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .editor-preview {\r\n grid-column: 1 / -1;\r\n grid-row: auto;\r\n }\r\n\r\n .editor-footer {\r\n grid-column: 1 / -1;\r\n }\r\n}\r\n"]}
|