tools are initialized inside of the inline toolbar initialization

packages/core/src/entities/InlineTool.ts

@@ -1,11 +1,12 @@
+import type { TextRange, InlineFragment, FormattingAction, IntersectType } from '@editorjs/model';
 import type { InlineTool as InlineToolVersion2 } from '@editorjs/editorjs';
-import type { TextRange, InlineFragment, FormattingAction, IntersectType, InlineToolName } from '@editorjs/model';
+import type { InlineToolConstructorOptions as InlineToolConstructorOptionsVersion2 } from '@editorjs/editorjs';
 
 /**
  * Extended InlineToolConstructorOptions interface for version 3.
  */
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface InlineToolConstructorOptions extends InlineToolVersion2 {}
+export interface InlineToolConstructorOptions extends InlineToolConstructorOptionsVersion2 {}
 
 /**
  * Object represents formatting action with text range to be applied on
@@ -56,19 +57,11 @@ export interface InlineTool extends Omit<InlineToolVersion2, 'save' | 'checkStat
 /**
  * Interface, that represents inline tool with configured name
  */
-export interface InlineToolWithName {
-  /**
-   * Name of the inline tool got from editor config
-   */
-  name: InlineToolName;
-
-  /**
-   * Inline tool instanse
-   */
-  tool: InlineTool;
-}
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface InlineToolConfig extends Record<string, InlineToolConstructor> {};
 
 /**
+ * @todo support options: InlineToolConstructableOptions
  * Inline Tool constructor class
  */
-export type InlineToolConstructor = new (options: InlineToolConstructorOptions) => InlineTool;
+export type InlineToolConstructor = new () => InlineTool;

packages/core/src/tools/ToolsManager.ts

@@ -1,10 +1,9 @@
-import type { InlineToolWithName } from '../entities/InlineTool.js';
+import type { InlineToolConfig } from '../entities/InlineTool.js';
 import type { BlockToolConstructor } from '../entities/BlockTool.js';
 import { Paragraph } from './internal/block-tools/paragraph/index.js';
 import type { EditorConfig } from '@editorjs/editorjs';
 import BoldInlineTool from './internal/inline-tools/bold/index.js';
 import ItalicInlineTool from './internal/inline-tools/italic/index.js';
-import { createInlineToolName } from '@editorjs/model';
 
 /**
  * Works with tools
@@ -35,13 +34,10 @@ export default class ToolsManager {
   /**
    * Returns inline tools got from the EditorConfig tools
    */
-  public getInlineTools(): InlineToolWithName[] {
-    return [{
-      name: createInlineToolName('Bold'),
-      tool: new BoldInlineTool(),
-    }, {
-      name: createInlineToolName('Italic'),
-      tool: new ItalicInlineTool(),
-    }];
+  public getInlineTools(): InlineToolConfig {
+    return {
+      bold: BoldInlineTool,
+      italic: ItalicInlineTool,
+    };
   };
 }

packages/core/src/tools/internal/inline-tools/bold/index.ts

@@ -1,7 +1,7 @@
 import type { FormattingActionWithRange, InlineTool } from '../../../../entities/InlineTool.js';
 import type { InlineFragment, TextRange } from '@editorjs/model';
 import { FormattingAction } from '@editorjs/model';
-import { createInlineToolName, IntersectType, type InlineToolName } from '@editorjs/model';
+import { IntersectType } from '@editorjs/model';
 import { make } from '@editorjs/dom';
 
 /**
@@ -18,12 +18,6 @@ export default class BoldInlineTool implements InlineTool {
    */
   public static isInline = true;
 
-  /**
-   * @todo - get rid of tool name, since name could be user-spesific
-   * It is a temporary solution, because tools inline tools are now formed not from config
-   */
-  public name: InlineToolName = createInlineToolName('Bold');
-
   /**
    * Type of behaviour of the tool if new selection range intersect with existing fragment
    * If two fragment intersect, they should be merged

packages/core/src/tools/internal/inline-tools/italic/index.ts

@@ -1,7 +1,7 @@
 import type { FormattingActionWithRange, InlineTool } from '../../../../entities/InlineTool.js';
 import type { InlineFragment, TextRange } from '@editorjs/model';
 import { FormattingAction } from '@editorjs/model';
-import { createInlineToolName, IntersectType, type InlineToolName } from '@editorjs/model';
+import { IntersectType } from '@editorjs/model';
 import { make } from '@editorjs/dom';
 
 /**
@@ -18,12 +18,6 @@ export default class ItalicInlineTool implements InlineTool {
    */
   public static isInline = true;
 
-  /**
-   * @todo - get rid of tool name, since name could be user-spesific
-   * It is a temporary solution, because tools inline tools are now formed not from config
-   */
-  public name: InlineToolName = createInlineToolName('Iatlic');
-
   /**
    * Type of behaviour of the tool if new selection range intersect with existing fragment
    * If two fragment intersect, they should be merged

packages/core/src/ui/InlineToolbar/index.ts

@@ -1,6 +1,7 @@
 import type { InlineToolsAdapter } from '@editorjs/dom-adapters';
-import type { InlineToolWithName } from '../../entities/InlineTool.js';
-import { type EditorJSModel, type TextRange, Index } from '@editorjs/model';
+import type { InlineTool, InlineToolConfig } from '../../entities/InlineTool.js';
+import type { InlineToolName } from '@editorjs/model';
+import { type EditorJSModel, type TextRange, createInlineToolName, Index } from '@editorjs/model';
 import { EventType } from '@editorjs/model';
 import type { Nominal } from '@editorjs/model/dist/utils/Nominal';
 import { make } from '@editorjs/dom';
@@ -31,7 +32,7 @@ export class InlineToolbar {
   /**
    * Tools that would be attached to the adapter
    */
-  #tools: InlineToolWithName[];
+  #tools: Map<InlineToolName, InlineTool>;
 
   /**
    * Toolbar html element related to the editor
@@ -46,11 +47,18 @@ export class InlineToolbar {
    * @param tools - tools, that should be attached to adapter
    * @param holder - editor holder element
    */
-  constructor(model: EditorJSModel, inlineToolAdapter: InlineToolsAdapter, tools: InlineToolWithName[], holder: HTMLElement) {
+  constructor(model: EditorJSModel, inlineToolAdapter: InlineToolsAdapter, tools: InlineToolConfig, holder: HTMLElement) {
     this.#model = model;
     this.#inlineToolAdapter = inlineToolAdapter;
-    this.#tools = tools;
     this.#holder = holder;
+    this.#tools = new Map<InlineToolName, InlineTool>();
+
+    Object.entries(tools).forEach(([toolName, toolConstructable]) => {
+      /**
+       * @todo - support inline tool options
+       */
+      this.#tools.set(createInlineToolName(toolName), new toolConstructable());
+    });
 
     this.#attachTools();
 
@@ -123,13 +131,13 @@ export class InlineToolbar {
 
     this.#toolbar = make('div');
 
-    this.#tools.forEach((tool) => {
+    this.#tools.forEach((_tool, toolName) => {
       const inlineElementButton = make('button');
 
-      inlineElementButton.innerHTML = tool.name;
+      inlineElementButton.innerHTML = toolName;
 
-      inlineElementButton.addEventListener('click', (_) => {
-        this.apply(tool);
+      inlineElementButton.addEventListener('click', (_event) => {
+        this.apply(toolName);
       });
       if (this.#toolbar !== undefined) {
         this.#toolbar.appendChild(inlineElementButton);
@@ -148,12 +156,12 @@ export class InlineToolbar {
 
   /**
    * Apply format with data formed in toolbar
-   * @param tool - tool, that was triggered
+   * @param toolName - name of the inline tool, whose format would be applied
    */
-  public apply(tool: InlineToolWithName): void {
+  public apply(toolName: InlineToolName): void {
     /**
      * @todo pass to applyFormat inline tool data formed in toolbar
      */
-    this.#inlineToolAdapter.applyFormat(tool.name, {} as Nominal<Record<string, unknown>, 'InlineToolData'>);
+    this.#inlineToolAdapter.applyFormat(toolName, {} as Nominal<Record<string, unknown>, 'InlineToolData'>);
   };
 }

packages/playground/tsconfig.json

@@ -24,7 +24,7 @@
     },
     "baseUrl": ".",
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "src/components/Toolbar/Toolbarvue"],
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
   "references": [
     { 
       "path": "./tsconfig.node.json"