feat(ui): the toolbox became vertical

docs/CHANGELOG.md

@@ -1,8 +1,11 @@
 # Changelog
 
-### 2.23.3
+### 2.24.0
 
+- `New` — *UI* — The Toolbox became vertical 🥳
+- `Improvement` — *UI* — the Plus button will always be shown (previously, it appears only for empty blocks)
 - `Improvement` — *Dev Example Page* - Server added to allow opening example page on other devices in network.
+- `Fix` - `UI` - the Toolbar won't move on hover at mobile viewports. Resolves [#1972](https://github.com/codex-team/editor.js/issues/1972)
 - `Fix` — `OnChange` event invocation after block insertion. [#1997](https://github.com/codex-team/editor.js/issues/1997)
 
 ### 2.23.2
@@ -435,4 +438,4 @@ See a whole [Changelog](/docs/)
 - `New` New [Editor.js PHP](http://github.com/codex-team/codex.editor.backend) — example of server-side implementation with HTML purifying and data validation.
 - `Improvements` - Improvements of Toolbar's position calculation.
 - `Improvements` — Improved zero-configuration initialization.
-- and many little improvements.
+- and many little improvements.

example/example-i18n.html

@@ -193,7 +193,9 @@
           },
           "toolbar": {
             "toolbox": {
-              "Add": "Добавить"
+              "Add": "Добавить",
+              "Filter": "Поиск",
+              "Noting found": "Ничего не найдено"
             }
           }
         },

src/components/flipper.ts

@@ -18,20 +18,22 @@ export interface FlipperOptions {
   items?: HTMLElement[];
 
   /**
-   * Defines arrows usage. By default Flipper leafs items also via RIGHT/LEFT.
-   *
-   * true by default
-   *
-   * Pass 'false' if you don't need this behaviour
-   * (for example, Inline Toolbar should be closed by arrows,
-   * because it means caret moving with selection clearing)
+   * Optional callback for button click
    */
-  allowArrows?: boolean;
+  activateCallback?: (item: HTMLElement) => void;
 
   /**
-   * Optional callback for button click
+   * List of keys allowed for handling.
+   * Can include codes of the following keys:
+   *  - Tab
+   *  - Enter
+   *  - Arrow up
+   *  - Arrow down
+   *  - Arrow right
+   *  - Arrow left
+   * If not specified all keys are enabled
    */
-  activateCallback?: (item: HTMLElement) => void;
+  allowedKeys?: number[];
 }
 
 /**
@@ -53,11 +55,9 @@ export default class Flipper {
   private activated = false;
 
   /**
-   * Flag that allows arrows usage to flip items
-   *
-   * @type {boolean}
+   * List codes of the keys allowed for handling
    */
-  private readonly allowArrows: boolean = true;
+  private readonly allowedKeys: number[];
 
   /**
    * Call back for button click/enter
@@ -68,9 +68,9 @@ export default class Flipper {
    * @param {FlipperOptions} options - different constructing settings
    */
   constructor(options: FlipperOptions) {
-    this.allowArrows = _.isBoolean(options.allowArrows) ? options.allowArrows : true;
     this.iterator = new DomIterator(options.items, options.focusedItemClass);
     this.activateCallback = options.activateCallback;
+    this.allowedKeys = options.allowedKeys || Flipper.usedKeys;
   }
 
   /**
@@ -120,15 +120,6 @@ export default class Flipper {
     document.removeEventListener('keydown', this.onKeyDown);
   }
 
-  /**
-   * Return current focused button
-   *
-   * @returns {HTMLElement|null}
-   */
-  public get currentItem(): HTMLElement|null {
-    return this.iterator.currentItem;
-  }
-
   /**
    * Focus first item
    */
@@ -142,13 +133,22 @@ export default class Flipper {
    */
   public flipLeft(): void {
     this.iterator.previous();
+    this.flipCallback();
   }
 
   /**
    * Focuses next flipper iterator item
    */
   public flipRight(): void {
     this.iterator.next();
+    this.flipCallback();
+  }
+
+  /**
+   * Return true if some button is focused
+   */
+  public hasFocus(): boolean {
+    return !!this.iterator.currentItem;
   }
 
   /**
@@ -206,23 +206,7 @@ export default class Flipper {
    * @returns {boolean}
    */
   private isEventReadyForHandling(event: KeyboardEvent): boolean {
-    const handlingKeyCodeList = [
-      _.keyCodes.TAB,
-      _.keyCodes.ENTER,
-    ];
-
-    const isCurrentItemIsFocusedInput = this.iterator.currentItem == document.activeElement;
-
-    if (this.allowArrows && !isCurrentItemIsFocusedInput) {
-      handlingKeyCodeList.push(
-        _.keyCodes.LEFT,
-        _.keyCodes.RIGHT,
-        _.keyCodes.UP,
-        _.keyCodes.DOWN
-      );
-    }
-
-    return this.activated && handlingKeyCodeList.indexOf(event.keyCode) !== -1;
+    return this.activated && this.allowedKeys.includes(event.keyCode);
   }
 
   /**
@@ -266,4 +250,13 @@ export default class Flipper {
     event.preventDefault();
     event.stopPropagation();
   }
+
+  /**
+   * Fired after flipping in any direction
+   */
+  private flipCallback(): void {
+    if (this.iterator.currentItem) {
+      this.iterator.currentItem.scrollIntoViewIfNeeded();
+    }
+  }
 }

src/components/i18n/locales/en/messages.json

@@ -13,7 +13,9 @@
     },
     "toolbar": {
       "toolbox": {
-        "Add": ""
+        "Add": "",
+        "Filter": "",
+        "Noting found": ""
       }
     }
   },

src/components/modules/saver.ts

@@ -33,7 +33,6 @@ export default class Saver extends Module {
         chainData = [];
 
     try {
-
       blocks.forEach((block: Block) => {
         chainData.push(this.getSavedData(block));
       });
@@ -46,7 +45,7 @@ export default class Saver extends Module {
       return this.makeOutput(sanitizedData);
     } catch (e) {
       _.logLabeled(`Saving failed due to the Error %o`, 'error', e);
-    } 
+    }
   }
 
   /**