Jero/hotfix/editor wrappers (#887)

* feat (RichEditor) make setup function

* feat (RichEditor) apply 'embed-responsive' class to <iframe />; container

* feat (About) add 'frameborder' to whilelist of iframe

src/components/RichEditor/RichEditor.js

@@ -5,6 +5,7 @@ import React, { Component, Fragment } from 'react';
 import { Editor } from '@tinymce/tinymce-react';
 import { isEmpty } from 'ramda';
 
+import setup from './setup';
 import filePickerCallback from './filePickerCallback';
 
 type PropsType = {
@@ -62,13 +63,7 @@ class RichEditor extends Component<PropsType> {
             fontsize_formats: '10px 12px 14px 16px 18px 24px',
             toolbar:
               'undo redo | bold italic underline | styleselect | alignleft aligncenter alignright | numlist bullist | link image media | fontsizeselect forecolor | table',
-            setup(editor) {
-              // set the editor font size
-              editor.on('init', () => {
-                /* eslint-disable no-param-reassign */
-                editor.getBody().style.fontSize = '16px';
-              });
-            },
+            setup,
             file_picker_types: 'image',
 
             file_picker_callback: filePickerCallback(onError),

src/components/RichEditor/setup.js

@@ -0,0 +1,34 @@
+// @flow strict
+
+function addResponsive(el: HTMLElement): void {
+  // $FlowIgnore
+  const parent = el.parentNode.parentNode;
+  // $FlowIgnore
+  parent.classList.add('embed-responsive');
+}
+
+// $FlowIgnore
+const setup = editor => {
+  // set the editor font size
+  editor.on('init', () => {
+    /* eslint-disable no-param-reassign */
+    editor.getBody().style.fontSize = '16px';
+  });
+  // listen for toolbar buttons
+  editor.on('ExecCommand', e => {
+    // 'command' name of the toolbar clicked.
+    const { command } = e;
+    if (command === 'mceInsertContent') {
+      // get editor's iframe area
+      const iframeContainer = e.target.contentAreaContainer.firstChild;
+      // access elements of an <iframe>
+      const container = iframeContainer.contentWindow.document.body;
+      // get all iframes that are current in the editor's content
+      const iframes = container.querySelectorAll('iframe');
+      // apply each iframe's parent the responsive class
+      iframes.forEach(addResponsive);
+    }
+  });
+};
+
+export default setup;

src/index.scss

@@ -5,3 +5,24 @@
 @import 'styles/variables.scss';
 @import 'styles/fonts.scss';
 @import 'styles/default.scss';
+
+:global(.embed-responsive ) {
+  @media (max-width: $md) {
+    position: relative;
+    overflow: hidden;
+    padding-top: 56.25%;
+
+    iframe,
+    embed,
+    object,
+    video {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border: 0;
+    }
+  }
+}

src/pages/Store/About/About.js

@@ -30,30 +30,30 @@ class About extends PureComponent<PropsType> {
       whiteList: {
         br: [],
         hr: [],
-        a: ['style', 'href', 'target', 'rel'],
-        p: ['style'],
-        ol: ['style'],
-        h1: ['style'],
-        h2: ['style'],
-        h3: ['style'],
-        h4: ['style'],
-        h5: ['style'],
-        h6: ['style'],
-        ul: ['style'],
-        li: ['style'],
-        em: ['style'],
-        img: ['src', 'style', 'sizes', 'srcset', 'width', 'height'],
-        sub: ['style'],
-        sup: ['style'],
-        div: ['style'],
-        span: ['style'],
-        strong: ['style'],
-        iframe: ['src', 'style', 'width', 'height'],
-        table: ['style'],
-        tr: ['style'],
-        td: ['style'],
-        tbody: ['style'],
-        thead: ['style'],
+        a: ['class', 'style', 'href', 'target', 'rel'],
+        p: ['class', 'style'],
+        ol: ['class', 'style'],
+        h1: ['class', 'style'],
+        h2: ['class', 'style'],
+        h3: ['class', 'style'],
+        h4: ['class', 'style'],
+        h5: ['class', 'style'],
+        h6: ['class', 'style'],
+        ul: ['class', 'style'],
+        li: ['class', 'style'],
+        em: ['class', 'style'],
+        img: ['class', 'style', 'src', 'sizes', 'srcset', 'width', 'height'],
+        sub: ['class', 'style'],
+        sup: ['class', 'style'],
+        div: ['class', 'style'],
+        span: ['class', 'style'],
+        strong: ['class', 'style'],
+        iframe: ['class', 'style', 'src', 'width', 'height', 'frameborder'],
+        table: ['class', 'style'],
+        tr: ['class', 'style'],
+        td: ['class', 'style'],
+        tbody: ['class', 'style'],
+        thead: ['class', 'style'],
       },
     });
     return (

src/pages/Store/About/About.scss

@@ -50,6 +50,8 @@
 }
 
 .description {
+  // taken from Bootstrap
+
   a {
     font-size: 16px;
     color: $color_blue;