From cf24177017e2fdcc0994088b594cee7b8c4d579c Mon Sep 17 00:00:00 2001
From: Ivan Li <ivanli2048@gmail.com>
Date: Sun, 31 Oct 2021 18:54:08 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=BA=E5=AF=8C=E6=96=87=E6=9C=AC?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=99=A8=E8=A1=A8=E5=8D=95=E9=A1=B9=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E5=8A=A0=E8=BD=BD=E5=8A=A8=E7=94=BB=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/commons/editor/vditor.tsx | 31 ++++++++++++++++++++++---------
 1 file changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/commons/editor/vditor.tsx b/src/commons/editor/vditor.tsx
index 07807fc..895e2ab 100644
--- a/src/commons/editor/vditor.tsx
+++ b/src/commons/editor/vditor.tsx
@@ -1,10 +1,11 @@
 import { createStyles, FormControl, FormHelperText, FormLabel, makeStyles } from '@material-ui/core';
-import { FieldHookConfig, useField } from 'formik';
-import React, { FC, useEffect, useRef, useState } from 'react';
-import Vditor from 'vditor';
-import 'vditor/src/assets/scss/index.scss';
+import { Skeleton } from "@material-ui/lab";
+import { FieldHookConfig, useField } from "formik";
+import React, { FC, useEffect, useRef, useState } from "react";
+import Vditor from "vditor";
+import "vditor/src/assets/scss/index.scss";
 
-type Props = (FieldHookConfig<string>) & {
+type Props = FieldHookConfig<string> & {
   label?: string;
   className?: string;
 };
@@ -12,13 +13,13 @@ type Props = (FieldHookConfig<string>) & {
 const useStyles = makeStyles((theme) =>
   createStyles({
     formControl: {
-      width: '100%',
+      width: "100%",
     },
   })
 );
 
 export const Editor: FC<Props> = ({ label, className, ...props }) => {
-  const [field, meta, helpers] = useField(props);
+  const [, meta, helpers] = useField(props);
   const editor = useRef<HTMLDivElement>(null);
   const [instance, setInstance] = useState<Vditor | null>(() => null);
   const [containerKey] = useState(() => Math.random().toString(36).slice(2, 8));
@@ -36,10 +37,13 @@ export const Editor: FC<Props> = ({ label, className, ...props }) => {
       value: meta.initialValue,
       input: (val) => helpers.setValue(val),
       blur: () => helpers.setTouched(true),
+      after: () => {
+        setInstance(_instance);
+      },
     });
-    setInstance(_instance);
+
     return () => {
-      instance?.destroy();
+      _instance?.destroy();
     };
   }, []);
 
@@ -49,6 +53,15 @@ export const Editor: FC<Props> = ({ label, className, ...props }) => {
       <FormLabel>{label}</FormLabel>
       <div className={className} ref={editor} key={containerKey}></div>
       {meta.error && <FormHelperText error={true}>{meta.error}</FormHelperText>}
+      {instance ? null : (
+        <Skeleton
+          variant="rect"
+          animation="wave"
+          height="100%"
+          width="100%"
+          style={{ position: "absolute" }}
+        />
+      )}
     </FormControl>
   );
 };
\ No newline at end of file