Merge 993950af1f into 530ec56bb8

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

@@ -7,13 +7,11 @@ import type { MenuConfig } from '../../../types/tools';
  *
  * Inline Toolbar Tool
  *
- * Makes selected text bolder
+ * Makes selected text bold
  */
 export default class BoldInlineTool implements InlineTool {
   /**
    * Specifies Tool as Inline Toolbar Tool
-   *
-   * @returns {boolean}
    */
   public static isInline = true;
 
@@ -25,13 +23,11 @@ export default class BoldInlineTool implements InlineTool {
   /**
    * Sanitizer Rule
    * Leave <b> tags
-   *
-   * @returns {object}
    */
   public static get sanitize(): SanitizerConfig {
     return {
       b: {},
-    } as SanitizerConfig;
+    };
   }
 
   /**
@@ -55,8 +51,6 @@ export default class BoldInlineTool implements InlineTool {
 
   /**
    * Set a shortcut
-   *
-   * @returns {boolean}
    */
   public get shortcut(): string {
     return 'CMD+B';

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

@@ -1,5 +1,6 @@
 import type { InlineTool, SanitizerConfig } from '../../../types';
 import { IconItalic } from '@codexteam/icons';
+import type { MenuConfig } from '../../../types/tools';
 
 /**
  * Italic Tool
@@ -11,8 +12,6 @@ import { IconItalic } from '@codexteam/icons';
 export default class ItalicInlineTool implements InlineTool {
   /**
    * Specifies Tool as Inline Toolbar Tool
-   *
-   * @returns {boolean}
    */
   public static isInline = true;
 
@@ -24,13 +23,11 @@ export default class ItalicInlineTool implements InlineTool {
   /**
    * Sanitizer Rule
    * Leave <i> tags
-   *
-   * @returns {object}
    */
   public static get sanitize(): SanitizerConfig {
     return {
       i: {},
-    } as SanitizerConfig;
+    };
   }
 
   /**
@@ -38,50 +35,17 @@ export default class ItalicInlineTool implements InlineTool {
    */
   private readonly commandName: string = 'italic';
 
-  /**
-   * Styles
-   */
-  private readonly CSS = {
-    button: 'ce-inline-tool',
-    buttonActive: 'ce-inline-tool--active',
-    buttonModifier: 'ce-inline-tool--italic',
-  };
-
-  /**
-   * Elements
-   */
-  private nodes: {button: HTMLButtonElement} = {
-    button: null,
-  };
-
   /**
    * Create button for Inline Toolbar
    */
-  public render(): HTMLElement {
-    this.nodes.button = document.createElement('button') as HTMLButtonElement;
-    this.nodes.button.type = 'button';
-    this.nodes.button.classList.add(this.CSS.button, this.CSS.buttonModifier);
-    this.nodes.button.innerHTML = IconItalic;
-
-    return this.nodes.button;
-  }
-
-  /**
-   * Wrap range with <i> tag
-   */
-  public surround(): void {
-    document.execCommand(this.commandName);
-  }
-
-  /**
-   * Check selection and set activated state to button if there are <i> tag
-   */
-  public checkState(): boolean {
-    const isActive = document.queryCommandState(this.commandName);
-
-    this.nodes.button.classList.toggle(this.CSS.buttonActive, isActive);
-
-    return isActive;
+  public render(): MenuConfig {
+    return {
+      icon: IconItalic,
+      name: 'italic',
+      toggle: true,
+      onActivate: () =>  document.execCommand(this.commandName),
+      isActive: () => document.queryCommandState(this.commandName),
+    };
   }
 
   /**