@webiny/app-admin 0.0.0-mt-3 → 0.0.0-unstable.0156a4c312

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

@@ -1,111 +0,0 @@
-/**
- * Class for working with UI:
- *  - rendering base structure
- *  - show/hide preview
- *  - apply tune view
- */
-export default class Ui {
-    private api;
-    private config;
-    private readOnly;
-    private onSelectFile;
-    nodes: {
-        wrapper: HTMLElement;
-        imageContainer: HTMLElement;
-        fileButton: 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
-     */
-    constructor({ api, config, onSelectFile, readOnly }: {
-        api: any;
-        config: any;
-        onSelectFile: any;
-        readOnly: any;
-    });
-    /**
-     * 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(): {
-        EMPTY: string;
-        FILLED: string;
-    };
-    /**
-     * Renders tool UI
-     *
-     * @param {ImageToolData} toolData - saved tool data
-     * @returns {Element}
-     */
-    render(toolData: any): HTMLElement;
-    /**
-     * Creates upload-file button
-     *
-     * @returns {Element}
-     */
-    createFileButton(): any;
-    /**
-     * Shows an image
-     *
-     * @param {string} url - image source
-     * @returns {void}
-     */
-    fillImage(url: any): void;
-    /**
-     * Shows caption input
-     *
-     * @param {string} text - caption text
-     * @returns {void}
-     */
-    fillCaption(text: any): void;
-    /**
-     * Changes UI status
-     *
-     * @param {string} status - see {@link Ui.status} constants
-     * @returns {void}
-     */
-    toggleStatus(status: any): 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: any, status: any): 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 {Element}
- */
-export declare const make: (tagName: any, classNames?: any, attributes?: {}) => any;

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

@@ -1,281 +0,0 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-/**
- * Class for working with UI:
- *  - rendering base structure
- *  - show/hide preview
- *  - apply tune view
- */
-var Ui = /*#__PURE__*/function () {
-  /**
-   * @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
-   */
-  function Ui(_ref) {
-    var api = _ref.api,
-        config = _ref.config,
-        onSelectFile = _ref.onSelectFile,
-        readOnly = _ref.readOnly;
-
-    _classCallCheck(this, Ui);
-
-    _defineProperty(this, "api", void 0);
-
-    _defineProperty(this, "config", void 0);
-
-    _defineProperty(this, "readOnly", void 0);
-
-    _defineProperty(this, "onSelectFile", void 0);
-
-    _defineProperty(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}
-   */
-
-
-  _createClass(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) {
-        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)) {
-          this.nodes.wrapper.classList.toggle("".concat(this.CSS.wrapper, "--").concat(Ui.status[statusType]), status === Ui.status[statusType]);
-        }
-      }
-    }
-    /**
-     * 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 {Element}
- */
-
-
-export { Ui as default };
-export var make = function make(tagName) {
-  var classNames = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-  var attributes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  var el = document.createElement(tagName);
-
-  if (Array.isArray(classNames)) {
-    var _el$classList;
-
-    (_el$classList = el.classList).add.apply(_el$classList, _toConsumableArray(classNames));
-  } else if (classNames) {
-    el.classList.add(classNames);
-  }
-
-  for (var attrName in attributes) {
-    el[attrName] = attributes[attrName];
-  }
-
-  return el;
-};

package/components/RichTextEditor/tools/paragraph/index.d.ts

@@ -1,211 +0,0 @@
-import { API } from "@editorjs/editorjs";
-import { Alignment, TextAlign } from "../utils";
-/**
- * @typedef {object} ParagraphConfig
- * @property {string} placeholder - placeholder for the empty paragraph
- * @property {boolean} preserveBlank - Whether or not to keep blank paragraphs when saving editor data`
- */
-declare type ParagraphConfig = {
-    placeholder: string;
-    preserveBlank: boolean;
-    typography?: Typography;
-};
-/**
- * @typedef {Object} ParagraphData
- * @description Tool's input and output data format
- * @property {String} text — Paragraph's content. Can include HTML tags: <a><b><i>
- */
-declare type ParagraphData = {
-    text: string;
-    textAlign: TextAlign;
-};
-declare type Typography = {
-    [key: string]: {
-        label: string;
-        component: string;
-        className: string;
-    };
-};
-interface ParagraphArgs {
-    data: ParagraphData;
-    config: ParagraphConfig;
-    api: any;
-    readOnly: boolean;
-}
-declare class Paragraph {
-    api: API;
-    readOnly: boolean;
-    _CSS: any;
-    _settings: any;
-    _data: any;
-    _element: any;
-    _placeholder: string;
-    _preserveBlank: boolean;
-    alignments: Alignment[];
-    settingsButtons: HTMLElement[];
-    typography: Typography;
-    /**
-     * Render plugin`s main Element and fill it with saved data
-     *
-     * @param {object} params - constructor params
-     * @param {ParagraphData} params.data - previously saved data
-     * @param {ParagraphConfig} params.config - user config for Tool
-     * @param {object} params.api - editor.js api
-     * @param {boolean} readOnly - read only mode flag
-     */
-    constructor({ data, config, api, readOnly }: ParagraphArgs);
-    /**
-     * Default placeholder for Paragraph Tool
-     *
-     * @return {string}
-     * @constructor
-     */
-    static get DEFAULT_PLACEHOLDER(): string;
-    /**
-     * Enable Conversion Toolbar. Paragraph can be converted to/from other tools
-     */
-    static get conversionConfig(): {
-        export: string;
-        import: string;
-    };
-    /**
-     * Sanitizer rules
-     */
-    static get sanitize(): {
-        text: {
-            br: boolean;
-        };
-    };
-    /**
-     * Returns true to notify the core that read-only mode is supported
-     *
-     * @return {boolean}
-     */
-    static get isReadOnlySupported(): boolean;
-    /**
-     * Get current Tools`s data
-     * @returns {ParagraphData} Current data
-     * @private
-     */
-    get data(): any;
-    /**
-     * Store data in plugin:
-     * - at the this._data property
-     * - at the HTML
-     *
-     * @param {ParagraphData} data — data to set
-     * @private
-     */
-    set data(data: any);
-    /**
-     * Used by Editor paste handling API.
-     * Provides configuration to handle P tags.
-     *
-     * @returns {{tags: string[]}}
-     */
-    static get pasteConfig(): {
-        tags: string[];
-    };
-    /**
-     * Icon and title for displaying at the Toolbox
-     *
-     * @return {{icon: string, title: string}}
-     */
-    static get toolbox(): {
-        icon: string;
-        title: string;
-    };
-    /**
-     * Get current alignment
-     *
-     * @returns {alignment}
-     */
-    get currentAlignment(): Alignment;
-    /**
-     * Check if text content is empty and set empty string to inner html.
-     * We need this because some browsers (e.g. Safari) insert <br> into empty contentEditable elements
-     *
-     * @param {KeyboardEvent} e - key up event
-     */
-    onKeyUp(e: any): void;
-    /**
-     * Create Tool's view
-     * @return {HTMLElement}
-     * @private
-     */
-    drawView(): HTMLElement;
-    /**
-     * Return Tool's view
-     *
-     * @returns {HTMLDivElement}
-     */
-    render(): any;
-    /**
-     * Create Block's settings block
-     *
-     * @returns {HTMLElement}
-     */
-    renderSettings(): HTMLElement;
-    /**
-     * Method that specified how to merge two Text blocks.
-     * Called by Editor.js by backspace at the beginning of the Block
-     * @param {ParagraphData} data
-     * @public
-     */
-    merge(data: any): void;
-    /**
-     * Validate Paragraph block data:
-     * - check for emptiness
-     *
-     * @param {ParagraphData} savedData — data received after saving
-     * @returns {boolean} false if saved data is not correct, otherwise true
-     * @public
-     */
-    validate(savedData: any): boolean;
-    /**
-     * Extract Tool's data from the view
-     * @param {HTMLDivElement} toolsContent - Paragraph tools rendered view
-     * @returns {ParagraphData} - saved data
-     * @public
-     */
-    save(toolsContent: any): {
-        text: any;
-        textAlign: TextAlign.START;
-        className: any;
-    };
-    /**
-     * Extract textAlign from className
-     *
-     * @param {string} className - heading element className
-     * @returns {TextAlign} textAlign
-     */
-    getTextAlign(className: any): TextAlign.START;
-    /**
-     * On paste callback fired from Editor.
-     *
-     * @param {PasteEvent} event - event with pasted data
-     */
-    onPaste(event: any): void;
-    /**
-     * Callback for Block's settings buttons
-     *
-     * @param {number} alignment - level to set
-     */
-    setAlignment(alignment: any): void;
-    /**
-     * Callback for Block's settings buttons
-     *
-     * @param {string} className - name of typography class
-     */
-    setTypographyClass(className: string): void;
-    /**
-     * Normalize input data
-     *
-     * @param {HeaderData} data - saved data to process
-     *
-     * @returns {HeaderData}
-     * @private
-     */
-    normalizeData(data: any): any;
-}
-export default Paragraph;