@webiny/app-admin 0.0.0-mt-2 → 0.0.0-unstable.06b2ede40f

package/components/RichTextEditor/tools/image/tunes.d.ts

@@ -1,16 +1,17 @@
-declare type Tune = {
-    name: string;
-    icon: string;
-    title: string;
-    action?: Function;
-};
+import type { API } from "@editorjs/editorjs";
+import type { ImageToolData, Tune, TuneOnChangeCallable } from "./types";
+interface TunesParams {
+    api: API;
+    actions: Tune[];
+    onChange: TuneOnChangeCallable;
+}
 /**
  * Working with Block Tunes
  */
 export default class Tunes {
     private api;
-    private actions;
-    private onChange;
+    private readonly actions;
+    private readonly onChange;
     private buttons;
     /**
      * @param {object} tune - image tool Tunes managers
@@ -18,11 +19,7 @@ export default class Tunes {
      * @param {object} tune.actions - list of user defined tunes
      * @param {Function} tune.onChange - tune toggling callback
      */
-    constructor({ api, actions, onChange }: {
-        api: any;
-        actions: any;
-        onChange: any;
-    });
+    constructor({ api, actions, onChange }: TunesParams);
     /**
      * Available Image tunes
      *
@@ -46,13 +43,13 @@ export default class Tunes {
      * @param {ImageToolData} toolData - generate Elements of tunes
      * @returns {Element}
      */
-    render(toolData: any): any;
+    render(toolData: ImageToolData): HTMLElement;
     /**
      * Clicks to one of the tunes
      *
      * @param {string} tuneName - clicked tune name
      * @param {Function} customFunction - function to execute on click
      */
-    tuneClicked(tuneName: any, customFunction: any): boolean;
+    tuneClicked(tuneName: string, customFunction?: TuneOnChangeCallable): boolean;
 }
 export {};

package/components/RichTextEditor/tools/image/tunes.js

@@ -1,134 +1,103 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { make } from "./ui";
 import svgs from "./svgs";
-
 /**
  * Working with Block Tunes
  */
-var Tunes = /*#__PURE__*/function () {
+export default class Tunes {
   /**
    * @param {object} tune - image tool Tunes managers
    * @param {object} tune.api - Editor API
    * @param {object} tune.actions - list of user defined tunes
    * @param {Function} tune.onChange - tune toggling callback
    */
-  function Tunes(_ref) {
-    var api = _ref.api,
-        actions = _ref.actions,
-        onChange = _ref.onChange;
-
-    _classCallCheck(this, Tunes);
-
-    _defineProperty(this, "api", void 0);
-
-    _defineProperty(this, "actions", void 0);
-
-    _defineProperty(this, "onChange", void 0);
-
-    _defineProperty(this, "buttons", void 0);
-
+  constructor({
+    api,
+    actions,
+    onChange
+  }) {
     this.api = api;
     this.actions = actions;
     this.onChange = onChange;
     this.buttons = [];
   }
+
   /**
    * Available Image tunes
    *
    * @returns {{name: string, icon: string, title: string}[]}
    */
+  static get tunes() {
+    return [{
+      name: "stretched",
+      icon: svgs.stretched,
+      title: "Stretch image"
+    }];
+  }
 
+  /**
+   * Styles
+   *
+   * @returns {{wrapper: string, buttonBase: *, button: string, buttonActive: *}}
+   */
+  get CSS() {
+    return {
+      wrapper: "",
+      buttonBase: this.api.styles.settingsButton,
+      button: "image-tool__tune",
+      buttonActive: this.api.styles.settingsButtonActive
+    };
+  }
 
-  _createClass(Tunes, [{
-    key: "CSS",
-    get:
-    /**
-     * Styles
-     *
-     * @returns {{wrapper: string, buttonBase: *, button: string, buttonActive: *}}
-     */
-    function get() {
-      return {
-        wrapper: "",
-        buttonBase: this.api.styles.settingsButton,
-        button: "image-tool__tune",
-        buttonActive: this.api.styles.settingsButtonActive
-      };
-    }
-    /**
-     * Makes buttons with tunes: stretch image
-     *
-     * @param {ImageToolData} toolData - generate Elements of tunes
-     * @returns {Element}
-     */
-
-  }, {
-    key: "render",
-    value: function render(toolData) {
-      var _this = this;
-
-      var wrapper = make("div", this.CSS.wrapper);
-      this.buttons = [];
-      var tunes = Tunes.tunes.concat(this.actions);
-      tunes.forEach(function (tune) {
-        var title = _this.api.i18n.t(tune.title);
-
-        var el = make("div", [_this.CSS.buttonBase, _this.CSS.button], {
-          innerHTML: tune.icon,
-          title: title
-        });
-        el.addEventListener("click", function () {
-          _this.tuneClicked(tune.name, tune.action);
-        });
-        el.dataset.tune = tune.name;
-        el.classList.toggle(_this.CSS.buttonActive, toolData[tune.name]);
-
-        _this.buttons.push(el);
-
-        _this.api.tooltip.onHover(el, title, {
-          placement: "top"
-        });
-
-        wrapper.appendChild(el);
+  /**
+   * Makes buttons with tunes: stretch image
+   *
+   * @param {ImageToolData} toolData - generate Elements of tunes
+   * @returns {Element}
+   */
+  render(toolData) {
+    const wrapper = make("div", this.CSS.wrapper);
+    this.buttons = [];
+    const tunes = Tunes.tunes.concat(this.actions);
+    tunes.forEach(tune => {
+      const title = this.api.i18n.t(tune.title);
+      const el = make("div", [this.CSS.buttonBase, this.CSS.button], {
+        innerHTML: tune.icon,
+        title
       });
-      return wrapper;
-    }
-    /**
-     * Clicks to one of the tunes
-     *
-     * @param {string} tuneName - clicked tune name
-     * @param {Function} customFunction - function to execute on click
-     */
+      el.addEventListener("click", () => {
+        this.tuneClicked(tune.name, tune.action);
+      });
+      el.dataset["tune"] = tune.name;
+      const name = tune.name;
+      el.classList.toggle(this.CSS.buttonActive, !!toolData[name]);
+      this.buttons.push(el);
+      this.api.tooltip.onHover(el, title, {
+        placement: "top"
+      });
+      wrapper.appendChild(el);
+    });
+    return wrapper;
+  }
 
-  }, {
-    key: "tuneClicked",
-    value: function tuneClicked(tuneName, customFunction) {
-      if (typeof customFunction === "function") {
-        if (!customFunction(tuneName)) {
-          return false;
-        }
+  /**
+   * Clicks to one of the tunes
+   *
+   * @param {string} tuneName - clicked tune name
+   * @param {Function} customFunction - function to execute on click
+   */
+  tuneClicked(tuneName, customFunction) {
+    if (typeof customFunction === "function") {
+      if (!customFunction(tuneName)) {
+        return false;
       }
-
-      var button = this.buttons.find(function (el) {
-        return el.dataset.tune === tuneName;
-      });
-      button.classList.toggle(this.CSS.buttonActive, !button.classList.contains(this.CSS.buttonActive));
-      this.onChange(tuneName);
     }
-  }], [{
-    key: "tunes",
-    get: function get() {
-      return [{
-        name: "stretched",
-        icon: svgs.stretched,
-        title: "Stretch image"
-      }];
+    const button = this.buttons.find(el => el.dataset["tune"] === tuneName);
+    if (button) {
+      button.classList.toggle(this.CSS.buttonActive, !button.classList.contains(this.CSS.buttonActive));
     }
-  }]);
-
-  return Tunes;
-}();
+    this.onChange(tuneName);
+    return true;
+  }
+}
 
-export { Tunes as default };
+//# sourceMappingURL=tunes.js.map

package/components/RichTextEditor/tools/image/tunes.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["make","svgs","Tunes","constructor","api","actions","onChange","buttons","tunes","name","icon","stretched","title","CSS","wrapper","buttonBase","styles","settingsButton","button","buttonActive","settingsButtonActive","render","toolData","concat","forEach","tune","i18n","t","el","innerHTML","addEventListener","tuneClicked","action","dataset","classList","toggle","push","tooltip","onHover","placement","appendChild","tuneName","customFunction","find","contains"],"sources":["tunes.ts"],"sourcesContent":["import type { API } from \"@editorjs/editorjs\";\nimport { make } from \"./ui\";\nimport svgs from \"./svgs\";\nimport type { ImageToolData, Tune, TuneOnChangeCallable } from \"./types\";\n\ninterface TunesParams {\n    api: API;\n    actions: Tune[];\n    onChange: TuneOnChangeCallable;\n}\n/**\n * Working with Block Tunes\n */\nexport default class Tunes {\n    private api: API;\n    private readonly actions: Tune[];\n    private readonly onChange: TuneOnChangeCallable;\n    private buttons: Array<HTMLElement>;\n    /**\n     * @param {object} tune - image tool Tunes managers\n     * @param {object} tune.api - Editor API\n     * @param {object} tune.actions - list of user defined tunes\n     * @param {Function} tune.onChange - tune toggling callback\n     */\n    constructor({ api, actions, onChange }: TunesParams) {\n        this.api = api;\n        this.actions = actions;\n        this.onChange = onChange;\n        this.buttons = [];\n    }\n\n    /**\n     * Available Image tunes\n     *\n     * @returns {{name: string, icon: string, title: string}[]}\n     */\n    static get tunes(): Tune[] {\n        return [\n            {\n                name: \"stretched\",\n                icon: svgs.stretched,\n                title: \"Stretch image\"\n            }\n        ];\n    }\n\n    /**\n     * Styles\n     *\n     * @returns {{wrapper: string, buttonBase: *, button: string, buttonActive: *}}\n     */\n    get CSS() {\n        return {\n            wrapper: \"\",\n            buttonBase: this.api.styles.settingsButton,\n            button: \"image-tool__tune\",\n            buttonActive: this.api.styles.settingsButtonActive\n        };\n    }\n\n    /**\n     * Makes buttons with tunes: stretch image\n     *\n     * @param {ImageToolData} toolData - generate Elements of tunes\n     * @returns {Element}\n     */\n    render(toolData: ImageToolData): HTMLElement {\n        const wrapper = make(\"div\", this.CSS.wrapper);\n\n        this.buttons = [];\n\n        const tunes = Tunes.tunes.concat(this.actions);\n\n        tunes.forEach(tune => {\n            const title = this.api.i18n.t(tune.title);\n            const el = make(\"div\", [this.CSS.buttonBase, this.CSS.button], {\n                innerHTML: tune.icon,\n                title\n            });\n\n            el.addEventListener(\"click\", () => {\n                this.tuneClicked(tune.name, tune.action);\n            });\n\n            el.dataset[\"tune\"] = tune.name;\n            const name = tune.name as keyof ImageToolData;\n            el.classList.toggle(this.CSS.buttonActive, !!toolData[name]);\n\n            this.buttons.push(el);\n\n            this.api.tooltip.onHover(el, title, {\n                placement: \"top\"\n            });\n\n            wrapper.appendChild(el);\n        });\n\n        return wrapper;\n    }\n\n    /**\n     * Clicks to one of the tunes\n     *\n     * @param {string} tuneName - clicked tune name\n     * @param {Function} customFunction - function to execute on click\n     */\n    tuneClicked(tuneName: string, customFunction?: TuneOnChangeCallable): boolean {\n        if (typeof customFunction === \"function\") {\n            if (!customFunction(tuneName)) {\n                return false;\n            }\n        }\n\n        const button = this.buttons.find(el => el.dataset[\"tune\"] === tuneName);\n\n        if (button) {\n            button.classList.toggle(\n                this.CSS.buttonActive,\n                !button.classList.contains(this.CSS.buttonActive)\n            );\n        }\n\n        this.onChange(tuneName);\n        return true;\n    }\n}\n"],"mappings":"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","ignoreList":[]}

package/components/RichTextEditor/tools/image/types.d.ts

@@ -0,0 +1,29 @@
+export interface TuneOnChangeCallable {
+    (tune: string): boolean | void;
+}
+export interface Tune {
+    name: string;
+    icon: string;
+    title: string;
+    action?: TuneOnChangeCallable;
+}
+export interface ImageToolData {
+    caption: string;
+    file: string;
+}
+export interface ImageToolFile {
+    src: string;
+}
+export interface GetFileSourceCallable {
+    (file: ImageToolFile | string): string;
+}
+export interface OnSelectFileCallable {
+    (file: ImageToolFile): string;
+}
+export interface ImageToolConfig {
+    getFileSrc: GetFileSourceCallable;
+    onSelectFile: OnSelectFileCallable;
+    captionPlaceholder?: string;
+    actions: Tune[];
+    context: Record<string, any>;
+}

package/components/RichTextEditor/tools/image/types.js

@@ -0,0 +1,3 @@
+export {};
+
+//# sourceMappingURL=types.js.map

package/components/RichTextEditor/tools/image/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["export interface TuneOnChangeCallable {\n    (tune: string): boolean | void;\n}\nexport interface Tune {\n    name: string;\n    icon: string;\n    title: string;\n    action?: TuneOnChangeCallable;\n}\n\nexport interface ImageToolData {\n    caption: string;\n    file: string;\n}\nexport interface ImageToolFile {\n    src: string;\n}\nexport interface GetFileSourceCallable {\n    (file: ImageToolFile | string): string;\n}\nexport interface OnSelectFileCallable {\n    (file: ImageToolFile): string;\n}\nexport interface ImageToolConfig {\n    getFileSrc: GetFileSourceCallable;\n    onSelectFile: OnSelectFileCallable;\n    captionPlaceholder?: string;\n    actions: Tune[];\n    context: Record<string, any>;\n}\n"],"mappings":"","ignoreList":[]}

package/components/RichTextEditor/tools/image/ui.d.ts

@@ -1,3 +1,19 @@
+import type { API } from "@editorjs/editorjs";
+import type { ImageToolConfig, ImageToolData } from "./types";
+interface OnSelectFileCallable {
+    (): void;
+}
+interface UiStatus {
+    EMPTY: "empty";
+    FILLED: "filled";
+    [key: string]: string;
+}
+interface UiParams {
+    api: API;
+    config: ImageToolConfig;
+    onSelectFile: OnSelectFileCallable;
+    readOnly: boolean;
+}
 /**
  * Class for working with UI:
  *  - rendering base structure
@@ -7,28 +23,23 @@
 export default class Ui {
     private api;
     private config;
-    private readOnly;
-    private onSelectFile;
-    nodes: {
+    private readonly readOnly;
+    private readonly onSelectFile;
+    readonly nodes: {
         wrapper: HTMLElement;
         imageContainer: HTMLElement;
         fileButton: HTMLElement;
-        imageEl: HTMLElement;
+        imageEl?: HTMLElement;
         caption: HTMLElement;
     };
     /**
-     * @param {object} ui - image tool Ui module
-     * @param {object} ui.api - Editor.js API
-     * @param {ImageConfig} ui.config - user config
-     * @param {Function} ui.onSelectFile - callback for clicks on Select file button
-     * @param {boolean} ui.readOnly - read-only mode flag
+     * @param ui - image tool Ui module
+     * @param ui.api - Editor.js API
+     * @param ui.config - user config
+     * @param ui.onSelectFile - callback for clicks on Select file button
+     * @param ui.readOnly - read-only mode flag
      */
-    constructor({ api, config, onSelectFile, readOnly }: {
-        api: any;
-        config: any;
-        onSelectFile: any;
-        readOnly: any;
-    });
+    constructor({ api, config, onSelectFile, readOnly }: UiParams);
     /**
      * CSS classes
      *
@@ -53,44 +64,41 @@ export default class Ui {
      *
      * @returns {{EMPTY: string, UPLOADING: string, FILLED: string}}
      */
-    static get status(): {
-        EMPTY: string;
-        FILLED: string;
-    };
+    static get status(): UiStatus;
     /**
      * Renders tool UI
      *
      * @param {ImageToolData} toolData - saved tool data
      * @returns {Element}
      */
-    render(toolData: any): HTMLElement;
+    render(toolData: ImageToolData): HTMLElement;
     /**
      * Creates upload-file button
      *
      * @returns {Element}
      */
-    createFileButton(): any;
+    createFileButton(): HTMLElement;
     /**
      * Shows an image
      *
      * @param {string} url - image source
      * @returns {void}
      */
-    fillImage(url: any): void;
+    fillImage(url: string): void;
     /**
      * Shows caption input
      *
      * @param {string} text - caption text
      * @returns {void}
      */
-    fillCaption(text: any): void;
+    fillCaption(text: string): void;
     /**
      * Changes UI status
      *
      * @param {string} status - see {@link Ui.status} constants
      * @returns {void}
      */
-    toggleStatus(status: any): void;
+    toggleStatus(status: string): void;
     /**
      * Apply visual representation of activated tune
      *
@@ -98,7 +106,7 @@ export default class Ui {
      * @param {boolean} status - true for enable, false for disable
      * @returns {void}
      */
-    applyTune(tuneName: any, status: any): void;
+    applyTune(tuneName: string, status: boolean): void;
 }
 /**
  * Helper for making Elements with attributes
@@ -106,6 +114,7 @@ export default class Ui {
  * @param  {string} tagName           - new Element tag name
  * @param  {Array|string} classNames  - list or name of CSS class
  * @param  {object} attributes        - any attributes
- * @returns {Element}
+ * @returns {HTMLElement}
  */
-export declare const make: (tagName: any, classNames?: any, attributes?: {}) => any;
+export declare const make: (tagName: string, classNames?: string[] | string | null, attributes?: Record<string, string | number | boolean>) => HTMLElement;
+export {};