feat(dom-adapters): Inline tool adapter check for tool required data

packages/core/src/index.ts

@@ -71,6 +71,8 @@ export default class Core {
     this.#iocContainer = Container.of(Math.floor(Math.random() * 1e10).toString());
 
     this.validateConfig(config);
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unnecessary-type-assertion
     this.#config = config as CoreConfigValidated;
 
     this.#iocContainer.set('EditorConfig', this.#config);

packages/core/src/tools/ToolsManager.ts

@@ -1,9 +1,10 @@
+import type { BlockToolConstructor } from '@editorjs/sdk';
 import 'reflect-metadata';
 import { deepMerge, isFunction, isObject, PromiseQueue } from '@editorjs/helpers';
 import { Inject, Service } from 'typedi';
+import type { BlockToolFacade, BlockTuneFacade,
+  InlineToolFacade } from './facades/index.js';
 import {
-  BlockToolFacade, BlockTuneFacade,
-  InlineToolFacade,
   ToolsCollection,
   ToolsFactory
 } from './facades/index.js';
@@ -13,10 +14,11 @@ import type {
   ToolConstructable,
   ToolSettings
 } from '@editorjs/editorjs';
+import { InlineTool, InlineToolConstructor } from '@editorjs/sdk';
+import type { UnifiedToolConfig } from '../entities/index.js';
 import BoldInlineTool from './internal/inline-tools/bold/index.js';
 import ItalicInlineTool from './internal/inline-tools/italic/index.js';
-import { BlockToolConstructor, InlineTool, InlineToolConstructor } from '@editorjs/sdk';
-import { UnifiedToolConfig } from '../entities/index.js';
+import LinkInlineTool from './internal/inline-tools/link/index.js';
 
 /**
  * Works with tools
@@ -25,6 +27,8 @@ import { UnifiedToolConfig } from '../entities/index.js';
  */
 @Service()
 export default class ToolsManager {
+  #tools: EditorConfig['tools'];
+
   /**
    * ToolsFactory instance
    */
@@ -234,6 +238,10 @@ export default class ToolsManager {
         class: ItalicInlineTool as unknown as InlineToolConstructor,
         isInternal: true,
       },
+      link: {
+        class: LinkInlineTool as unknown as InlineToolConstructor,
+        isInternal: true,
+      },
     };
   }
 }

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

@@ -0,0 +1,96 @@
+import type { DataFormElementWithOptions, FormattingActionWithRange, InlineTool, InlineToolFormatData } from '@editorjs/sdk';
+import type { InlineFragment, TextRange } from '@editorjs/model';
+import { FormattingAction } from '@editorjs/model';
+import { IntersectType } from '@editorjs/model';
+import { make } from '@editorjs/dom';
+
+/**
+ * Link Tool
+ *
+ * Inline Toolbar Tool
+ *
+ * Makes selected text linked
+ */
+export default class LinkInlineTool implements InlineTool {
+  /**
+   * Specifies Tool as Inline Toolbar Tool
+   * @returns {boolean}
+   */
+  public static isInline = true;
+
+  /**
+   * Type of behaviour of the tool if new selection range intersect with existing fragment
+   * If two fragment intersect, existing fragment should be replaced with new one
+   */
+  public intersectType: IntersectType = IntersectType.Replace;
+
+  /**
+   * Renders wrapper for tool without actual content
+   * @param data - inline tool data formed in toolbar
+   * @returns Created html element
+   */
+  public createWrapper(data: InlineToolFormatData): HTMLElement {
+    const linkElement = make('a') as HTMLLinkElement;
+
+    if (typeof data.link === 'string') {
+      linkElement.href = data.link;
+    }
+
+    return linkElement;
+  }
+
+  /**
+   * Returns formatting action and range for it to be applied
+   * @param index - index of current text selection
+   * @param fragments - all fragments of the bold inline tool inside of the current input
+   */
+  public getAction(index: TextRange, fragments: InlineFragment[]): FormattingActionWithRange {
+    return {
+      action: this.isActive(index, fragments) ? FormattingAction.Unformat : FormattingAction.Format,
+      range: index,
+    };
+  };
+
+  /**
+   * Returns state of the bold inline tool
+   * @param index - index of current selection
+   * @param fragments - all fragments of the bold inline tool inside of the current input
+   * @returns true if tool is active, false otherwise
+   */
+  public isActive(index: TextRange, fragments: InlineFragment[]): boolean {
+    let isActive = false;
+
+    fragments.forEach((fragment) => {
+      /**
+       * Check if current index is inside of model fragment
+       */
+      if (index[0] === fragment.range[0] && index[1] === fragment.range[1]) {
+        isActive = true;
+
+        /**
+         * No need to check other fragments if state already chaned
+         */
+        return;
+      }
+    });
+
+    return isActive;
+  }
+
+  /**
+   * Function that is responsible for rendering data form element
+   * @param callback function that should be triggered, when data completely formed
+   * @returns rendered data form element with options required in toolbar
+   */
+  public renderActions(callback: (data: InlineToolFormatData) => void): DataFormElementWithOptions | null {
+    const dataFormerElement = make('input') as HTMLInputElement;
+
+    dataFormerElement.addEventListener('keydown', (event: KeyboardEvent) => {
+      if (event.key === 'Enter') {
+        callback({ link: dataFormerElement.value });
+      }
+    });
+
+    return { element: dataFormerElement };
+  }
+}

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

@@ -1,6 +1,7 @@
 import type { FormattingAdapter } from '@editorjs/dom-adapters';
+import type { InlineToolFormatData } from '@editorjs/sdk';
 import type { InlineToolName } from '@editorjs/model';
-import { type EditorJSModel, type TextRange, createInlineToolData, Index } from '@editorjs/model';
+import { type EditorJSModel, type TextRange, createInlineToolData, createInlineToolName, Index } from '@editorjs/model';
 import { EventType } from '@editorjs/model';
 import { make } from '@editorjs/dom';
 import type { InlineToolFacade, ToolsCollection } from '../../tools/facades/index.js';
@@ -38,6 +39,10 @@ export class InlineToolbar {
    */
   #toolbar: HTMLElement | undefined = undefined;
 
+  #dataFormElement: HTMLElement | undefined = undefined;
+  /**
+   * Holder element of the editor
+   */
   #holder: HTMLElement;
 
   /**
@@ -129,7 +134,7 @@ export class InlineToolbar {
       inlineElementButton.innerHTML = toolName;
 
       inlineElementButton.addEventListener('click', (_event) => {
-        this.apply(toolName as InlineToolName);
+        this.renderToolActions(createInlineToolName(toolName));
       });
       if (this.#toolbar !== undefined) {
         this.#toolbar.appendChild(inlineElementButton);
@@ -147,13 +152,41 @@ export class InlineToolbar {
   }
 
   /**
-   * Apply format with data formed in toolbar
-   * @param toolName - name of the inline tool, whose format would be applied
+   * Render actions to form data, which is required in tool
+   * Element that is used for forming data is rendered inside of the tool instance
+   * This function adds actions element to the toolbar
+   * @param nameOfTheTool - name of the inline tool, whose format would be applied
    */
-  public apply(toolName: InlineToolName): void {
+  public renderToolActions(nameOfTheTool: InlineToolName): void {
+    const elementWithOptions = this.#formattingAdapter.formatData(nameOfTheTool, (data: InlineToolFormatData): void => {
+      this.apply(nameOfTheTool, data);
+    });
+
     /**
-     * @todo pass to applyFormat inline tool data formed in toolbar
+     * Do not render toolbar data former if element with options is null
+     * It means, that tool does not need any data, and callback will be triggered in adapter
      */
-    this.#formattingAdapter.applyFormat(toolName, createInlineToolData({}));
+    if (elementWithOptions === null) {
+      return;
+    }
+
+    this.#dataFormElement = elementWithOptions.element;
+
+    if (this.#toolbar === undefined) {
+      throw new Error('InlineToolbar: can not show tool actions without toolbar');
+    }
+
+    this.#holder.appendChild(this.#dataFormElement);
   };
+
+  /**
+   * Apply format of the inline tool to the model
+   * @param toolName - name of the tool which format would be applied
+   * @param formatData - formed data required in the inline tool
+   */
+  public apply(toolName: InlineToolName, formatData: InlineToolFormatData): void {
+    this.#dataFormElement?.remove();
+
+    this.#formattingAdapter.applyFormat(toolName, createInlineToolData(formatData));
+  }
 }

packages/dom-adapters/src/BlockToolAdapter/index.ts

@@ -21,7 +21,7 @@ import {
 } from '../utils/index.js';
 import { InputType } from './types/InputType.js';
 import type { BlockToolAdapter as BlockToolAdapterInterface } from '@editorjs/sdk';
-import type { FormattingAdapter } from '../InlineToolsAdapter/index.js';
+import type { FormattingAdapter } from '../FormattingAdapter/index.js';
 
 /**
  * BlockToolAdapter is using inside Block tools to connect browser DOM elements to the model

packages/dom-adapters/src/InlineToolsAdapter/index.ts → packages/dom-adapters/src/FormattingAdapter/index.ts

@@ -1,16 +1,19 @@
+
 import type {
   EditorJSModel,
+  InlineFragment,
   InlineToolData,
   InlineToolName,
   ModelEvents
 } from '@editorjs/model';
+import { createInlineToolData } from '@editorjs/model';
 import {
   EventType,
   TextFormattedEvent
 } from '@editorjs/model';
 import type { CaretAdapter } from '../CaretAdapter/index.js';
 import { FormattingAction } from '@editorjs/model';
-import type { InlineTool } from '@editorjs/sdk';
+import type { InlineTool, InlineToolFormatData, DataFormElementWithOptions } from '@editorjs/sdk';
 
 /**
  * Class handles on format model events and renders inline tools
@@ -48,6 +51,7 @@ export class FormattingAdapter {
   }
 
   /**
+   * @todo move event handling to BlockToolAdapter
    * Handles text format and unformat model events
    *
    * @param event - model change event
@@ -68,17 +72,62 @@ export class FormattingAdapter {
       if (selection) {
         const range = selection.getRangeAt(0);
 
-        const inlineElement = tool.createWrapper();
+        const inlineElement = tool.createWrapper(event.detail.data.data);
+
+        const extracted = range.extractContents();
 
         /**
          * Insert contents from range to new inline element and put created element in range
          */
-        inlineElement.appendChild(range.extractContents());
+        inlineElement.appendChild(extracted);
+
         range.insertNode(inlineElement);
       }
     }
   }
 
+  /**
+   * Format content of the contenteditable element
+   *
+   * @param input - input element to apply format to
+   * @param inlineFragment - instance that contains index, toolName and toolData
+   * @param inlineFragment.index - text range inside of the input element
+   * @param inlineFragment.toolName - name of the tool, which format to apply
+   * @param inlineFragment.toolData - additional data for the tool
+   */
+  public formatElementContent(input: HTMLElement, inlineFragment: InlineFragment): void {
+    const toolName = inlineFragment.tool;
+    const toolData = inlineFragment.data;
+    const index = inlineFragment.range;
+
+    const tool = this.#tools.get(toolName);
+
+    if (tool === undefined) {
+      throw new Error(`FormattingAdapter: tool ${toolName} is not attached`);
+    }
+
+    const [start, end] = index;
+
+    /**
+     * Create range with positions specified in index
+     */
+    const range = document.createRange();
+
+    range.setStart(input, start);
+    range.setEnd(input, end);
+
+    const inlineElement = tool.createWrapper(toolData);
+
+    const extracted = range.extractContents();
+
+    /**
+     * Insert contents from range to new inline element and put created element in range
+     */
+    inlineElement.appendChild(extracted);
+
+    range.insertNode(inlineElement);
+  }
+
   /**
    * Attaches InlineTool to the adapter
    *
@@ -98,6 +147,37 @@ export class FormattingAdapter {
     this.#tools.delete(toolName);
   }
 
+  /**
+   * Function that call tool's render actions method if it is specified, otherwise triggers callback
+   * If any data for tool is required - return rendered by tool data form element with options required in toolbar
+   * If data for tool is not required (tool don't need any data to apply format) - trigger callback with empty data
+   *
+   * @param toolName - name of the tool to check if data is required
+   * @param callback - callback function that should be triggered, when data completely formed
+   * @returns {DataFormElementWithOptions | null} rendered data form element with options required in toolbar or null if no data required
+   */
+  public formatData(toolName: InlineToolName, callback: (data: InlineToolFormatData) => void): DataFormElementWithOptions | null {
+    const currentTool = this.#tools.get(toolName);
+
+    if (currentTool === undefined) {
+      throw new Error(`FormattingAdapter: tool ${toolName} was not attached`);
+    }
+
+    /**
+     * If renderActions method specified, render element and return it
+     */
+    if (currentTool.renderActions !== undefined) {
+      return currentTool.renderActions(callback);
+    }
+    /**
+     * If renderActions method is not specidied, then no data required for the tool
+     * Trigger callback
+     */
+    callback(createInlineToolData({}));
+
+    return null;
+  }
+
   /**
    * Format model according to action formed by inline tool instance
    *

packages/dom-adapters/src/index.ts

@@ -1,3 +1,3 @@
 export * from './CaretAdapter/index.js';
 export * from './BlockToolAdapter/index.js';
-export * from './InlineToolsAdapter/index.js';
+export * from './FormattingAdapter/index.js';

packages/playground/src/App.vue

@@ -115,6 +115,10 @@ onMounted(() => {
       <pre>{{ serialized }}</pre>
     </div>
     <div :class="$style.output">
+      <div
+        id="editorjs"
+        :class="$style.editor"
+      />
       <Node
         :node="editorDocument"
       />