fix: fix ref issue. (#189)

Author: jaywcjlove

src/commands/fullscreen.tsx

@@ -18,11 +18,11 @@ const Fullscreen: React.FC<{ command: ICommand; editorProps: IMarkdownEditor & T
           if (!$height.current) {
             $height.current = entry.target.clientHeight;
           }
-          if (editorProps.editor && editorProps.editor.view?.dom) {
+          if (editorProps.editor?.current?.view?.dom) {
             if (full) {
-              editorProps.editor.view.dom.style.height = `${entry.target.clientHeight}px`;
+              editorProps.editor.current.view.dom.style.height = `${entry.target.clientHeight}px`;
             } else {
-              editorProps.editor.view.dom.removeAttribute('style');
+              editorProps.editor.current.view.dom.removeAttribute('style');
             }
           }
         }

src/components/ToolBar/index.tsx

@@ -29,7 +29,7 @@ export default function ToolBar(props: IToolBarProps) {
   if (!toolbars || toolbars.length === 0) return null;
   function handleClick(execute: ICommand['execute']) {
     if (execute && editor && editor) {
-      execute(editor);
+      execute(editor.current!);
     }
   }
   return (

src/index.tsx

@@ -37,15 +37,15 @@ export interface IMarkdownEditor extends ReactCodeMirrorProps {
 }
 
 export interface ToolBarProps {
-  editor?: ReactCodeMirrorRef;
+  editor?: React.RefObject<ReactCodeMirrorRef>;
   preview: React.RefObject<MarkdownPreviewRef>;
   container: React.RefObject<HTMLDivElement>;
   containerEditor: React.RefObject<HTMLDivElement>;
   editorProps: IMarkdownEditor;
 }
 
 export interface MarkdownEditorRef {
-  editor: React.RefObject<ReactCodeMirrorRef> | null;
+  editor: React.RefObject<ReactCodeMirrorRef>;
   preview?: React.RefObject<MarkdownPreviewRef> | null;
 }
 
@@ -73,24 +73,25 @@ function MarkdownEditor(
   const previewContainer = useRef<MarkdownPreviewRef>(null);
   const container = useRef<HTMLDivElement>(null);
   const containerEditor = useRef<HTMLDivElement>(null);
-  const [editor, setEditor] = useState<ReactCodeMirrorRef>();
 
-  useImperativeHandle(
-    ref,
-    () => ({
-      editor: codeMirror,
-      preview: previewContainer,
-    }),
-    [codeMirror, previewContainer],
-  );
+  useImperativeHandle(ref, () => ({
+    editor: codeMirror,
+    preview: previewContainer,
+  }));
 
   const toolBarProps: ToolBarProps = {
-    editor: editor,
+    editor: codeMirror,
     preview: previewContainer,
     container: container,
     containerEditor: containerEditor,
     editorProps: props,
   };
+  const height = typeof codemirrorProps.height === 'number' ? `${codemirrorProps.height}px` : codemirrorProps.height;
+  const extensionsData: IMarkdownEditor['extensions'] = [
+    markdown({ base: markdownLanguage, codeLanguages: languages }),
+    scrollerStyle,
+    ...extensions,
+  ];
   return (
     <div className={`${prefixCls || ''} wmde-markdown-var ${className || ''}`} ref={container}>
       {hideToolbar && (
@@ -105,19 +106,9 @@ function MarkdownEditor(
             <CodeMirror
               theme={defaultTheme}
               {...codemirrorProps}
-              extensions={[
-                markdown({ base: markdownLanguage, codeLanguages: languages }),
-                scrollerStyle,
-                ...extensions,
-              ]}
-              height={
-                typeof codemirrorProps.height === 'number' ? `${codemirrorProps.height}px` : codemirrorProps.height
-              }
-              ref={($ref) => {
-                if (!editor && $ref && $ref.editor && $ref.state && $ref.view) {
-                  setEditor({ ...$ref });
-                }
-              }}
+              extensions={extensionsData}
+              height={height}
+              ref={codeMirror}
               onChange={(value, viewUpdate) => {
                 setValue(value);
                 onChange && onChange(value, viewUpdate);