fix: fix ref issue.

Author: jaywcjlove

core/src/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useImperativeHandle } from 'react';
+import React, { useRef, forwardRef, useImperativeHandle } from 'react';
 import { EditorState, EditorStateConfig, Extension } from '@codemirror/state';
 import { EditorView, ViewUpdate } from '@codemirror/view';
 import { useCodeMirror } from './useCodeMirror';
@@ -71,7 +71,7 @@ export interface ReactCodeMirrorRef {
   view?: EditorView;
 }
 
-const ReactCodeMirror = React.forwardRef<ReactCodeMirrorRef, ReactCodeMirrorProps>((props, ref) => {
+const ReactCodeMirror = forwardRef<ReactCodeMirrorRef, ReactCodeMirrorProps>((props, ref) => {
   const {
     className,
     value = '',
@@ -118,11 +118,13 @@ const ReactCodeMirror = React.forwardRef<ReactCodeMirrorRef, ReactCodeMirrorProp
     onUpdate,
     extensions,
   });
-  useImperativeHandle(ref, () => ({ editor: container, state, view }), [container, state, view]);
-  useEffect(() => {
-    setContainer(editor.current);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+
+  useImperativeHandle(ref, () => ({ editor: editor.current, state: state, view: view }), [
+    editor,
+    container,
+    state,
+    view,
+  ]);
 
   // check type of value
   if (typeof value !== 'string') {

core/src/useCodeMirror.ts

@@ -32,7 +32,7 @@ export function useCodeMirror(props: UseCodeMirror) {
     basicSetup: defaultBasicSetup = true,
     root,
   } = props;
-  const [container, setContainer] = useState(props.container);
+  const [container, setContainer] = useState<HTMLDivElement>();
   const [view, setView] = useState<EditorView>();
   const [state, setState] = useState<EditorState>();
   const defaultLightThemeOption = EditorView.theme(
@@ -122,12 +122,14 @@ export function useCodeMirror(props: UseCodeMirror) {
     }
     return () => {
       if (view) {
+        setState(undefined);
         setView(undefined);
       }
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [container, state]);
 
+  useEffect(() => setContainer(props.container!), [props.container]);
+
   useEffect(
     () => () => {
       if (view) {