Fix readOnly.isEnabled getter (#1831)

* Fix readOnly.isEnabled getter

* Add tests

* Update CHANGELOG.md

Co-authored-by: Peter Savchenko <specc.dev@gmail.com>

docs/CHANGELOG.md

@@ -5,8 +5,9 @@
 - `New` — *UI* — The Toolbox became vertical 🥳
 - `Improvement` — *UI* — the Plus button will always be shown (previously, it appears only for empty blocks)
 - `Improvement` — *Dev Example Page* - Server added to allow opening example page on other devices in network.
-- `Fix` - `UI` - the Toolbar won't move on hover at mobile viewports. Resolves [#1972](https://github.com/codex-team/editor.js/issues/1972)
+- `Fix` — `UI` — the Toolbar won't move on hover at mobile viewports. Resolves [#1972](https://github.com/codex-team/editor.js/issues/1972)
 - `Fix` — `OnChange` event invocation after block insertion. [#1997](https://github.com/codex-team/editor.js/issues/1997)
+- `Fix` — `ReadOnly` — the `readonly.isEnabled` API getter now works correctly after `readonly.toggle()` calling. Resolves [#1822](https://github.com/codex-team/editor.js/issues/1822)
 
 ### 2.23.2
 

src/components/modules/api/readonly.ts

@@ -10,9 +10,14 @@ export default class ReadOnlyAPI extends Module {
    * Available methods
    */
   public get methods(): ReadOnly {
+    const getIsEnabled = (): boolean => this.isEnabled;
+
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
     return {
       toggle: (state): Promise<boolean> => this.toggle(state),
-      isEnabled: this.isEnabled,
+      get isEnabled(): boolean {
+        return getIsEnabled();
+      },
     };
   }
 

test/cypress/tests/readOnly.spec.ts

@@ -0,0 +1,50 @@
+import EditorJS, { EditorConfig } from '../../../types';
+
+describe('ReadOnly API spec', () => {
+  function createEditor(config?: EditorConfig): void {
+    const editorConfig = Object.assign({}, config || {});
+
+    cy.createEditor(editorConfig).as('editorInstance');
+  }
+
+  it('should return correct value for readOnly.isEnabled when editor initialized in normal mode', () => {
+    createEditor();
+
+    cy
+      .get<EditorJS>('@editorInstance')
+      .then(editor => {
+        expect(editor.readOnly.isEnabled).to.be.false;
+      });
+  });
+
+  it('should return correct value for readOnly.isEnabled when editor initialized in read-only mode', () => {
+    createEditor({
+      readOnly: true,
+    });
+
+    cy
+      .get<EditorJS>('@editorInstance')
+      .then(editor => {
+        expect(editor.readOnly.isEnabled).to.be.true;
+      });
+  });
+
+  it('should return correct value for readOnly.isEnabled when read-only mode toggled', () => {
+    createEditor();
+
+    cy
+      .get<EditorJS>('@editorInstance')
+      .then(async editor => {
+        expect(editor.readOnly.isEnabled).to.be.false;
+
+        editor.readOnly.toggle()
+          .then(() => {
+            expect(editor.readOnly.isEnabled).to.be.true;
+          })
+          .then(() => editor.readOnly.toggle())
+          .then(() => {
+            expect(editor.readOnly.isEnabled).to.be.false;
+          });
+      });
+  });
+});