Unexpected behavior with part of inline tools

[izotikov]

Describe a bug. When you use styles (reproduced on underline and strikethrough) from inline toolbar for one text block, then press Shift+Enter (soft line break) or continue typing, then try to type something, it will contain old styles (which is probably fine behavior), but when you choose this part of text and try to disable new styles, it will disable it for all the text block, not only for choosen text. When you use "bold" or "italic" styles it works as expected, but with strikethrough and underline I got problems.

Steps to reproduce:

1. Go to editorjs text block
2. Type any text, for example: "This is my text"
3. Choose everything and cover with underline or strikethrough
4. choose "text" and try to disable strikethrough or underline

Expected behavior:
Choosen part became not underlined, while other contains it styles.

Video with this bug below:

1.online-video-cutter.com.15.mp4

1.online-video-cutter.com.16.mp4

PC, Windows, Chrome 137.0.7151.56.

Editor.js version: 2.30.8

Plugins you use with their versions:
@editorjs/paragraph@^2.11.7
@editorjs/underline@^1.2.1
@sotaproject/strikethrough@^1.0.1

[izotikov]

I think the problem is in the library code, I rewrote the library code by analogy with the EditorJS Core (bold, italic), and it worked fine. If anyone encounters the same error:

Underline:

// @ts-nocheck
import type { InlineTool, SanitizerConfig } from '@editorjs/editorjs';
import { IconUnderline } from '@codexteam/icons';

export default class CustomUnderline implements InlineTool {

  public static isInline = true;

  public static title = 'Underline';

  public static get sanitize(): SanitizerConfig {
    return {
      u: {
        class: 'cdx-underline',
      },
    };
  }

  private readonly commandName: string = 'underline';

  private readonly CSS = {
    button: 'ce-inline-tool',
    buttonActive: 'ce-inline-tool--active',
    buttonModifier: 'ce-inline-tool--underline',
  };

  private nodes: { button: HTMLButtonElement } = {
    button: null,
  };

  public render(): HTMLElement {
    this.nodes.button = document.createElement('button');
    this.nodes.button.type = 'button';
    this.nodes.button.classList.add(this.CSS.button, this.CSS.buttonModifier);
    this.nodes.button.innerHTML = IconUnderline;

    return this.nodes.button;
  }

  public surround(): void {
    document.execCommand(this.commandName);

    this.addUnderlineClass();
  }

  private addUnderlineClass(): void {
    const selection = window.getSelection();
    if (!selection || !selection.rangeCount) return;

    const range = selection.getRangeAt(0);
    const commonAncestor = range.commonAncestorContainer;

    const underlines = this.findAllUnderlineTags(commonAncestor, range);

    underlines.forEach(u => {
      if (!u.classList.contains('cdx-underline')) {
        u.classList.add('cdx-underline');
      }
    });
  }

  private findAllUnderlineTags(container: Node, range: Range): HTMLElement[] {
    const underlines: HTMLElement[] = [];

    if (container.nodeType === Node.ELEMENT_NODE && container.nodeName === 'U') {
      if (range.intersectsNode(container)) {
        underlines.push(container as HTMLElement);
      }
    }

    container.childNodes.forEach(child => {
      underlines.push(...this.findAllUnderlineTags(child, range));
    });

    return underlines;
  }

  public checkState(): boolean {
    const isActive = document.queryCommandState(this.commandName);
    this.nodes.button.classList.toggle(this.CSS.buttonActive, isActive);
    return isActive;
  }

  public get shortcut(): string {
    return 'CMD+U';
  }
}

css file:

.cdx-underline {
    text-decoration: underline;
}

Strikethrough:

// @ts-nocheck
import type { InlineTool, SanitizerConfig } from '@editorjs/editorjs';
import { IconStrikethrough } from '@codexteam/icons';

export default class CustomStrikethrough implements InlineTool {

  public static isInline = true;

  public static title = 'Strikethrough';

  public static get sanitize(): SanitizerConfig {
    return {
      s: {
        class: 'cdx-strikethrough',
      },
    };
  }

  private readonly commandName: string = 'strikethrough';

  private readonly CSS = {
    button: 'ce-inline-tool',
    buttonActive: 'ce-inline-tool--active',
    buttonModifier: 'ce-inline-tool--strikethrough',
  };

  private nodes: { button: HTMLButtonElement } = {
    button: null,
  };

  public render(): HTMLElement {
    this.nodes.button = document.createElement('button');
    this.nodes.button.type = 'button';
    this.nodes.button.classList.add(this.CSS.button, this.CSS.buttonModifier);
    this.nodes.button.innerHTML = IconStrikethrough;

    return this.nodes.button;
  }

  public surround(): void {
    document.execCommand(this.commandName);

    this.addStrikeThroughClass();
  }

  private addStrikeThroughClass(): void {
    const selection = window.getSelection();
    if (!selection || !selection.rangeCount) return;

    const range = selection.getRangeAt(0);
    const commonAncestor = range.commonAncestorContainer;

    const strikethroughs = this.findAllStrikeThroughTags(commonAncestor, range);

    strikethroughs.forEach(s => {
      if (!s.classList.contains('cdx-strikethrough')) {
        s.classList.add('cdx-strikethrough');
      }
    });
  }

  private findAllStrikeThroughTags(container: Node, range: Range): HTMLElement[] {
    const strikethroughs: HTMLElement[] = [];

    if (container.nodeType === Node.ELEMENT_NODE && container.nodeName === 'S') {
      if (range.intersectsNode(container)) {
        strikethroughs.push(container as HTMLElement);
      }
    }

    container.childNodes.forEach(child => {
      strikethroughs.push(...this.findAllStrikeThroughTags(child, range));
    });

    return strikethroughs;
  }

  public checkState(): boolean {
    const isActive = document.queryCommandState(this.commandName);
    this.nodes.button.classList.toggle(this.CSS.buttonActive, isActive);
    return isActive;
  }

  public get shortcut(): string {
    return 'CMD+S';
  }
}

css file:

.cdx-strikethrough {
    text-decoration: line-through;
}