feat(inline-tools): Inline tools rendered as popover

docs/CHANGELOG.md

@@ -19,6 +19,8 @@
 - `New` – *Menu Config* – New item type – HTML
 – `Refactoring` – Switched to Vite as Cypress bundler
 – `New` – *Menu Config* – Default and HTML items now support hints
+- `New` – Inline Toolbar has new look 💅
+- `New` – Inline Tool's `render()` now supports [Menu Config](https://editorjs.io/menu-config/) format
 – `Fix` — Deleting whitespaces at the start/end of the block
 – `Improvement` — *Types* — `BlockToolConstructorOptions` type improved, `block` and `config` are not optional anymore
 

index.html

@@ -132,7 +132,7 @@
          */
         header: {
           class: Header,
-          inlineToolbar: ['marker', 'link'],
+          inlineToolbar: ['link', 'marker'],
           config: {
             placeholder: 'Header'
           },

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

@@ -5,7 +5,7 @@
  */
 import { API, BlockTune } from '../../../types';
 import { IconCross } from '@codexteam/icons';
-import { TunesMenuConfig } from '../../../types/tools';
+import { MenuConfig } from '../../../types/tools/menu-config';
 
 /**
  *
@@ -35,7 +35,7 @@ export default class DeleteTune implements BlockTune {
   /**
    * Tune's appearance in block settings menu
    */
-  public render(): TunesMenuConfig {
+  public render(): MenuConfig {
     return {
       icon: IconCross,
       title: this.api.i18n.t('Delete'),

src/components/block/api.ts

@@ -1,5 +1,5 @@
 import Block from './index';
-import { BlockToolData, ToolConfig } from '../../../types/tools';
+import { BlockToolData, ToolConfig, ToolboxConfigEntry } from '../../../types/tools';
 import { SavedData } from '../../../types/data-formats';
 import { BlockAPI as BlockAPIInterface } from '../../../types/api';
 
@@ -39,6 +39,13 @@ function BlockAPI(
       return block.config;
     },
 
+    /**
+     * Tool's data
+     */
+    get data(): Promise<BlockToolData> {
+      return block.data;
+    },
+
     /**
      * .ce-block element, that wraps plugin contents
      *
@@ -128,6 +135,14 @@ function BlockAPI(
     dispatchChange(): void {
       block.dispatchChange();
     },
+
+    /**
+     * Tool could specify several entries to be displayed at the Toolbox (for example, "Heading 1", "Heading 2", "Heading 3")
+     * This method returns the entry that is related to the Block (depended on the Block data)
+     */
+    getActiveToolboxEntry(): Promise<ToolboxConfigEntry | undefined> {
+      return block.getActiveToolboxEntry();
+    },
   };
 
   Object.setPrototypeOf(this, blockAPI);

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

@@ -1,5 +1,6 @@
 import { InlineTool, SanitizerConfig } from '../../../types';
 import { IconBold } from '@codexteam/icons';
+import { MenuConfig } from '../../../types/tools';
 
 /**
  * Bold Tool
@@ -38,52 +39,18 @@ export default class BoldInlineTool implements InlineTool {
    */
   private readonly commandName: string = 'bold';
 
-  /**
-   * Styles
-   */
-  private readonly CSS = {
-    button: 'ce-inline-tool',
-    buttonActive: 'ce-inline-tool--active',
-    buttonModifier: 'ce-inline-tool--bold',
-  };
-
-  /**
-   * Elements
-   */
-  private nodes: {button: HTMLButtonElement} = {
-    button: undefined,
-  };
-
   /**
    * 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 = IconBold;
-
-    return this.nodes.button;
-  }
-
-  /**
-   * Wrap range with <b> tag
-   */
-  public surround(): void {
-    document.execCommand(this.commandName);
-  }
-
-  /**
-   * Check selection and set activated state to button if there are <b> tag
-   *
-   * @returns {boolean}
-   */
-  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: IconBold,
+      name: 'bold',
+      onActivate: () => {
+        document.execCommand(this.commandName);
+      },
+      isActive: () => document.queryCommandState(this.commandName),
+    };
   }
 
   /**

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

@@ -0,0 +1,113 @@
+import { IconReplace } from '@codexteam/icons';
+import { InlineTool, API } from '../../../types';
+import { MenuConfig } from '../../../types/tools';
+import * as _ from '../utils';
+import { Blocks, Selection, Tools, I18n, Caret } from '../../../types/api';
+import SelectionUtils from '../selection';
+import { getConvertibleToolsForBlock } from '../utils/blocks';
+
+/**
+ * Inline tools for converting blocks
+ */
+export default class ConvertInlineTool implements InlineTool {
+  /**
+   * Specifies Tool as Inline Toolbar Tool
+   */
+  public static isInline = true;
+
+  /**
+   * API for working with editor blocks
+   */
+  private readonly blocksAPI: Blocks;
+
+  /**
+   * API for working with Selection
+   */
+  private readonly selectionAPI: Selection;
+
+  /**
+   * API for working with Tools
+   */
+  private readonly toolsAPI: Tools;
+
+  /**
+   * I18n API
+   */
+  private readonly i18nAPI: I18n;
+
+  /**
+   * API for working with Caret
+   */
+  private readonly caretAPI: Caret;
+
+  /**
+   * @param api - Editor.js API
+   */
+  constructor({ api }: { api: API }) {
+    this.i18nAPI = api.i18n;
+    this.blocksAPI = api.blocks;
+    this.selectionAPI = api.selection;
+    this.toolsAPI = api.tools;
+    this.caretAPI = api.caret;
+  }
+
+  /**
+   * Returns tool's UI config
+   */
+  public async render(): Promise<MenuConfig> {
+    const currentSelection = SelectionUtils.get();
+    const currentBlock = this.blocksAPI.getBlockByElement(currentSelection.anchorNode as HTMLElement);
+    const allBlockTools = this.toolsAPI.getBlockTools();
+    const convertibleTools = await getConvertibleToolsForBlock(currentBlock, allBlockTools);
+
+    if (convertibleTools.length === 0) {
+      return [];
+    }
+
+    const convertToItems = convertibleTools.reduce((result, tool) => {
+      tool.toolbox.forEach((toolboxItem) => {
+        result.push({
+          icon: toolboxItem.icon,
+          title: toolboxItem.title,
+          name: tool.name,
+          closeOnActivate: true,
+          onActivate: async () => {
+            const newBlock = await this.blocksAPI.convert(currentBlock.id, tool.name, toolboxItem.data);
+
+            this.caretAPI.setToBlock(newBlock, 'end');
+          },
+        });
+      });
+
+      return result;
+    }, []);
+
+    const currentBlockToolboxItem = await currentBlock.getActiveToolboxEntry();
+    const icon = currentBlockToolboxItem !== undefined ? currentBlockToolboxItem.icon : IconReplace;
+    const isDesktop =  !_.isMobileScreen();
+
+    return {
+      icon,
+      name: 'convert-to',
+      hint: {
+        title: this.i18nAPI.t('Convert to'),
+      },
+      children: {
+        searchable: isDesktop,
+        items: convertToItems,
+        onOpen: () => {
+          if (isDesktop) {
+            this.selectionAPI.setFakeBackground();
+            this.selectionAPI.save();
+          }
+        },
+        onClose: () => {
+          if (isDesktop) {
+            this.selectionAPI.restore();
+            this.selectionAPI.removeFakeBackground();
+          }
+        },
+      },
+    };
+  }
+}

src/components/modules/api/blocks.ts

@@ -29,6 +29,7 @@ export default class BlocksAPI extends Module {
       getCurrentBlockIndex: (): number => this.getCurrentBlockIndex(),
       getBlockIndex: (id: string): number => this.getBlockIndex(id),
       getBlocksCount: (): number => this.getBlocksCount(),
+      getBlockByElement: (element: HTMLElement) => this.getBlockByElement(element),
       stretchBlock: (index: number, status = true): void => this.stretchBlock(index, status),
       insertNewBlock: (): void => this.insertNewBlock(),
       insert: this.insert,
@@ -108,6 +109,23 @@ export default class BlocksAPI extends Module {
     return new BlockAPI(block);
   }
 
+  /**
+   * Get Block API object by html element
+   *
+   * @param element - html element to get Block by
+   */
+  public getBlockByElement(element: HTMLElement): BlockAPIInterface | undefined {
+    const block = this.Editor.BlockManager.getBlock(element);
+
+    if (block === undefined) {
+      _.logLabeled('There is no block corresponding to element `' + element + '`', 'warn');
+
+      return;
+    }
+
+    return new BlockAPI(block);
+  }
+
   /**
    * Call Block Manager method that swap Blocks
    *

src/components/modules/api/index.ts

@@ -20,6 +20,7 @@ export default class API extends Module {
     return {
       blocks: this.Editor.BlocksAPI.methods,
       caret: this.Editor.CaretAPI.methods,
+      tools: this.Editor.ToolsAPI.methods,
       events: this.Editor.EventsAPI.methods,
       listeners: this.Editor.ListenersAPI.methods,
       notifier: this.Editor.NotifierAPI.methods,

src/components/modules/api/selection.ts

@@ -7,6 +7,11 @@ import Module from '../../__module';
  * Provides with methods working with SelectionUtils
  */
 export default class SelectionAPI extends Module {
+  /**
+   * Global SelectionUtils instance
+   */
+  private selectionUtils = new SelectionUtils();
+
   /**
    * Available methods
    *
@@ -16,6 +21,10 @@ export default class SelectionAPI extends Module {
     return {
       findParentTag: (tagName: string, className?: string): HTMLElement | null => this.findParentTag(tagName, className),
       expandToTag: (node: HTMLElement): void => this.expandToTag(node),
+      save: () => this.selectionUtils.save(),
+      restore: () => this.selectionUtils.restore(),
+      setFakeBackground: () => this.selectionUtils.setFakeBackground(),
+      removeFakeBackground: () => this.selectionUtils.removeFakeBackground(),
     };
   }
 
@@ -27,7 +36,7 @@ export default class SelectionAPI extends Module {
    * @returns {HTMLElement|null}
    */
   public findParentTag(tagName: string, className?: string): HTMLElement | null {
-    return new SelectionUtils().findParentTag(tagName, className);
+    return this.selectionUtils.findParentTag(tagName, className);
   }
 
   /**
@@ -36,6 +45,6 @@ export default class SelectionAPI extends Module {
    * @param {HTMLElement} node - tag that should contain selection
    */
   public expandToTag(node: HTMLElement): void {
-    new SelectionUtils().expandToTag(node);
+    this.selectionUtils.expandToTag(node);
   }
 }

src/components/modules/api/tools.ts

@@ -0,0 +1,16 @@
+import { Tools as ToolsAPIInterface } from '../../../../types/api';
+import Module from '../../__module';
+
+/**
+ * Provides methods for accessing installed Editor tools
+ */
+export default class ToolsAPI extends Module {
+  /**
+   * Available methods
+   */
+  public get methods(): ToolsAPIInterface {
+    return {
+      getBlockTools: () => Array.from(this.Editor.Tools.blockTools.values()),
+    };
+  }
+}