Editorjs checklist tool

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",
@@ -35,6 +35,7 @@
     "node-fetch": "^2.3.0",
     "nodemon": "^1.18.3",
     "twig": "~1.12.0",
+    "typescript-eslint": "^0.0.1-alpha.0",
     "uuid4": "^1.0.0"
   },
   "devDependencies": {
@@ -43,15 +44,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",
@@ -61,8 +63,8 @@
     "chai-http": "^4.0.0",
     "css-loader": "^1.0.0",
     "cssnano": "^4.1.0",
-    "eslint": "^5.3.0",
-    "eslint-config-codex": "github:codex-team/eslint-config",
+    "eslint": "^6.8.0",
+    "eslint-config-codex": "^1.3.4",
     "eslint-plugin-chai-friendly": "^0.4.1",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-node": "^8.0.1",

src/controllers/aliases.js

@@ -6,7 +6,6 @@ const Alias = require('../models/alias');
  */
 class Aliases {
   /**
-   * @static
    * Find and return entity with given alias
    *
    * @param {string} aliasName - alias name of entity

src/controllers/pages.js

@@ -7,7 +7,6 @@ const Alias = require('../models/alias');
  */
 class Pages {
   /**
-   * @static
    * Fields required for page model creation
    *
    * @returns {['title', 'body']}
@@ -17,7 +16,6 @@ class Pages {
   }
 
   /**
-   * @static
    * Find and return page model with passed id
    *
    * @param {string} id - page id
@@ -43,20 +41,18 @@ class Pages {
   }
 
   /**
-   * @static
    * Return all pages without children of passed page
    *
    * @param {string} parent - id of current page
    * @returns {Promise<Page[]>}
    */
   static async getAllExceptChildren(parent) {
-    let pagesAvailable = this.removeChildren(await Pages.getAll(), parent);
+    const pagesAvailable = this.removeChildren(await Pages.getAll(), parent);
 
     return pagesAvailable.filter((item) => item !== null);
   }
 
   /**
-   * @static
    * Set all children elements to null
    *
    * @param {Page[]} [pagesAvailable] - Array of all pages
@@ -71,6 +67,7 @@ class Pages {
       pagesAvailable[index] = null;
       pagesAvailable = Pages.removeChildren(pagesAvailable, item._id);
     });
+
     return pagesAvailable;
   }
 
@@ -91,7 +88,7 @@ class Pages {
       if (insertedPage.uri) {
         const alias = new Alias({
           id: insertedPage._id,
-          type: Alias.types.PAGE
+          type: Alias.types.PAGE,
         }, insertedPage.uri);
 
         alias.save();
@@ -161,7 +158,7 @@ class Pages {
       if (updatedPage.uri) {
         const alias = new Alias({
           id: updatedPage._id,
-          type: Alias.types.PAGE
+          type: Alias.types.PAGE,
         }, updatedPage.uri);
 
         alias.save();

src/controllers/pagesOrder.js

@@ -70,8 +70,8 @@ class PagesOrder {
    * @param {Page[]} pages - list of all available pages
    * @param {string} currentPageId - page's id around which we are ordering
    * @param {string} parentPageId - parent page's id that contains page above
-   * @param {Boolean} ignoreSelf - should we ignore current page in list or not
-   * @return {Page[]}
+   * @param {boolean} ignoreSelf - should we ignore current page in list or not
+   * @returns {Page[]}
    */
   static async getOrderedChildren(pages, currentPageId, parentPageId, ignoreSelf = false) {
     const children = await Model.get(parentPageId);

src/controllers/transport.js

@@ -17,6 +17,7 @@ const config = require('../../config');
 class Transport {
   /**
    * Saves file passed from client
+   *
    * @param {object} multerData - file data from multer
    * @param {string} multerData.originalname - original name of the file
    * @param {string} multerData.filename - name of the uploaded file
@@ -25,12 +26,18 @@ class Transport {
    * @param {string} multerData.mimetype - MIME type of the uploaded file
    *
    * @param {object} map - object that represents how should fields of File object should be mapped to response
-   * @return {Promise<FileData>}
+   * @returns {Promise<FileData>}
    */
   static async save(multerData, map) {
     const { originalname: name, path, filename, size, mimetype } = multerData;
 
-    const file = new Model({ name, filename, path, size, mimetype });
+    const file = new Model({
+      name,
+      filename,
+      path,
+      size,
+      mimetype,
+    });
 
     await file.save();
 
@@ -45,9 +52,10 @@ class Transport {
 
   /**
    * Fetches file by passed URL
+   *
    * @param {string} url - URL of the file
    * @param {object} map - object that represents how should fields of File object should be mapped to response
-   * @return {Promise<FileData>}
+   * @returns {Promise<FileData>}
    */
   static async fetch(url, map) {
     const fetchedFile = await fetch(url);
@@ -64,7 +72,7 @@ class Transport {
       filename: `${filename}.${ext}`,
       path: `${config.uploads}/${filename}.${ext}`,
       size: buffer.length,
-      mimetype: type ? type.mime : fetchedFile.headers.get('content-type')
+      mimetype: type ? type.mime : fetchedFile.headers.get('content-type'),
     });
 
     await file.save();
@@ -94,11 +102,12 @@ class Transport {
 
       if (fields.length > 1) {
         let object = {};
-        let result = object;
+        const result = object;
 
         fields.forEach((field, i) => {
           if (i === fields.length - 1) {
             object[field] = data[name];
+
             return;
           }
 

src/controllers/users.js

@@ -6,7 +6,6 @@ const Model = require('../models/user');
  */
 class Users {
   /**
-   * @static
    * Find and return user model.
    *
    * @returns {Promise<User>}

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;
+}

src/models/alias.js

@@ -2,7 +2,7 @@ const { aliases: aliasesDb } = require('../utils/database/index');
 const { binaryMD5 } = require('../utils/crypto');
 
 /**
- * @typedef {Object} AliasData
+ * @typedef {object} AliasData
  * @property {string} _id - alias id
  * @property {string} hash - alias binary hash
  * @property {string} type - entity type
@@ -25,22 +25,26 @@ class Alias {
   /**
    * Return Alias types
    *
-   * @returns {Object}
+   * @returns {object}
    */
   static get types() {
     return {
-      PAGE: 'page'
+      PAGE: 'page',
     };
   };
 
   /**
    * Find and return alias with given alias
+   *
    * @param {string} aliasName - alias of entity
    * @returns {Promise<Alias>}
    */
   static async get(aliasName) {
     const hash = binaryMD5(aliasName);
-    let data = await aliasesDb.findOne({ hash: hash, deprecated: false });
+    let data = await aliasesDb.findOne({
+      hash: hash,
+      deprecated: false,
+    });
 
     if (!data) {
       data = await aliasesDb.findOne({ hash: hash });
@@ -50,7 +54,7 @@ class Alias {
   }
 
   /**
-   * @constructor
+   * @class
    *
    * @param {AliasData} data
    * @param {string} aliasName - alias of entity
@@ -110,12 +114,13 @@ class Alias {
       id: this.id,
       type: this.type,
       hash: this.hash,
-      deprecated: this.deprecated
+      deprecated: this.deprecated,
     };
   }
 
   /**
    * Mark alias as deprecated
+   *
    * @param {string} aliasName - alias of entity
    * @returns {Promise<Alias>}
    */