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

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 %}