Merge pull request #161 from parmisan/master

added the ability to stretch the table

Author: neSpecc

README.md

@@ -64,6 +64,7 @@ var editor = EditorJS({
 | `maxRows`          | `number` | maximum number of rows. `5` by params |
 | `maxCols`          | `number` | maximum number of columns. `5` by params |
 | `withHeadings`     | `boolean` | toggle table headings. `false` by default |
+| `stretched`        | `boolean` | whether the table is stretched to fill the full width of the container |
 
 ## Output data
 
@@ -72,13 +73,15 @@ This Tool returns `data` in the following format
 | Field          | Type         | Description           |
 | -------------- | ------------ | ----------------------------------------- |
 | `withHeadings` | `boolean`    | Uses the first line as headings |
+| `stretched`    | `boolean`    | whether the table is stretched to fill the full width of the container |
 | `content`      | `string[][]` | two-dimensional array with table contents |
 
 ```json
 {
   "type" : "table",
   "data" : {
     "withHeadings": true,
+    "stretched": false,
     "content" : [ [ "Kine", "Pigs", "Chicken" ], [ "1 pcs", "3 pcs", "12 pcs" ], [ "100$", "200$", "150$" ] ]
   }
 }

index.html

@@ -40,10 +40,9 @@
   <pre class="output"></pre>
 
   <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
-  <script src="./dist/table.umd.js"></script>
-
-  <script>
 
+  <script type="module">
+    import Table from './src/index'
     const editor = new EditorJS({
       autofocus: true,
       tools: {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@editorjs/table",
   "description": "Table for Editor.js",
-  "version": "2.4.1",
+  "version": "2.4.2",
   "license": "MIT",
   "repository": "https://github.com/editor-js/table",
   "files": [

src/plugin.js

@@ -1,8 +1,7 @@
 import Table from './table';
 import * as $ from './utils/dom';
 
-import { IconTable, IconTableWithHeadings, IconTableWithoutHeadings } from '@codexteam/icons';
-
+import { IconTable, IconTableWithHeadings, IconTableWithoutHeadings, IconStretch, IconCollapse } from '@codexteam/icons';
 /**
  * @typedef {object} TableData - configuration that the user can set for the table
  * @property {number} rows - number of rows in the table
@@ -60,15 +59,17 @@ export default class TableBlock {
    *
    * @param {TableConstructor} init
    */
-  constructor({data, config, api, readOnly}) {
+  constructor({data, config, api, readOnly, block}) {
     this.api = api;
     this.readOnly = readOnly;
     this.config = config;
     this.data = {
       withHeadings: this.getConfig('withHeadings', false, data),
+      stretched: this.getConfig('stretched', false, data),
       content: data && data.content ? data.content : []
     };
     this.table = null;
+    this.block = block;
   }
 
   /**
@@ -130,6 +131,15 @@ export default class TableBlock {
           this.data.withHeadings = false;
           this.table.setHeadingsSetting(this.data.withHeadings);
         }
+      }, {
+        label: this.data.stretched ? this.api.i18n.t('Collapse') : this.api.i18n.t('Stretch'),
+        icon: this.data.stretched ? IconCollapse : IconStretch,
+        closeOnActivate: true,
+        toggle: true,
+        onActivate: () => {
+          this.data.stretched = !this.data.stretched;
+          this.block.stretched = this.data.stretched;
+        }
       }
     ];
   }
@@ -143,6 +153,7 @@ export default class TableBlock {
 
     const result = {
       withHeadings: this.data.withHeadings,
+      stretched: this.data.stretched,
       content: tableContent
     };