@uiw/react-codemirror 4.3.3 → 4.4.3

package/src/useCodeMirror.ts

@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react';
-import { basicSetup as defaultBasicSetup } from '@codemirror/basic-setup';
+import { basicSetup } from '@codemirror/basic-setup';
 import { EditorState, StateEffect } from '@codemirror/state';
-import { indentWithTab as defaultIndentWithTab } from '@codemirror/commands';
-import { EditorView, keymap, ViewUpdate, placeholder as extendPlaceholder } from '@codemirror/view';
+import { indentWithTab } from '@codemirror/commands';
+import { EditorView, keymap, ViewUpdate, placeholder } from '@codemirror/view';
 import { oneDark } from '@codemirror/theme-one-dark';
 import { ReactCodeMirrorProps } from './';
 import { defaultLightThemeOption } from './theme/light';
@@ -23,13 +23,13 @@ export function useCodeMirror(props: UseCodeMirror) {
     height = '',
     minHeight = '',
     maxHeight = '',
-    placeholder = '',
+    placeholder: placeholderStr = '',
     width = '',
     minWidth = '',
     maxWidth = '',
     editable = true,
-    indentWithTab = true,
-    basicSetup = true,
+    indentWithTab: defaultIndentWithTab = true,
+    basicSetup: defaultBasicSetup = true,
     root,
   } = props;
   const [container, setContainer] = useState(props.container);
@@ -53,15 +53,15 @@ export function useCodeMirror(props: UseCodeMirror) {
     }
   });
   let getExtensions = [updateListener, defaultThemeOption];
-  if (indentWithTab) {
-    getExtensions.unshift(keymap.of([defaultIndentWithTab]));
+  if (defaultIndentWithTab) {
+    getExtensions.unshift(keymap.of([indentWithTab]));
   }
-  if (basicSetup) {
-    getExtensions.unshift(defaultBasicSetup);
+  if (defaultBasicSetup) {
+    getExtensions.unshift(basicSetup);
   }
 
-  if (placeholder) {
-    getExtensions.unshift(extendPlaceholder(placeholder));
+  if (placeholderStr) {
+    getExtensions.unshift(placeholder(placeholderStr));
   }
 
   switch (theme) {
@@ -96,7 +96,7 @@ export function useCodeMirror(props: UseCodeMirror) {
       if (!view) {
         const viewCurrent = new EditorView({
           state: stateCurrent,
-          parent: container as any,
+          parent: container,
           root,
         });
         setView(viewCurrent);
@@ -105,22 +105,28 @@ export function useCodeMirror(props: UseCodeMirror) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [container, state]);
 
-  useEffect(() => {
-    return () => {
+  useEffect(
+    () => () => {
       if (view) {
         view.destroy();
+        setView(undefined);
       }
-    };
-  }, [view]);
+    },
+    [view],
+  );
 
   useEffect(() => {
-    if (view) {
-      const currentValue = view.state.doc.toString();
-      if (value !== currentValue) {
-        view.dispatch({
-          changes: { from: 0, to: currentValue.length, insert: value || '' },
-        });
-      }
+    if (autoFocus && view) {
+      view.focus();
+    }
+  }, [autoFocus, view]);
+
+  useEffect(() => {
+    const currentValue = view ? view.state.doc.toString() : '';
+    if (view && value !== currentValue) {
+      view.dispatch({
+        changes: { from: 0, to: currentValue.length, insert: value || '' },
+      });
     }
   }, [value, view]);
 
@@ -132,23 +138,17 @@ export function useCodeMirror(props: UseCodeMirror) {
   }, [
     theme,
     extensions,
-    placeholder,
     height,
     minHeight,
     maxHeight,
     width,
+    placeholderStr,
     minWidth,
     maxWidth,
     editable,
-    indentWithTab,
-    basicSetup,
+    defaultIndentWithTab,
+    defaultBasicSetup,
   ]);
 
-  useEffect(() => {
-    if (autoFocus && view) {
-      view.focus();
-    }
-  }, [autoFocus, view]);
-
   return { state, setState, view, setView, container, setContainer };
 }