Add Table Tool (#66)

resolves #58

package.json

@@ -13,7 +13,7 @@
     "build:dev": "webpack ./src/frontend/js/app.js --o='./public/dist/[name].bundle.js' --output-library=Docs --output-public-path=/dist/ -p --mode=development --watch",
     "precommit": "yarn lint && yarn test --exit",
     "generatePassword": "node ./generatePassword.js",
-    "editor-upgrade": "yarn add -D @editorjs/{editorjs,header,code,delimiter,list,image,inline-code,marker}@latest"
+    "editor-upgrade": "yarn add -D @editorjs/{editorjs,header,code,delimiter,list,image,table,inline-code,marker}@latest"
   },
   "dependencies": {
     "bcrypt": "^3.0.3",
@@ -49,6 +49,7 @@
     "@editorjs/inline-code": "^1.3.0",
     "@editorjs/list": "^1.3.1",
     "@editorjs/marker": "^1.2.0",
+    "@editorjs/table": "^1.2.0",
     "autoprefixer": "^9.1.3",
     "babel": "^6.23.0",
     "babel-eslint": "^10.0.1",

src/frontend/js/classes/editor.js

@@ -4,13 +4,11 @@ import EditorJS from '@editorjs/editorjs';
  * Block Tools for the Editor
  */
 import Header from '@editorjs/header';
-import CodeTool from '@editorjs/code';
-import Delimiter from '@editorjs/delimiter';
-import List from '@editorjs/list';
 import Image from '@editorjs/image';
-// import RawTool from '@editorjs/raw';
+import CodeTool from '@editorjs/code';
-// import Embed from '@editorjs/embed';
+import List from '@editorjs/list';
-// import Quote from '@editorjs/quote';
+import Delimiter from '@editorjs/delimiter';
+import Table from '@editorjs/table';
 
 /**
  * Inline Tools for the Editor
@@ -40,30 +38,6 @@ export default class Editor {
           }
         },
 
-        // quote: {
-        //   class: Quote,
-        //   inlineToolbar: true
-        // },
-
-        code: {
-          class: CodeTool,
-          shortcut: 'CMD+SHIFT+D'
-        },
-
-        // rawTool: {
-        //   class: RawTool,
-        //   shortcut: 'CMD+SHIFT+R'
-        // },
-
-        delimiter: Delimiter,
-
-        // embed: Embed,
-
-        list: {
-          class: List,
-          inlineToolbar: true
-        },
-
         image: {
           class: Image,
           inlineToolbar: true,
@@ -83,6 +57,23 @@ export default class Editor {
           }
         },
 
+        code: {
+          class: CodeTool,
+          shortcut: 'CMD+SHIFT+D'
+        },
+
+        list: {
+          class: List,
+          inlineToolbar: true
+        },
+
+        delimiter: Delimiter,
+
+        table: {
+          class: Table,
+          inlineToolbar: true
+        },
+
         /**
          * Inline Tools
          */

src/frontend/styles/components/page.pcss

@@ -182,3 +182,21 @@
     letter-spacing: 0.2em;
   }
 }
+
+/**
+ * Table
+ * ==================
+ */
+.block-table {
+  margin: 20px 0;
+  table-layout: fixed;
+  width: 100%;
+  border-radius: 3px;
+  border-collapse: collapse;
+  border: 1px solid var(--color-line-gray);
+
+  td {
+    padding: 8px 10px;
+    border: 1px solid var(--color-line-gray);
+  }
+}

src/views/pages/blocks/table.twig

@@ -0,0 +1,11 @@
+<table class="block-table">
+  {% for row in content %}
+    <tr>
+      {% for cell in row %}
+        <td>
+          {{ cell }}
+        </td>
+      {% endfor %}
+    </tr>
+  {% endfor %}
+</table>

src/views/pages/page.twig

@@ -32,7 +32,7 @@
       {% for block in page.body.blocks %}
         {# Skip first header, because it is already showed as a Title #}
         {% if not (loop.first and block.type == 'header') %}
-          {% if block.type in ['paragraph', 'header', 'list', 'code', 'image', 'delimiter'] %}
+          {% if block.type in ['paragraph', 'header', 'image', 'code', 'list', 'delimiter', 'table'] %}
             {% include './blocks/' ~ block.type ~ '.twig' with block.data %}
           {% endif %}
         {% endif %}

yarn.lock

@@ -643,6 +643,11 @@
   resolved "https://registry.yarnpkg.com/@editorjs/marker/-/marker-1.2.0.tgz#4e3130870c2ca4b3ac5b05405b4e49add55893cb"
   integrity sha512-BkAvAvf2B0xsUbMPoht7g1oWaxw79NeqJM//+wM3VnEruj908qw7AluDBVy1gwOe2fhhryaDXQ3kbqU6HC8o1g==
 
+"@editorjs/table@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@editorjs/table/-/table-1.2.0.tgz#547d7b28c96f8a37605bea10bd4f016e8bfc344d"
+  integrity sha512-pCcNf/9JzVWQw6TsqUHew73UoVSYTftXviKVqsnVazx4/D8eH5g5fsEY5L0LEl9KC0mJMJij+h6I1ge70kDlgg==
+
 "@sinonjs/commons@^1.0.2", "@sinonjs/commons@^1.2.0":
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.3.0.tgz#50a2754016b6f30a994ceda6d9a0a8c36adda849"