The read-only mode (#1035)

(ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

Author: hboylan

dist/editor.js

@@ -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)
@@ -43,7 +44,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

docs/CHANGELOG.md

@@ -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/assets/demo.css

@@ -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>

example/example-dev.html

@@ -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)
    */

example/tools/checklist

@@ -10,7 +10,9 @@ import { BlockAPI as BlockAPIInterface } from '../../../types/api';
  *
  * @param {Block} block - Block to expose
  */
-function BlockAPI(block: Block): void {
+function BlockAPI(
+  block: Block
+): void {
   const blockAPI: BlockAPIInterface = {
     /**
      * Tool name

example/tools/code

@@ -13,7 +13,7 @@ import {
 import { SavedData } from '../../../types/data-formats';
 import $ from '../dom';
 import * as _ from '../utils';
-import ApiModule from '../modules/api';
+import ApiModules from '../modules/api';
 import BlockAPI from './api';
 import { ToolType } from '../modules/tools';
 
@@ -49,7 +49,12 @@ interface BlockConstructorOptions {
   /**
    * Editor's API methods
    */
-  api: ApiModule;
+  api: ApiModules;
+
+  /**
+   * This flag indicates that the Block should be constructed in the read-only mode.
+   */
+  readOnly: boolean;
 }
 
 /**
@@ -146,7 +151,7 @@ export default class Block {
   /**
    * Editor`s API module
    */
-  private readonly api: ApiModule;
+  private readonly api: ApiModules;
 
   /**
    * Focused input index
@@ -197,14 +202,16 @@ export default class Block {
    * @param {BlockToolData} options.data - Tool's initial data
    * @param {BlockToolConstructable} options.Tool — Tool's class
    * @param {ToolSettings} options.settings - default tool's config
-   * @param {ApiModule} options.api - Editor API module for pass it to the Block Tunes
+   * @param {Module} options.api - Editor API module for pass it to the Block Tunes
+   * @param {boolean} options.readOnly - Read-Only flag
    */
   constructor({
     name,
     data,
     Tool,
     settings,
     api,
+    readOnly,
   }: BlockConstructorOptions) {
     this.name = name;
     this.class = Tool;
@@ -220,6 +227,7 @@ export default class Block {
       config: this.config,
       api: this.api.getMethodsForTool(name, ToolType.Block),
       block: this.blockAPI,
+      readOnly: readOnly,
     });
 
     this.holder = this.compose();

example/tools/delimiter

@@ -1,11 +1,9 @@
 import $ from './dom';
-// eslint-disable-next-line import/no-duplicates
 import * as _ from './utils';
-// eslint-disable-next-line import/no-duplicates
-import { LogLevels } from './utils';
 import { EditorConfig, OutputData, SanitizerConfig } from '../../types';
 import { EditorModules } from '../types-internal/editor-modules';
 import I18n from './i18n';
+import { CriticalError } from './errors/critical';
 
 /**
  * @typedef {Core} Core - editor core class
@@ -151,7 +149,7 @@ export default class Core {
     }
 
     if (!this.config.logLevel) {
-      this.config.logLevel = LogLevels.VERBOSE;
+      this.config.logLevel = _.LogLevels.VERBOSE;
     }
 
     _.setLogLevel(this.config.logLevel);
@@ -208,6 +206,9 @@ export default class Core {
       }
     }
 
+    this.config.readOnly = this.config.readOnly as boolean || false;
+    this.config.i18n = {};
+
     /**
      * Adjust i18n
      */
@@ -285,13 +286,17 @@ export default class Core {
   public async start(): Promise<void> {
     const modulesToPrepare = [
       'Tools',
+      'ReadOnly',
       'UI',
+      'Toolbar',
+      'InlineToolbar',
       'BlockManager',
       'Paste',
       'DragNDrop',
       'ModificationsObserver',
       'BlockSelection',
       'RectangleSelection',
+      'CrossBlockSelection',
     ];
 
     await modulesToPrepare.reduce(
@@ -301,6 +306,13 @@ export default class Core {
         try {
           await this.moduleInstances[module].prepare();
         } catch (e) {
+          /**
+           * CriticalError's will not be caught
+           * It is used when Editor is rendering in read-only mode with unsupported plugin
+           */
+          if (e instanceof CriticalError) {
+            throw new Error(e.message);
+          }
           _.log(`Module ${module} was skipped because of %o`, 'warn', e);
         }
         // _.log(`Preparing ${module} module`, 'timeEnd');