Editorjs checklist tool (#98)

Co-authored-by: Peter Savchenko <specc.dev@gmail.com>

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,59 @@
     padding-left: 15px;
   }
 }
+
+/**
+ * Checklist
+ * ==================
+ */
+.block-checklist {
+  margin: 20px 0;
+
+  &__item {
+    display: flex;
+    box-sizing: content-box;
+    align-items: center;
+
+    &-checkbox {
+      display: inline-block;
+      flex-shrink: 0;
+      position: relative;
+      width: 20px;
+      height: 20px;
+      margin: 0 10px 0 0;
+      border-radius: 50%;
+      border: 1px solid #d0d0d0;
+      background: #fff;
+      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: 5px 0;
+    }
+  }
+}
+.block-checklist__item-checkbox--checked, .block-checklist__item-checkbox::after {
+  opacity: 1;
+}