🐛 FIX: Downgrade suneditor-react + fixes

website/components/EditArticleFunction.js

@@ -1,10 +1,10 @@
 import { useState } from 'react';
-import 'suneditor/dist/css/suneditor.min.css';
 import dynamic from 'next/dynamic';
-import htmlParser from 'html-react-parser';
 import { complex } from '../utils/sunEditorConfig';
 import api from '../utils/api';
+import FunctionArticle from '../components/FunctionArticle';
 import 'notyf/notyf.min.css'; // for React and Vue
+import 'suneditor/dist/css/suneditor.min.css';
 
 const SunEditor = dynamic(
     () => import('suneditor-react'),
@@ -36,9 +36,7 @@ const EditArticleFunction = (props) => {
     return (
         <div className="container-fluid">
             <SunEditor setContents={props.functionInfo.article} lang="fr" onChange={handleEditorChange} setOptions={{ buttonList: complex, callBackSave: handleSave }} />
-            <div className="container-fluid">
-                {htmlParser(htmlContent)}
-            </div>
+            <FunctionArticle article={htmlContent} />
         </div>
     );
 }

website/components/FunctionArticle.js

@@ -0,0 +1,11 @@
+import htmlParser from 'html-react-parser';
+
+const FunctionArticle = ({ article }) => {
+    return (
+        <div style={{ marginBottom: '50px' }} className="container-fluid">
+            {(article != undefined) && htmlParser(article)}
+        </div>
+    );
+}
+
+export default FunctionArticle;

website/components/FunctionTabManager.js

@@ -1,16 +1,8 @@
-import htmlParser from 'html-react-parser';
 import FunctionTabs from './FunctionTabs/FunctionTabs';
 import FunctionForm from './FunctionForm';
+import FunctionArticle from './FunctionArticle';
 import FunctionComments from './FunctionComments/FunctionComments';
 
-const Article = ({ article }) => {
-    return (
-        <div className="container-fluid">
-            {(article != undefined) && htmlParser(article)}
-        </div>
-    );
-}
-
 const FunctionTabManager = (props) => {
     if (props.type === "form") {
         return (
@@ -19,7 +11,7 @@ const FunctionTabManager = (props) => {
                     <FunctionForm inputArray={ [...props.utilizationForm || []] } slug={props.slug} />
                 </div>
                 <div className="FunctionComponent__slide">
-                    <Article article={props.article} />
+                    <FunctionArticle article={props.article} />
                 </div>
                 <div className="FunctionComponent__slide">
                     <FunctionComments functionId={props.id} />
@@ -31,7 +23,7 @@ const FunctionTabManager = (props) => {
     return (
         <FunctionTabs type={props.type}>
             <div className="FunctionComponent__slide">
-                <Article article={props.article} />
+                <FunctionArticle article={props.article} />
             </div>
             <div className="FunctionComponent__slide">
                 <FunctionComments functionId={props.id} />

website/package-lock.json

@@ -9548,12 +9548,12 @@
       "integrity": "sha512-KLmKMq1QrBT9GT+/yv0d/a6YGEQ5+QUSmzZYJaIXGJ8QNNRV0BqfQP0gBnWY8s35HFKiU5meXWuzrI03AmubRg=="
     },
     "suneditor-react": {
-      "version": "2.9.1",
-      "resolved": "https://registry.npmjs.org/suneditor-react/-/suneditor-react-2.9.1.tgz",
-      "integrity": "sha512-O26aLQ4dRWbdJv+d78pPaL/mLwWgVMiz64uo531+kHjBlNlREpV2dvvIYVH7TNxKi6LboeDZybJ5rm8kPMchAQ==",
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/suneditor-react/-/suneditor-react-2.8.0.tgz",
+      "integrity": "sha512-yUBY9ETs8z+FD8G60GZgiCr602qXidoAbK00IC7n2v5epkEYZSOCgJMmSaLI3aYT7uLYlajozccNHKbrd+rXKQ==",
       "requires": {
         "prop-types": "^15.7.2",
-        "suneditor": "^2.28.4"
+        "suneditor": "^2.27.1"
       }
     },
     "supports-color": {

website/package.json

@@ -25,7 +25,7 @@
     "react-dom": "16.13.0",
     "react-swipeable-views": "^0.13.9",
     "react-swipeable-views-utils": "^0.13.9",
-    "suneditor-react": "^2.9.1",
+    "suneditor-react": "^2.8.0",
     "universal-cookie": "^4.0.3"
   },
   "devDependencies": {

website/public/css/pages/FunctionComponent.css

@@ -31,4 +31,10 @@
     top: 15px;
     margin-right: 15px;
     cursor: pointer;
+}
+.vscode-editor {
+    padding: 15px;
+    border-radius: 10px;
+    overflow: auto;
+    white-space: normal !important;
 }