fix(readonly): crash with readonly property (#1969)

* fix(readonly): fix readonly property

Resolves #1968

* changelog added

* Update CHANGELOG.md

docs/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+### 2.23.2
+
+— `Fix` — Crash on initialization in the read-only mode [#1968](https://github.com/codex-team/editor.js/issues/1968)
+
 ### 2.23.1
 
 — `Fix` — Incorrect release tag fixed

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/editorjs",
-  "version": "2.23.1",
+  "version": "2.23.2",
   "description": "Editor.js — Native JS, based on API and Open Source",
   "main": "dist/editor.js",
   "types": "./types/index.d.ts",

src/components/modules/rectangleSelection.ts

@@ -376,7 +376,6 @@ export default class RectangleSelection extends Module {
     this.inverseSelection();
 
     SelectionUtils.get().removeAllRanges();
-    event.preventDefault();
   }
 
   /**

src/components/modules/toolbar/index.ts

@@ -227,7 +227,6 @@ export default class Toolbar extends Module<ToolbarNodes> {
       this.enableModuleBindings();
     } else {
       this.destroy();
-      this.toolboxInstance.destroy();
       this.Editor.BlockSettings.destroy();
       this.disableModuleBindings();
     }
@@ -295,6 +294,10 @@ export default class Toolbar extends Module<ToolbarNodes> {
    * Close the Toolbar
    */
   public close(): void {
+    if (this.Editor.ReadOnly.isEnabled) {
+      return;
+    }
+
     this.nodes.wrapper.classList.remove(this.CSS.toolbarOpened);
 
     /** Close components */
@@ -551,7 +554,9 @@ export default class Toolbar extends Module<ToolbarNodes> {
    */
   private destroy(): void {
     this.removeAllNodes();
-    this.toolboxInstance.destroy();
+    if (this.toolboxInstance) {
+      this.toolboxInstance.destroy();
+    }
     this.tooltip.destroy();
   }
 }

test/cypress/tests/initialization.spec.ts

@@ -25,4 +25,26 @@ describe('Editor basic initialization', () => {
         .should('be.visible');
     });
   });
+
+  describe('Configuration', () => {
+    describe('readOnly', () => {
+      beforeEach(() => {
+        if (this && this.editorInstance) {
+          this.editorInstance.destroy();
+        }
+      });
+
+      it('should create editor without editing ability when true passed', () => {
+        cy.createEditor({
+          readOnly: true,
+        }).as('editorInstance');
+
+        cy.get('[data-cy=editorjs]')
+          .get('div.codex-editor')
+          .get('div.ce-paragraph')
+          .invoke('attr', 'contenteditable')
+          .should('eq', 'false');
+      });
+    });
+  });
 });