@rg-dev/tinymce-helpers 1.0.1 → 1.0.3
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 +27 -13
- package/index.mjs +105 -27
- package/package.json +3 -3
package/index.d.mts
CHANGED
|
@@ -1,27 +1,41 @@
|
|
|
1
1
|
import { Editor, RawEditorOptions } from 'tinymce';
|
|
2
2
|
|
|
3
|
+
declare const skinsTable: {
|
|
4
|
+
dark: () => Promise<{
|
|
5
|
+
css: string;
|
|
6
|
+
skin: string;
|
|
7
|
+
}>;
|
|
8
|
+
default: () => Promise<{
|
|
9
|
+
css: string;
|
|
10
|
+
skin: string;
|
|
11
|
+
}>;
|
|
12
|
+
};
|
|
3
13
|
type RemoveIndexSignature<T> = {
|
|
4
14
|
[K in keyof T as string extends K ? never : number extends K ? never : symbol extends K ? never : K]: T[K];
|
|
5
15
|
};
|
|
16
|
+
type Opts = {
|
|
17
|
+
skin?: keyof typeof skinsTable;
|
|
18
|
+
direction?: 'rtl' | 'ltr';
|
|
19
|
+
customSetup?: (editor: Editor) => void;
|
|
20
|
+
overrides?: (defaultOpts: EditorOpts) => EditorOpts;
|
|
21
|
+
};
|
|
6
22
|
type EditorOpts = Omit<RemoveIndexSignature<RawEditorOptions>, 'setup' | 'target' | 'selector'> & Record<string, unknown>;
|
|
7
23
|
declare class tinymceHelpers {
|
|
8
24
|
private _editor;
|
|
25
|
+
private _lockButton?;
|
|
9
26
|
private constructor();
|
|
10
|
-
static initMce(el: HTMLElement, customOpts?:
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
overrides?: ((defaultOpts: EditorOpts) => EditorOpts) | undefined;
|
|
14
|
-
}): Promise<tinymceHelpers>;
|
|
15
|
-
_initMce(el: HTMLElement, customOpts?: {
|
|
16
|
-
skin?: "default" | "dark" | undefined;
|
|
17
|
-
customSetup?: ((editor: Editor) => void) | undefined;
|
|
18
|
-
overrides?: ((defaultOpts: EditorOpts) => EditorOpts) | undefined;
|
|
19
|
-
}): Promise<this>;
|
|
20
|
-
toggleEditable(): void;
|
|
27
|
+
static initMce(el: HTMLElement, customOpts?: Opts): Promise<tinymceHelpers>;
|
|
28
|
+
_initMce(el: HTMLElement, customOpts?: Opts): Promise<this>;
|
|
29
|
+
toggleEditable(lock?: 'yes' | 'no'): void;
|
|
21
30
|
isEditable(): boolean;
|
|
22
|
-
setContent(content: string
|
|
31
|
+
setContent(content: string, opts?: {
|
|
32
|
+
dir?: 'rtl' | 'ltr';
|
|
33
|
+
lock?: boolean;
|
|
34
|
+
}): void;
|
|
23
35
|
private getCustomStyles;
|
|
24
|
-
toggleTextDirection(): void;
|
|
36
|
+
toggleTextDirection(force_dir?: 'rtl' | 'ltr'): void;
|
|
37
|
+
private createLockButton;
|
|
38
|
+
private updateLockButton;
|
|
25
39
|
get editor(): Editor;
|
|
26
40
|
destroy(): void;
|
|
27
41
|
}
|
package/index.mjs
CHANGED
|
@@ -51,11 +51,11 @@ 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\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 flex-direction: column;\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.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}';
|
|
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 flex-direction: column;\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";
|
|
58
|
-
async function defaultSkin(
|
|
58
|
+
async function defaultSkin(document2 = false) {
|
|
59
59
|
const contentSkin = `default`;
|
|
60
60
|
const shellSkin = "oxide";
|
|
61
61
|
await Promise.all([
|
|
@@ -66,9 +66,7 @@ async function defaultSkin(document = false) {
|
|
|
66
66
|
return {
|
|
67
67
|
css: tinymce.Resource.get(`content/${contentSkin}/content.css`) + tinymce.Resource.get(`ui/${shellSkin}/content.css`) + `
|
|
68
68
|
|
|
69
|
-
|
|
70
|
-
direction: rtl;
|
|
71
|
-
}
|
|
69
|
+
|
|
72
70
|
|
|
73
71
|
`,
|
|
74
72
|
skin: shellSkin
|
|
@@ -87,9 +85,7 @@ async function darkSkin() {
|
|
|
87
85
|
return {
|
|
88
86
|
css: tinymce.Resource.get(`content/${contentSkin}/content.css`) + tinymce.Resource.get(`ui/${shellSkin}/content.css`) + `
|
|
89
87
|
|
|
90
|
-
|
|
91
|
-
direction: rtl;
|
|
92
|
-
}
|
|
88
|
+
|
|
93
89
|
|
|
94
90
|
.mce-content-body {
|
|
95
91
|
--editor-bg: #222f3e;
|
|
@@ -112,6 +108,7 @@ var skinsTable = {
|
|
|
112
108
|
var tinymceHelpers = class _tinymceHelpers {
|
|
113
109
|
constructor() {
|
|
114
110
|
__publicField(this, "_editor");
|
|
111
|
+
__publicField(this, "_lockButton");
|
|
115
112
|
}
|
|
116
113
|
static async initMce(el, customOpts = Object()) {
|
|
117
114
|
return await new _tinymceHelpers()._initMce(el, customOpts);
|
|
@@ -127,19 +124,30 @@ var tinymceHelpers = class _tinymceHelpers {
|
|
|
127
124
|
let opts = {
|
|
128
125
|
setup(editor) {
|
|
129
126
|
var _a2;
|
|
130
|
-
editor.ui.registry.
|
|
131
|
-
|
|
132
|
-
|
|
127
|
+
editor.ui.registry.addIcon("lock-icon", `<svg viewBox="0 0 24 24" width="24" height="24" 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>`);
|
|
128
|
+
editor.ui.registry.addButton("lockContent", {
|
|
129
|
+
tooltip: "Lock editing",
|
|
130
|
+
icon: "lock-icon",
|
|
133
131
|
onAction: () => {
|
|
134
|
-
|
|
135
|
-
const body = editor.getBody();
|
|
136
|
-
const topBlock = editor.dom.getParent(node, (n) => n.parentNode === body) || node;
|
|
137
|
-
const newBlock = editor.dom.create("p", {}, '<br data-mce-bogus="1">');
|
|
138
|
-
editor.dom.insertAfter(newBlock, topBlock);
|
|
139
|
-
editor.selection.setCursorLocation(newBlock, 0);
|
|
140
|
-
editor.focus();
|
|
132
|
+
that.toggleEditable("yes");
|
|
141
133
|
}
|
|
142
134
|
});
|
|
135
|
+
editor.ui.registry.addMenuItem(
|
|
136
|
+
"create-block-below",
|
|
137
|
+
{
|
|
138
|
+
text: "Create block below",
|
|
139
|
+
icon: "plus",
|
|
140
|
+
onAction: () => {
|
|
141
|
+
const node = editor.selection.getNode();
|
|
142
|
+
const body = editor.getBody();
|
|
143
|
+
const topBlock = editor.dom.getParent(node, (n) => n.parentNode === body) || node;
|
|
144
|
+
const newBlock = editor.dom.create("p", {}, '<br data-mce-bogus="1">');
|
|
145
|
+
editor.dom.insertAfter(newBlock, topBlock);
|
|
146
|
+
editor.selection.setCursorLocation(newBlock, 0);
|
|
147
|
+
editor.focus();
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
);
|
|
143
151
|
editor.ui.registry.addMenuItem("create-block-above", {
|
|
144
152
|
text: "Create block above",
|
|
145
153
|
icon: "plus",
|
|
@@ -234,12 +242,13 @@ var tinymceHelpers = class _tinymceHelpers {
|
|
|
234
242
|
id: "tinymce",
|
|
235
243
|
extended_valid_elements: "img[drawio-diagram|contenteditable|style|class|src]",
|
|
236
244
|
font_family_formats: "Rubik=Rubik, Helvetica, Arial, sans-serif; Andale Mono=andale mono,times; Arial=arial,helvetica,sans-serif; Arial Black=arial black,avant garde; Book Antiqua=book antiqua,palatino; Comic Sans MS=comic sans ms,sans-serif; Courier New=courier new,courier; Georgia=georgia,palatino; Helvetica=helvetica; Impact=impact,chicago; Symbol=symbol; Tahoma=tahoma,arial,helvetica,sans-serif; Terminal=terminal,monaco; Times New Roman=times new roman,times; Trebuchet MS=trebuchet ms,geneva; Verdana=verdana,geneva; Webdings=webdings; Wingdings=wingdings,zapf dingbats; Afacad=afacad,sans-serif; Marcellus=marcellus,serif; Poppins=poppins,sans-serif; Raleway=raleway,sans-serif;",
|
|
245
|
+
"statusbar": false,
|
|
237
246
|
skin: theSkin.skin,
|
|
238
247
|
highlight_on_focus: false,
|
|
239
248
|
content_style: theSkin.css,
|
|
240
249
|
body_class: "my-custom-styles",
|
|
241
250
|
target: el,
|
|
242
|
-
toolbar: "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 save print | insertfile image media template link anchor codesample",
|
|
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 preview save print | insertfile image media template link anchor codesample",
|
|
243
252
|
toolbar_sticky: true,
|
|
244
253
|
promotion: false,
|
|
245
254
|
image_advtab: true,
|
|
@@ -310,20 +319,39 @@ var tinymceHelpers = class _tinymceHelpers {
|
|
|
310
319
|
}
|
|
311
320
|
}
|
|
312
321
|
}
|
|
322
|
+
if (customOpts.direction) {
|
|
323
|
+
this.toggleTextDirection(customOpts.direction);
|
|
324
|
+
}
|
|
325
|
+
this.createLockButton();
|
|
313
326
|
return this;
|
|
314
327
|
}
|
|
315
|
-
toggleEditable() {
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
328
|
+
toggleEditable(lock) {
|
|
329
|
+
let curr = this.editor.getBody().isContentEditable;
|
|
330
|
+
if (lock) {
|
|
331
|
+
if (lock == "no") {
|
|
332
|
+
curr = false;
|
|
333
|
+
} else {
|
|
334
|
+
curr = true;
|
|
335
|
+
}
|
|
336
|
+
}
|
|
337
|
+
const container = this.editor.getContainer();
|
|
338
|
+
const editorBar = container.querySelector(".tox-editor-header");
|
|
339
|
+
if (editorBar) {
|
|
340
|
+
editorBar.style.display = curr ? "none" : "";
|
|
320
341
|
}
|
|
321
342
|
this.editor.setEditableRoot(!curr);
|
|
343
|
+
this.updateLockButton();
|
|
322
344
|
}
|
|
323
345
|
isEditable() {
|
|
324
346
|
return this.editor.getBody().isContentEditable;
|
|
325
347
|
}
|
|
326
|
-
setContent(content) {
|
|
348
|
+
setContent(content, opts = Object()) {
|
|
349
|
+
if (opts.lock != void 0) {
|
|
350
|
+
this.toggleEditable(opts.lock ? "yes" : "no");
|
|
351
|
+
}
|
|
352
|
+
if (opts.dir) {
|
|
353
|
+
this.toggleTextDirection(opts.dir);
|
|
354
|
+
}
|
|
327
355
|
this._editor.setContent(content);
|
|
328
356
|
this._editor.undoManager.clear();
|
|
329
357
|
}
|
|
@@ -337,7 +365,7 @@ var tinymceHelpers = class _tinymceHelpers {
|
|
|
337
365
|
}
|
|
338
366
|
}
|
|
339
367
|
}
|
|
340
|
-
toggleTextDirection() {
|
|
368
|
+
toggleTextDirection(force_dir) {
|
|
341
369
|
if (!this.isEditable()) {
|
|
342
370
|
return;
|
|
343
371
|
}
|
|
@@ -345,7 +373,10 @@ var tinymceHelpers = class _tinymceHelpers {
|
|
|
345
373
|
if (!styles) {
|
|
346
374
|
return;
|
|
347
375
|
}
|
|
348
|
-
|
|
376
|
+
let dir = styles.direction == "rtl" ? "ltr" : "rtl";
|
|
377
|
+
if (force_dir) {
|
|
378
|
+
dir = force_dir;
|
|
379
|
+
}
|
|
349
380
|
const newDirection = dir;
|
|
350
381
|
styles.direction = newDirection;
|
|
351
382
|
const tds = this._editor.dom.select("td");
|
|
@@ -353,10 +384,57 @@ var tinymceHelpers = class _tinymceHelpers {
|
|
|
353
384
|
this._editor.dom.setStyle(td, "direction", dir);
|
|
354
385
|
}
|
|
355
386
|
}
|
|
387
|
+
createLockButton() {
|
|
388
|
+
const container = this._editor.getContainer();
|
|
389
|
+
if (!container) {
|
|
390
|
+
return;
|
|
391
|
+
}
|
|
392
|
+
const btn = document.createElement("button");
|
|
393
|
+
btn.type = "button";
|
|
394
|
+
btn.className = "tinymce-lock-button";
|
|
395
|
+
btn.title = "Unlock editing";
|
|
396
|
+
btn.setAttribute("aria-label", "Unlock editing");
|
|
397
|
+
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>`;
|
|
398
|
+
btn.style.cssText = `
|
|
399
|
+
position:absolute;
|
|
400
|
+
top:8px;
|
|
401
|
+
right:8px;
|
|
402
|
+
z-index:1000;
|
|
403
|
+
display:none;
|
|
404
|
+
align-items:center;
|
|
405
|
+
justify-content:center;
|
|
406
|
+
width:32px;
|
|
407
|
+
height:32px;
|
|
408
|
+
padding:0;
|
|
409
|
+
border-radius:6px;
|
|
410
|
+
border:1px solid rgba(0,0,0,0.15);
|
|
411
|
+
background:#fff;
|
|
412
|
+
color:#333;
|
|
413
|
+
cursor:pointer;
|
|
414
|
+
box-shadow:0 1px 3px rgba(0,0,0,0.2);
|
|
415
|
+
`;
|
|
416
|
+
btn.addEventListener("click", () => {
|
|
417
|
+
this.toggleEditable();
|
|
418
|
+
});
|
|
419
|
+
if (getComputedStyle(container).position === "static") {
|
|
420
|
+
container.style.position = "relative";
|
|
421
|
+
}
|
|
422
|
+
container.appendChild(btn);
|
|
423
|
+
this._lockButton = btn;
|
|
424
|
+
this.updateLockButton();
|
|
425
|
+
}
|
|
426
|
+
updateLockButton() {
|
|
427
|
+
if (!this._lockButton) {
|
|
428
|
+
return;
|
|
429
|
+
}
|
|
430
|
+
this._lockButton.style.display = this.isEditable() ? "none" : "flex";
|
|
431
|
+
}
|
|
356
432
|
get editor() {
|
|
357
433
|
return this._editor;
|
|
358
434
|
}
|
|
359
435
|
destroy() {
|
|
436
|
+
var _a;
|
|
437
|
+
(_a = this._lockButton) == null ? void 0 : _a.remove();
|
|
360
438
|
this._editor.destroy();
|
|
361
439
|
}
|
|
362
440
|
};
|
package/package.json
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rg-dev/tinymce-helpers",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
7
7
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
8
8
|
"build": "tsup"
|
|
9
9
|
},
|
|
10
|
-
"types": "./
|
|
10
|
+
"types": "./index.d.mts",
|
|
11
11
|
"type": "module",
|
|
12
12
|
|
|
13
13
|
"exports": {
|
|
14
14
|
".": {
|
|
15
|
-
"import": "./
|
|
15
|
+
"import": "./index.mjs"
|
|
16
16
|
}
|
|
17
17
|
},
|
|
18
18
|
"publishConfig": {
|