@webiny/app-admin 0.0.0-mt-3 → 0.0.0-unstable.085ff6572f

package/components/RichTextEditor/styles.scss

@@ -1,9 +1,18 @@
 .codex-editor {
-  /**
-  * The context menu of the rich text editor is getting obscured if directly below is another rich text editor.
-  * This change help us fix that visual issue.
-  */
-  z-index: unset;
+  .ce-toolbox {
+    position: absolute;
+    background-color: #fff;
+    border: 1px solid #e8e8eb;
+    box-shadow: 0 3px 15px -3px rgb(13 20 33 / 13%);
+    border-radius: 6px;
+    z-index: 2;
+  }
+
+  .ce-toolbox--opened {
+    animation-duration: 0.1s;
+    animation-name: panelShowing;
+    padding: 5px 5px 5px 0;
+  }
 
   .codex-editor__redactor {
     padding-bottom: 0 !important;
@@ -24,6 +33,15 @@
     letter-spacing: 0.2em;
   }
 
+  .ce-settings {
+    position: absolute;
+    background-color: #fff;
+    border: 1px solid #e8e8eb;
+    box-shadow: 0 3px 15px -3px rgb(13 20 33 / 13%);
+    border-radius: 6px;
+    z-index: 2;
+  }
+
   // Reset default styles
   .ce-block__content:focus {
     outline: none;
@@ -43,9 +61,23 @@
     content: none !important;
   }
 
-  // Reset Toolbar style
+  .ce-toolbar__actions {
+    right: unset;
+  }
+
+  .ce-toolbar__actions--opened {
+    opacity: 1;
+    background-color: white;
+    border-radius: 5px;
+    border: 1px solid #e8e8eb;
+    padding: 3px;
+    top: -3px;
+  }
+
   .ce-toolbar__content {
-    max-width: 92%;
+    max-width: 650px;
+    margin: 0 auto;
+    position: absolute;
   }
 }
 

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

@@ -1,21 +1,27 @@
-import { API } from "@editorjs/editorjs";
+/// <reference types="react" />
+/// <reference types="web" />
+import { HTMLPasteEvent } from "@editorjs/editorjs";
 import { TextAlign, Alignment } from "../utils";
-declare type Typography = {
+interface Typography {
     [key: string]: {
         label: string;
         component: string;
         className: string;
     };
-};
-declare type HeaderData = {
+}
+export interface HeaderData {
     text: string;
-    level: any;
-    textAlign: TextAlign;
-};
-declare type HeaderConfig = {
+    level: number;
+    textAlign?: TextAlign;
+    alignment?: Alignment;
+    className?: string;
+}
+interface HeaderConfig {
     levels: number[];
     typography: Typography;
-};
+    placeholder?: string;
+    defaultLevel?: number;
+}
 interface HeaderArgs {
     data: HeaderData;
     config: HeaderConfig;
@@ -23,15 +29,15 @@ interface HeaderArgs {
     readOnly: boolean;
 }
 declare class Header {
-    api: API;
-    readOnly: boolean;
-    settingsButtons: any[];
-    _CSS: any;
-    _settings: any;
-    _data: any;
-    _element: any;
-    alignments: Alignment[];
-    typography: Typography;
+    private readonly api;
+    private readonly readOnly;
+    private readonly settingsButtons;
+    private readonly _CSS;
+    private readonly _settings;
+    private _data;
+    private _element;
+    private readonly alignments;
+    private readonly typography;
     /**
      * Render plugin`s main Element and fill it with saved data
      *
@@ -50,7 +56,7 @@ declare class Header {
      * @returns {HeaderData}
      * @private
      */
-    normalizeData(data: any): any;
+    normalizeData(data: Partial<HeaderData>): HeaderData;
     /**
      * Return Tool's view
      *
@@ -69,13 +75,13 @@ declare class Header {
      *
      * @param {number} level - level to set
      */
-    setLevel(level: any): void;
+    setLevel(level: number): void;
     /**
      * Callback for Block's settings buttons
      *
      * @param {number} alignment - level to set
      */
-    setAlignment(alignment: any): void;
+    setAlignment(alignment: Alignment): void;
     /**
      * Method that specified how to merge two Text blocks.
      * Called by Editor.js by backspace at the beginning of the Block
@@ -83,7 +89,7 @@ declare class Header {
      * @param {HeaderData} data - saved data to merger with current block
      * @public
      */
-    merge(data: any): void;
+    merge(data: HeaderData): void;
     /**
      * Validate Text block data:
      * - check for emptiness
@@ -92,7 +98,7 @@ declare class Header {
      * @returns {boolean} false if saved data is not correct, otherwise true
      * @public
      */
-    validate(blockData: any): boolean;
+    validate(blockData: HeaderData): boolean;
     /**
      * Extract Tool's data from the view
      *
@@ -100,19 +106,14 @@ declare class Header {
      * @returns {HeaderData} - saved data
      * @public
      */
-    save(toolsContent: any): {
-        text: any;
-        level: number;
-        textAlign: TextAlign.START;
-        className: any;
-    };
+    save(toolsContent: HTMLHeadingElement): HeaderData;
     /**
      * Extract textAlign from className
      *
      * @param {string} className - heading element className
      * @returns {TextAlign} textAlign
      */
-    getTextAlign(className: any): TextAlign.START;
+    getTextAlign(className: string): TextAlign;
     /**
      * Allow Header to be converted to/from other blocks
      */
@@ -139,7 +140,7 @@ declare class Header {
      * @returns {HeaderData} Current data
      * @private
      */
-    get data(): any;
+    get data(): HeaderData;
     /**
      * Store data in plugin:
      * - at the this._data property
@@ -148,7 +149,7 @@ declare class Header {
      * @param {HeaderData} data — data to set
      * @private
      */
-    set data(data: any);
+    set data(data: HeaderData);
     /**
      * Get tag for target level
      * By default returns second-leveled header
@@ -201,9 +202,9 @@ declare class Header {
     /**
      * Handle H1-H6 tags on paste to substitute it with header Tool
      *
-     * @param {PasteEvent} event - event with pasted content
+     * @param {HTMLPasteEvent} event - event with pasted content
      */
-    onPaste(event: any): void;
+    onPaste(event: HTMLPasteEvent): void;
     /**
      * Used by Editor.js paste handling API.
      * Provides configuration to handle H1-H6 tags.