Toolbar toggler API (#1466)

* ToolBar Api Added

* Change Log added

* change Toggletoolbar to  toggleBlockSetting

* Update docs/CHANGELOG.md

* Update editor.js

* Update toggleBlockSetting to toggleBlockSettings

* Apply suggestions from code review

Co-authored-by: Peter Savchenko <specc.dev@gmail.com>

* Apply suggestions from code review

Co-authored-by: Peter Savchenko <specc.dev@gmail.com>

* Changes requested by hata added

Co-authored-by: Peter Savchenko <specc.dev@gmail.com>

docs/CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ### 2.19.2
 
+- `New` -  `toolbar.toggleBlockSettings()` API method added [#1442](https://github.com/codex-team/editor.js/issues/1421).
 - `Improvements` - A generic type for Tool config added [#1516](https://github.com/codex-team/editor.js/issues/1516)
 - `Improvements` - Remove unused `force` option in `Caret.navigateNext()` and `Caret.navigatePrevious()` [#857](https://github.com/codex-team/editor.js/issues/857#issuecomment-770363438).
 - `Improvements` - Remove bundles from the repo [#1541](https://github.com/codex-team/editor.js/pull/1541).

src/components/modules/api/toolbar.ts

@@ -1,6 +1,6 @@
 import { Toolbar } from '../../../../types/api';
 import Module from '../../__module';
-
+import * as _ from './../../utils';
 /**
  * @class ToolbarAPI
  * Provides methods for working with the Toolbar
@@ -15,6 +15,7 @@ export default class ToolbarAPI extends Module {
     return {
       close: (): void => this.close(),
       open: (): void => this.open(),
+      toggleBlockSettings: (openingState?: boolean): void => this.toggleBlockSettings(openingState),
     };
   }
 
@@ -31,4 +32,35 @@ export default class ToolbarAPI extends Module {
   public close(): void {
     this.Editor.Toolbar.close();
   }
+
+  /**
+   * Toggles Block Setting of the current block
+   *
+   * @param {boolean} openingState —  opening state of Block Setting
+   */
+  public toggleBlockSettings(openingState?: boolean): void {
+    if (this.Editor.BlockManager.currentBlockIndex === -1) {
+      _.logLabeled('Could\'t toggle the Toolbar because there is no block selected ', 'warn');
+
+      return;
+    }
+
+    /** Check that opening state is set or not */
+    const canOpenBlockSettings = openingState ?? !this.Editor.BlockSettings.opened;
+
+    /** Check if state same as current state */
+    if (openingState === this.Editor.BlockSettings.opened) {
+      return;
+    }
+
+    if (canOpenBlockSettings) {
+      if (!this.Editor.Toolbar.opened) {
+        this.Editor.Toolbar.open(true, false);
+        this.Editor.Toolbar.plusButton.hide();
+      }
+      this.Editor.BlockSettings.open();
+    } else {
+      this.Editor.BlockSettings.close();
+    }
+  }
 }

src/components/modules/toolbar/blockSettings.ts

@@ -30,7 +30,7 @@ export default class BlockSettings extends Module<BlockSettingsNodes> {
    *
    * @returns {{opened: string, closed: string}}
    */
-  public get events(): {opened: string; closed: string} {
+  public get events(): { opened: string; closed: string } {
     return {
       opened: 'block-settings-opened',
       closed: 'block-settings-closed',
@@ -42,7 +42,7 @@ export default class BlockSettings extends Module<BlockSettingsNodes> {
    *
    * @returns {{wrapper, wrapperOpened, toolSettings, defaultSettings, button}}
    */
-  public get CSS(): {[name: string]: string} {
+  public get CSS(): { [name: string]: string } {
     return {
       // Settings Panel
       wrapper: 'ce-settings',
@@ -170,7 +170,12 @@ export default class BlockSettings extends Module<BlockSettingsNodes> {
     }
 
     this.selection.clearSaved();
-
+    /**
+     * Remove highlighted content of a Block we are working with
+     */
+    if (this.Editor.BlockManager.currentBlock) {
+      this.Editor.BlockManager.currentBlock.selected = false;
+    }
     /** Clear settings */
     this.nodes.toolSettings.innerHTML = '';
     this.nodes.defaultSettings.innerHTML = '';

types/api/toolbar.d.ts

@@ -11,4 +11,10 @@ export interface Toolbar {
    * Opens Toolbar
    */
   open(): void;
+
+  /**
+   * Toggles Block Setting of the current block
+   * @param {boolean} openingState —  opening state of Block Setting
+   */
+  toggleBlockSettings(openingState?: boolean): void;
 }