@rg-dev/tinymce-helpers 1.0.15 → 1.0.17

package/index.d.mts

@@ -24,7 +24,7 @@ type RawEditorOptionsExtended = RawEditorOptions & {
     quickbars_selection_toolbar?: string;
     image_advtab: boolean;
 };
-type EditorOpts = Omit<RemoveIndexSignature<RawEditorOptionsExtended>, 'setup' | 'target' | 'selector'> & Record<string, unknown>;
+type EditorOpts = Omit<RemoveIndexSignature<RawEditorOptionsExtended>, 'setup' | 'target' | 'selector' | 'content_css' | 'toolbar_mode'> & Record<string, unknown>;
 /** A partial patch object, or a function that derives one from the defaults. */
 type TinyMCEPatch = Partial<EditorOpts> | ((defaults: EditorOpts) => Partial<EditorOpts> | void);
 declare class ListBuilder {
@@ -58,9 +58,7 @@ declare class MenuBuilder {
     addMenu(key: string, config: MenuEntry): this;
     removeMenu(key: string): this;
     /** Edit one menu's items with the same builder API as toolbar/contextmenu. */
-    items(key: string, patch: ListPatch): this;
-    /** Remove items from one menu, or from every menu if `key` is omitted. */
-    removeItem(names: string | string[], key?: string): this;
+    patchMenu(key: string, patch: ListPatch): void;
     /** Empty menus are dropped so TinyMCE never sees a menu with no items. */
     toObject(): MenuConfig;
 }
@@ -96,6 +94,8 @@ declare class tinymceHelpers {
     private constructor();
     static initMce(el: HTMLElement, customOpts?: MyTinymceOpts): Promise<tinymceHelpers>;
     addImg(src: string): void;
+    private _arrowCleanup?;
+    private createToolbarArrows;
     _initMce(el: HTMLElement, customOpts?: MyTinymceOpts): Promise<this>;
     private setContextMenu;
     toggleReadOnly(lock?: 'yes' | 'no'): void;

package/index.mjs

@@ -63,18 +63,31 @@ import "tinymce/plugins/preview";
 import "tinymce/plugins/insertdatetime";
 
 // src/client/custom-components/mce.css?raw
-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: 22px;\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}';
+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\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: 22px;\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}';
+
+// src/client/custom-components/arrows.css?raw
+var arrows_default = "\n\n.tox .tox-editor-header .tox-toolbar-arrow.visible {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* ---------- toolbar scroll arrows ---------- */\n.tox .tox-editor-header .tox-toolbar-arrow {\n  position: absolute !important;\n  bottom: 0 !important;\n  z-index: 5;\n\n  height: 100%;\n  \n  width: 20px !important;\n  border-radius: 5px !important;\n\n  box-sizing: border-box !important;\n\n\n  display: flex;\n  align-items: center;\n  margin: 0 !important;\n  padding: 0;\n  border: 0;\n  border-radius: 0;\n  cursor: pointer;\n  font-weight: bold !important;\n  color: var(--editor-text,white);                              /* arrow icon color */\n\n  margin-block: 1px !important;\n  background: rgba(0, 0, 0, 0.08);             /* transparent dark background */\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.15s ease-in-out, background 0.2s ease-in-out;\n}\n\n.tox-toolbar--scrolling{\n margin-inline: 20px !important;\n}\n\n@media screen and (max-width:660px) {\n    \n .tox-toolbar--scrolling{\n margin-inline: 0px !important;\n}\n}\n\n.tox .tox-editor-header .tox-toolbar-arrow.visible {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.tox .tox-editor-header .tox-toolbar-arrow:hover {\n  background: rgba(0, 0, 0, 0.3);\n}\n\n.tox .tox-editor-header .tox-toolbar-arrow.left {\n  left: 0 !important;\n  right: auto !important;\n  justify-content: flex-start;\n  padding-left: 4px;\n}\n\n.tox .tox-editor-header .tox-toolbar-arrow.right {\n  right: 0 !important;\n  left: auto !important;\n  justify-content: flex-end;\n  padding-right: 4px;\n}\n";
 
 // src/client/custom-components/tinymce-helpers.ts
 import { isNonEmptyString } from "@rg-dev/stdlib/lib/common-env";
 async function defaultSkin() {
   const contentSkin = `default`;
   const shellSkin = "oxide";
-  await Promise.all([
-    import("tinymce/skins/ui/oxide/content.js"),
-    import("tinymce/skins/content/default/content.js"),
-    import("tinymce/skins/ui/oxide/skin.js")
-  ]);
+  injectCss(
+    "tinymce-toolbar-arrows-css",
+    `${arrows_default}
+    ${`
+   .tox-toolbar-arrow{
+  --editor-text: black !important;
+   }`}`
+  );
+  await Promise.all(
+    [
+      import("tinymce/skins/ui/oxide/content.js"),
+      import("tinymce/skins/content/default/content.js"),
+      import("tinymce/skins/ui/oxide/skin.js")
+    ]
+  );
   return {
     css: tinymce.Resource.get(`content/${contentSkin}/content.css`) + tinymce.Resource.get(`ui/${shellSkin}/content.css`),
     skin: shellSkin
@@ -90,6 +103,14 @@ async function darkSkin() {
       import("tinymce/skins/ui/oxide-dark/skin.js")
     ]
   );
+  injectCss(
+    "tinymce-toolbar-arrows-css",
+    `${arrows_default}
+    ${`
+   .tox-toolbar-arrow{
+  --editor-text: white !important;
+   }`}`
+  );
   return {
     css: tinymce.Resource.get(`content/${contentSkin}/content.css`) + tinymce.Resource.get(`ui/${shellSkin}/content.css`) + `
    .mce-content-body {
@@ -120,7 +141,7 @@ function resolvePatch(defaults, patch) {
   } else {
     resolved = patch;
   }
-  const _b = resolved || {}, { target, setup, selector } = _b, safe = __objRest(_b, ["target", "setup", "selector"]);
+  const _b = resolved || {}, { target, setup, selector, content_css, toolbar_mode } = _b, safe = __objRest(_b, ["target", "setup", "selector", "content_css", "toolbar_mode"]);
   return safe;
 }
 var ListBuilder = class {
@@ -210,21 +231,13 @@ var MenuBuilder = class {
     return this;
   }
   /** Edit one menu's items with the same builder API as toolbar/contextmenu. */
-  items(key, patch) {
+  patchMenu(key, patch) {
     const menu = this.menus[key];
     if (!menu) {
       console.error(`MenuBuilder.items: menu "${key}" does not exist`);
-      return this;
+      return;
     }
     menu.items = applyListPatch(menu.items, patch);
-    return this;
-  }
-  /** Remove items from one menu, or from every menu if `key` is omitted. */
-  removeItem(names, key) {
-    const list = Array.isArray(names) ? names : [names];
-    const keys = key ? [key] : Object.keys(this.menus);
-    for (const k of keys) this.items(k, (t) => t.remove(...list));
-    return this;
   }
   /** Empty menus are dropped so TinyMCE never sees a menu with no items. */
   toObject() {
@@ -245,6 +258,7 @@ var tinymceHelpers = class _tinymceHelpers {
     __publicField(this, "_editor");
     __publicField(this, "_lockButton");
     __publicField(this, "originalContextMenu");
+    __publicField(this, "_arrowCleanup");
   }
   static async initMce(el, customOpts = Object()) {
     return await new _tinymceHelpers()._initMce(el, customOpts);
@@ -252,6 +266,82 @@ var tinymceHelpers = class _tinymceHelpers {
   addImg(src) {
     this.editor.insertContent(`<img src="${src}" alt="">`);
   }
+  createToolbarArrows() {
+    const container = this._editor.getContainer();
+    const header = container == null ? void 0 : container.querySelector(".tox-editor-header");
+    if (!header) {
+      console.error("header not found");
+      return;
+    }
+    if (getComputedStyle(header).position === "static") {
+      header.style.position = "relative";
+    }
+    const getScroller = () => {
+      var _a;
+      return (_a = Array.from(header.querySelectorAll("*")).find(
+        (el) => {
+          if (el.classList.contains("tox-toolbar-arrow")) return false;
+          const ox = getComputedStyle(el).overflowX;
+          return ox !== "visible" && el.scrollWidth > el.clientWidth + 1;
+        }
+      )) != null ? _a : null;
+    };
+    const hideBars = () => {
+      header.querySelectorAll("*").forEach(
+        (el) => {
+          if (el.classList.contains("tox-toolbar-arrow")) return;
+          if (getComputedStyle(el).overflowX !== "visible") {
+            el.style.setProperty("scrollbar-width", "none", "important");
+          }
+        }
+      );
+    };
+    const make = (dir) => {
+      const b = document.createElement("button");
+      try {
+        b.style.height = getComputedStyle(container.querySelector(".tox-toolbar--scrolling")).height;
+      } catch (e) {
+      }
+      b.type = "button";
+      b.className = `tox-toolbar-arrow ${dir}`;
+      b.setAttribute("aria-label", `Scroll toolbar ${dir}`);
+      b.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="${dir === "left" ? "M15 5l-7 7 7 7" : "M9 5l7 7-7 7"}"/></svg>`;
+      b.addEventListener("mousedown", (e) => e.preventDefault());
+      b.addEventListener(
+        "click",
+        () => {
+          const bar = getScroller();
+          bar == null ? void 0 : bar.scrollBy({ left: (dir === "left" ? -1 : 1) * bar.clientWidth * 0.6, behavior: "smooth" });
+        }
+      );
+      header.appendChild(b);
+      return b;
+    };
+    const left = make("left");
+    const right = make("right");
+    const update = () => {
+      hideBars();
+      const bar = getScroller();
+      left.classList.toggle("visible", !!bar && bar.scrollLeft > 1);
+      right.classList.toggle("visible", !!bar && bar.scrollLeft + bar.clientWidth < bar.scrollWidth - 1);
+    };
+    header.addEventListener("scroll", update, { capture: true, passive: true });
+    const ro = new ResizeObserver(update);
+    ro.observe(header);
+    requestAnimationFrame(() => {
+      update();
+      requestAnimationFrame(update);
+    });
+    this._arrowCleanup = () => {
+      try {
+        header.removeEventListener("scroll", update, true);
+        ro.disconnect();
+        left.remove();
+        right.remove();
+      } catch (e) {
+      }
+    };
+  }
   async _initMce(el, customOpts = Object()) {
     var _a, _b;
     if (!(el instanceof HTMLElement)) {
@@ -264,13 +354,16 @@ var tinymceHelpers = class _tinymceHelpers {
       setup(editor) {
         var _a2;
         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>`);
-        editor.ui.registry.addButton("lockContent", {
-          tooltip: "Lock editing",
-          icon: "lock-icon",
-          onAction: () => {
-            that.toggleReadOnly("yes");
+        editor.ui.registry.addButton(
+          "lockContent",
+          {
+            tooltip: "Lock editing",
+            icon: "lock-icon",
+            onAction: () => {
+              that.toggleReadOnly("yes");
+            }
           }
-        });
+        );
         editor.on("keydown", (e) => {
           if (e.key !== "Enter" || !e.shiftKey) {
             return;
@@ -336,17 +429,20 @@ var tinymceHelpers = class _tinymceHelpers {
             that.toggleReadOnly();
           }
         });
-        editor.ui.registry.addMenuItem("reset-style-button-img", {
-          text: "Reset Image Style",
-          icon: "resize",
-          onAction: () => {
-            const selectedImage = editor.selection.getNode();
-            if (selectedImage.nodeName === "IMG") {
-              selectedImage.style.width = "unset";
-              selectedImage.style.height = "unset";
+        editor.ui.registry.addMenuItem(
+          "reset-style-button-img",
+          {
+            text: "Reset Image Style",
+            icon: "resize",
+            onAction: () => {
+              const selectedImage = editor.selection.getNode();
+              if (selectedImage.nodeName === "IMG") {
+                selectedImage.style.width = "unset";
+                selectedImage.style.height = "unset";
+              }
             }
           }
-        });
+        );
         editor.ui.registry.addMenuItem("clearTextStyle", {
           text: "Clear formatting",
           icon: "removeformat",
@@ -460,7 +556,6 @@ var tinymceHelpers = class _tinymceHelpers {
       body_class: "my-custom-styles",
       target: el,
       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",
-      toolbar_sticky: true,
       promotion: false,
       image_advtab: true,
       license_key: "gpl",
@@ -469,7 +564,9 @@ var tinymceHelpers = class _tinymceHelpers {
       image_caption: true,
       quickbars_selection_toolbar: "bold italic | quicklink blockquote quickimage quicktable",
       noneditable_class: "mceNonEditable",
-      toolbar_mode: "sliding",
+      toolbar_mode: "scrolling",
+      toolbar_sticky: false,
+      content_css: "",
       browser_spellcheck: true,
       menu: {
         file: {
@@ -564,6 +661,7 @@ var tinymceHelpers = class _tinymceHelpers {
       this.toggleTextDirection(customOpts.direction);
     }
     this.createLockButton();
+    this.createToolbarArrows();
     return this;
   }
   setContextMenu(enabled) {
@@ -679,11 +777,22 @@ var tinymceHelpers = class _tinymceHelpers {
     return this._editor;
   }
   destroy() {
-    var _a;
-    (_a = this._lockButton) == null ? void 0 : _a.remove();
+    var _a, _b;
+    (_a = this._arrowCleanup) == null ? void 0 : _a.call(this);
+    (_b = this._lockButton) == null ? void 0 : _b.remove();
     this._editor.destroy();
   }
 };
+function injectCss(id, css) {
+  let style = document.getElementById(id);
+  if (!style) {
+    style = document.createElement("style");
+    style.id = id;
+    document.head.appendChild(style);
+  }
+  style.textContent = css;
+  return style;
+}
 export {
   tinymceHelpers
 };

package/package.json

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