Feature: readOnly mode support

src/plugin.js

@@ -36,6 +36,14 @@ class Table {
     return true;
   }
 
+  /**
+   * Notify core that read-only mode is supported
+   * @returns {boolean}
+   */
+  static get isReadOnlySupported() {
+    return true;
+  }
+
   /**
    * Get Tool toolbox settings
    * icon - Tool icon's SVG
@@ -56,43 +64,49 @@ class Table {
    * @param {object} config - user config for Tool
    * @param {object} api - Editor.js API
    */
-  constructor({ data, config, api }) {
+  constructor({ data, config, api, readOnly }) {
     this.api = api;
     this.wrapper = undefined;
     this.config = config;
     this.data = data;
-    this._tableConstructor = new TableConstructor(data, config, api);
+    this.readOnly = readOnly;
+    this._tableConstructor = new TableConstructor({
+      data,
+      config,
+      api,
+      readOnly,
+    });
 
     this.actions = [
       {
         actionName: "InsertColBefore",
         icon: Icons.InsertColBefore,
-        label: "Insert column before",
+        label: this.api.i18n.t("col_before"),
       },
       {
         actionName: "InsertColAfter",
         icon: Icons.InsertColAfter,
-        label: "Insert column after",
+        label: this.api.i18n.t("col_after"),
       },
       {
         actionName: "InsertRowBefore",
         icon: Icons.InsertRowBefore,
-        label: "Insert row before",
+        label: this.api.i18n.t("row_before"),
       },
       {
         actionName: "InsertRowAfter",
         icon: Icons.InsertRowAfter,
-        label: "Insert row after",
+        label: this.api.i18n.t("row_after"),
       },
       {
         actionName: "DeleteRow",
         icon: Icons.DeleteRow,
-        label: "Delete row",
+        label: this.api.i18n.t("delete_row"),
       },
       {
         actionName: "DeleteCol",
         icon: Icons.DeleteCol,
-        label: "Delete column",
+        label: this.api.i18n.t("delete_col"),
       },
     ];
   }
@@ -148,7 +162,7 @@ class Table {
         this.performAction.bind(this, actionName)
       );
       wrapper.appendChild(button);
-      if(this._tableConstructor.table.selectedCell) {
+      if (this._tableConstructor.table.selectedCell) {
         this._tableConstructor.table.focusCellOnSelectedCell();
       }
     });
@@ -161,12 +175,25 @@ class Table {
    * @public
    */
   render() {
+    const container = document.createElement("div");
     this.wrapper = document.createElement("div");
 
-    if ((this.data && this.data.content)) {
+    this.titleWrapper = document.createElement("div");
+    this.titleWrapper.classList.add("base-plugin__titleWrapper");
+
+    this.title = document.createElement("span");
+    this.title.innerText = this.api.i18n.t("title");
+    this.title.classList.add("base-plugin__text");
+
+    this.titleWrapper.appendChild(this.title);
+
+    container.appendChild(this.titleWrapper);
+    container.appendChild(this.wrapper);
+
+    if (this.data && this.data.content) {
       //Creates table if Data is Present
       this._createTableConfiguration();
-    } else  {
+    } else {
       // Create table preview if New table is initialised
       this.wrapper.classList.add("table-selector");
       this.wrapper.setAttribute("data-hoveredClass", "m,n");
@@ -199,9 +226,9 @@ class Table {
         }
       });
     }
-    return this.wrapper;
+    return container;
   }
-  
+
   createCells(rows) {
     if (rows !== 0) {
       for (let i = 0; i < rows; i++) {
@@ -224,19 +251,20 @@ class Table {
         this.wrapper.appendChild(rowDiv);
       }
     }
-    const hiddenEl = document.createElement('input');
-    hiddenEl.classList.add('hidden-element');
-    hiddenEl.setAttribute('tabindex', 0);
+    const hiddenEl = document.createElement("input");
+    hiddenEl.classList.add("hidden-element");
+    hiddenEl.setAttribute("tabindex", 0);
     this.wrapper.appendChild(hiddenEl);
   }
 
   _createTableConfiguration() {
     this.wrapper.innerHTML = "";
-    this._tableConstructor = new TableConstructor(
-      this.data,
-      this.config,
-      this.api
-    );
+    this._tableConstructor = new TableConstructor({
+      data: this.data,
+      config: this.config,
+      api: this.api,
+      readOnly: this.readOnly,
+    });
     this.wrapper.appendChild(this._tableConstructor.htmlElement);
   }
   /**
@@ -248,7 +276,7 @@ class Table {
     const table = toolsContent.querySelector("table");
     const data = [];
     const rows = table ? table.rows : 0;
-    if(rows.length) {
+    if (rows.length) {
       for (let i = 0; i < rows.length; i++) {
         const row = rows[i];
         const cols = Array.from(row.cells);
@@ -259,12 +287,12 @@ class Table {
           continue;
         }
         data.push(inputs.map((input) => input.innerHTML));
+      }
+      return {
+        content: data,
+      };
     }
-    return {
-      content: data,
-    };
-  }  
-}
+  }
 
   /**
    * @private
@@ -279,31 +307,31 @@ class Table {
 
   static get pasteConfig() {
     return {
-      tags: ['TABLE', 'TR', 'TD', 'TBODY', 'TH'],
+      tags: ["TABLE", "TR", "TD", "TBODY", "TH"],
     };
   }
 
   async onPaste(event) {
     const table = event.detail.data;
-    this.data  = this.pasteHandler(table);
+    this.data = this.pasteHandler(table);
     this._createTableConfiguration();
   }
-  
+
   pasteHandler(element) {
-    const {tagName: tag} = element;
+    const { tagName: tag } = element;
     const data = {
       content: [],
       config: {
         rows: 0,
-        cols: 0
-      }
-    }
-    if(tag ==='TABLE') {
+        cols: 0,
+      },
+    };
+    if (tag === "TABLE") {
       let tableBody = Array.from(element.childNodes);
-      tableBody = tableBody.find(el => el.nodeName === 'TBODY');
+      tableBody = tableBody.find((el) => el.nodeName === "TBODY");
       let tableRows = Array.from(tableBody.childNodes);
-      tableRows = [tableRows].map(obj => {
-        return obj.filter((tr) => tr.nodeName === 'TR');
+      tableRows = [tableRows].map((obj) => {
+        return obj.filter((tr) => tr.nodeName === "TR");
       });
       data.config.rows = tableRows[0].length;
       data.content = tableRows[0].map((tr) => {
@@ -313,11 +341,10 @@ class Table {
           return td.innerHTML;
         });
         return tableData;
-      })
+      });
     }
     return data;
   }
-
 }
 
 module.exports = Table;

src/styles/table.pcss

@@ -1,13 +1,27 @@
 /* tc- project's prefix*/
 
+.base-plugin__titleWrapper {
+  width: 100%;
+  align-items: center;
+  justify-content: start;
+}
+
+.base-plugin__text {
+  cursor: default;
+  user-select: none;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.45);
+  margin-bottom: 1rem;
+}
+
 .tc-table {
   width: 100%;
   height: 100%;
   border-collapse: collapse;
   table-layout: fixed;
 
   &__wrap {
-    border: 1px solid #DBDBE2;
+    border: 1px solid #dbdbe2;
     border-radius: 3px;
     position: relative;
     height: 100%;
@@ -16,7 +30,7 @@
   }
 
   &__cell {
-    border: 1px solid #DBDBE2;
+    border: 1px solid #dbdbe2;
     padding: 0;
     vertical-align: top;
   }
@@ -37,7 +51,7 @@
   &__highlight:focus-within {
     background-color: rgba(173, 164, 176, 0.1);
   }
-  
+
   tbody tr:first-child td {
     border-top: none;
   }
@@ -519,4 +533,4 @@
 [data-hoveredClass="6,6"] #row_6_cell_6 #cell_6 {
   background: #d5e4f9;
   border: 1px solid #c0cffd;
-}
+}

src/table.js

@@ -16,14 +16,19 @@ const CSS = {
 export class Table {
   /**
    * Creates
+   * @param {boolean} readOnly - read-only mode flag
    */
-  constructor() {
+  constructor(readOnly) {
     this._numberOfColumns = 0;
     this._numberOfRows = 0;
     this._element = this._createTableWrapper();
     this._table = this._element.querySelector('table');
     this._selectedCell = null;
-    this._attachEvents();
+    this.readOnly = readOnly;
+
+    if (!this.readOnly) {
+      this._attachEvents();
+    }
   }
 
   /**
@@ -190,7 +195,7 @@ export class Table {
    */
   _createTableWrapper() {
     return create('div', [ CSS.wrapper ], null, [
-      create('table', [ CSS.table ])  
+      create('table', [ CSS.table ])
       // This function can be updated so that it will render the table with the give config instead of 3x3
     ]);
   }
@@ -202,7 +207,7 @@ export class Table {
    * @return {HTMLElement} - the area
    */
   _createContenteditableArea() {
-    return create('div', [ CSS.inputField ], { contenteditable: 'true' });
+    return create('div', [ CSS.inputField ], { contenteditable: !this.readOnly });
   }
 
   /**

src/tableConstructor.js

@@ -18,10 +18,12 @@ export class TableConstructor {
    * @param {TableData} data - previously saved data for insert in table
    * @param {object} config - configuration of table
    * @param {object} api - Editor.js API
+   * @param {boolean} readOnly - read-only mode flag
    */
-  constructor(data, config, api) {
+  constructor({ data, config, api, readOnly }) {
     /** creating table */
-    this._table = new Table();
+    this.readOnly = readOnly;
+    this._table = new Table(readOnly);
     const size = this._resizeTable(data, config);
 
     this._fillTable(data, size);

test.html

@@ -25,6 +25,8 @@
 </head>
 <body>
 
+<button type="button" onclick="toggleReadOnly()">Toggle readonly mode</button>
+
 <div id="editorjs"></div>
 </div>
 <div class="ce-example__output">
@@ -48,15 +50,19 @@
             rows: 0,
             cols: 0
           },
-          
+
         },
       },
       data : {
         blocks: [
-        
+
         ]
       },
     })
+
+    function toggleReadOnly () {
+      editor.readOnly.toggle();
+    }
 </script>
 </body>
 </html>