Add Table Tool (#66)

resolves #58

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 Embed from '@editorjs/embed';
-// import Quote from '@editorjs/quote';
+import CodeTool from '@editorjs/code';
+import List from '@editorjs/list';
+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 %}