@rg-dev/tinymce-helpers 1.0.8 → 1.0.9
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/index.mjs +117 -59
- package/package.json +1 -1
package/index.mjs
CHANGED
|
@@ -51,7 +51,7 @@ import "tinymce/plugins/preview";
|
|
|
51
51
|
import "tinymce/plugins/insertdatetime";
|
|
52
52
|
|
|
53
53
|
// src/client/custom-components/mce.css?raw
|
|
54
|
-
var mce_default = ':where(.mce-content-body) {\n --editor-text: #000;\n --editor-link: #000;\n --editor-border: #
|
|
54
|
+
var mce_default = ':where(.mce-content-body) {\n --editor-text: #000;\n --editor-link: #000;\n --editor-border: #d6d6d6c9;\n --editor-table-header-text: #6e6e6e;\n --editor-table-row-even: #fafafa;\n --editor-hr: #bbb;\n}\n\n\nli::marker {\n color: var(--editor-link) !important;\n}\n\n::-webkit-scrollbar {\n width: 10px;\n}\n\n::-webkit-scrollbar-track {\n background: var(--editor-table-row-even);\n}\n\n::-webkit-scrollbar-thumb {\n background: var(--editor-link);\n border-radius: 35px;\n}\n\n @media print {\n .mce-content-body {\n --editor-text: #000;\n --editor-link: #000;\n --editor-border: #d6d6d6c9;\n --editor-table-header-text: #000;\n --editor-table-row-even: #fafafa;\n --editor-hr: #000;\n }\n\n .mce-content-body table tr:nth-child(even) {\n background: var(--editor-table-row-even) !important;\n -webkit-print-color-adjust: exact;\n print-color-adjust: exact;\n }\n\n \n .mce-content-body blockquote {\n border-inline-start: none !important;\n background: #f9f9f9 !important;\n\n color: #000 !important;\n -webkit-print-color-adjust: exact !important;\n print-color-adjust: exact !important;\n }\n\n \n\n .mce-content-body td[data-mce-selected]::after,\n .mce-content-body th[data-mce-selected]::after {\n display: none !important;\n}\n}\n\n img {\n padding-block: 7px;\n max-width: 100%;\n }\n\n\n\n .mce-content-body blockquote {\n display: flow-root;\n padding: 15px;\n border-radius: 8px;\n margin: 0px !important;\n margin-block: 20px !important;\n overflow: hidden;\n border: none !important;\n background: var(--editor-table-row-even);\n color: var(--editor-text);\n}\n\n\n\n.mce-content-body blockquote p {\n margin: 0;\n}\n\n* {\n border: 0;\n padding: 0;\n margin: 0;\n background: 0 0;\n color: inherit;\n box-sizing: border-box;\n background-repeat: no-repeat;\n background-position: 50% 50%;\n font-weight: 400;\n}\n\n:focus {\n outline: 0;\n}\n\na {\n text-decoration: none;\n cursor: pointer;\n}\n\nb,\nb *,\nstrong,\nstrong * {\n font-weight: 700;\n}\n\nol,\nul {\n list-style: none;\n}\n\npre {\n font: inherit;\n}\n\nbutton,\ninput,\ninput:not([type]),\ninput[type="button"],\ninput[type="color"],\ninput[type="date"],\ninput[type="datetime-local"],\ninput[type="datetime"],\ninput[type="email"],\ninput[type="month"],\ninput[type="number"],\ninput[type="password"],\ninput[type="reset"],\ninput[type="search"],\ninput[type="submit"],\ninput[type="tel"],\ninput[type="text"],\ninput[type="time"],\ninput[type="url"],\ninput[type="week"],\nselect,\ntextarea {\n font: inherit;\n}\n\n.mce-container textarea {\n display: inline-block !important;\n} \n\n\n.my-custom-styles{\n direction: ltr;\n }\n\n.mce-content-body {\n font-size: 28px;\n font-family: Rubik, Helvetica, Arial, sans-serif;\n padding: 0 25px 25px;\n color: var(--editor-text);\n}\n\n.mce-content-body table {\n width: 100%;\n table-layout: fixed;\n}\n\n\n\n.mce-content-body table td,\n.mce-content-body table th {\n overflow-wrap: anywhere;\n word-break: break-word;\n white-space: normal;\n}\n\n\n.mce-content-body h1 {\n font-size: 34px;\n line-height: 1.4em;\n margin: 25px 0 15px;\n}\n\n.mce-content-body h2 {\n font-size: 30px;\n line-height: 1.4em;\n margin: 25px 0 15px;\n}\n\n.mce-content-body h3 {\n font-size: 26px;\n line-height: 1.4em;\n margin: 25px 0 15px;\n}\n\n.mce-content-body h4 {\n font-size: 22px;\n line-height: 1.4em;\n margin: 25px 0 15px;\n}\n\n.mce-content-body h5 {\n font-size: 18px;\n line-height: 1.4em;\n margin: 25px 0 15px;\n}\n\n.mce-content-body h6 {\n font-size: 14px;\n line-height: 1.4em;\n margin: 25px 0 15px;\n}\n\n.mce-content-body p {\n margin: 25px 0;\n}\n\n.mce-content-body pre {\n font-family: monospace;\n}\n\n.mce-content-body ol,\n.mce-content-body ul {\n margin-left: 15px;\n list-style-position: outside;\n margin-bottom: 20px;\n}\n\n.mce-content-body ol li,\n.mce-content-body ul li {\n margin-left: 10px;\n margin-bottom: 10px;\n color: var(--editor-text);\n}\n\n.mce-content-body ul {\n list-style-type: disc;\n}\n\n.mce-content-body ol {\n list-style-type: decimal;\n}\n\n.mce-content-body a[href] {\n color: var(--editor-link);\n text-decoration: underline;\n}\n\n.mce-content-body table caption,\n.mce-content-body table td,\n.mce-content-body table th {\n padding: 15px 7px;\n font: inherit;\n}\n\n.mce-content-body table td,\n.mce-content-body table th {\n border: 1px solid var(--editor-border) !important;\n border-collapse: collapse;\n}\n\n.mce-content-body table th {\n font-weight: 400;\n color: var(--editor-table-header-text);\n background-position: 100% 100%;\n background-size: 2px 10px;\n background-repeat: no-repeat;\n}\n\n.mce-content-body table {\n width: 100%;\n border-spacing: 0;\n border-collapse: separate;\n \n}\n\n.mce-content-body table tr:nth-child(even) {\n background: var(--editor-table-row-even);\n}\n\n.mce-content-body hr {\n border-top: 2px solid var(--editor-hr);\n}';
|
|
55
55
|
|
|
56
56
|
// src/client/custom-components/tinymce-helpers.ts
|
|
57
57
|
import { isNonEmptyString } from "@rg-dev/stdlib/lib/common-env";
|
|
@@ -91,7 +91,7 @@ async function darkSkin() {
|
|
|
91
91
|
--editor-bg: #222f3e;
|
|
92
92
|
--editor-text: #e4e8ec;
|
|
93
93
|
--editor-link: #74b9ff;
|
|
94
|
-
--editor-border: #
|
|
94
|
+
--editor-border: #d6d6d624;
|
|
95
95
|
--editor-table-header-text: #b8c2cc;
|
|
96
96
|
--editor-table-header-bg: #2c3e50;
|
|
97
97
|
--editor-table-row-even: #263747;
|
|
@@ -137,6 +137,25 @@ var tinymceHelpers = class _tinymceHelpers {
|
|
|
137
137
|
if (e.key !== "Enter" || !e.shiftKey) {
|
|
138
138
|
return;
|
|
139
139
|
}
|
|
140
|
+
const node = editor.selection.getNode();
|
|
141
|
+
const blockquote = editor.dom.getParent(node, "blockquote");
|
|
142
|
+
if (blockquote) {
|
|
143
|
+
const parent = blockquote.parentNode;
|
|
144
|
+
if (parent) {
|
|
145
|
+
e.preventDefault();
|
|
146
|
+
e.stopImmediatePropagation();
|
|
147
|
+
editor.undoManager.transact(
|
|
148
|
+
() => {
|
|
149
|
+
const p = editor.dom.create("p", {}, "<br>");
|
|
150
|
+
parent.insertBefore(p, blockquote.nextSibling);
|
|
151
|
+
editor.selection.select(p, true);
|
|
152
|
+
editor.selection.collapse(true);
|
|
153
|
+
}
|
|
154
|
+
);
|
|
155
|
+
editor.nodeChanged();
|
|
156
|
+
return;
|
|
157
|
+
}
|
|
158
|
+
}
|
|
140
159
|
e.preventDefault();
|
|
141
160
|
e.stopImmediatePropagation();
|
|
142
161
|
editor.getDoc().execCommand("insertParagraph", false, void 0);
|
|
@@ -158,20 +177,23 @@ var tinymceHelpers = class _tinymceHelpers {
|
|
|
158
177
|
}
|
|
159
178
|
}
|
|
160
179
|
);
|
|
161
|
-
editor.ui.registry.addMenuItem(
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
180
|
+
editor.ui.registry.addMenuItem(
|
|
181
|
+
"create-block-above",
|
|
182
|
+
{
|
|
183
|
+
text: "Create block above",
|
|
184
|
+
icon: "plus",
|
|
185
|
+
onAction: () => {
|
|
186
|
+
var _a3;
|
|
187
|
+
const node = editor.selection.getNode();
|
|
188
|
+
const body = editor.getBody();
|
|
189
|
+
const topBlock = editor.dom.getParent(node, (n) => n.parentNode === body) || node;
|
|
190
|
+
const newBlock = editor.dom.create("p", {}, '<br data-mce-bogus="1">');
|
|
191
|
+
(_a3 = topBlock.parentNode) == null ? void 0 : _a3.insertBefore(newBlock, topBlock);
|
|
192
|
+
editor.selection.setCursorLocation(newBlock, 0);
|
|
193
|
+
editor.focus();
|
|
194
|
+
}
|
|
173
195
|
}
|
|
174
|
-
|
|
196
|
+
);
|
|
175
197
|
editor.ui.registry.addMenuItem(
|
|
176
198
|
"change-dir",
|
|
177
199
|
{
|
|
@@ -203,37 +225,41 @@ var tinymceHelpers = class _tinymceHelpers {
|
|
|
203
225
|
}
|
|
204
226
|
}
|
|
205
227
|
}
|
|
206
|
-
), editor.ui.registry.addMenuItem(
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
228
|
+
), editor.ui.registry.addMenuItem(
|
|
229
|
+
"clearTextStyle",
|
|
230
|
+
{
|
|
231
|
+
text: "Clear formatting",
|
|
232
|
+
icon: "removeformat",
|
|
233
|
+
onAction: () => {
|
|
234
|
+
editor.execCommand("RemoveFormat");
|
|
235
|
+
}
|
|
211
236
|
}
|
|
212
|
-
|
|
213
|
-
editor.ui.registry.addMenuItem(
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
237
|
+
);
|
|
238
|
+
editor.ui.registry.addMenuItem(
|
|
239
|
+
"insert-image",
|
|
240
|
+
{
|
|
241
|
+
text: "Insert image",
|
|
242
|
+
icon: "image",
|
|
243
|
+
onAction: () => {
|
|
244
|
+
const input = document.createElement("input");
|
|
245
|
+
input.type = "file";
|
|
246
|
+
input.accept = "image/*";
|
|
247
|
+
input.onchange = () => {
|
|
248
|
+
var _a3;
|
|
249
|
+
const file = (_a3 = input.files) == null ? void 0 : _a3[0];
|
|
250
|
+
if (!file) {
|
|
251
|
+
return;
|
|
252
|
+
}
|
|
253
|
+
const reader = new FileReader();
|
|
254
|
+
reader.onload = () => {
|
|
255
|
+
editor.insertContent(`<img src="${reader.result}" alt="">`);
|
|
256
|
+
};
|
|
257
|
+
reader.readAsDataURL(file);
|
|
231
258
|
};
|
|
232
|
-
|
|
233
|
-
}
|
|
234
|
-
input.click();
|
|
259
|
+
input.click();
|
|
260
|
+
}
|
|
235
261
|
}
|
|
236
|
-
|
|
262
|
+
);
|
|
237
263
|
editor.ui.registry.addButton(
|
|
238
264
|
"decreaseFontSize",
|
|
239
265
|
{
|
|
@@ -252,6 +278,38 @@ var tinymceHelpers = class _tinymceHelpers {
|
|
|
252
278
|
}
|
|
253
279
|
}
|
|
254
280
|
);
|
|
281
|
+
editor.ui.registry.addButton(
|
|
282
|
+
"myBlockquote",
|
|
283
|
+
{
|
|
284
|
+
icon: "quote",
|
|
285
|
+
tooltip: "Blockquote",
|
|
286
|
+
onAction: () => {
|
|
287
|
+
const node = editor.selection.getNode();
|
|
288
|
+
const blockquote = editor.dom.getParent(node, "blockquote");
|
|
289
|
+
editor.undoManager.transact(
|
|
290
|
+
() => {
|
|
291
|
+
if (blockquote) {
|
|
292
|
+
const parent = blockquote.parentNode;
|
|
293
|
+
if (!parent) return;
|
|
294
|
+
while (blockquote.firstChild) {
|
|
295
|
+
parent.insertBefore(blockquote.firstChild, blockquote);
|
|
296
|
+
}
|
|
297
|
+
parent.removeChild(blockquote);
|
|
298
|
+
} else {
|
|
299
|
+
const body = editor.getBody();
|
|
300
|
+
const block = editor.dom.getParent(node, (n) => n.parentNode === body) || node;
|
|
301
|
+
if (!block || block === body || !block.parentNode) return;
|
|
302
|
+
const quote = editor.dom.create("blockquote");
|
|
303
|
+
block.parentNode.insertBefore(quote, block);
|
|
304
|
+
quote.appendChild(block);
|
|
305
|
+
editor.selection.select(quote, true);
|
|
306
|
+
}
|
|
307
|
+
}
|
|
308
|
+
);
|
|
309
|
+
editor.nodeChanged();
|
|
310
|
+
}
|
|
311
|
+
}
|
|
312
|
+
);
|
|
255
313
|
editor.ui.registry.addButton(
|
|
256
314
|
"increaseFontSize",
|
|
257
315
|
{
|
|
@@ -282,7 +340,7 @@ var tinymceHelpers = class _tinymceHelpers {
|
|
|
282
340
|
content_style: theSkin.css,
|
|
283
341
|
body_class: "my-custom-styles",
|
|
284
342
|
target: el,
|
|
285
|
-
toolbar: "lockContent | undo redo | increaseFontSize decreaseFontSize bold italic underline strikethrough | fontfamily fontsize | ltr rtl alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | forecolor backcolor removeformat | charmap emoticons | fullscreen preview print | image media link anchor codesample",
|
|
343
|
+
toolbar: "myBlockquote lockContent | undo redo | increaseFontSize decreaseFontSize bold italic underline strikethrough | fontfamily fontsize | ltr rtl alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | forecolor backcolor removeformat | charmap emoticons | fullscreen preview print | image media link anchor codesample",
|
|
286
344
|
toolbar_sticky: true,
|
|
287
345
|
promotion: false,
|
|
288
346
|
image_advtab: true,
|
|
@@ -456,21 +514,21 @@ var tinymceHelpers = class _tinymceHelpers {
|
|
|
456
514
|
btn.innerHTML = `<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" aria-hidden="true"><path d="M12 17a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6-9h-1V6a5 5 0 0 0-10 0v2H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2zM9 6a3 3 0 0 1 6 0v2H9V6zm9 14H6V10h12v10z"/></svg>`;
|
|
457
515
|
const content = this._editor.getBody();
|
|
458
516
|
btn.style.cssText = `
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
517
|
+
position:absolute;
|
|
518
|
+
top:8px;
|
|
519
|
+
right:8px;
|
|
520
|
+
z-index:1000;
|
|
521
|
+
display:none;
|
|
522
|
+
align-items:center;
|
|
523
|
+
justify-content:center;
|
|
524
|
+
width:32px;
|
|
525
|
+
height:32px;
|
|
526
|
+
padding:0;
|
|
527
|
+
border-radius:6px;
|
|
528
|
+
border:1px solid rgba(0,0,0,0.15);
|
|
529
|
+
color:rgb(255,255,255);
|
|
530
|
+
cursor:pointer;
|
|
531
|
+
box-shadow:0 1px 3px rgba(0,0,0,0.2);
|
|
474
532
|
`;
|
|
475
533
|
btn.style.backgroundColor = getComputedStyle(content).getPropertyValue("--editor-linke").trim() || "black";
|
|
476
534
|
btn.addEventListener("click", () => {
|