issue-705: Leaf BlockSettings and InlineTools via keyboard (#723)

* Do not start multi-block selection on UI elements (#662) * Do not start multi-block selection on UI elements * Do not prevent mousedown event on inline toolbar actions * Remove log * Add comment * Add link to issue closes #646 * Fix loss of pointer (#666) * Fix loss of pointer when click is outside of the editor but selection is inside * Remove log * Update shortcuts module (#685) * Fixed possible grammatical typo (#681) Thanks * Update shortcuts module * update changelog * update * Remove margin top for inline-link icon (#690) * Remove margin top for inline-link icon resolves #674 * Update CHANGELOG.md * Remove unused style * Pull fresh tools * Remove changelog contents from readme (#700) * #665 API to open and close inline-toolbar (#711) * API to open and close inline-toolbar * Fixed documentation * renamed inline -> inline-toolbar * removed dist * reset editor.js * added editor.js bundle * Fixed build error * Null checks on toolbar/inline@open * updated bundle * Improve some comments * Updatd api.md CHANGELOG.md * Change feature to new instead of improvement * leaf buttons: initial * leaf inline toolbar buttons * Allow holderId work with ref on dom element (#710) * done * update types * attempt to simplify code * remove useless helper * revert holderId logic and add holder property * Apply suggestions from code review Co-Authored-By: dimensi <eddimensi@gmail.com> * update holder type on string | HTMLElement * fix typo * add deprecated notice and fix typos * fix wrong compare * fix comments * swap console.log on _.log * update types for editor config * update examples * update docs * update build * leaf inline tools and drop index after click * leaf toolbox and clear active button after activation * debugging blockSettings * Activating Open Collective (#736) Hi, I'm making updates for Open Collective. Either you or a supporter signed this repo up for Open Collective. This pull request adds backers and sponsors from your Open Collective https://opencollective.com/editorjs❤️ It adds two badges at the top to show the latest number of backers and sponsors. It also adds placeholders so that the avatar/logo of new backers/sponsors can automatically be shown without having to update your README.md. [more info](https://github.com/opencollective/opencollective/wiki/Github-banner). See how it looks on this [repo](https://github.com/apex/apex#backers). You can also add a postinstall script to let people know after npm|yarn install that you are welcoming donations (optional). [More info](https://github.com/OpenCollective/opencollective-cli) You can also add a "Donate" button to your website and automatically show your backers and sponsors there with our widgets. Have a look here: https://opencollective.com/widgets P.S: As with any pull request, feel free to comment or suggest changes. The only thing "required" are the placeholders on the README because we believe it's important to acknowledge the people in your community that are contributing (financially or with code!). Thank you for your great contribution to the open source community. You are awesome! 🙌 And welcome to the open collective community! 😊 Come chat with us in the #opensource channel on https://slack.opencollective.com - great place to ask questions and share best practices with other open source sustainers! * Do not install editor.js as dev-dependency (#731) Resolves #730 * Move codex-notifier to dependencies for typescript declarations (#728) * Close inline toolbar after creating new link by pressing ENTER (#722) * Method to clear current selection and close inline toolbar * clearSelection with optional collapsed range * refactored selection.ts * removed experimental function * Update src/components/selection.ts Co-Authored-By: tanmayv <12tanmayvijay@gmail.com> * update version, add changelog * Link Logo Image to homepage (#738) * Update README.md (#744) * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md Co-Authored-By: neSpecc <specc.dev@gmail.com> * Config minHeight option that allows to customize bottom zone (#745) * issue-739: allow Block's editable element selection (#747) * issue-739: allow Block's input selection * little improvements * update Changelog and cache inputs * small fix * delete map file * fix inputs.count condition * Fix typo in example paragraph (#749) * Fix typo * Update example-dev.html * minor release * done * requested changes * production build * update package.json * some improvements * ready for testing * update * ready * requested changes * updates * use setToBlock instead of focus * active -> focused * update * refactor types * fix inline tools flipping * inhancements * rm check for focus at the handleShowingEvent * fix IT closing after second enter * add animation to settings buttons * Click animation * Add changelog * do not patch version
2024-06-29 02:40:23 +02:00 · 2019-05-24 19:51:39 +03:00 · 2019-05-24 19:51:39 +03:00 · 384cd1ad75
parent 5a443b2d15
commit 384cd1ad75
11 changed files with 421 additions and 90 deletions
--- a/dist/editor.js
+++ b/dist/editor.js
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@ -4,6 +4,7 @@
 ### 2.14

 - `Fix` *Config* — User config now has higher priority than internal settings
+- `New` — Ability to work with Block Actions and Inline Toolbar from the keyboard by Tab.

 ### 2.13

--- a/src/components/dom.ts
+++ b/src/components/dom.ts
@ -520,6 +520,80 @@ export default class Dom {
  }

  /**
+   * Leafs nodes inside the target list from active element
+   *
+   * @param {HTMLElement[]} nodeList - target list of nodes
+   * @param {number} activeIndex — index of active node. By default it must be -1
+   * @param {string} direction - leaf direction. Can be 'left' or 'right'
+   * @param {string} activeCSSClass - css class that will be added
+   *
+   * @return {Number} index of active node
+   */
+  public static leafNodesAndReturnIndex(nodeList: HTMLElement[], activeIndex: number, direction: string, activeCSSClass: string): number {
+    /**
+     * If activeButtonIndex === -1 then we have no chosen Tool in Toolbox
+     */
+    if (activeIndex === -1) {
+      /**
+       * Normalize "previous" Tool index depending on direction.
+       * We need to do this to highlight "first" Tool correctly
+       *
+       * Order of Tools: [0] [1] ... [n - 1]
+       *   [0 = n] because of: n % n = 0 % n
+       *
+       * Direction 'right': for [0] the [n - 1] is a previous index
+       *   [n - 1] -> [0]
+       *
+       * Direction 'left': for [n - 1] the [0] is a previous index
+       *   [n - 1] <- [0]
+       *
+       * @type {number}
+       */
+      activeIndex = direction === 'right' ? -1 : 0;
+    } else {
+      /**
+       * If we have chosen Tool then remove highlighting
+       */
+      nodeList[activeIndex].classList.remove(activeCSSClass);
+    }
+
+    /**
+     * Count index for next Tool
+     */
+    if (direction === 'right') {
+      /**
+       * If we go right then choose next (+1) Tool
+       * @type {number}
+       */
+      activeIndex = (activeIndex + 1) % nodeList.length;
+    } else {
+      /**
+       * If we go left then choose previous (-1) Tool
+       * Before counting module we need to add length before because of "The JavaScript Modulo Bug"
+       * @type {number}
+       */
+      activeIndex = (nodeList.length + activeIndex - 1) % nodeList.length;
+    }
+
+    if (Dom.isNativeInput(nodeList[activeIndex])) {
+      /**
+       * Focus input
+       */
+      nodeList[activeIndex].focus();
+    }
+
+    /**
+     * Highlight new chosen Tool
+     */
+    nodeList[activeIndex].classList.add(activeCSSClass);
+
+    /**
+     * Return Active index
+     */
+    return activeIndex;
+  }
+
+  /*
   * Helper for get holder from {string} or return HTMLElement
   * @param element
   */
--- a/src/components/modules/blockEvents.ts
+++ b/src/components/modules/blockEvents.ts
@ -3,8 +3,10 @@
 */
 import Module from '../__module';
 import _ from '../utils';
+import SelectionUtils from '../selection';

 export default class BlockEvents extends Module {
+
  /**
   * All keydowns on Block
   * @param {KeyboardEvent} event - keydown
@ -62,7 +64,12 @@ export default class BlockEvents extends Module {
      return;
    }

-    this.Editor.Toolbar.close();
+    /**
+     * Close Toolbar on any keypress except TAB, because TAB leafs Tools
+     */
+    if (event.keyCode !== _.keyCodes.TAB) {
+      this.Editor.Toolbar.close();
+    }

    const cmdKey = event.ctrlKey || event.metaKey;
    const altKey = event.altKey;
@ -110,6 +117,10 @@ export default class BlockEvents extends Module {

    const {currentBlock} = this.Editor.BlockManager;

+    if (!currentBlock) {
+      return;
+    }
+
    /** Prevent Default behaviour */
    event.preventDefault();
    event.stopPropagation();
@ -119,31 +130,77 @@ export default class BlockEvents extends Module {
      direction = shiftKey ? 'left' : 'right';

    /**
-     * Don't show Plus and Toolbox near not-inital Tools
+     * For empty Blocks we show Plus button via Toobox only for initial Blocks
     */
-    if (!this.Editor.Tools.isInitial(currentBlock.tool)) {
-      return;
-    }
-
-    if (currentBlock.isEmpty) {
+    if (this.Editor.Tools.isInitial(currentBlock.tool) && currentBlock.isEmpty) {
+      /**
+       * Work with Toolbox
+       * ------------------
+       *
+       * If Toolbox is not open, then just open it and show plus button
+       * Next Tab press will leaf Toolbox Tools
+       */
      if (!this.Editor.Toolbar.opened) {
        this.Editor.Toolbar.open(false , false);
        this.Editor.Toolbar.plusButton.show();
+      } else {
+        this.Editor.Toolbox.leaf(direction);
      }

      this.Editor.Toolbox.open();
-    }
+    } else if (!currentBlock.isEmpty && !SelectionUtils.isCollapsed) {
+      /**
+       * Work with Inline Tools
+       * -----------------------
+       *
+       * If InlineToolbar is not open, just open it and focus first button
+       * Next Tab press will leaf InlineToolbar Tools
+       */
+      if (this.Editor.InlineToolbar.opened) {
+        this.Editor.InlineToolbar.leaf(direction);
+      }
+    } else {
+      /**
+       * Open Toolbar and show BlockSettings
+       */
+      if (!this.Editor.Toolbar.opened) {
+        this.Editor.BlockManager.currentBlock.focused = true;
+        this.Editor.Toolbar.open(true, false);
+        this.Editor.Toolbar.plusButton.hide();
+      }

-    if (this.Editor.Toolbox.opened) {
-      this.Editor.Toolbox.leaf(direction);
+      /**
+       * Work with Block Tunes
+       * ----------------------
+       *
+       * If BlockSettings is not open, then open BlockSettings
+       * Next Tab press will leaf Settings Buttons
+       */
+      if (!this.Editor.BlockSettings.opened) {
+        this.Editor.BlockSettings.open();
+      }
+
+      this.Editor.BlockSettings.leaf(direction);
    }
  }

  /**
   * Escape pressed
-   * @param event
+   * If some of Toolbar components are opened, then close it otherwise close Toolbar
+   *
+   * @param {Event} event
   */
-  public escapePressed(event): void { }
+  public escapePressed(event): void {
+    if (this.Editor.Toolbox.opened) {
+      this.Editor.Toolbox.close();
+    } else if (this.Editor.BlockSettings.opened) {
+      this.Editor.BlockSettings.close();
+    } else if (this.Editor.InlineToolbar.opened) {
+      this.Editor.InlineToolbar.close();
+    } else {
+      this.Editor.Toolbar.close();
+    }
+  }

  /**
   * Add drop target styles
@ -231,7 +288,10 @@ export default class BlockEvents extends Module {
     * Don't handle Enter keydowns when Tool sets enableLineBreaks to true.
     * Uses for Tools like <code> where line breaks should be handled by default behaviour.
     */
-    if (tool && tool[this.Editor.Tools.apiSettings.IS_ENABLED_LINE_BREAKS]) {
+    if (tool
+      && tool[this.Editor.Tools.apiSettings.IS_ENABLED_LINE_BREAKS]
+      && !this.Editor.BlockSettings.opened
+      && !this.Editor.InlineToolbar.opened) {
      return;
    }

@ -239,10 +299,20 @@ export default class BlockEvents extends Module {
      event.preventDefault();
      event.stopPropagation();
      event.stopImmediatePropagation();
+
      this.Editor.Toolbox.toolButtonActivate(event, this.Editor.Toolbox.getActiveTool);
      return;
    }

+    if (this.Editor.InlineToolbar.opened && this.Editor.InlineToolbar.focusedButton) {
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+
+      this.Editor.InlineToolbar.focusedButton.click();
+      return;
+    }
+
    /**
     * Allow to create linebreaks by Shift+Enter
     */
@ -441,8 +511,15 @@ export default class BlockEvents extends Module {
   */
  private needToolbarClosing(event) {
    const toolboxItemSelected = (event.keyCode === _.keyCodes.ENTER && this.Editor.Toolbox.opened),
-      flippingToolboxItems = event.keyCode === _.keyCodes.TAB;
+      blockSettingsItemSelected = (event.keyCode === _.keyCodes.ENTER && this.Editor.BlockSettings.opened),
+      flippingToolbarItems = event.keyCode === _.keyCodes.TAB;

-    return !(event.shiftKey || flippingToolboxItems || toolboxItemSelected);
+    /**
+     * Do not close Toolbar in cases:
+     * 1. ShiftKey pressed (or combination with shiftKey)
+     * 2. When Toolbar is opened and Tab leafs its Tools
+     * 3. When Toolbar's component is opened and some its item selected
+     */
+    return !(event.shiftKey || flippingToolbarItems || toolboxItemSelected || blockSettingsItemSelected);
  }
 }
--- a/src/components/modules/toolbar/blockSettings.ts
+++ b/src/components/modules/toolbar/blockSettings.ts
@ -29,7 +29,7 @@ export default class BlockSettings extends Module {
   * Block Settings CSS
   * @return {{wrapper, wrapperOpened, toolSettings, defaultSettings, button}}
   */
-  private static get CSS() {
+  public get CSS() {
    return {
      // Settings Panel
      wrapper: 'ce-settings',
@ -38,6 +38,9 @@ export default class BlockSettings extends Module {
      defaultSettings: 'ce-settings__default-zone',

      button: 'ce-settings__button',
+
+      focusedButton : 'ce-settings__button--focused',
+      focusedButtonAnimated: 'ce-settings__button--focused-animated',
    };
  }

@ -46,7 +49,7 @@ export default class BlockSettings extends Module {
   * @returns {boolean}
   */
  public get opened(): boolean {
-    return this.nodes.wrapper.classList.contains(BlockSettings.CSS.wrapperOpened);
+    return this.nodes.wrapper.classList.contains(this.CSS.wrapperOpened);
  }

  /**
@ -58,6 +61,16 @@ export default class BlockSettings extends Module {
    defaultSettings: null,
  };

+  /**
+   * List of buttons
+   */
+  private buttons: HTMLElement[] = [];
+
+  /**
+   * Index of active button
+   */
+  private focusedButtonIndex: number = -1;
+
  /**
   * Panel with block settings with 2 sections:
   *  - Tool's Settings
@ -66,10 +79,10 @@ export default class BlockSettings extends Module {
   * @return {Element}
   */
  public make(): void {
-    this.nodes.wrapper = $.make('div', BlockSettings.CSS.wrapper);
+    this.nodes.wrapper = $.make('div', this.CSS.wrapper);

-    this.nodes.toolSettings = $.make('div', BlockSettings.CSS.toolSettings);
-    this.nodes.defaultSettings = $.make('div', BlockSettings.CSS.defaultSettings);
+    this.nodes.toolSettings = $.make('div', this.CSS.toolSettings);
+    this.nodes.defaultSettings = $.make('div', this.CSS.defaultSettings);

    $.append(this.nodes.wrapper, [this.nodes.toolSettings, this.nodes.defaultSettings]);
  }
@ -78,7 +91,7 @@ export default class BlockSettings extends Module {
   * Open Block Settings pane
   */
  public open(): void {
-    this.nodes.wrapper.classList.add(BlockSettings.CSS.wrapperOpened);
+    this.nodes.wrapper.classList.add(this.CSS.wrapperOpened);

    /**
     * Fill Tool's settings
@ -98,7 +111,7 @@ export default class BlockSettings extends Module {
   * Close Block Settings pane
   */
  public close(): void {
-    this.nodes.wrapper.classList.remove(BlockSettings.CSS.wrapperOpened);
+    this.nodes.wrapper.classList.remove(this.CSS.wrapperOpened);

    /** Clear settings */
    this.nodes.toolSettings.innerHTML = '';
@ -106,8 +119,66 @@ export default class BlockSettings extends Module {

    /** Tell to subscribers that block settings is closed */
    this.Editor.Events.emit(this.events.closed);
+
+    /** Clear cached buttons */
+    this.buttons = [];
+
+    /** Clear focus on active button */
+    this.focusedButtonIndex = -1;
+
  }

+  /**
+   * Returns Tools Settings and Default Settings
+   * @return {HTMLElement[]}
+   */
+  public get blockTunesButtons(): HTMLElement[] {
+    /**
+     * Return from cache
+     * if exists
+     */
+    if (this.buttons.length !== 0) {
+      return this.buttons;
+    }
+
+    const toolSettings = this.nodes.toolSettings.querySelectorAll(`.${this.Editor.StylesAPI.classes.settingsButton}`);
+    const defaultSettings = this.nodes.defaultSettings.querySelectorAll(`.${this.CSS.button}`);
+
+    toolSettings.forEach((item, index) => {
+      this.buttons.push((item as HTMLElement));
+      if (item.classList.contains(this.CSS.focusedButton)) {
+        this.focusedButtonIndex = index;
+      }
+    });
+
+    defaultSettings.forEach((item) => {
+      this.buttons.push((item as HTMLElement));
+    });
+
+    return this.buttons;
+  }
+
+  /**
+   * Leaf Block Tunes
+   * @param {string} direction
+   */
+  public leaf(direction: string = 'right'): void {
+    this.focusedButtonIndex = $.leafNodesAndReturnIndex(
+      this.blockTunesButtons, this.focusedButtonIndex, direction, this.CSS.focusedButton,
+    );
+  }
+
+  /**
+   * Returns active button HTML element
+   * @return {HTMLElement}
+   */
+  public get focusedButton(): HTMLElement {
+    if (this.focusedButtonIndex === -1) {
+      return null;
+    }
+
+    return (this.buttons[this.focusedButtonIndex] as HTMLElement);
+  }
  /**
   * Add Tool's settings
   */
--- a/src/components/modules/toolbar/inline.ts
+++ b/src/components/modules/toolbar/inline.ts
@ -28,8 +28,15 @@ export default class InlineToolbar extends Module {
    inlineToolButton: 'ce-inline-tool',
    inlineToolButtonLast: 'ce-inline-tool--last',
    inputField: 'cdx-input',
+    focusedButton: 'ce-inline-tool--focused',
  };

+  /**
+   * State of inline toolbar
+   * @type {boolean}
+   */
+  public opened: boolean = false;
+
  /**
   * Inline Toolbar elements
   */
@ -53,6 +60,25 @@ export default class InlineToolbar extends Module {
   */
  private toolsInstances: Map<string, InlineTool>;

+  /**
+   * Buttons List
+   * @type {NodeList}
+   */
+  private buttonsList: NodeList = null;
+
+  /**
+   * Visible Buttons
+   * Some Blocks might disable inline tools
+   * @type {HTMLElement[]}
+   */
+  private visibleButtonsList: HTMLElement[] = [];
+
+  /**
+   * Focused button index
+   * @type {number}
+   */
+  private focusedButtonIndex: number = -1;
+
  /**
   * Inline Toolbar Tools
   *
@ -155,6 +181,47 @@ export default class InlineToolbar extends Module {
    this.nodes.wrapper.style.top = Math.floor(newCoords.y) + 'px';
  }

+  /**
+   * Leaf Inline Tools
+   * @param {string} direction
+   */
+  public leaf(direction: string = 'right'): void {
+    this.visibleButtonsList = (Array.from(this.buttonsList)
+      .filter((tool) => !(tool as HTMLElement).hidden) as HTMLElement[]);
+
+    if (this.visibleButtonsList.length === 0) {
+      return;
+    }
+
+    this.focusedButtonIndex = $.leafNodesAndReturnIndex(
+      this.visibleButtonsList, this.focusedButtonIndex, direction, this.CSS.focusedButton,
+    );
+  }
+
+  /**
+   * Drops focused button index
+   */
+  public dropFocusedButtonIndex(): void {
+    if (this.focusedButtonIndex === -1) {
+      return;
+    }
+
+    this.visibleButtonsList[this.focusedButtonIndex].classList.remove(this.CSS.focusedButton);
+    this.focusedButtonIndex = -1;
+  }
+
+  /**
+   * Returns Focused button Node
+   * @return {HTMLElement}
+   */
+  public get focusedButton(): HTMLElement {
+    if (this.focusedButtonIndex === -1) {
+      return null;
+    }
+
+    return this.visibleButtonsList[this.focusedButtonIndex];
+  }
+
  /**
   * Hides Inline Toolbar
   */
@ -165,6 +232,13 @@ export default class InlineToolbar extends Module {
        toolInstance.clear();
      }
    });
+
+    this.opened = false;
+
+    if (this.focusedButtonIndex !== -1) {
+      this.visibleButtonsList[this.focusedButtonIndex].classList.remove(this.CSS.focusedButton);
+      this.focusedButtonIndex = -1;
+    }
  }

  /**
@ -196,6 +270,9 @@ export default class InlineToolbar extends Module {
        toolInstance.clear();
      }
    });
+
+    this.buttonsList = this.nodes.buttons.querySelectorAll(`.${this.CSS.inlineToolButton}`);
+    this.opened = true;
  }

  /**
@ -220,7 +297,9 @@ export default class InlineToolbar extends Module {
      return false;
    }

-    const target = currentSelection.anchorNode.parentElement;
+    const target = !$.isElement(currentSelection.anchorNode )
+      ? currentSelection.anchorNode.parentElement
+      : currentSelection.anchorNode;

    if (currentSelection && tagsConflictsWithSelection.includes(target.tagName)) {
      return false;
--- a/src/components/modules/toolbar/toolbox.ts
+++ b/src/components/modules/toolbar/toolbox.ts
@ -142,12 +142,14 @@ export default class Toolbox extends Module {

    this.opened = false;

-    /** remove active item pointer */
-    this.activeButtonIndex = -1;
-    const activeButton = this.nodes.toolbox.querySelector(`.${this.CSS.toolboxButtonActive}`);
+    /**
+     * Remove active item pointer
+     */
+    if (this.activeButtonIndex !== -1) {
+      (this.nodes.toolbox.childNodes[this.activeButtonIndex] as HTMLElement)
+        .classList.remove(this.CSS.toolboxButtonActive);

-    if (activeButton) {
-      activeButton.classList.remove(this.CSS.toolboxButtonActive);
+      this.activeButtonIndex = -1;
    }
  }

@ -168,57 +170,10 @@ export default class Toolbox extends Module {
   * @param {String} direction - leaf direction, right is default
   */
  public leaf(direction: string = Toolbox.LEAF_DIRECTIONS.RIGHT): void {
-    const childNodes = this.nodes.toolbox.childNodes;
-
-    /**
-     * If activeButtonIndex === -1 then we have no chosen Tool in Toolbox
-     */
-    if (this.activeButtonIndex === -1) {
-      /**
-       * Normalize "previous" Tool index depending on direction.
-       * We need to do this to highlight "first" Tool correctly
-       *
-       * Order of Tools: [0] [1] ... [n - 1]
-       *   [0 = n] because of: n % n = 0 % n
-       *
-       * Direction 'right': for [0] the [n - 1] is a previous index
-       *   [n - 1] -> [0]
-       *
-       * Direction 'left': for [n - 1] the [0] is a previous index
-       *   [n - 1] <- [0]
-       *
-       * @type {number}
-       */
-      this.activeButtonIndex = direction === Toolbox.LEAF_DIRECTIONS.RIGHT ? -1 : 0;
-    } else {
-      /**
-       * If we have chosen Tool then remove highlighting
-       */
-      (childNodes[this.activeButtonIndex] as HTMLElement).classList.remove(this.CSS.toolboxButtonActive);
-    }
-
-    /**
-     * Count index for next Tool
-     */
-    if (direction === Toolbox.LEAF_DIRECTIONS.RIGHT) {
-      /**
-       * If we go right then choose next (+1) Tool
-       * @type {number}
-       */
-      this.activeButtonIndex = (this.activeButtonIndex + 1) % childNodes.length;
-    } else {
-      /**
-       * If we go left then choose previous (-1) Tool
-       * Before counting module we need to add length before because of "The JavaScript Modulo Bug"
-       * @type {number}
-       */
-      this.activeButtonIndex = (childNodes.length + this.activeButtonIndex - 1) % childNodes.length;
-    }
-
-    /**
-     * Highlight new chosen Tool
-     */
-    (childNodes[this.activeButtonIndex] as HTMLElement).classList.add(this.CSS.toolboxButtonActive);
+    const childNodes = (Array.from(this.nodes.toolbox.childNodes) as HTMLElement[]);
+    this.activeButtonIndex = $.leafNodesAndReturnIndex(
+      childNodes, this.activeButtonIndex, direction, this.CSS.toolboxButtonActive,
+    );
  }

  /**
--- a/src/components/modules/ui.ts
+++ b/src/components/modules/ui.ts
@ -268,9 +268,51 @@ export default class UI extends Module {
   * @param event
   */
  private enterPressed(event: KeyboardEvent): void {
-    const {BlockManager, BlockSelection, Caret} = this.Editor;
+    const {BlockManager, BlockSelection, Caret, BlockSettings} = this.Editor;
    const hasPointerToBlock = BlockManager.currentBlockIndex >= 0;

+    /**
+     * If Block Settings is opened and have some active button
+     * Enter press is fired as out of the Block and that's why
+     * we handle it here
+     */
+    if (BlockSettings.opened && BlockSettings.focusedButton) {
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+
+      /** Click on settings button */
+      BlockSettings.focusedButton.click();
+
+      /**
+       * Add animation on click
+       */
+      BlockSettings.focusedButton.classList.add(BlockSettings.CSS.focusedButtonAnimated);
+
+      /**
+       * Remove animation class
+       */
+      _.delay( () => {
+        BlockSettings.focusedButton.classList.remove(BlockSettings.CSS.focusedButtonAnimated);
+      }, 280)();
+
+      /**
+       * Restoring focus on current Block
+       *
+       * After changing Block state (when settings clicked, for example)
+       * Block's content points to the Node that is not in DOM, that's why we can not
+       * set caret and leaf next (via Tab)
+       *
+       * For that set cursor via Caret module to the current Block's content
+       * after some timeout
+       */
+      _.delay( () => {
+        Caret.setToBlock(BlockManager.currentBlock);
+      }, 10)();
+
+      return;
+    }
+
    if (BlockSelection.anyBlockSelected) {
      const selectionPositionIndex = BlockManager.removeSelectedBlocks();
      Caret.setToBlock(BlockManager.insertAtIndex(selectionPositionIndex, true), Caret.positions.START);
--- a/src/styles/animations.css
+++ b/src/styles/animations.css
@ -78,3 +78,25 @@
  }
 }

+@keyframes buttonClicked {
+  from,
+  20%,
+  40%,
+  60%,
+  80%,
+  to {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  0% {
+    transform: scale3d(0.95, 0.95, 0.95);
+  }
+
+  60% {
+    transform: scale3d(1.02, 1.02, 1.02);
+  }
+
+  80% {
+    transform: scale3d(1, 1, 1);
+  }
+}
--- a/src/styles/settings.css
+++ b/src/styles/settings.css
@ -72,7 +72,7 @@
    }

    &--confirm {
-      background-color: var(--color-confirm);
+      background-color: var(--color-confirm) !important;
      color: #fff;

      &:hover {
--- a/src/styles/variables.css
+++ b/src/styles/variables.css
@ -127,5 +127,15 @@
    &--active {
      color: var(--color-active-icon);
    }
+
+    &--focused {
+      box-shadow: inset 0 0 0px 1px rgba(7, 161, 227, 0.08);
+      background: rgba(34, 186, 255, 0.08) !important;
+
+      &-animated {
+        animation-name: buttonClicked;
+        animation-duration: 250ms;
+      }
+    }
  };
 }