@rg-dev/tinymce-helpers 1.0.0 → 1.0.2

package/index.d.mts

@@ -0,0 +1,29 @@
+import { Editor, RawEditorOptions } from 'tinymce';
+
+type RemoveIndexSignature<T> = {
+    [K in keyof T as string extends K ? never : number extends K ? never : symbol extends K ? never : K]: T[K];
+};
+type EditorOpts = Omit<RemoveIndexSignature<RawEditorOptions>, 'setup' | 'target' | 'selector'> & Record<string, unknown>;
+declare class tinymceHelpers {
+    private _editor;
+    private constructor();
+    static initMce(el: HTMLElement, customOpts?: {
+        skin?: "default" | "dark" | undefined;
+        customSetup?: ((editor: Editor) => void) | undefined;
+        overrides?: ((defaultOpts: EditorOpts) => EditorOpts) | undefined;
+    }): Promise<tinymceHelpers>;
+    _initMce(el: HTMLElement, customOpts?: {
+        skin?: "default" | "dark" | undefined;
+        customSetup?: ((editor: Editor) => void) | undefined;
+        overrides?: ((defaultOpts: EditorOpts) => EditorOpts) | undefined;
+    }): Promise<this>;
+    toggleEditable(): void;
+    isEditable(): boolean;
+    setContent(content: string): void;
+    private getCustomStyles;
+    toggleTextDirection(): void;
+    get editor(): Editor;
+    destroy(): void;
+}
+
+export { tinymceHelpers };

package/index.mjs

@@ -0,0 +1,365 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/client/custom-components/tinymce-helpers.ts
+import tinymce from "tinymce";
+import "tinymce/icons/default/icons.min.js";
+import "tinymce/themes/silver/theme.min.js";
+import "tinymce/models/dom/model.min.js";
+import "tinymce/plugins/advlist";
+import "tinymce/plugins/code";
+import "tinymce/plugins/emoticons";
+import "tinymce/plugins/emoticons/js/emojis";
+import "tinymce/plugins/link";
+import "tinymce/plugins/lists";
+import "tinymce/plugins/table";
+import "tinymce/plugins/directionality";
+import "tinymce/plugins/autolink";
+import "tinymce/plugins/searchreplace";
+import "tinymce/plugins/save";
+import "tinymce/plugins/visualblocks";
+import "tinymce/plugins/fullscreen";
+import "tinymce/plugins/visualchars";
+import "tinymce/plugins/image";
+import "tinymce/plugins/media";
+import "tinymce/plugins/codesample";
+import "tinymce/plugins/charmap";
+import "tinymce/plugins/pagebreak";
+import "tinymce/plugins/nonbreaking";
+import "tinymce/plugins/anchor";
+import "tinymce/plugins/wordcount";
+import "tinymce/plugins/help";
+import "tinymce/plugins/help/js/i18n/keynav/en.js";
+import "tinymce/plugins/quickbars";
+import "tinymce/plugins/importcss";
+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: #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}';
+
+// src/client/custom-components/tinymce-helpers.ts
+import { isNonEmptyString } from "@rg-dev/stdlib/lib/common-env";
+async function defaultSkin(document = false) {
+  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")
+  ]);
+  return {
+    css: tinymce.Resource.get(`content/${contentSkin}/content.css`) + tinymce.Resource.get(`ui/${shellSkin}/content.css`) + `
+ 
+   .my-custom-styles{
+   direction: rtl;
+   }
+ 
+  `,
+    skin: shellSkin
+  };
+}
+async function darkSkin() {
+  const contentSkin = `dark`;
+  const shellSkin = "oxide-dark";
+  await Promise.all(
+    [
+      import("tinymce/skins/ui/oxide-dark/content.js"),
+      import("tinymce/skins/content/dark/content.js"),
+      import("tinymce/skins/ui/oxide-dark/skin.js")
+    ]
+  );
+  return {
+    css: tinymce.Resource.get(`content/${contentSkin}/content.css`) + tinymce.Resource.get(`ui/${shellSkin}/content.css`) + `
+ 
+   .my-custom-styles{
+   direction: rtl;
+   }
+
+   .mce-content-body {
+    --editor-bg: #222f3e;
+    --editor-text: #e4e8ec;
+    --editor-link: #74b9ff;
+    --editor-border: #526273;
+    --editor-table-header-text: #b8c2cc;
+    --editor-table-header-bg: #2c3e50;
+    --editor-table-row-even: #263747;
+    --editor-hr: #526273;
+   }
+   `,
+    skin: shellSkin
+  };
+}
+var skinsTable = {
+  dark: () => darkSkin(),
+  default: () => defaultSkin()
+};
+var tinymceHelpers = class _tinymceHelpers {
+  constructor() {
+    __publicField(this, "_editor");
+  }
+  static async initMce(el, customOpts = Object()) {
+    return await new _tinymceHelpers()._initMce(el, customOpts);
+  }
+  async _initMce(el, customOpts = Object()) {
+    var _a, _b;
+    if (!(el instanceof HTMLElement)) {
+      throw new Error("invalid element");
+    }
+    const theSkin = await skinsTable[customOpts.skin || "default"]();
+    theSkin.css += mce_default;
+    const that = this;
+    let opts = {
+      setup(editor) {
+        var _a2;
+        editor.ui.registry.addMenuItem("create-block-below", {
+          text: "Create block below",
+          icon: "plus",
+          onAction: () => {
+            const node = editor.selection.getNode();
+            const body = editor.getBody();
+            const topBlock = editor.dom.getParent(node, (n) => n.parentNode === body) || node;
+            const newBlock = editor.dom.create("p", {}, '<br data-mce-bogus="1">');
+            editor.dom.insertAfter(newBlock, topBlock);
+            editor.selection.setCursorLocation(newBlock, 0);
+            editor.focus();
+          }
+        });
+        editor.ui.registry.addMenuItem("create-block-above", {
+          text: "Create block above",
+          icon: "plus",
+          onAction: () => {
+            var _a3;
+            const node = editor.selection.getNode();
+            const body = editor.getBody();
+            const topBlock = editor.dom.getParent(node, (n) => n.parentNode === body) || node;
+            const newBlock = editor.dom.create("p", {}, '<br data-mce-bogus="1">');
+            (_a3 = topBlock.parentNode) == null ? void 0 : _a3.insertBefore(newBlock, topBlock);
+            editor.selection.setCursorLocation(newBlock, 0);
+            editor.focus();
+          }
+        });
+        editor.ui.registry.addMenuItem(
+          "change-dir",
+          {
+            text: "Switch text direction",
+            onAction: async () => {
+              that.toggleTextDirection();
+            }
+          }
+        );
+        editor.ui.registry.addMenuItem(
+          "toggleEdit",
+          {
+            text: "toggle readonly",
+            onAction: async () => {
+              that.toggleEditable();
+            }
+          }
+        );
+        editor.ui.registry.addMenuItem(
+          "reset-style-button-img",
+          {
+            text: "Reset Image Style",
+            icon: "resize",
+            onAction: function() {
+              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",
+          onAction: () => {
+            editor.execCommand("RemoveFormat");
+          }
+        });
+        editor.ui.registry.addButton(
+          "decreaseFontSize",
+          {
+            tooltip: "Decrease Font Size",
+            icon: "minus",
+            onAction: () => {
+              const currentSize = editor.queryCommandValue("FontSize");
+              let newSize = 16;
+              if (currentSize) {
+                const sizeNum = parseInt(currentSize.toString());
+                if (!isNaN(sizeNum) && sizeNum > 8) {
+                  newSize = sizeNum - 2;
+                }
+              }
+              editor.execCommand("FontSize", false, newSize + "px");
+            }
+          }
+        );
+        editor.ui.registry.addButton(
+          "increaseFontSize",
+          {
+            tooltip: "Increase Font Size",
+            icon: "plus",
+            onAction: () => {
+              const currentSize = editor.queryCommandValue("FontSize");
+              let newSize = 16;
+              if (currentSize) {
+                const sizeNum = parseInt(currentSize.toString());
+                if (!isNaN(sizeNum)) {
+                  newSize = sizeNum + 2;
+                }
+              }
+              editor.execCommand("FontSize", false, newSize + "px");
+            }
+          }
+        );
+        (_a2 = customOpts.customSetup) == null ? void 0 : _a2.call(customOpts, editor);
+      },
+      newline_behavior: "linebreak",
+      id: "tinymce",
+      extended_valid_elements: "img[drawio-diagram|contenteditable|style|class|src]",
+      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;",
+      skin: theSkin.skin,
+      highlight_on_focus: false,
+      content_style: theSkin.css,
+      body_class: "my-custom-styles",
+      target: el,
+      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",
+      toolbar_sticky: true,
+      promotion: false,
+      image_advtab: true,
+      license_key: "gpl",
+      resize: false,
+      height: "100%",
+      image_caption: true,
+      quickbars_selection_toolbar: "bold italic | quicklink blockquote quickimage quicktable",
+      noneditable_noneditable_class: "mceNonEditable",
+      toolbar_mode: "sliding",
+      browser_spellcheck: true,
+      menu: {
+        file: {
+          title: "File",
+          items: "print"
+        },
+        others_menu: {
+          title: "Others",
+          items: "change-dir toggleEdit"
+        }
+      },
+      menubar: "file edit view insert format tools table others_menu",
+      //spellchecker_active: true,
+      //  spellchecker_languages: 'US English=en-US,Hebrew=he_IL',
+      //  "spellchecker_rpc_url": "https://spelling.iad.tiny.cloud",
+      // "spellchecker_rpc_url": "http://10.0.0.13:7777",
+      //   "spellchecker_api_key": "qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc",
+      //  spellchecker_language: 'he_IL',
+      //tinymcespellchecker
+      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",
+      // contextmenu: false,
+      contextmenu: "link image table create-block-above create-block-below reset-style-button-img clearTextStyle"
+    };
+    opts = __spreadValues(__spreadValues({}, opts), ((_a = customOpts.overrides) == null ? void 0 : _a.call(customOpts, opts)) || {});
+    if (!opts.skin) {
+      throw new Error("no skin");
+    }
+    const mce = this._editor = await tinymce.init(opts).then((x) => x[0]);
+    const all = mce.ui.registry.getAll();
+    const availableMenuItems = all.menuItems;
+    if (typeof opts.contextmenu == "string") {
+      if (!isNonEmptyString(opts.contextmenu.trim())) {
+        console.error("Context menu is missing items");
+      } else {
+        const items = opts.contextmenu.trim().split(/\s+/);
+        for (const item of items) {
+          if (!availableMenuItems[item.toLowerCase()] && !all.contextToolbars[item.toLocaleLowerCase()]) {
+            console.error(
+              `Context menu references unknown menu item "${item}"`
+            );
+          }
+        }
+      }
+    }
+    if (opts.menu) {
+      for (const [key, value] of Object.entries(opts.menu)) {
+        if (!isNonEmptyString((_b = value.items) == null ? void 0 : _b.trim())) {
+          console.error(`Menu "${key}" is missing items`);
+          continue;
+        }
+        const items = value.items.trim().split(/\s+/);
+        for (const item of items) {
+          if (!availableMenuItems[item.toLowerCase()]) {
+            console.error(
+              `Menu "${key}" references unknown menu item "${item}"`
+            );
+          }
+        }
+      }
+    }
+    return this;
+  }
+  toggleEditable() {
+    const curr = this.editor.getBody().isContentEditable;
+    const toolbar = this.editor.getContainer().querySelector(".tox-toolbar-overlord");
+    if (toolbar) {
+      toolbar.style.display = curr ? "none" : "";
+    }
+    this.editor.setEditableRoot(!curr);
+  }
+  isEditable() {
+    return this.editor.getBody().isContentEditable;
+  }
+  setContent(content) {
+    this._editor.setContent(content);
+    this._editor.undoManager.clear();
+  }
+  getCustomStyles() {
+    const sheets = this._editor.getDoc().styleSheets;
+    for (let sheet of sheets) {
+      for (let rule of sheet.cssRules) {
+        if (rule.selectorText == ".my-custom-styles") {
+          return rule.style;
+        }
+      }
+    }
+  }
+  toggleTextDirection() {
+    if (!this.isEditable()) {
+      return;
+    }
+    const styles = this.getCustomStyles();
+    if (!styles) {
+      return;
+    }
+    const dir = styles.direction == "rtl" ? "ltr" : "rtl";
+    const newDirection = dir;
+    styles.direction = newDirection;
+    const tds = this._editor.dom.select("td");
+    for (let td of tds) {
+      this._editor.dom.setStyle(td, "direction", dir);
+    }
+  }
+  get editor() {
+    return this._editor;
+  }
+  destroy() {
+    this._editor.destroy();
+  }
+};
+export {
+  tinymceHelpers
+};

package/package.json

@@ -1,20 +1,18 @@
 {
   "name": "@rg-dev/tinymce-helpers",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "tsup"
   },
- "types": "./dist/index.d.mts",
+ "types": "./index.d.mts",
   "type": "module",
-  "files": [
-    "dist"
-  ],
+
   "exports": {
     ".": {
-      "import": "./dist/index.mjs"
+      "import": "./index.mjs"
     }
   },
   "publishConfig": {