@rg-dev/tinymce-helpers 1.0.6 → 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 +120 -38
- 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,13 +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
|
-
|
|
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);
|
|
258
|
+
};
|
|
259
|
+
input.click();
|
|
260
|
+
}
|
|
261
|
+
}
|
|
262
|
+
);
|
|
213
263
|
editor.ui.registry.addButton(
|
|
214
264
|
"decreaseFontSize",
|
|
215
265
|
{
|
|
@@ -228,6 +278,38 @@ var tinymceHelpers = class _tinymceHelpers {
|
|
|
228
278
|
}
|
|
229
279
|
}
|
|
230
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
|
+
);
|
|
231
313
|
editor.ui.registry.addButton(
|
|
232
314
|
"increaseFontSize",
|
|
233
315
|
{
|
|
@@ -258,7 +340,7 @@ var tinymceHelpers = class _tinymceHelpers {
|
|
|
258
340
|
content_style: theSkin.css,
|
|
259
341
|
body_class: "my-custom-styles",
|
|
260
342
|
target: el,
|
|
261
|
-
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",
|
|
262
344
|
toolbar_sticky: true,
|
|
263
345
|
promotion: false,
|
|
264
346
|
image_advtab: true,
|
|
@@ -290,7 +372,7 @@ var tinymceHelpers = class _tinymceHelpers {
|
|
|
290
372
|
//tinymcespellchecker
|
|
291
373
|
plugins: "preview importcss searchreplace autolink directionality code visualblocks visualchars fullscreen image link media codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount charmap quickbars emoticons",
|
|
292
374
|
// contextmenu: false,
|
|
293
|
-
contextmenu: "link image table create-block-above create-block-below reset-style-button-img clearTextStyle"
|
|
375
|
+
contextmenu: "insert-image link image table create-block-above create-block-below reset-style-button-img clearTextStyle"
|
|
294
376
|
};
|
|
295
377
|
opts = __spreadValues(__spreadValues({}, opts), ((_a = customOpts.overrides) == null ? void 0 : _a.call(customOpts, opts)) || {});
|
|
296
378
|
if (!opts.skin) {
|
|
@@ -432,21 +514,21 @@ var tinymceHelpers = class _tinymceHelpers {
|
|
|
432
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>`;
|
|
433
515
|
const content = this._editor.getBody();
|
|
434
516
|
btn.style.cssText = `
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
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);
|
|
450
532
|
`;
|
|
451
533
|
btn.style.backgroundColor = getComputedStyle(content).getPropertyValue("--editor-linke").trim() || "black";
|
|
452
534
|
btn.addEventListener("click", () => {
|