Merge pull request #29 from editor-js/read-only

read only integration

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/paragraph",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "keywords": [
     "codex editor",
     "paragraph",

src/index.js

@@ -41,15 +41,20 @@ class Paragraph {
    * @param {ParagraphData} params.data - previously saved data
    * @param {ParagraphConfig} params.config - user config for Tool
    * @param {object} params.api - editor.js api
+   * @param {boolean} readOnly - read only mode flag
    */
-  constructor({data, config, api}) {
+  constructor({data, config, api, readOnly}) {
     this.api = api;
+    this.readOnly = readOnly;
 
     this._CSS = {
       block: this.api.styles.block,
       wrapper: 'ce-paragraph'
     };
-    this.onKeyUp = this.onKeyUp.bind(this);
+
+    if (!this.readOnly) {
+      this.onKeyUp = this.onKeyUp.bind(this);
+    }
 
     /**
      * Placeholder for paragraph if it is first Block
@@ -90,18 +95,21 @@ class Paragraph {
     let div = document.createElement('DIV');
 
     div.classList.add(this._CSS.wrapper, this._CSS.block);
-    div.contentEditable = true;
+    div.contentEditable = false;
     div.dataset.placeholder = this.api.i18n.t(this._placeholder);
 
-    div.addEventListener('keyup', this.onKeyUp);
+    if (!this.readOnly) {
+      div.contentEditable = true;
+      div.addEventListener('keyup', this.onKeyUp);
+    }
 
     return div;
   }
 
   /**
    * Return Tool's view
+   *
    * @returns {HTMLDivElement}
-   * @public
    */
   render() {
     return this._element;
@@ -183,6 +191,15 @@ class Paragraph {
     };
   }
 
+  /**
+   * Returns true to notify the core that read-only mode is supported
+   *
+   * @return {boolean}
+   */
+  static get isReadOnlySupported() {
+    return true;
+  }
+
   /**
    * Get current Tools`s data
    * @returns {ParagraphData} Current data