Read only mode

docs/CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ### 2.19
 
+- `New` - Read-only mode 🥳 [#837](https://github.com/codex-team/editor.js/issues/837)
 - `New` - RTL mode added [#670](https://github.com/codex-team/editor.js/issues/670)
 - `Fix` — Fix problem with types usage [#1183](https://github.com/codex-team/editor.js/issues/1183)
 - `Fix` - Fixed issue with Spam clicking the "Click to tune" button duplicates the icons on FireFox. [#1273](https://github.com/codex-team/editor.js/issues/1273)
@@ -42,7 +43,6 @@
 
 >  *Breaking changes* `blocks.getBlockByIndex` method now returns BlockAPI object. To access old value, use BlockAPI.holder property
 
-
 ### 2.17
 
 - `Improvements` - Editor's [onchange callback](https://editorjs.io/configuration#editor-modifications-callback) now accepts an API as a parameter

example/assets/demo.css

@@ -120,6 +120,31 @@ body {
   text-decoration: none;
 }
 
+.ce-example__statusbar {
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
+  font-size: 12px;
+  padding: 8px 15px;
+}
+
+.ce-example__statusbar-button {
+  display: inline-flex;
+  margin-left: 10px;
+  background: #4A9DF8;
+  padding: 6px 12px;
+  box-shadow: 0 7px 8px -4px rgba(137, 207, 255, 0.77);
+  transition: all 150ms ease;
+  cursor: pointer;
+  border-radius: 31px;
+  color: #fff;
+  font-family: 'PT Mono', Menlo, Monaco, Consolas, Courier New, monospace;
+  text-align: center;
+}
+
 @media all and (max-width: 730px){
   .ce-example__header,
   .ce-example__content{

example/example-dev.html

@@ -34,6 +34,15 @@
       <div class="ce-example__button" id="saveButton">
         editor.save()
       </div>
+      <div class="ce-example__statusbar">
+        Readonly:
+        <b id="readonly-state">
+          Off
+        </b>
+        <div class="ce-example__statusbar-button" id="toggleReadOnlyButton">
+          toggle
+        </div>
+      </div>
     </div>
     <div class="ce-example__output">
       <pre class="ce-example__output-content" id="output"></pre>
@@ -74,16 +83,16 @@
 
   <!-- Initialization -->
   <script>
-    /**
-     * Saving button
-     */
-    const saveButton = document.getElementById('saveButton');
-
     /**
      * To initialize the Editor, create a new instance with configuration object
      * @see docs/installation.md for mode details
      */
     var editor = new EditorJS({
+      /**
+       * Enable/Disable the read only mode
+       */
+      readOnly: false,
+
       /**
        * Wrapper of Editor
        */
@@ -279,14 +288,37 @@
       },
     });
 
+    /**
+     * Saving button
+     */
+    const saveButton = document.getElementById('saveButton');
+
+    /**
+     * Toggle read-only button
+     */
+    const toggleReadOnlyButton = document.getElementById('toggleReadOnlyButton');
+    const readOnlyIndicator = document.getElementById('readonly-state');
 
     /**
      * Saving example
      */
     saveButton.addEventListener('click', function () {
-      editor.save().then((savedData) => {
-        cPreview.show(savedData, document.getElementById("output"));
-      });
+      editor.save()
+        .then((savedData) => {
+          cPreview.show(savedData, document.getElementById("output"));
+        })
+        .catch((error) => {
+          console.error('Saving error', error);
+        });
+    });
+
+    /**
+     * Toggle read-only example
+     */
+    toggleReadOnlyButton.addEventListener('click', async () => {
+      const readOnlyState = await editor.readOnly.toggle();
+
+      readOnlyIndicator.textContent = readOnlyState ? 'On' : 'Off';
     });
   </script>
 </body>

src/components/__module.ts

@@ -2,6 +2,12 @@ import { EditorModules } from '../types-internal/editor-modules';
 import { EditorConfig } from '../../types';
 import { ModuleConfig } from '../types-internal/module-config';
 
+/**
+ * The type <T> of the Module generic.
+ * It describes the structure of nodes used in modules.
+ */
+export type ModuleNodes = object;
+
 /**
  * @abstract
  * @class      Module
@@ -11,7 +17,13 @@ import { ModuleConfig } from '../types-internal/module-config';
  * @property {object} config - Editor user settings
  * @property {EditorModules} Editor - List of Editor modules
  */
-export default class Module {
+export default class Module<T extends ModuleNodes = {}> {
+  /**
+   * Each module can provide some UI elements that will be stored in this property
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  public nodes: T = {} as any;
+
   /**
    * Editor modules list
    *
@@ -26,6 +38,50 @@ export default class Module {
    */
   protected config: EditorConfig;
 
+  /**
+   * This object provides methods to push into set of listeners that being dropped when read-only mode is enabled
+   */
+  protected readOnlyMutableListeners = {
+    /**
+     * Assigns event listener on DOM element and pushes into special array that might be removed
+     *
+     * @param {EventTarget} element - DOM Element
+     * @param {string} eventType - Event name
+     * @param {Function} handler - Event handler
+     * @param {boolean|AddEventListenerOptions} options - Listening options
+     */
+    on: (
+      element: EventTarget,
+      eventType: string,
+      handler: (event: Event) => void,
+      options: boolean | AddEventListenerOptions = false
+    ): void => {
+      const { Listeners } = this.Editor;
+
+      this.mutableListenerIds.push(
+        Listeners.on(element, eventType, handler, options)
+      );
+    },
+
+    /**
+     * Clears all mutable listeners
+     */
+    clearAll: (): void => {
+      const { Listeners } = this.Editor;
+
+      for (const id of this.mutableListenerIds) {
+        Listeners.offById(id);
+      }
+
+      this.mutableListenerIds = [];
+    },
+  };
+
+  /**
+   * The set of listener identifiers which will be dropped in read-only mode
+   */
+  private mutableListenerIds: string[] = [];
+
   /**
    * @class
    * @param {EditorConfig} config - Editor's config
@@ -47,6 +103,19 @@ export default class Module {
     this.Editor = Editor;
   }
 
+  /**
+   * Remove memorized nodes
+   */
+  public removeAllNodes(): void {
+    for (const key in this.nodes) {
+      const node = this.nodes[key];
+
+      if (node instanceof HTMLElement) {
+        node.remove();
+      }
+    }
+  }
+
   /**
    * Returns true if current direction is RTL (Right-To-Left)
    */

src/components/block-tunes/block-tune-move-up.ts

@@ -84,7 +84,7 @@ export default class MoveUpTune implements BlockTune {
     const currentBlock = this.api.blocks.getBlockByIndex(currentBlockIndex);
     const previousBlock = this.api.blocks.getBlockByIndex(currentBlockIndex - 1);
 
-    if (!currentBlock || !previousBlock){
+    if (!currentBlock || !previousBlock) {
       return;
     }