chore(editor): update editor, add embed tool (#142)

* update editor

* add embed tool

* prod bundle

src/frontend/js/classes/editor.js

@@ -13,6 +13,7 @@ import Warning from '@editorjs/warning';
 import Checklist from '@editorjs/checklist';
 import LinkTool from '@editorjs/link';
 import RawTool from '@editorjs/raw';
+import Embed from '@editorjs/embed';
 
 /**
  * Inline Tools for the Editor
@@ -110,6 +111,8 @@ export default class Editor {
         },
 
         raw: RawTool,
+
+        embed: Embed,
       },
       data: {
         blocks: [

src/frontend/styles/components/page.pcss

@@ -484,3 +484,17 @@
     }
   }
 }
+
+.block-embed {
+  margin: 0;
+
+  &__iframe {
+    width: 100%;
+    height: 450px;
+    border: 0;
+
+    @media (--mobile) {
+      height: 200px;
+    }
+  }
+}

src/views/pages/blocks/embed.twig

@@ -0,0 +1,12 @@
+<figure class="block-embed">
+  <iframe
+    class="block-embed__iframe"
+    src="{{ embed }}"
+    frameborder="0"
+  ></iframe>
+  {% if caption %}
+    <footer class="block-iframe__caption">
+      {{ caption }}
+    </footer>
+  {% endif %}
+</figure>

src/views/pages/page.twig

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