Link Inline Tool

docs/tools-inline.md

@@ -11,6 +11,12 @@ Inline Tool should implement next methods
 - `surround()` — works with selected range
 - `checkState()` — get Tool's activated state by selected range
 
+Also, you can provide optional methods
+
+- `renderActions()` — create additional element below the buttons
+- `clear()` — clear Tool's stuff on opening/closing of Inline Toolbar
+- `shortcut()` — shortcut that handles Tool
+
 ### render()
 
 Method that returns button to append at the Inline Toolbar
@@ -55,3 +61,32 @@ selection | Selection | current Selection |
 type | description | 
 -- | -- |
 `Boolean` | `true` if Tool is active, otherwise `false` |
+
+### renderActions()
+
+Optional method that returns additional Element with actions. 
+For example, input for the 'link' tool or textarea for the 'comment' tool. 
+It will be places below the buttons list at Inline Toolbar.
+
+#### Parameters
+
+Method does not accept any parameters
+
+#### Return value
+
+type | description | 
+-- | -- |
+`HTMLElement` | element that will be added to the Inline Toolbar |
+
+### clear()
+
+Optional method that will be called on opening/closing of Inline Toolbar. 
+Can contain logic for clearing Tool's stuff, such as inputs, states and other.
+
+#### Parameters
+
+Method does not accept any parameters
+
+#### Return value
+
+Method should not return a value. 

src/components/block-tunes/block-tune-delete.ts

@@ -30,31 +30,24 @@ export default class DeleteTune implements IBlockTune {
    */
   private needConfirmation: boolean;
 
+  /**
+   * set false confirmation state
+   */
+  private resetConfirmation: () => void;
+
   /**
    * DeleteTune constructor
    *
    * @param {Object} api
    */
-  public constructor({api}) {
+  constructor({api}) {
     this.api = api;
 
     this.resetConfirmation = () => {
       this.setConfirmation(false);
     };
   }
 
-  /**
-   * change tune state
-   */
-  private setConfirmation(state): void {
-    this.needConfirmation = state;
-  }
-
-  /**
-   * set false confirmation state
-   */
-  private resetConfirmation: () => void;
-
   /**
    * Create "Delete" button and add click event listener
    * @returns [Element}
@@ -95,4 +88,12 @@ export default class DeleteTune implements IBlockTune {
       this.api.blocks.delete();
     }
   }
+
+  /**
+   * change tune state
+   */
+  private setConfirmation(state): void {
+    this.needConfirmation = state;
+  }
+
 }

src/components/inline-tools/inline-tool-bold.ts

@@ -32,7 +32,7 @@ export default class BoldInlineTool implements InlineTool {
     button: null,
   };
 
-  constructor() {
+  constructor(api) {
     console.log('Bold Inline Tool is ready');
   }
 
@@ -42,7 +42,7 @@ export default class BoldInlineTool implements InlineTool {
   public render(): HTMLElement {
     this.nodes.button = document.createElement('button');
     this.nodes.button.classList.add(this.CSS.button, this.CSS.buttonModifier);
-    this.nodes.button.appendChild($.svg('icon-bold', 13, 15));
+    this.nodes.button.appendChild($.svg('bold', 13, 15));
     return this.nodes.button;
   }