Fix link tool interaction with other tools (#2977)

* fix(selection): removeFakeBackground no longer removes text formatting

* fix(selection): fix jsdoc

* fix(linkTool): add test case to ensure text formatting preservation when applying link

* Add fix entry to changelog

* bump version

Author: akulistus

docs/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+### 2.31.3
+
+- `Fix` - Prevent text formatting removal when applying link
+
 ### 2.31.2
 
 - `Fix` - Prevent link removal when applying bold to linked text

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/editorjs",
-  "version": "2.31.2",
+  "version": "2.31.3",
   "description": "Editor.js — open source block-style WYSIWYG editor with JSON output",
   "main": "dist/editorjs.umd.js",
   "module": "dist/editorjs.mjs",

src/components/selection.ts

@@ -57,10 +57,9 @@ export default class SelectionUtils {
   public isFakeBackgroundEnabled = false;
 
   /**
-   * Native Document's commands for fake background
+   * Native Document's command for fake background
    */
   private readonly commandBackground: string = 'backColor';
-  private readonly commandRemoveFormat: string = 'removeFormat';
 
   /**
    * Editor styles
@@ -416,9 +415,9 @@ export default class SelectionUtils {
     if (!this.isFakeBackgroundEnabled) {
       return;
     }
+    document.execCommand(this.commandBackground, false, 'transparent');
 
     this.isFakeBackgroundEnabled = false;
-    document.execCommand(this.commandRemoveFormat);
   }
 
   /**

test/cypress/tests/inline-tools/link.cy.ts

@@ -121,4 +121,75 @@ describe('Inline Tool Link', () => {
       .should('exist')
       .should('contain', 'Text with link');
   });
+
+  it('should preserve bold and italic when applying link', () => {
+    cy.createEditor({
+      data: {
+        blocks: [
+          {
+            type: 'paragraph',
+            data: {
+              text: 'Bold and italic text',
+            },
+          },
+        ],
+      },
+    });
+
+    cy.get('[data-cy=editorjs]')
+      .find('.ce-paragraph')
+      .selectText('Bold and italic text');
+    
+    cy.get('[data-cy=editorjs]')
+      .find('[data-item-name=bold]')
+      .click();
+
+    cy.get('[data-cy=editorjs]')
+      .find('div.ce-block')
+      .find('b')
+      .should('exist')
+      .should('contain', 'Bold and italic text');
+    
+    cy.get('[data-cy=editorjs]')
+      .find('div.ce-block')
+      .find('b')
+      .selectText('Bold and italic text');
+
+    cy.get('[data-cy=editorjs]')
+      .find('[data-item-name=italic]')
+      .click();
+
+    cy.get('[data-cy=editorjs]')
+      .find('div.ce-block')
+      .find('b')
+      .should('exist')
+      .find('i')
+      .should('exist')
+      .should('contain', 'Bold and italic text');
+
+    cy.get('[data-cy=editorjs]')
+      .find('div.ce-block')
+      .find('b')
+      .find('i')
+      .selectText('Bold and italic text');
+
+    cy.get('[data-cy=editorjs]')
+      .find('[data-item-name=link]')
+      .click();
+
+    cy.get('[data-cy=editorjs]')
+      .find('.ce-inline-tool-input')
+      .type('https://editorjs.io')
+      .type('{enter}');
+
+    cy.get('[data-cy=editorjs]')
+      .find('div.ce-block')
+      .find('b')
+      .should('exist')
+      .find('i')
+      .should('exist')
+      .find('a')
+      .should('have.attr', 'href', 'https://editorjs.io')
+      .should('contain', 'Bold and italic text');
+  });
 });