🐛 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} />