@rg-dev/tinymce-helpers 1.0.3 → 1.0.5
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.d.mts +3 -1
- package/index.mjs +60 -24
- package/package.json +1 -1
package/index.d.mts
CHANGED
|
@@ -23,10 +23,12 @@ type EditorOpts = Omit<RemoveIndexSignature<RawEditorOptions>, 'setup' | 'target
|
|
|
23
23
|
declare class tinymceHelpers {
|
|
24
24
|
private _editor;
|
|
25
25
|
private _lockButton?;
|
|
26
|
+
private originalContextMenu;
|
|
26
27
|
private constructor();
|
|
27
28
|
static initMce(el: HTMLElement, customOpts?: Opts): Promise<tinymceHelpers>;
|
|
28
29
|
_initMce(el: HTMLElement, customOpts?: Opts): Promise<this>;
|
|
29
|
-
|
|
30
|
+
private setContextMenu;
|
|
31
|
+
toggleReadOnly(lock?: 'yes' | 'no'): void;
|
|
30
32
|
isEditable(): boolean;
|
|
31
33
|
setContent(content: string, opts?: {
|
|
32
34
|
dir?: 'rtl' | 'ltr';
|
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: #aaa;\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: #000;\n --editor-table-header-text: #000;\n --editor-table-row-even: transparent;\n --editor-hr: #000;\n }\n\n .mce-content-body blockquote {\n border-inline-start: unset !important;\n background: unset !important;\n color: unset !important;\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\nimg {\n max-width: 100%;\n}\n\n\n\n.mce-content-body blockquote {\n margin: 25px 0;\n display: flex;\n
|
|
54
|
+
var mce_default = ':where(.mce-content-body) {\n --editor-text: #000;\n --editor-link: #000;\n --editor-border: #aaa;\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: #000;\n --editor-table-header-text: #000;\n --editor-table-row-even: transparent;\n --editor-hr: #000;\n }\n\n .mce-content-body blockquote {\n border-inline-start: unset !important;\n background: unset !important;\n color: unset !important;\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\nimg {\n max-width: 100%;\n}\n\n\n\n.mce-content-body blockquote {\n margin: 25px 0;\n display: flex;\n padding: 15px 20px;\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.mce-content-body table td,\n.mce-content-body table th {\n overflow-wrap: anywhere;\n word-break: break-word;\n \n white-space: normal;\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);\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 border: 1px solid var(--editor-border);\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";
|
|
@@ -109,6 +109,7 @@ var tinymceHelpers = class _tinymceHelpers {
|
|
|
109
109
|
constructor() {
|
|
110
110
|
__publicField(this, "_editor");
|
|
111
111
|
__publicField(this, "_lockButton");
|
|
112
|
+
__publicField(this, "originalContextMenu");
|
|
112
113
|
}
|
|
113
114
|
static async initMce(el, customOpts = Object()) {
|
|
114
115
|
return await new _tinymceHelpers()._initMce(el, customOpts);
|
|
@@ -129,9 +130,18 @@ var tinymceHelpers = class _tinymceHelpers {
|
|
|
129
130
|
tooltip: "Lock editing",
|
|
130
131
|
icon: "lock-icon",
|
|
131
132
|
onAction: () => {
|
|
132
|
-
that.
|
|
133
|
+
that.toggleReadOnly("yes");
|
|
133
134
|
}
|
|
134
135
|
});
|
|
136
|
+
editor.on("keydown", (e) => {
|
|
137
|
+
if (e.key !== "Enter" || !e.shiftKey) {
|
|
138
|
+
return;
|
|
139
|
+
}
|
|
140
|
+
e.preventDefault();
|
|
141
|
+
e.stopImmediatePropagation();
|
|
142
|
+
editor.getDoc().execCommand("insertParagraph", false, void 0);
|
|
143
|
+
editor.nodeChanged();
|
|
144
|
+
}, true);
|
|
135
145
|
editor.ui.registry.addMenuItem(
|
|
136
146
|
"create-block-below",
|
|
137
147
|
{
|
|
@@ -176,7 +186,7 @@ var tinymceHelpers = class _tinymceHelpers {
|
|
|
176
186
|
{
|
|
177
187
|
text: "toggle readonly",
|
|
178
188
|
onAction: async () => {
|
|
179
|
-
that.
|
|
189
|
+
that.toggleReadOnly();
|
|
180
190
|
}
|
|
181
191
|
}
|
|
182
192
|
);
|
|
@@ -248,7 +258,7 @@ var tinymceHelpers = class _tinymceHelpers {
|
|
|
248
258
|
content_style: theSkin.css,
|
|
249
259
|
body_class: "my-custom-styles",
|
|
250
260
|
target: el,
|
|
251
|
-
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
|
|
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",
|
|
252
262
|
toolbar_sticky: true,
|
|
253
263
|
promotion: false,
|
|
254
264
|
image_advtab: true,
|
|
@@ -287,8 +297,24 @@ var tinymceHelpers = class _tinymceHelpers {
|
|
|
287
297
|
throw new Error("no skin");
|
|
288
298
|
}
|
|
289
299
|
const mce = this._editor = await tinymce.init(opts).then((x) => x[0]);
|
|
300
|
+
this.originalContextMenu = mce.options.get("contextmenu");
|
|
290
301
|
const all = mce.ui.registry.getAll();
|
|
291
302
|
const availableMenuItems = all.menuItems;
|
|
303
|
+
const availableButtons = all.buttons;
|
|
304
|
+
if (typeof opts.toolbar == "string") {
|
|
305
|
+
if (!isNonEmptyString(opts.toolbar.trim())) {
|
|
306
|
+
console.error("Toolbar is missing items");
|
|
307
|
+
} else {
|
|
308
|
+
const items = opts.toolbar.trim().split(/\s+/).filter((item) => item !== "|");
|
|
309
|
+
for (const item of items) {
|
|
310
|
+
if (!availableButtons[item.toLowerCase()] && !availableMenuItems[item.toLowerCase()]) {
|
|
311
|
+
console.error(
|
|
312
|
+
`Toolbar references unknown button "${item}"`
|
|
313
|
+
);
|
|
314
|
+
}
|
|
315
|
+
}
|
|
316
|
+
}
|
|
317
|
+
}
|
|
292
318
|
if (typeof opts.contextmenu == "string") {
|
|
293
319
|
if (!isNonEmptyString(opts.contextmenu.trim())) {
|
|
294
320
|
console.error("Context menu is missing items");
|
|
@@ -325,7 +351,15 @@ var tinymceHelpers = class _tinymceHelpers {
|
|
|
325
351
|
this.createLockButton();
|
|
326
352
|
return this;
|
|
327
353
|
}
|
|
328
|
-
|
|
354
|
+
setContextMenu(enabled) {
|
|
355
|
+
var _a;
|
|
356
|
+
if (!enabled) {
|
|
357
|
+
this.editor.options.set("contextmenu", false);
|
|
358
|
+
} else {
|
|
359
|
+
this.editor.options.set("contextmenu", (_a = this.originalContextMenu) != null ? _a : "");
|
|
360
|
+
}
|
|
361
|
+
}
|
|
362
|
+
toggleReadOnly(lock) {
|
|
329
363
|
let curr = this.editor.getBody().isContentEditable;
|
|
330
364
|
if (lock) {
|
|
331
365
|
if (lock == "no") {
|
|
@@ -339,6 +373,7 @@ var tinymceHelpers = class _tinymceHelpers {
|
|
|
339
373
|
if (editorBar) {
|
|
340
374
|
editorBar.style.display = curr ? "none" : "";
|
|
341
375
|
}
|
|
376
|
+
this.setContextMenu(!curr);
|
|
342
377
|
this.editor.setEditableRoot(!curr);
|
|
343
378
|
this.updateLockButton();
|
|
344
379
|
}
|
|
@@ -347,7 +382,7 @@ var tinymceHelpers = class _tinymceHelpers {
|
|
|
347
382
|
}
|
|
348
383
|
setContent(content, opts = Object()) {
|
|
349
384
|
if (opts.lock != void 0) {
|
|
350
|
-
this.
|
|
385
|
+
this.toggleReadOnly(opts.lock ? "yes" : "no");
|
|
351
386
|
}
|
|
352
387
|
if (opts.dir) {
|
|
353
388
|
this.toggleTextDirection(opts.dir);
|
|
@@ -395,26 +430,27 @@ var tinymceHelpers = class _tinymceHelpers {
|
|
|
395
430
|
btn.title = "Unlock editing";
|
|
396
431
|
btn.setAttribute("aria-label", "Unlock editing");
|
|
397
432
|
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
|
+
const content = this._editor.getBody();
|
|
398
434
|
btn.style.cssText = `
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
435
|
+
position:absolute;
|
|
436
|
+
top:8px;
|
|
437
|
+
right:8px;
|
|
438
|
+
z-index:1000;
|
|
439
|
+
display:none;
|
|
440
|
+
align-items:center;
|
|
441
|
+
justify-content:center;
|
|
442
|
+
width:32px;
|
|
443
|
+
height:32px;
|
|
444
|
+
padding:0;
|
|
445
|
+
border-radius:6px;
|
|
446
|
+
border:1px solid rgba(0,0,0,0.15);
|
|
447
|
+
color:rgb(255,255,255);
|
|
448
|
+
cursor:pointer;
|
|
449
|
+
box-shadow:0 1px 3px rgba(0,0,0,0.2);
|
|
450
|
+
`;
|
|
451
|
+
btn.style.backgroundColor = getComputedStyle(content).getPropertyValue("--editor-link").trim() || "black";
|
|
416
452
|
btn.addEventListener("click", () => {
|
|
417
|
-
this.
|
|
453
|
+
this.toggleReadOnly();
|
|
418
454
|
});
|
|
419
455
|
if (getComputedStyle(container).position === "static") {
|
|
420
456
|
container.style.position = "relative";
|