@webiny/app-admin 0.0.0-ee-vpcs.549378cf03

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

@@ -0,0 +1,57 @@
+/// <reference types="react" />
+/// <reference types="web" />
+import { API } from "@editorjs/editorjs";
+import { ImageToolData, Tune, TuneOnChangeCallable } from "./types";
+interface TunesParams {
+    api: API;
+    actions: Tune[];
+    onChange: TuneOnChangeCallable;
+}
+/**
+ * Working with Block Tunes
+ */
+export default class Tunes {
+    private api;
+    private readonly actions;
+    private readonly onChange;
+    private buttons;
+    /**
+     * @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
+     */
+    constructor({ api, actions, onChange }: TunesParams);
+    /**
+     * Available Image tunes
+     *
+     * @returns {{name: string, icon: string, title: string}[]}
+     */
+    static get tunes(): Tune[];
+    /**
+     * Styles
+     *
+     * @returns {{wrapper: string, buttonBase: *, button: string, buttonActive: *}}
+     */
+    get CSS(): {
+        wrapper: string;
+        buttonBase: string;
+        button: string;
+        buttonActive: string;
+    };
+    /**
+     * Makes buttons with tunes: stretch image
+     *
+     * @param {ImageToolData} toolData - generate Elements of tunes
+     * @returns {Element}
+     */
+    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: string, customFunction?: TuneOnChangeCallable): boolean;
+}
+export {};

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

@@ -0,0 +1,146 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _ui = require("./ui");
+
+var _svgs = _interopRequireDefault(require("./svgs"));
+
+/**
+ * Working with Block Tunes
+ */
+var Tunes = /*#__PURE__*/function () {
+  /**
+   * @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;
+    (0, _classCallCheck2.default)(this, Tunes);
+    (0, _defineProperty2.default)(this, "api", void 0);
+    (0, _defineProperty2.default)(this, "actions", void 0);
+    (0, _defineProperty2.default)(this, "onChange", void 0);
+    (0, _defineProperty2.default)(this, "buttons", void 0);
+    this.api = api;
+    this.actions = actions;
+    this.onChange = onChange;
+    this.buttons = [];
+  }
+  /**
+   * Available Image tunes
+   *
+   * @returns {{name: string, icon: string, title: string}[]}
+   */
+
+
+  (0, _createClass2.default)(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 = (0, _ui.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 = (0, _ui.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;
+        var 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;
+    }
+    /**
+     * Clicks to one of the tunes
+     *
+     * @param {string} tuneName - clicked tune name
+     * @param {Function} customFunction - function to execute on click
+     */
+
+  }, {
+    key: "tuneClicked",
+    value: function tuneClicked(tuneName, customFunction) {
+      if (typeof customFunction === "function") {
+        if (!customFunction(tuneName)) {
+          return false;
+        }
+      }
+
+      var button = this.buttons.find(function (el) {
+        return el.dataset["tune"] === tuneName;
+      });
+
+      if (button) {
+        button.classList.toggle(this.CSS.buttonActive, !button.classList.contains(this.CSS.buttonActive));
+      }
+
+      this.onChange(tuneName);
+      return true;
+    }
+  }], [{
+    key: "tunes",
+    get: function get() {
+      return [{
+        name: "stretched",
+        icon: _svgs.default.stretched,
+        title: "Stretch image"
+      }];
+    }
+  }]);
+  return Tunes;
+}();
+
+exports.default = Tunes;

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

@@ -0,0 +1 @@
+{"version":3,"names":["Tunes","api","actions","onChange","buttons","wrapper","buttonBase","styles","settingsButton","button","buttonActive","settingsButtonActive","toolData","make","CSS","tunes","concat","forEach","tune","title","i18n","t","el","innerHTML","icon","addEventListener","tuneClicked","name","action","dataset","classList","toggle","push","tooltip","onHover","placement","appendChild","tuneName","customFunction","find","contains","svgs","stretched"],"sources":["tunes.ts"],"sourcesContent":["import { API } from \"@editorjs/editorjs\";\nimport { make } from \"./ui\";\nimport svgs from \"./svgs\";\nimport { 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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"}

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,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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":""}

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

@@ -0,0 +1,122 @@
+/// <reference types="react" />
+/// <reference types="web" />
+import { API } from "@editorjs/editorjs";
+import { 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
+ *  - show/hide preview
+ *  - apply tune view
+ */
+export default class Ui {
+    private api;
+    private config;
+    private readonly readOnly;
+    private readonly onSelectFile;
+    readonly nodes: {
+        wrapper: HTMLElement;
+        imageContainer: HTMLElement;
+        fileButton: HTMLElement;
+        imageEl?: HTMLElement;
+        caption: HTMLElement;
+    };
+    /**
+     * @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 }: UiParams);
+    /**
+     * CSS classes
+     *
+     * @returns {object}
+     */
+    get CSS(): {
+        baseClass: string;
+        input: string;
+        button: string;
+        /**
+         * Tool's classes
+         */
+        wrapper: string;
+        imageContainer: string;
+        imageEl: string;
+        caption: string;
+    };
+    /**
+     * Ui statuses:
+     * - empty
+     * - filled
+     *
+     * @returns {{EMPTY: string, UPLOADING: string, FILLED: string}}
+     */
+    static get status(): UiStatus;
+    /**
+     * Renders tool UI
+     *
+     * @param {ImageToolData} toolData - saved tool data
+     * @returns {Element}
+     */
+    render(toolData: ImageToolData): HTMLElement;
+    /**
+     * Creates upload-file button
+     *
+     * @returns {Element}
+     */
+    createFileButton(): HTMLElement;
+    /**
+     * Shows an image
+     *
+     * @param {string} url - image source
+     * @returns {void}
+     */
+    fillImage(url: string): void;
+    /**
+     * Shows caption input
+     *
+     * @param {string} text - caption text
+     * @returns {void}
+     */
+    fillCaption(text: string): void;
+    /**
+     * Changes UI status
+     *
+     * @param {string} status - see {@link Ui.status} constants
+     * @returns {void}
+     */
+    toggleStatus(status: string): void;
+    /**
+     * Apply visual representation of activated tune
+     *
+     * @param {string} tuneName - one of available tunes {@link Tunes.tunes}
+     * @param {boolean} status - true for enable, false for disable
+     * @returns {void}
+     */
+    applyTune(tuneName: string, status: boolean): void;
+}
+/**
+ * Helper for making Elements with attributes
+ *
+ * @param  {string} tagName           - new Element tag name
+ * @param  {Array|string} classNames  - list or name of CSS class
+ * @param  {object} attributes        - any attributes
+ * @returns {HTMLElement}
+ */
+export declare const make: (tagName: string, classNames?: string[] | string | null, attributes?: Record<string, string | number | boolean>) => HTMLElement;
+export {};

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

@@ -0,0 +1,301 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.make = exports.default = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+/**
+ * Class for working with UI:
+ *  - rendering base structure
+ *  - show/hide preview
+ *  - apply tune view
+ */
+var Ui = /*#__PURE__*/function () {
+  /**
+   * @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
+   */
+  function Ui(_ref) {
+    var api = _ref.api,
+        config = _ref.config,
+        onSelectFile = _ref.onSelectFile,
+        readOnly = _ref.readOnly;
+    (0, _classCallCheck2.default)(this, Ui);
+    (0, _defineProperty2.default)(this, "api", void 0);
+    (0, _defineProperty2.default)(this, "config", void 0);
+    (0, _defineProperty2.default)(this, "readOnly", void 0);
+    (0, _defineProperty2.default)(this, "onSelectFile", void 0);
+    (0, _defineProperty2.default)(this, "nodes", void 0);
+    this.api = api;
+    this.config = config;
+    this.onSelectFile = onSelectFile;
+    this.readOnly = readOnly;
+    this.nodes = {
+      wrapper: make("div", [this.CSS.baseClass, this.CSS.wrapper]),
+      imageContainer: make("div", [this.CSS.imageContainer]),
+      fileButton: this.createFileButton(),
+      imageEl: undefined,
+      caption: make("div", [this.CSS.input, this.CSS.caption], {
+        contentEditable: !this.readOnly
+      })
+    };
+    /**
+     * Create base structure
+     *  <wrapper>
+     *    <image-container/>
+     *    <caption />
+     *  </wrapper>
+     */
+
+    this.nodes.caption.dataset["placeholder"] = this.config.captionPlaceholder;
+    this.nodes.wrapper.appendChild(this.nodes.imageContainer);
+    this.nodes.wrapper.appendChild(this.nodes.caption);
+    this.nodes.wrapper.appendChild(this.nodes.fileButton);
+  }
+  /**
+   * CSS classes
+   *
+   * @returns {object}
+   */
+
+
+  (0, _createClass2.default)(Ui, [{
+    key: "CSS",
+    get: function get() {
+      return {
+        baseClass: this.api.styles.block,
+        input: this.api.styles.input,
+        button: this.api.styles.button,
+
+        /**
+         * Tool's classes
+         */
+        wrapper: "image-tool",
+        imageContainer: "image-tool__image",
+        imageEl: "image-tool__image-picture",
+        caption: "image-tool__caption"
+      };
+    }
+    /**
+     * Ui statuses:
+     * - empty
+     * - filled
+     *
+     * @returns {{EMPTY: string, UPLOADING: string, FILLED: string}}
+     */
+
+  }, {
+    key: "render",
+    value:
+    /**
+     * Renders tool UI
+     *
+     * @param {ImageToolData} toolData - saved tool data
+     * @returns {Element}
+     */
+    function render(toolData) {
+      if (!toolData.file || Object.keys(toolData.file).length === 0) {
+        this.toggleStatus(Ui.status.EMPTY);
+      }
+
+      return this.nodes.wrapper;
+    }
+    /**
+     * Creates upload-file button
+     *
+     * @returns {Element}
+     */
+
+  }, {
+    key: "createFileButton",
+    value: function createFileButton() {
+      var _this = this;
+
+      var button = make("div", [this.CSS.button]);
+      button.innerHTML = this.api.i18n.t("Select an Image");
+      button.addEventListener("click", function () {
+        _this.onSelectFile();
+      });
+      return button;
+    }
+    /**
+     * Shows an image
+     *
+     * @param {string} url - image source
+     * @returns {void}
+     */
+
+  }, {
+    key: "fillImage",
+    value: function fillImage(url) {
+      var _this2 = this;
+
+      /**
+       * Check for a source extension to compose element correctly: video tag for mp4, img — for others
+       */
+      var tag = /\.mp4$/.test(url) ? "VIDEO" : "IMG";
+      var attributes = {
+        src: url
+      };
+      /**
+       * We use eventName variable because IMG and VIDEO tags have different event to be called on source load
+       * - IMG: load
+       * - VIDEO: loadeddata
+       *
+       * @type {string}
+       */
+
+      var eventName = "load";
+      /**
+       * Update attributes and eventName if source is a mp4 video
+       */
+
+      if (tag === "VIDEO") {
+        /**
+         * Add attributes for playing muted mp4 as a gif
+         *
+         * @type {boolean}
+         */
+        attributes.autoplay = true;
+        attributes.loop = true;
+        attributes.muted = true;
+        attributes.playsinline = true;
+        /**
+         * Change event to be listened
+         *
+         * @type {string}
+         */
+
+        eventName = "loadeddata";
+      }
+      /**
+       * Compose tag with defined attributes
+       *
+       * @type {Element}
+       */
+
+
+      this.nodes.imageEl = make(tag, this.CSS.imageEl, attributes);
+      /**
+       * Add load event listener
+       */
+
+      this.nodes.imageEl.addEventListener(eventName, function () {
+        _this2.toggleStatus(Ui.status.FILLED);
+      });
+      this.nodes.imageContainer.appendChild(this.nodes.imageEl);
+    }
+    /**
+     * Shows caption input
+     *
+     * @param {string} text - caption text
+     * @returns {void}
+     */
+
+  }, {
+    key: "fillCaption",
+    value: function fillCaption(text) {
+      if (!this.nodes.caption) {
+        return;
+      }
+
+      this.nodes.caption.innerHTML = text;
+    }
+    /**
+     * Changes UI status
+     *
+     * @param {string} status - see {@link Ui.status} constants
+     * @returns {void}
+     */
+
+  }, {
+    key: "toggleStatus",
+    value: function toggleStatus(status) {
+      for (var statusType in Ui.status) {
+        if (Object.prototype.hasOwnProperty.call(Ui.status, statusType) === false) {
+          continue;
+        }
+
+        var newStatus = Ui.status[statusType];
+        this.nodes.wrapper.classList.toggle("".concat(this.CSS.wrapper, "--").concat(newStatus), status === newStatus);
+      }
+    }
+    /**
+     * Apply visual representation of activated tune
+     *
+     * @param {string} tuneName - one of available tunes {@link Tunes.tunes}
+     * @param {boolean} status - true for enable, false for disable
+     * @returns {void}
+     */
+
+  }, {
+    key: "applyTune",
+    value: function applyTune(tuneName, status) {
+      this.nodes.wrapper.classList.toggle("".concat(this.CSS.wrapper, "--").concat(tuneName), status);
+    }
+  }], [{
+    key: "status",
+    get: function get() {
+      return {
+        EMPTY: "empty",
+        FILLED: "filled"
+      };
+    }
+  }]);
+  return Ui;
+}();
+/**
+ * Helper for making Elements with attributes
+ *
+ * @param  {string} tagName           - new Element tag name
+ * @param  {Array|string} classNames  - list or name of CSS class
+ * @param  {object} attributes        - any attributes
+ * @returns {HTMLElement}
+ */
+
+
+exports.default = Ui;
+
+var make = function make(tagName) {
+  var classNames = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  var attributes = arguments.length > 2 ? arguments[2] : undefined;
+  var el = document.createElement(tagName);
+
+  if (Array.isArray(classNames)) {
+    var _el$classList;
+
+    (_el$classList = el.classList).add.apply(_el$classList, (0, _toConsumableArray2.default)(classNames));
+  } else if (classNames) {
+    el.classList.add(classNames);
+  }
+
+  if (!attributes) {
+    return el;
+  }
+
+  for (var attrName in attributes) {
+    /**
+     * Unfortunately it is a problem to map attributes to element because element is complaining
+     * that attrName is a string, which cannot index the HTMLElement
+     */
+    el[attrName] = attributes[attrName];
+  }
+
+  return el;
+};
+
+exports.make = make;