Add warning tool, fix XSS in image alt-tag (#75)

* Add warning tool, fix XSS in image alt-tag

* production build

* Upgrade editor

* Add spaces

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}@latest"
+    "editor-upgrade": "yarn add -D @editorjs/{editorjs,header,code,delimiter,list,image,table,inline-code,marker,warning}@latest"
   },
   "dependencies": {
     "bcrypt": "^3.0.3",
@@ -42,15 +42,17 @@
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/polyfill": "^7.2.5",
     "@babel/preset-env": "^7.1.0",
+    "@codexteam/misprints": "^1.0.0",
     "@editorjs/code": "^2.4.0",
     "@editorjs/delimiter": "^1.1.0",
-    "@editorjs/editorjs": "^2.11.8",
+    "@editorjs/editorjs": "^2.12.0",
     "@editorjs/header": "^2.2.2",
     "@editorjs/image": "^2.1.2",
     "@editorjs/inline-code": "^1.3.0",
-    "@editorjs/list": "^1.3.1",
+    "@editorjs/list": "^1.3.2",
     "@editorjs/marker": "^1.2.0",
     "@editorjs/table": "^1.2.0",
+    "@editorjs/warning": "^1.1.0",
     "autoprefixer": "^9.1.3",
     "babel": "^6.23.0",
     "babel-eslint": "^10.0.1",
@@ -67,7 +69,6 @@
     "eslint-plugin-standard": "^4.0.0",
     "highlight.js": "^9.13.1",
     "husky": "^1.1.2",
-    "@codexteam/misprints": "^1.0.0",
     "mini-css-extract-plugin": "^0.4.3",
     "mocha": "^5.2.0",
     "mocha-sinon": "^2.1.0",

src/frontend/js/classes/codeStyler.js

@@ -2,6 +2,7 @@ import hljs from 'highlight.js/lib/highlight';
 import javascript from 'highlight.js/lib/languages/javascript';
 import xml from 'highlight.js/lib/languages/xml';
 import json from 'highlight.js/lib/languages/json';
+import css from 'highlight.js/lib/languages/css';
 import style from 'highlight.js/styles/github-gist.css'; // eslint-disable-line no-unused-vars
 
 /**
@@ -13,13 +14,14 @@ export default class CodeStyler {
    * @param {string} selector - CSS selector for code blocks
    * @param {string[]} languages - list of languages to highlight, see hljs.listLanguages()
    */
-  constructor({ selector, languages = ['javascript', 'xml', 'json'] }) {
+  constructor({ selector, languages = ['javascript', 'xml', 'json', 'css'] }) {
     this.codeBlocksSelector = selector;
     this.languages = languages;
     this.langsAvailable = {
       javascript,
       xml,
-      json
+      json,
+      css
     };
 
     this.init();

src/frontend/js/classes/editor.js

@@ -9,6 +9,7 @@ import CodeTool from '@editorjs/code';
 import List from '@editorjs/list';
 import Delimiter from '@editorjs/delimiter';
 import Table from '@editorjs/table';
+import Warning from '@editorjs/warning';
 
 /**
  * Inline Tools for the Editor
@@ -74,6 +75,11 @@ export default class Editor {
           inlineToolbar: true
         },
 
+        warning: {
+          class: Warning,
+          inlineToolbar: ['inlineCode', 'italic', 'bold']
+        },
+
         /**
          * Inline Tools
          */

src/frontend/styles/components/page.pcss

@@ -305,3 +305,28 @@
     border: 1px solid var(--color-line-gray);
   }
 }
+
+/**
+ * Warning
+ * ==================
+ */
+.block-warning {
+  display: flex;
+  padding: 20px;
+  margin: 30px 0;
+  border-radius: 7px;
+  background: #fff9ef;
+  color: #392e2f;
+
+  &__icon {
+    margin-right: 15px;
+  }
+
+  &__title {
+    font-weight: bold;
+  }
+
+  &__message {
+    padding-left: 15px;
+  }
+}

src/views/pages/blocks/image.twig

@@ -13,19 +13,19 @@
 {% endif %}
 
 <figure class="block-image">
-  <div class="{{classes.join(' ')}}">
+  <div class="{{ classes.join(' ') }}">
     {% if file.mime and file.mime == 'video/mp4' %}
       <video autoplay loop muted playsinline>
-        <source src="{{file.url}}" type="video/mp4">
+        <source src="{{ file.url }}" type="video/mp4">
       </video>
     {% else %}
-      <img src="{{file.url}}" alt="{{caption ? caption : ''}}">
+      <img src="{{ file.url }}" alt="{{ caption ? caption | striptags : '' }}">
     {% endif %}
 
   </div>
   {% if caption %}
       <footer class="block-image__caption">
-          {{caption}}
+          {{ caption }}
       </footer>
   {% endif %}
 </figure>

src/views/pages/blocks/warning.twig

@@ -0,0 +1,11 @@
+<div class="block-warning">
+  <div class="block-warning__icon">
+    ☝️
+  </div>
+  <div class="block-warning__title">
+    {{ title }}
+  </div>
+  <div class="block-warning__message">
+    {{ message }}
+  </div>
+</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'] %}
+          {% if block.type in ['paragraph', 'header', 'image', 'code', 'list', 'delimiter', 'table', 'warning'] %}
             {% include './blocks/' ~ block.type ~ '.twig' with block.data %}
           {% endif %}
         {% endif %}