From 930f59f912aa867a41d95b18292d587fd0ae3eef Mon Sep 17 00:00:00 2001 From: Michalis Mengisoglou Date: Mon, 18 Mar 2024 11:40:47 +0200 Subject: [PATCH] fix(readonly): Honor placeholder in readonly mode When in readonly mode, render the placeholder only if it is defined. In addition, do not add an extra default block. Update initialization.cy.ts accordingly for this case. --- docs/CHANGELOG.md | 2 ++ src/components/core.ts | 2 +- src/components/modules/renderer.ts | 4 ++-- test/cypress/tests/initialization.cy.ts | 4 ++++ 4 files changed, 9 insertions(+), 3 deletions(-) diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index a1b00479d..328c0d943 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -6,6 +6,8 @@ - `Fix` - Unexpected new line on Enter press with selected block without caret - `Fix` - Search input autofocus loosing after Block Tunes opening - `Fix` - Block removing while Enter press on Block Tunes +- `Fix` - Render the placeholder only if defined. +- `Fix` - Do not add empty block in readonly mode. ### 2.29.1 diff --git a/src/components/core.ts b/src/components/core.ts index 65bea1c95..2ef37a2e5 100644 --- a/src/components/core.ts +++ b/src/components/core.ts @@ -170,7 +170,7 @@ export default class Core { * Initialize default Block to pass data to the Renderer */ if (_.isEmpty(this.config.data) || !this.config.data.blocks || this.config.data.blocks.length === 0) { - this.config.data = { blocks: [ defaultBlockData ] }; + this.config.data = { blocks: this.config.placeholder ? [ defaultBlockData ] : [] }; } this.config.readOnly = this.config.readOnly as boolean || false; diff --git a/src/components/modules/renderer.ts b/src/components/modules/renderer.ts index 940ff179b..532b69fcc 100644 --- a/src/components/modules/renderer.ts +++ b/src/components/modules/renderer.ts @@ -18,8 +18,8 @@ export default class Renderer extends Module { return new Promise((resolve) => { const { Tools, BlockManager } = this.Editor; - if (blocksData.length === 0) { - BlockManager.insert(); + if (blocksData.length === 0 && this.config.readOnly === false) { + BlockManager.insert(); } else { /** * Create Blocks instances diff --git a/test/cypress/tests/initialization.cy.ts b/test/cypress/tests/initialization.cy.ts index 2336595f8..47196bff5 100644 --- a/test/cypress/tests/initialization.cy.ts +++ b/test/cypress/tests/initialization.cy.ts @@ -37,8 +37,12 @@ describe('Editor basic initialization', () => { }); it('should create editor without editing ability when true passed', () => { + /** + * Create readonly editor with a placeholder, to create a readonly paragraph block + */ cy.createEditor({ readOnly: true, + placeholder: "readonly-test" }).as('editorInstance'); cy.get('[data-cy=editorjs]')