feat: 优化Vditor布局，初始化加载时提供loading效果

src/pages/Hr/Notification/components/RighEditor.jsx

@@ -1,21 +1,23 @@
+import { Spin } from 'antd'
+import classNames from 'classnames'
 import React, { useState, useEffect, useRef } from 'react'
-// import SimpleMDE from 'react-simplemde-editor'
-// import MarkDown from 'react-markdown'
-// import 'easymde/dist/easymde.min.css'
 import Vditor from 'vditor'
 import 'vditor/src/assets/scss/index.scss'
 
 const RighEditor = ({ value, onChange }) => {
   const ref = useRef()
-  const [cValue, setValue] = useState(value)
-  // 完成！
+  const [state, setState] = useState({
+    initValue: value,
+    loading: true
+  })
+
   function handleEditorChange(content) {
-    setValue(content)
+    setState({ ...state, initValue: content })
     onChange(content)
   }
+
   useEffect(() => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const vditor = new Vditor(ref.current, {
+    new Vditor(ref.current, {
       height: 200,
       toolbarConfig: {
         pin: true
@@ -65,33 +67,29 @@ const RighEditor = ({ value, onChange }) => {
           ]
         }
       ],
-      value: cValue,
+      value: state.initValue,
       input(val) {
         handleEditorChange(val)
       },
       cache: {
         enable: false
       },
-      placeholder: '请键入内容'
-      // after() {
-      //   vditor.setValue('请输入通知内容')
-      // }
+      placeholder: '请键入内容',
+      after() {
+        setState({ ...state, loading: false })
+      }
     })
   }, [])
+  const className = classNames(
+    'h-200px rounded-2px leading-200px',
+    state.loading ? 'border border-hex-d9d9d9' : null
+  )
   return (
-    // <MarkDown />
-    <div ref={ref} />
-    // <MdEditor
-    //   style={{ height: '300px' }}
-    //   value={cValue}
-    //   renderHTML={text => mdParser.render(text)}
-    //   onChange={handleEditorChange}
-    // />
-    // <SimpleMDE
-    //   value={cValue}
-    //   onChange={handleEditorChange}
-    //   options={{ maxHeight: '250px', previewClass: 'mu-preview-class' }}
-    // />
+    <div className={className}>
+      <Spin spinning={state.loading}>
+        <div ref={ref} />
+      </Spin>
+    </div>
   )
 }