Toggle readonly on start (#1344)

* Toggle readonly on start

* Do not render block twice on start

src/components/core.ts

@@ -287,7 +287,6 @@ export default class Core {
   public async start(): Promise<void> {
     const modulesToPrepare = [
       'Tools',
-      'ReadOnly',
       'UI',
       'Toolbar',
       'InlineToolbar',
@@ -298,6 +297,7 @@ export default class Core {
       'BlockSelection',
       'RectangleSelection',
       'CrossBlockSelection',
+      'ReadOnly',
     ];
 
     await modulesToPrepare.reduce(

src/components/modules/blockManager.ts

@@ -160,11 +160,8 @@ export default class BlockManager extends Module {
   /**
    * Should be called after Editor.UI preparation
    * Define this._blocks property
-   *
-   * @returns {Promise}
    */
-  public async prepare(): Promise<void> {
-    const { Listeners, BlockEvents } = this.Editor;
+  public prepare(): void {
     const blocks = new Blocks(this.Editor.UI.nodes.redactor);
 
     /**
@@ -185,13 +182,6 @@ export default class BlockManager extends Module {
       set: Blocks.set,
       get: Blocks.get,
     });
-
-    /** Copy event */
-    Listeners.on(
-      document,
-      'copy',
-      (e: ClipboardEvent) => BlockEvents.handleCommandC(e)
-    );
   }
 
   /**
@@ -736,13 +726,20 @@ export default class BlockManager extends Module {
    * Enables all module handlers and bindings for all Blocks
    */
   private enableModuleBindings(): void {
-    /** Copy and cut */
+    /** Cut event */
     this.readOnlyMutableListeners.on(
       document,
       'cut',
       (e: ClipboardEvent) => this.Editor.BlockEvents.handleCommandX(e)
     );
 
+    /** Copy event */
+    this.readOnlyMutableListeners.on(
+      document,
+      'copy',
+      (e: ClipboardEvent) => this.Editor.BlockEvents.handleCommandC(e)
+    );
+
     this.blocks.forEach((block: Block) => {
       this.bindBlockEvents(block);
     });

src/components/modules/readonly.ts

@@ -52,7 +52,7 @@ export default class ReadOnly extends Module {
       this.throwCriticalError();
     }
 
-    this.readOnlyEnabled = this.config.readOnly;
+    this.toggle(this.config.readOnly);
   }
 
   /**
@@ -62,10 +62,12 @@ export default class ReadOnly extends Module {
    * @param {boolean} state - (optional) read-only state or toggle
    */
   public async toggle(state = !this.readOnlyEnabled): Promise<boolean> {
-    if (this.toolsDontSupportReadOnly.length > 0) {
+    if (state && this.toolsDontSupportReadOnly.length > 0) {
       this.throwCriticalError();
     }
 
+    const oldState = this.readOnlyEnabled;
+
     this.readOnlyEnabled = state;
 
     for (const name in this.Editor) {
@@ -82,6 +84,13 @@ export default class ReadOnly extends Module {
       this.Editor[name].toggleReadOnly(state);
     }
 
+    /**
+     * If new state equals old one, do not re-render blocks
+     */
+    if (oldState === state) {
+      return this.readOnlyEnabled;
+    }
+
     /**
      * Save current Editor Blocks and render again
      */