@webiny/app-admin 5.23.1 → 5.24.0-beta.0

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

@@ -1,16 +1,17 @@
-declare type Tune = {
-    name: string;
-    icon: string;
-    title: string;
-    action?: Function;
-};
+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 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

@@ -83,7 +83,8 @@ var Tunes = /*#__PURE__*/function () {
           _this.tuneClicked(tune.name, tune.action);
         });
         el.dataset.tune = tune.name;
-        el.classList.toggle(_this.CSS.buttonActive, toolData[tune.name]);
+        var name = tune.name;
+        el.classList.toggle(_this.CSS.buttonActive, !!toolData[name]);
 
         _this.buttons.push(el);
 

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 @@
+export {};

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

@@ -1,3 +1,17 @@
+import { API } from "@editorjs/editorjs";
+import { ImageToolConfig, ImageToolData } from "./types";
+interface OnSelectFileCallable {
+    (): void;
+}
+interface UiStatus {
+    [key: string]: string;
+}
+interface UiParams {
+    api: API;
+    config: ImageToolConfig;
+    onSelectFile: OnSelectFileCallable;
+    readOnly: boolean;
+}
 /**
  * Class for working with UI:
  *  - rendering base structure
@@ -7,9 +21,9 @@
 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;
@@ -17,18 +31,13 @@ export default class Ui {
         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 +62,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 +104,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 +112,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, attributes?: Record<string, string | number | boolean>) => HTMLElement;
+export {};

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

@@ -11,11 +11,11 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  */
 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
+   * @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,
@@ -204,9 +204,11 @@ var Ui = /*#__PURE__*/function () {
   }, {
     key: "fillCaption",
     value: function fillCaption(text) {
-      if (this.nodes.caption) {
-        this.nodes.caption.innerHTML = text;
+      if (!this.nodes.caption) {
+        return;
       }
+
+      this.nodes.caption.innerHTML = text;
     }
     /**
      * Changes UI status
@@ -219,9 +221,12 @@ var Ui = /*#__PURE__*/function () {
     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]);
+        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);
       }
     }
     /**
@@ -255,14 +260,14 @@ var Ui = /*#__PURE__*/function () {
  * @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 { 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 attributes = arguments.length > 2 ? arguments[2] : undefined;
   var el = document.createElement(tagName);
 
   if (Array.isArray(classNames)) {
@@ -273,7 +278,15 @@ export var make = function make(tagName) {
     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];
   }
 

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

@@ -1,31 +1,32 @@
-import { API } from "@editorjs/editorjs";
+import { PasteEvent } 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 = {
+interface 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 = {
+interface ParagraphData {
     text: string;
     textAlign: TextAlign;
-};
-declare type Typography = {
+    className?: string;
+}
+interface Typography {
     [key: string]: {
         label: string;
         component: string;
         className: string;
     };
-};
+}
 interface ParagraphArgs {
     data: ParagraphData;
     config: ParagraphConfig;
@@ -33,17 +34,16 @@ interface ParagraphArgs {
     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;
+    private readonly api;
+    private readonly readOnly;
+    private readonly _CSS;
+    private _data;
+    private readonly _element;
+    private readonly _placeholder;
+    private readonly _preserveBlank;
+    private readonly alignments;
+    private readonly settingsButtons;
+    private readonly typography;
     /**
      * Render plugin`s main Element and fill it with saved data
      *
@@ -87,7 +87,7 @@ declare class Paragraph {
      * @returns {ParagraphData} Current data
      * @private
      */
-    get data(): any;
+    get data(): ParagraphData;
     /**
      * Store data in plugin:
      * - at the this._data property
@@ -96,7 +96,7 @@ declare class Paragraph {
      * @param {ParagraphData} data — data to set
      * @private
      */
-    set data(data: any);
+    set data(data: ParagraphData);
     /**
      * Used by Editor paste handling API.
      * Provides configuration to handle P tags.
@@ -127,7 +127,7 @@ declare class Paragraph {
      *
      * @param {KeyboardEvent} e - key up event
      */
-    onKeyUp(e: any): void;
+    onKeyUp(e: KeyboardEvent): void;
     /**
      * Create Tool's view
      * @return {HTMLElement}
@@ -139,7 +139,7 @@ declare class Paragraph {
      *
      * @returns {HTMLDivElement}
      */
-    render(): any;
+    render(): HTMLDivElement;
     /**
      * Create Block's settings block
      *
@@ -152,7 +152,7 @@ declare class Paragraph {
      * @param {ParagraphData} data
      * @public
      */
-    merge(data: any): void;
+    merge(data: ParagraphData): void;
     /**
      * Validate Paragraph block data:
      * - check for emptiness
@@ -161,17 +161,17 @@ declare class Paragraph {
      * @returns {boolean} false if saved data is not correct, otherwise true
      * @public
      */
-    validate(savedData: any): boolean;
+    validate(savedData: ParagraphData): 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;
+    save(toolsContent: HTMLElement): {
+        text: string;
         textAlign: TextAlign.START;
-        className: any;
+        className: string;
     };
     /**
      * Extract textAlign from className
@@ -179,19 +179,19 @@ declare class Paragraph {
      * @param {string} className - heading element className
      * @returns {TextAlign} textAlign
      */
-    getTextAlign(className: any): TextAlign.START;
+    getTextAlign(className: string): TextAlign.START;
     /**
      * On paste callback fired from Editor.
      *
      * @param {PasteEvent} event - event with pasted data
      */
-    onPaste(event: any): void;
+    onPaste(event: PasteEvent): void;
     /**
      * Callback for Block's settings buttons
      *
      * @param {number} alignment - level to set
      */
-    setAlignment(alignment: any): void;
+    setAlignment(alignment: Alignment): void;
     /**
      * Callback for Block's settings buttons
      *
@@ -206,6 +206,6 @@ declare class Paragraph {
      * @returns {HeaderData}
      * @private
      */
-    normalizeData(data: any): any;
+    normalizeData(data?: Partial<ParagraphData>): ParagraphData;
 }
 export default Paragraph;

package/components/RichTextEditor/tools/paragraph/index.js

@@ -4,13 +4,10 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { ALIGNMENTS, TextAlign, ALIGNMENT_ICONS } 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`
- */
 
 var Paragraph = /*#__PURE__*/function () {
+  // private readonly _settings: any;
+
   /**
    * Render plugin`s main Element and fill it with saved data
    *
@@ -34,8 +31,6 @@ var Paragraph = /*#__PURE__*/function () {
 
     _defineProperty(this, "_CSS", void 0);
 
-    _defineProperty(this, "_settings", void 0);
-
     _defineProperty(this, "_data", void 0);
 
     _defineProperty(this, "_element", void 0);
@@ -74,8 +69,9 @@ var Paragraph = /*#__PURE__*/function () {
     this._element = this.drawView();
     this._preserveBlank = config.preserveBlank !== undefined ? config.preserveBlank : false;
     this.settingsButtons = [];
-    this.alignments = ALIGNMENTS;
-    this.data = this.normalizeData(data);
+    this.alignments = ALIGNMENTS; // Call the `data` setter, to properly render the view element.
+
+    this.data = this._data;
   }
   /**
    * Default placeholder for Paragraph Tool
@@ -320,9 +316,9 @@ var Paragraph = /*#__PURE__*/function () {
   }, {
     key: "merge",
     value: function merge(data) {
-      this.data = {
+      this.data = _objectSpread(_objectSpread({}, this.data), {}, {
         text: this.data.text + data.text
-      };
+      });
     }
     /**
      * Validate Paragraph block data:
@@ -382,10 +378,10 @@ var Paragraph = /*#__PURE__*/function () {
   }, {
     key: "onPaste",
     value: function onPaste(event) {
-      var data = {
-        text: event.detail.data.innerHTML
-      };
-      this.data = data;
+      var detail = event.detail;
+      this.data = _objectSpread(_objectSpread({}, this.data), {}, {
+        text: detail.data.innerHTML
+      });
     }
     /**
      * Callback for Block's settings buttons

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

@@ -1,20 +1,22 @@
 import { API } from "@editorjs/editorjs";
-declare class TextColorTool {
-    _state: boolean;
-    color: string;
+interface Config {
+    themeColors: string[];
+}
+interface TextColorToolParams {
     api: API;
-    tag: string;
-    class: string;
-    colorPicker: HTMLDivElement;
-    button: HTMLButtonElement;
-    config: {
-        themeColors: string[];
-    };
-    _CSS: any;
-    constructor({ api, config }: {
-        api: any;
-        config: any;
-    });
+    config: Config;
+}
+declare class TextColorTool {
+    private _state;
+    private color;
+    private readonly api;
+    private readonly tag;
+    private readonly class;
+    private colorPicker;
+    private button;
+    private readonly config;
+    private readonly _CSS;
+    constructor({ api, config }: TextColorToolParams);
     static get isInline(): boolean;
     /**
      * Sanitize method returns rules to let Editor know which HTML tags it should respect.
@@ -35,19 +37,18 @@ declare class TextColorTool {
     /**
      * Finally, when button is pressed Editor calls
      * surround method of the tool with Range object as an argument.
-     * @param range
      */
-    surround(range: any): void;
-    wrap(range: any): void;
-    unwrap(range: any): void;
-    showActions(mark: any): void;
+    surround(range: Range): void;
+    wrap(range: Range): void;
+    unwrap(range: Range): void;
+    showActions(mark: HTMLElement): void;
     hideActions(): void;
     /**
      * CheckState method of each Inline Tool is called by Editor with current `Selection`
      * when user selects some text
      */
     checkState(): void;
-    convertToHex(color: any): string;
+    convertToHex(color: string): string;
     clear(): void;
 }
 export default TextColorTool;

package/components/RichTextEditor/tools/textColor/index.js

@@ -113,7 +113,6 @@ var TextColorTool = /*#__PURE__*/function () {
     /**
      * Finally, when button is pressed Editor calls
      * surround method of the tool with Range object as an argument.
-     * @param range
      */
 
   }, {
@@ -213,6 +212,9 @@ var TextColorTool = /*#__PURE__*/function () {
       // so markup added by Inline Tool will be removed on pasting or on saving.
       // We need this config so that `class` & `style` attributes will remain intact for "span".
       return {
+        /**
+         * TODO: figure out the element type
+         */
         span: function span(el) {
           // Respect `class` and `style` attributes if this condition is meet.
           if (el.classList.contains(COLOR_TOOL_CLASS)) {

package/components/Routes.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from "react";
 interface RoutesProps {
     routes: JSX.Element[];
 }
-export declare const Routes: (props: RoutesProps) => JSX.Element;
+export declare const Routes: React.FC<RoutesProps>;
 export {};

package/components/SearchUI.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-export declare type SearchProps = {
+import React from "react";
+export interface SearchProps {
     value: string;
     onChange: (value: string) => void;
     inputPlaceholder?: string;
-};
-declare const Search: ({ value, onChange, inputPlaceholder }: SearchProps) => JSX.Element;
+}
+declare const Search: React.FC<SearchProps>;
 export default Search;

package/components/SimpleForm/SimpleForm.d.ts

@@ -1,21 +1,19 @@
 import * as React from "react";
-declare const title: string;
-declare const icon: string;
 export declare const SimpleForm: (props: {
     children: React.ReactNode;
     "data-testid"?: string;
     noElevation?: boolean;
     className?: string;
 }) => JSX.Element;
-export declare const SimpleFormHeader: (props: {
+interface SimpleFormHeaderProps {
     title: React.ReactNode;
     icon?: React.ReactElement<any>;
     children?: React.ReactNode;
-}) => JSX.Element;
-export declare const SimpleFormFooter: (props: {
+}
+export declare const SimpleFormHeader: React.FC<SimpleFormHeaderProps>;
+interface SimpleFormFooterProps {
     children: React.ReactNode;
-}) => JSX.Element;
-export declare const SimpleFormContent: (props: {
-    children: any;
-}) => any;
+}
+export declare const SimpleFormFooter: React.FC<SimpleFormFooterProps>;
+export declare const SimpleFormContent: React.FC;
 export {};

package/components/SimpleUI/InputField.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
-declare type InputBoxProps = {
+interface InputBoxProps {
     value?: string | number;
     onChange?: (value: any) => void;
     defaultValue?: string | number;
     [key: string]: any;
-};
-declare const _default: React.MemoExoticComponent<({ className, value, onChange, label, description, validation, defaultValue, ...props }: InputBoxProps) => JSX.Element>;
+}
+declare const _default: React.NamedExoticComponent<InputBoxProps>;
 export default _default;