@rg-dev/tinymce-helpers 1.0.3 → 1.0.4

package/index.d.mts

@@ -23,10 +23,12 @@ type EditorOpts = Omit<RemoveIndexSignature<RawEditorOptions>, 'setup' | 'target
 declare class tinymceHelpers {
     private _editor;
     private _lockButton?;
+    private originalContextMenu;
     private constructor();
     static initMce(el: HTMLElement, customOpts?: Opts): Promise<tinymceHelpers>;
     _initMce(el: HTMLElement, customOpts?: Opts): Promise<this>;
-    toggleEditable(lock?: 'yes' | 'no'): void;
+    private setContextMenu;
+    toggleReadOnly(lock?: 'yes' | 'no'): void;
     isEditable(): boolean;
     setContent(content: string, opts?: {
         dir?: 'rtl' | 'ltr';

package/index.mjs

@@ -109,6 +109,7 @@ var tinymceHelpers = class _tinymceHelpers {
   constructor() {
     __publicField(this, "_editor");
     __publicField(this, "_lockButton");
+    __publicField(this, "originalContextMenu");
   }
   static async initMce(el, customOpts = Object()) {
     return await new _tinymceHelpers()._initMce(el, customOpts);
@@ -129,9 +130,18 @@ var tinymceHelpers = class _tinymceHelpers {
           tooltip: "Lock editing",
           icon: "lock-icon",
           onAction: () => {
-            that.toggleEditable("yes");
+            that.toggleReadOnly("yes");
           }
         });
+        editor.on("keydown", (e) => {
+          if (e.key !== "Enter" || !e.shiftKey) {
+            return;
+          }
+          e.preventDefault();
+          e.stopImmediatePropagation();
+          editor.getDoc().execCommand("insertParagraph", false, void 0);
+          editor.nodeChanged();
+        }, true);
         editor.ui.registry.addMenuItem(
           "create-block-below",
           {
@@ -176,7 +186,7 @@ var tinymceHelpers = class _tinymceHelpers {
           {
             text: "toggle readonly",
             onAction: async () => {
-              that.toggleEditable();
+              that.toggleReadOnly();
             }
           }
         );
@@ -248,7 +258,7 @@ var tinymceHelpers = class _tinymceHelpers {
       content_style: theSkin.css,
       body_class: "my-custom-styles",
       target: el,
-      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",
+      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",
       toolbar_sticky: true,
       promotion: false,
       image_advtab: true,
@@ -287,8 +297,24 @@ var tinymceHelpers = class _tinymceHelpers {
       throw new Error("no skin");
     }
     const mce = this._editor = await tinymce.init(opts).then((x) => x[0]);
+    this.originalContextMenu = mce.options.get("contextmenu");
     const all = mce.ui.registry.getAll();
     const availableMenuItems = all.menuItems;
+    const availableButtons = all.buttons;
+    if (typeof opts.toolbar == "string") {
+      if (!isNonEmptyString(opts.toolbar.trim())) {
+        console.error("Toolbar is missing items");
+      } else {
+        const items = opts.toolbar.trim().split(/\s+/).filter((item) => item !== "|");
+        for (const item of items) {
+          if (!availableButtons[item.toLowerCase()] && !availableMenuItems[item.toLowerCase()]) {
+            console.error(
+              `Toolbar references unknown button "${item}"`
+            );
+          }
+        }
+      }
+    }
     if (typeof opts.contextmenu == "string") {
       if (!isNonEmptyString(opts.contextmenu.trim())) {
         console.error("Context menu is missing items");
@@ -325,7 +351,15 @@ var tinymceHelpers = class _tinymceHelpers {
     this.createLockButton();
     return this;
   }
-  toggleEditable(lock) {
+  setContextMenu(enabled) {
+    var _a;
+    if (!enabled) {
+      this.editor.options.set("contextmenu", false);
+    } else {
+      this.editor.options.set("contextmenu", (_a = this.originalContextMenu) != null ? _a : "");
+    }
+  }
+  toggleReadOnly(lock) {
     let curr = this.editor.getBody().isContentEditable;
     if (lock) {
       if (lock == "no") {
@@ -339,6 +373,7 @@ var tinymceHelpers = class _tinymceHelpers {
     if (editorBar) {
       editorBar.style.display = curr ? "none" : "";
     }
+    this.setContextMenu(!curr);
     this.editor.setEditableRoot(!curr);
     this.updateLockButton();
   }
@@ -347,7 +382,7 @@ var tinymceHelpers = class _tinymceHelpers {
   }
   setContent(content, opts = Object()) {
     if (opts.lock != void 0) {
-      this.toggleEditable(opts.lock ? "yes" : "no");
+      this.toggleReadOnly(opts.lock ? "yes" : "no");
     }
     if (opts.dir) {
       this.toggleTextDirection(opts.dir);
@@ -408,13 +443,13 @@ var tinymceHelpers = class _tinymceHelpers {
 	  padding:0;
 	  border-radius:6px;
 	  border:1px solid rgba(0,0,0,0.15);
-	  background:#fff;
-	  color:#333;
+	  background:black;
+	  color:rgb(255, 255, 255);;
 	  cursor:pointer;
 	  box-shadow:0 1px 3px rgba(0,0,0,0.2);
 	  `;
     btn.addEventListener("click", () => {
-      this.toggleEditable();
+      this.toggleReadOnly();
     });
     if (getComputedStyle(container).position === "static") {
       container.style.position = "relative";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rg-dev/tinymce-helpers",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "",
   "main": "index.js",
   "scripts": {