🐛 FIX: Downgrade suneditor-react + fixes

This commit is contained in:
Divlo 2020-04-16 00:19:31 +02:00
parent 9c5d1fc06b
commit cda263fd75
6 changed files with 28 additions and 21 deletions

View File

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

View File

@ -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;

View File

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

View File

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

View File

@ -25,7 +25,7 @@
"react-dom": "16.13.0", "react-dom": "16.13.0",
"react-swipeable-views": "^0.13.9", "react-swipeable-views": "^0.13.9",
"react-swipeable-views-utils": "^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" "universal-cookie": "^4.0.3"
}, },
"devDependencies": { "devDependencies": {

View File

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