Merge pull request #106 from editor-js/feature/read-only-mode

Add read-only mode support

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/image",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "keywords": [
     "codex editor",
     "tool",

src/index.js

@@ -75,6 +75,15 @@ import Uploader from './uploader';
  * @property {string} file.url - [Required] image source URL
  */
 export default class ImageTool {
+  /**
+   * Notify core that read-only mode is supported
+   *
+   * @returns {boolean}
+   */
+  static get isReadOnlySupported() {
+    return true;
+  }
+
   /**
    * Get Tool toolbox settings
    * icon - Tool icon's SVG
@@ -94,9 +103,11 @@ export default class ImageTool {
    * @param {ImageToolData} tool.data - previously saved data
    * @param {ImageConfig} tool.config - user config for Tool
    * @param {object} tool.api - Editor.js API
+   * @param {boolean} tool.readOnly - read-only mode flag
    */
-  constructor({ data, config, api }) {
+  constructor({ data, config, api, readOnly }) {
     this.api = api;
+    this.readOnly = readOnly;
 
     /**
      * Tool's initial config
@@ -135,6 +146,7 @@ export default class ImageTool {
           },
         });
       },
+      readOnly,
     });
 
     /**

src/ui.js

@@ -12,19 +12,21 @@ export default class Ui {
    * @param {object} ui.api - Editor.js API
    * @param {ImageConfig} ui.config - user config
    * @param {Function} ui.onSelectFile - callback for clicks on Select file button
+   * @param {boolean} ui.readOnly - read-only mode flag
    */
-  constructor({ api, config, onSelectFile }) {
+  constructor({ api, config, onSelectFile, readOnly }) {
     this.api = api;
     this.config = config;
     this.onSelectFile = onSelectFile;
+    this.readOnly = readOnly;
     this.nodes = {
       wrapper: make('div', [this.CSS.baseClass, this.CSS.wrapper]),
       imageContainer: make('div', [ this.CSS.imageContainer ]),
       fileButton: this.createFileButton(),
       imageEl: undefined,
       imagePreloader: make('div', this.CSS.imagePreloader),
       caption: make('div', [this.CSS.input, this.CSS.caption], {
-        contentEditable: true,
+        contentEditable: !this.readOnly,
       }),
     };