Add EditorJS tool checklist

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,table,inline-code,marker,warning}@latest"
+    "editor-upgrade": "yarn add -D @editorjs/{editorjs,header,code,delimiter,list,image,table,inline-code,marker,warning,checklist}@latest"
   },
   "dependencies": {
     "bcrypt": "^3.0.3",
@@ -43,15 +43,16 @@
     "@babel/polyfill": "^7.2.5",
     "@babel/preset-env": "^7.1.0",
     "@codexteam/misprints": "^1.0.0",
+    "@editorjs/checklist": "^1.1.0",
     "@editorjs/code": "^2.4.1",
     "@editorjs/delimiter": "^1.1.0",
-    "@editorjs/editorjs": "^2.16.0",
-    "@editorjs/header": "^2.3.2",
-    "@editorjs/image": "^2.3.3",
+    "@editorjs/editorjs": "^2.17.0",
+    "@editorjs/header": "^2.4.1",
+    "@editorjs/image": "^2.3.4",
     "@editorjs/inline-code": "^1.3.1",
     "@editorjs/list": "^1.4.0",
     "@editorjs/marker": "^1.2.2",
-    "@editorjs/table": "^1.2.0",
+    "@editorjs/table": "^1.2.2",
     "@editorjs/warning": "^1.1.1",
     "autoprefixer": "^9.1.3",
     "babel": "^6.23.0",

src/frontend/js/classes/editor.js

@@ -10,6 +10,7 @@ import List from '@editorjs/list';
 import Delimiter from '@editorjs/delimiter';
 import Table from '@editorjs/table';
 import Warning from '@editorjs/warning';
+import Checklist from '@editorjs/checklist';
 
 /**
  * Inline Tools for the Editor
@@ -80,6 +81,11 @@ export default class Editor {
           inlineToolbar: true
         },
 
+        checklist: {
+          class: Checklist,
+          inlineToolbar: true,
+        },
+
         /**
          * Inline Tools
          */

src/frontend/styles/components/page.pcss

@@ -362,3 +362,60 @@
     padding-left: 15px;
   }
 }
+
+/**
+ * Checklist
+ * ==================
+ */
+.block-checklist {
+  margin: 20px 0;
+
+  &__item {
+    display: flex;
+    padding: 0 10px;
+    box-sizing: content-box;
+
+    &-checkbox {
+      display: inline-block;
+      flex-shrink: 0;
+      position: relative;
+      width: 20px;
+      height: 20px;
+      margin: 10px 10px 10px 0;
+      border-radius: 50%;
+      border: 1px solid #d0d0d0;
+      background: #fff;
+      cursor: pointer;
+      user-select: none;
+
+      &::after {
+        position: absolute;
+        top: 5px;
+        left: 5px;
+        width: 8px;
+        height: 5px;
+        border: 2px solid #fcfff4;
+        border-top: none;
+        border-right: none;
+        background: transparent;
+        content: '';
+        opacity: 0;
+        transform: rotate(-45deg);
+      }
+
+      &--checked {
+        background: #388ae5;
+        border-color: #388ae5;
+      }
+    }
+
+    &-text {
+      outline: none;
+      flex-grow: 1;
+      padding: 10px 0;
+    }
+  }
+}
+.block-checklist__item-checkbox--checked, .block-checklist__item-checkbox::after {
+  opacity: 1;
+}

src/views/pages/blocks/checklist.twig

@@ -0,0 +1,12 @@
+<div class="block-checklist">
+  {% for item in items %}
+      <div class="block-checklist__item">
+        {% if item.checked %}
+          <span class="block-checklist__item-checkbox block-checklist__item-checkbox--checked"></span>
+        {% else %}
+          <span class="block-checklist__item-checkbox"></span>
+        {% endif %}
+        <div class="block-checklist__item-text">{{ item.text }}</div>
+      </div>
+    {% endfor %}
+</div>

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', 'image', 'code', 'list', 'delimiter', 'table', 'warning'] %}
+          {% if block.type in ['paragraph', 'header', 'image', 'code', 'list', 'delimiter', 'table', 'warning', 'checklist'] %}
             {% include './blocks/' ~ block.type ~ '.twig' with block.data %}
           {% endif %}
         {% endif %}