#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

docs/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+### 2.13
+
+- `New` *API* — Added [API methods](api.md) to open and close inline toolbar [#665](https://github.com/codex-team/editor.js/issues/665)
+
 ### 2.12.4 
 
 - `Improvements` CodeX.Shortcuts version updated to the v1.1 [#684](https://github.com/codex-team/editor.js/issues/684)

docs/api.md

@@ -69,6 +69,14 @@ Methods that working with Toolbar
 
 `close()` - closes toolbar, toolbox and blockSettings if they are opened
 
+### InlineToolbarAPI
+
+Methods that works with inline toolbar
+
+`open()` - opens inline toolbar, (opens for the current selection)
+
+`close()` - closes inline toolbar
+
 ### ListenerAPI
 
 Methods that allows to work with DOM listener. Useful when you forgot to remove listener. Module collects all listeners and destroys automatically

src/components/modules/api/index.ts

@@ -24,6 +24,7 @@ export default class API extends Module {
       selection: this.Editor.SelectionAPI.methods,
       styles: this.Editor.StylesAPI.classes,
       toolbar: this.Editor.ToolbarAPI.methods,
+      inlineToolbar: this.Editor.InlineToolbarAPI.methods,
     } as APIInterfaces;
   }
 }

src/components/modules/api/inlineToolbar.ts

@@ -0,0 +1,33 @@
+import Module from '../../__module';
+import { InlineToolbar } from '../../../../types/api/inline-toolbar';
+
+/**
+ * @class InlineToolbarAPI
+ * Provides methods for working with the Inline Toolbar
+ */
+export default class InlineToolbarAPI extends Module {
+  /**
+   * Available methods
+   * @return {InlineToolbar}
+   */
+  get methods(): InlineToolbar {
+    return {
+      close: () => this.close(),
+      open: () => this.open(),
+    };
+  }
+
+  /**
+   * Open Inline Toolbar
+   */
+  public open(): void {
+    this.Editor.InlineToolbar.open();
+  }
+
+  /**
+   * Close Inline Toolbar
+   */
+  public close(): void {
+    this.Editor.InlineToolbar.close();
+  }
+}

src/components/modules/api/toolbar.ts

@@ -3,7 +3,7 @@ import {Toolbar} from '../../../../types/api';
 
 /**
  * @class ToolbarAPI
- * provides with methods working with Toolbar
+ * Provides methods for working with the Toolbar
  */
 export default class ToolbarAPI extends Module {
   /**

src/components/modules/toolbar/inline.ts

@@ -170,7 +170,14 @@ export default class InlineToolbar extends Module {
   /**
    * Shows Inline Toolbar
    */
-  private open(): void {
+  public open(): void {
+    /**
+     * Check if inline toolbar is allowed to show or not
+     */
+    if (!this.allowedToShow()) {
+      return;
+    }
+
     /**
      * Filter inline-tools and show only allowed by Block's Tool
      */

src/types-internal/editor-modules.d.ts

@@ -30,6 +30,7 @@ import SaverAPI from '../components/modules/api/saver';
 import Saver from '../components/modules/saver';
 import BlockSelection from '../components/modules/blockSelection';
 import RectangleSelection from '../components/modules/RectangleSelection';
+import InlineToolbarAPI from '../components/modules/api/inlineToolbar';
 
 export interface EditorModules {
   UI: UI;
@@ -63,5 +64,6 @@ export interface EditorModules {
   SelectionAPI: SelectionAPI;
   StylesAPI: StylesAPI;
   ToolbarAPI: ToolbarAPI;
+  InlineToolbarAPI: InlineToolbarAPI;
   NotifierAPI: NotifierAPI;
 }

types/api/index.d.ts

@@ -8,3 +8,4 @@ export * from './styles';
 export * from './caret';
 export * from './toolbar';
 export * from './notifier';
+export * from './inline-toolbar'

types/api/inline-toolbar.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Describes InlineToolbar API methods
+ */
+export interface InlineToolbar {
+    /**
+     * Closes InlineToolbar
+     */
+    close(): void;
+  
+    /**
+     * Opens InlineToolbar
+     */
+    open(): void;
+}
+  

types/index.d.ts

@@ -5,7 +5,7 @@
  */
 
 import {EditorConfig} from './configs';
-import {Blocks, Caret, Events, Listeners, Notifier, Sanitizer, Saver, Selection, Styles, Toolbar} from './api';
+import {Blocks, Caret, Events, Listeners, Notifier, Sanitizer, Saver, Selection, Styles, Toolbar, InlineToolbar} from './api';
 
 /**
  * Interfaces used for development
@@ -51,6 +51,7 @@ export interface API {
   selection: Selection;
   styles: Styles;
   toolbar: Toolbar;
+  inlineToolbar: InlineToolbar;
 }
 
 /**
@@ -70,7 +71,7 @@ declare class EditorJS {
   public selection: Selection;
   public styles: Styles;
   public toolbar: Toolbar;
-
+  public inlineToolbar: InlineToolbar;
   constructor(configuration?: EditorConfig|string);
 
   public destroy(): void;