@rg-dev/tinymce-helpers 1.0.5 → 1.0.8
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 +27 -3
- 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
|
|
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: #f2f2f2;\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 padding: 7px !important;\n margin: 0px !important;\n color: #000 !important;\n -webkit-print-color-adjust: exact !important;\n print-color-adjust: exact !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\n img {\n max-width: 100%;\n }\n\n\n\n.mce-content-body blockquote {\n margin: 25px 0;\n display: flow-root;\n padding: 15px 20px;\n border-radius: 8px;\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.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";
|
|
@@ -210,6 +210,30 @@ var tinymceHelpers = class _tinymceHelpers {
|
|
|
210
210
|
editor.execCommand("RemoveFormat");
|
|
211
211
|
}
|
|
212
212
|
});
|
|
213
|
+
editor.ui.registry.addMenuItem("insert-image", {
|
|
214
|
+
text: "Insert image",
|
|
215
|
+
icon: "image",
|
|
216
|
+
onAction: () => {
|
|
217
|
+
const input = document.createElement("input");
|
|
218
|
+
input.type = "file";
|
|
219
|
+
input.accept = "image/*";
|
|
220
|
+
input.onchange = () => {
|
|
221
|
+
var _a3;
|
|
222
|
+
const file = (_a3 = input.files) == null ? void 0 : _a3[0];
|
|
223
|
+
if (!file) {
|
|
224
|
+
return;
|
|
225
|
+
}
|
|
226
|
+
const reader = new FileReader();
|
|
227
|
+
reader.onload = () => {
|
|
228
|
+
editor.insertContent(
|
|
229
|
+
`<img src="${reader.result}" alt="">`
|
|
230
|
+
);
|
|
231
|
+
};
|
|
232
|
+
reader.readAsDataURL(file);
|
|
233
|
+
};
|
|
234
|
+
input.click();
|
|
235
|
+
}
|
|
236
|
+
});
|
|
213
237
|
editor.ui.registry.addButton(
|
|
214
238
|
"decreaseFontSize",
|
|
215
239
|
{
|
|
@@ -290,7 +314,7 @@ var tinymceHelpers = class _tinymceHelpers {
|
|
|
290
314
|
//tinymcespellchecker
|
|
291
315
|
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
316
|
// contextmenu: false,
|
|
293
|
-
contextmenu: "link image table create-block-above create-block-below reset-style-button-img clearTextStyle"
|
|
317
|
+
contextmenu: "insert-image link image table create-block-above create-block-below reset-style-button-img clearTextStyle"
|
|
294
318
|
};
|
|
295
319
|
opts = __spreadValues(__spreadValues({}, opts), ((_a = customOpts.overrides) == null ? void 0 : _a.call(customOpts, opts)) || {});
|
|
296
320
|
if (!opts.skin) {
|
|
@@ -448,7 +472,7 @@ var tinymceHelpers = class _tinymceHelpers {
|
|
|
448
472
|
cursor:pointer;
|
|
449
473
|
box-shadow:0 1px 3px rgba(0,0,0,0.2);
|
|
450
474
|
`;
|
|
451
|
-
btn.style.backgroundColor = getComputedStyle(content).getPropertyValue("--editor-
|
|
475
|
+
btn.style.backgroundColor = getComputedStyle(content).getPropertyValue("--editor-linke").trim() || "black";
|
|
452
476
|
btn.addEventListener("click", () => {
|
|
453
477
|
this.toggleReadOnly();
|
|
454
478
|
});
|