diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 1fc371f97..751942620 100644 --- a/docs/CHANGELOG.md +++ b/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 diff --git a/package.json b/package.json index 1005b9fd6..e17e6f2ac 100644 --- a/package.json +++ b/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", diff --git a/src/components/inline-tools/inline-tool-link.ts b/src/components/inline-tools/inline-tool-link.ts index 999a30c4c..0bef25c73 100644 --- a/src/components/inline-tools/inline-tool-link.ts +++ b/src/components/inline-tools/inline-tool-link.ts @@ -212,7 +212,7 @@ export default class LinkInlineTool implements InlineTool { */ const hrefAttr = anchorTag.getAttribute('href'); - this.nodes.input.value = hrefAttr !== 'null' ? hrefAttr : ''; + this.nodes.input.defaultValue = hrefAttr !== 'null' ? hrefAttr : ''; this.selection.save(); } else { diff --git a/src/components/selection.ts b/src/components/selection.ts index 1ab2e5686..40cceaeb7 100644 --- a/src/components/selection.ts +++ b/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); } /** diff --git a/test/cypress/tests/inline-tools/link.cy.ts b/test/cypress/tests/inline-tools/link.cy.ts index 0c5e934a2..8ae7220d1 100644 --- a/test/cypress/tests/inline-tools/link.cy.ts +++ b/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'); + }); });