@uiw/react-codemirror 4.9.0 → 4.9.3

package/esm/index.d.ts

@@ -44,7 +44,7 @@ export interface ReactCodeMirrorProps extends Omit<EditorStateConfig, 'doc' | 'e
     indentWithTab?: boolean;
     /** Fired whenever a change occurs to the document. */
     onChange?(value: string, viewUpdate: ViewUpdate): void;
-    /** Fired whenever a change occurs to the document. There is a certain difference with `onChange`. */
+    /** Fired whenever any state change occurs within the editor, including non-document changes like lint results. */
     onUpdate?(viewUpdate: ViewUpdate): void;
     /**
      * Extension values can be [provided](https://codemirror.net/6/docs/ref/#state.EditorStateConfig.extensions) when creating a state to attach various kinds of configuration and behavior information.

package/esm/index.js.map

@@ -45,7 +45,7 @@
     "../src/index.tsx"
   ],
   "sourcesContent": [
-    "import React, { useEffect, useRef, useImperativeHandle } from 'react';\nimport { EditorState, EditorStateConfig, Extension } from '@codemirror/state';\nimport { EditorView, ViewUpdate } from '@codemirror/view';\nimport { useCodeMirror } from './useCodeMirror';\nimport { BasicSetupOptions } from './basicSetup';\n\nexport * from './basicSetup';\nexport * from './useCodeMirror';\n\nexport interface ReactCodeMirrorProps\n  extends Omit<EditorStateConfig, 'doc' | 'extensions'>,\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'placeholder'> {\n  /** value of the auto created model in the editor. */\n  value?: string;\n  height?: string;\n  minHeight?: string;\n  maxHeight?: string;\n  width?: string;\n  minWidth?: string;\n  maxWidth?: string;\n  /** focus on the editor. */\n  autoFocus?: boolean;\n  /** Enables a placeholder—a piece of example content to show when the editor is empty. */\n  placeholder?: string | HTMLElement;\n  /**\n   * `light` / `dark` / `Extension` Defaults to `light`.\n   * @default light\n   */\n  theme?: 'light' | 'dark' | Extension;\n  /**\n   * Whether to optional basicSetup by default\n   * @default true\n   */\n  basicSetup?: boolean | BasicSetupOptions;\n  /**\n   * This disables editing of the editor content by the user.\n   * @default true\n   */\n  editable?: boolean;\n  /**\n   * This disables editing of the editor content by the user.\n   * @default false\n   */\n  readOnly?: boolean;\n  /**\n   * Whether to optional basicSetup by default\n   * @default true\n   */\n  indentWithTab?: boolean;\n  /** Fired whenever a change occurs to the document. */\n  onChange?(value: string, viewUpdate: ViewUpdate): void;\n  /** Fired whenever a change occurs to the document. There is a certain difference with `onChange`. */\n  onUpdate?(viewUpdate: ViewUpdate): void;\n  /**\n   * Extension values can be [provided](https://codemirror.net/6/docs/ref/#state.EditorStateConfig.extensions) when creating a state to attach various kinds of configuration and behavior information.\n   * They can either be built-in extension-providing objects,\n   * such as [state fields](https://codemirror.net/6/docs/ref/#state.StateField) or [facet providers](https://codemirror.net/6/docs/ref/#state.Facet.of),\n   * or objects with an extension in its `extension` property. Extensions can be nested in arrays arbitrarily deep—they will be flattened when processed.\n   */\n  extensions?: Extension[];\n  /**\n   * If the view is going to be mounted in a shadow root or document other than the one held by the global variable document (the default), you should pass it here.\n   * Originally from the [config of EditorView](https://codemirror.net/6/docs/ref/#view.EditorView.constructor%5Econfig.root)\n   */\n  root?: ShadowRoot | Document;\n}\n\nexport interface ReactCodeMirrorRef {\n  editor?: HTMLDivElement | null;\n  state?: EditorState;\n  view?: EditorView;\n}\n\nconst ReactCodeMirror = React.forwardRef<ReactCodeMirrorRef, ReactCodeMirrorProps>((props, ref) => {\n  const {\n    className,\n    value = '',\n    selection,\n    extensions = [],\n    onChange,\n    onUpdate,\n    autoFocus,\n    theme = 'light',\n    height,\n    minHeight,\n    maxHeight,\n    width,\n    minWidth,\n    maxWidth,\n    basicSetup,\n    placeholder,\n    indentWithTab,\n    editable,\n    readOnly,\n    root,\n    ...other\n  } = props;\n  const editor = useRef<HTMLDivElement>(null);\n  const { state, view, container, setContainer } = useCodeMirror({\n    container: editor.current,\n    root,\n    value,\n    autoFocus,\n    theme,\n    height,\n    minHeight,\n    maxHeight,\n    width,\n    minWidth,\n    maxWidth,\n    basicSetup,\n    placeholder,\n    indentWithTab,\n    editable,\n    readOnly,\n    selection,\n    onChange,\n    onUpdate,\n    extensions,\n  });\n  useImperativeHandle(ref, () => ({ editor: container, state, view }), [container, state, view]);\n  useEffect(() => {\n    setContainer(editor.current);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // check type of value\n  if (typeof value !== 'string') {\n    throw new Error(`value must be typeof string but got ${typeof value}`);\n  }\n\n  const defaultClassNames = typeof theme === 'string' ? `cm-theme-${theme}` : 'cm-theme';\n  return <div ref={editor} className={`${defaultClassNames}${className ? ` ${className}` : ''}`} {...other}></div>;\n});\n\nReactCodeMirror.displayName = 'CodeMirror';\n\nexport default ReactCodeMirror;\n"
+    "import React, { useEffect, useRef, useImperativeHandle } from 'react';\nimport { EditorState, EditorStateConfig, Extension } from '@codemirror/state';\nimport { EditorView, ViewUpdate } from '@codemirror/view';\nimport { useCodeMirror } from './useCodeMirror';\nimport { BasicSetupOptions } from './basicSetup';\n\nexport * from './basicSetup';\nexport * from './useCodeMirror';\n\nexport interface ReactCodeMirrorProps\n  extends Omit<EditorStateConfig, 'doc' | 'extensions'>,\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'placeholder'> {\n  /** value of the auto created model in the editor. */\n  value?: string;\n  height?: string;\n  minHeight?: string;\n  maxHeight?: string;\n  width?: string;\n  minWidth?: string;\n  maxWidth?: string;\n  /** focus on the editor. */\n  autoFocus?: boolean;\n  /** Enables a placeholder—a piece of example content to show when the editor is empty. */\n  placeholder?: string | HTMLElement;\n  /**\n   * `light` / `dark` / `Extension` Defaults to `light`.\n   * @default light\n   */\n  theme?: 'light' | 'dark' | Extension;\n  /**\n   * Whether to optional basicSetup by default\n   * @default true\n   */\n  basicSetup?: boolean | BasicSetupOptions;\n  /**\n   * This disables editing of the editor content by the user.\n   * @default true\n   */\n  editable?: boolean;\n  /**\n   * This disables editing of the editor content by the user.\n   * @default false\n   */\n  readOnly?: boolean;\n  /**\n   * Whether to optional basicSetup by default\n   * @default true\n   */\n  indentWithTab?: boolean;\n  /** Fired whenever a change occurs to the document. */\n  onChange?(value: string, viewUpdate: ViewUpdate): void;\n  /** Fired whenever any state change occurs within the editor, including non-document changes like lint results. */\n  onUpdate?(viewUpdate: ViewUpdate): void;\n  /**\n   * Extension values can be [provided](https://codemirror.net/6/docs/ref/#state.EditorStateConfig.extensions) when creating a state to attach various kinds of configuration and behavior information.\n   * They can either be built-in extension-providing objects,\n   * such as [state fields](https://codemirror.net/6/docs/ref/#state.StateField) or [facet providers](https://codemirror.net/6/docs/ref/#state.Facet.of),\n   * or objects with an extension in its `extension` property. Extensions can be nested in arrays arbitrarily deep—they will be flattened when processed.\n   */\n  extensions?: Extension[];\n  /**\n   * If the view is going to be mounted in a shadow root or document other than the one held by the global variable document (the default), you should pass it here.\n   * Originally from the [config of EditorView](https://codemirror.net/6/docs/ref/#view.EditorView.constructor%5Econfig.root)\n   */\n  root?: ShadowRoot | Document;\n}\n\nexport interface ReactCodeMirrorRef {\n  editor?: HTMLDivElement | null;\n  state?: EditorState;\n  view?: EditorView;\n}\n\nconst ReactCodeMirror = React.forwardRef<ReactCodeMirrorRef, ReactCodeMirrorProps>((props, ref) => {\n  const {\n    className,\n    value = '',\n    selection,\n    extensions = [],\n    onChange,\n    onUpdate,\n    autoFocus,\n    theme = 'light',\n    height,\n    minHeight,\n    maxHeight,\n    width,\n    minWidth,\n    maxWidth,\n    basicSetup,\n    placeholder,\n    indentWithTab,\n    editable,\n    readOnly,\n    root,\n    ...other\n  } = props;\n  const editor = useRef<HTMLDivElement>(null);\n  const { state, view, container, setContainer } = useCodeMirror({\n    container: editor.current,\n    root,\n    value,\n    autoFocus,\n    theme,\n    height,\n    minHeight,\n    maxHeight,\n    width,\n    minWidth,\n    maxWidth,\n    basicSetup,\n    placeholder,\n    indentWithTab,\n    editable,\n    readOnly,\n    selection,\n    onChange,\n    onUpdate,\n    extensions,\n  });\n  useImperativeHandle(ref, () => ({ editor: container, state, view }), [container, state, view]);\n  useEffect(() => {\n    setContainer(editor.current);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // check type of value\n  if (typeof value !== 'string') {\n    throw new Error(`value must be typeof string but got ${typeof value}`);\n  }\n\n  const defaultClassNames = typeof theme === 'string' ? `cm-theme-${theme}` : 'cm-theme';\n  return <div ref={editor} className={`${defaultClassNames}${className ? ` ${className}` : ''}`} {...other}></div>;\n});\n\nReactCodeMirror.displayName = 'CodeMirror';\n\nexport default ReactCodeMirror;\n"
   ],
   "mappings": ";;;AAAA,OAAOA,KAAP,IAAgBC,SAAhB,EAA2BC,MAA3B,EAAmCC,mBAAnC,QAA8D,OAA9D;AAGA,SAASC,aAAT,QAA8B,iBAA9B;;AAGA,cAAc,cAAd;AACA,cAAc,iBAAd;AAkEA,IAAMC,eAAe,gBAAGL,KAAK,CAACM,UAAN,CAA2D,CAACC,KAAD,EAAQC,GAAR,KAAgB;EACjG,IAAM;IACJC,SADI;IAEJC,KAAK,GAAG,EAFJ;IAGJC,SAHI;IAIJC,UAAU,GAAG,EAJT;IAKJC,QALI;IAMJC,QANI;IAOJC,SAPI;IAQJC,KAAK,GAAG,OARJ;IASJC,MATI;IAUJC,SAVI;IAWJC,SAXI;IAYJC,KAZI;IAaJC,QAbI;IAcJC,QAdI;IAeJC,UAfI;IAgBJC,WAhBI;IAiBJC,aAjBI;IAkBJC,QAlBI;IAmBJC,QAnBI;IAoBJC;EApBI,IAsBFrB,KAtBJ;EAAA,IAqBKsB,KArBL,iCAsBItB,KAtBJ;;EAuBA,IAAMuB,MAAM,GAAG5B,MAAM,CAAiB,IAAjB,CAArB;EACA,IAAM;IAAE6B,KAAF;IAASC,IAAT;IAAeC,SAAf;IAA0BC;EAA1B,IAA2C9B,aAAa,CAAC;IAC7D6B,SAAS,EAAEH,MAAM,CAACK,OAD2C;IAE7DP,IAF6D;IAG7DlB,KAH6D;IAI7DK,SAJ6D;IAK7DC,KAL6D;IAM7DC,MAN6D;IAO7DC,SAP6D;IAQ7DC,SAR6D;IAS7DC,KAT6D;IAU7DC,QAV6D;IAW7DC,QAX6D;IAY7DC,UAZ6D;IAa7DC,WAb6D;IAc7DC,aAd6D;IAe7DC,QAf6D;IAgB7DC,QAhB6D;IAiB7DhB,SAjB6D;IAkB7DE,QAlB6D;IAmB7DC,QAnB6D;IAoB7DF;EApB6D,CAAD,CAA9D;EAsBAT,mBAAmB,CAACK,GAAD,EAAM,OAAO;IAAEsB,MAAM,EAAEG,SAAV;IAAqBF,KAArB;IAA4BC;EAA5B,CAAP,CAAN,EAAkD,CAACC,SAAD,EAAYF,KAAZ,EAAmBC,IAAnB,CAAlD,CAAnB;EACA/B,SAAS,CAAC,MAAM;IACdiC,YAAY,CAACJ,MAAM,CAACK,OAAR,CAAZ,CADc,CAEd;EACD,CAHQ,EAGN,EAHM,CAAT,CAhDiG,CAqDjG;;EACA,IAAI,OAAOzB,KAAP,KAAiB,QAArB,EAA+B;IAC7B,MAAM,IAAI0B,KAAJ,0CAAiD,OAAO1B,KAAxD,CAAN;EACD;;EAED,IAAM2B,iBAAiB,GAAG,OAAOrB,KAAP,KAAiB,QAAjB,iBAAwCA,KAAxC,GAAkD,UAA5E;EACA,oBAAO;IAAK,GAAG,EAAEc,MAAV;IAAkB,SAAS,OAAKO,iBAAL,IAAyB5B,SAAS,SAAOA,SAAP,GAAqB,EAAvD;EAA3B,GAA4FoB,KAA5F,EAAP;AACD,CA5DuB,CAAxB;AA8DAxB,eAAe,CAACiC,WAAhB,GAA8B,YAA9B;AAEA,eAAejC,eAAf"
 }

package/esm/useCodeMirror.js

@@ -136,6 +136,14 @@ export function useCodeMirror(props) {
       view.focus();
     }
   }, [autoFocus, view]);
+  useEffect(() => {
+    if (view) {
+      view.dispatch({
+        effects: StateEffect.reconfigure.of(getExtensions)
+      });
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [theme, extensions, height, minHeight, maxHeight, width, minWidth, maxWidth, placeholderStr, editable, readOnly, defaultIndentWithTab, defaultBasicSetup, onChange, onUpdate]);
   useEffect(() => {
     var currentValue = view ? view.state.doc.toString() : '';
 
@@ -149,14 +157,6 @@ export function useCodeMirror(props) {
       });
     }
   }, [value, view]);
-  useEffect(() => {
-    if (view) {
-      view.dispatch({
-        effects: StateEffect.reconfigure.of(getExtensions)
-      });
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [theme, extensions, height, minHeight, maxHeight, width, placeholderStr, minWidth, maxWidth, editable, defaultIndentWithTab, defaultBasicSetup]);
   return {
     state,
     setState,

package/esm/useCodeMirror.js.map

@@ -59,21 +59,21 @@
     "undefined",
     "destroy",
     "focus",
-    "currentValue",
     "dispatch",
+    "effects",
+    "reconfigure",
+    "currentValue",
     "changes",
     "from",
     "to",
     "length",
-    "insert",
-    "effects",
-    "reconfigure"
+    "insert"
   ],
   "sources": [
     "../src/useCodeMirror.ts"
   ],
   "sourcesContent": [
-    "import { useEffect, useState } from 'react';\nimport { EditorState, StateEffect } from '@codemirror/state';\nimport { indentWithTab } from '@codemirror/commands';\nimport { EditorView, keymap, ViewUpdate, placeholder } from '@codemirror/view';\nimport { oneDark } from '@codemirror/theme-one-dark';\nimport { basicSetup } from './basicSetup';\nimport { ReactCodeMirrorProps } from '.';\n\nexport interface UseCodeMirror extends ReactCodeMirrorProps {\n  container?: HTMLDivElement | null;\n}\n\nexport function useCodeMirror(props: UseCodeMirror) {\n  const {\n    value,\n    selection,\n    onChange,\n    onUpdate,\n    extensions = [],\n    autoFocus,\n    theme = 'light',\n    height = '',\n    minHeight = '',\n    maxHeight = '',\n    placeholder: placeholderStr = '',\n    width = '',\n    minWidth = '',\n    maxWidth = '',\n    editable = true,\n    readOnly = false,\n    indentWithTab: defaultIndentWithTab = true,\n    basicSetup: defaultBasicSetup = true,\n    root,\n  } = props;\n  const [container, setContainer] = useState(props.container);\n  const [view, setView] = useState<EditorView>();\n  const [state, setState] = useState<EditorState>();\n  const defaultLightThemeOption = EditorView.theme(\n    {\n      '&': {\n        backgroundColor: '#fff',\n      },\n    },\n    {\n      dark: false,\n    },\n  );\n  const defaultThemeOption = EditorView.theme({\n    '&': {\n      height,\n      minHeight,\n      maxHeight,\n      width,\n      minWidth,\n      maxWidth,\n    },\n  });\n  const updateListener = EditorView.updateListener.of((vu: ViewUpdate) => {\n    if (vu.docChanged && typeof onChange === 'function') {\n      const doc = vu.state.doc;\n      const value = doc.toString();\n      onChange(value, vu);\n    }\n  });\n\n  let getExtensions = [updateListener, defaultThemeOption];\n  if (defaultIndentWithTab) {\n    getExtensions.unshift(keymap.of([indentWithTab]));\n  }\n  if (defaultBasicSetup) {\n    if (typeof defaultBasicSetup === 'boolean') {\n      getExtensions.unshift(basicSetup());\n    } else {\n      getExtensions.unshift(basicSetup(defaultBasicSetup));\n    }\n  }\n\n  if (placeholderStr) {\n    getExtensions.unshift(placeholder(placeholderStr));\n  }\n\n  switch (theme) {\n    case 'light':\n      getExtensions.push(defaultLightThemeOption);\n      break;\n    case 'dark':\n      getExtensions.push(oneDark);\n      break;\n    default:\n      getExtensions.push(theme);\n      break;\n  }\n\n  if (editable === false) {\n    getExtensions.push(EditorView.editable.of(false));\n  }\n  if (readOnly) {\n    getExtensions.push(EditorState.readOnly.of(true));\n  }\n\n  if (onUpdate && typeof onUpdate === 'function') {\n    getExtensions.push(EditorView.updateListener.of(onUpdate));\n  }\n  getExtensions = getExtensions.concat(extensions);\n\n  useEffect(() => {\n    if (container && !state) {\n      const stateCurrent = EditorState.create({\n        doc: value,\n        selection,\n        extensions: getExtensions,\n      });\n      setState(stateCurrent);\n      if (!view) {\n        const viewCurrent = new EditorView({\n          state: stateCurrent,\n          parent: container,\n          root,\n        });\n        setView(viewCurrent);\n      }\n    }\n    return () => {\n      if (view) {\n        setView(undefined);\n      }\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [container, state]);\n\n  useEffect(\n    () => () => {\n      if (view) {\n        view.destroy();\n        setView(undefined);\n      }\n    },\n    [view],\n  );\n\n  useEffect(() => {\n    if (autoFocus && view) {\n      view.focus();\n    }\n  }, [autoFocus, view]);\n\n  useEffect(() => {\n    const currentValue = view ? view.state.doc.toString() : '';\n    if (view && value !== currentValue) {\n      view.dispatch({\n        changes: { from: 0, to: currentValue.length, insert: value || '' },\n      });\n    }\n  }, [value, view]);\n\n  useEffect(() => {\n    if (view) {\n      view.dispatch({ effects: StateEffect.reconfigure.of(getExtensions) });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    theme,\n    extensions,\n    height,\n    minHeight,\n    maxHeight,\n    width,\n    placeholderStr,\n    minWidth,\n    maxWidth,\n    editable,\n    defaultIndentWithTab,\n    defaultBasicSetup,\n  ]);\n\n  return { state, setState, view, setView, container, setContainer };\n}\n"
+    "import { useEffect, useState } from 'react';\nimport { EditorState, StateEffect } from '@codemirror/state';\nimport { indentWithTab } from '@codemirror/commands';\nimport { EditorView, keymap, ViewUpdate, placeholder } from '@codemirror/view';\nimport { oneDark } from '@codemirror/theme-one-dark';\nimport { basicSetup } from './basicSetup';\nimport { ReactCodeMirrorProps } from '.';\n\nexport interface UseCodeMirror extends ReactCodeMirrorProps {\n  container?: HTMLDivElement | null;\n}\n\nexport function useCodeMirror(props: UseCodeMirror) {\n  const {\n    value,\n    selection,\n    onChange,\n    onUpdate,\n    extensions = [],\n    autoFocus,\n    theme = 'light',\n    height = '',\n    minHeight = '',\n    maxHeight = '',\n    placeholder: placeholderStr = '',\n    width = '',\n    minWidth = '',\n    maxWidth = '',\n    editable = true,\n    readOnly = false,\n    indentWithTab: defaultIndentWithTab = true,\n    basicSetup: defaultBasicSetup = true,\n    root,\n  } = props;\n  const [container, setContainer] = useState(props.container);\n  const [view, setView] = useState<EditorView>();\n  const [state, setState] = useState<EditorState>();\n  const defaultLightThemeOption = EditorView.theme(\n    {\n      '&': {\n        backgroundColor: '#fff',\n      },\n    },\n    {\n      dark: false,\n    },\n  );\n  const defaultThemeOption = EditorView.theme({\n    '&': {\n      height,\n      minHeight,\n      maxHeight,\n      width,\n      minWidth,\n      maxWidth,\n    },\n  });\n  const updateListener = EditorView.updateListener.of((vu: ViewUpdate) => {\n    if (vu.docChanged && typeof onChange === 'function') {\n      const doc = vu.state.doc;\n      const value = doc.toString();\n      onChange(value, vu);\n    }\n  });\n\n  let getExtensions = [updateListener, defaultThemeOption];\n  if (defaultIndentWithTab) {\n    getExtensions.unshift(keymap.of([indentWithTab]));\n  }\n  if (defaultBasicSetup) {\n    if (typeof defaultBasicSetup === 'boolean') {\n      getExtensions.unshift(basicSetup());\n    } else {\n      getExtensions.unshift(basicSetup(defaultBasicSetup));\n    }\n  }\n\n  if (placeholderStr) {\n    getExtensions.unshift(placeholder(placeholderStr));\n  }\n\n  switch (theme) {\n    case 'light':\n      getExtensions.push(defaultLightThemeOption);\n      break;\n    case 'dark':\n      getExtensions.push(oneDark);\n      break;\n    default:\n      getExtensions.push(theme);\n      break;\n  }\n\n  if (editable === false) {\n    getExtensions.push(EditorView.editable.of(false));\n  }\n  if (readOnly) {\n    getExtensions.push(EditorState.readOnly.of(true));\n  }\n\n  if (onUpdate && typeof onUpdate === 'function') {\n    getExtensions.push(EditorView.updateListener.of(onUpdate));\n  }\n  getExtensions = getExtensions.concat(extensions);\n\n  useEffect(() => {\n    if (container && !state) {\n      const stateCurrent = EditorState.create({\n        doc: value,\n        selection,\n        extensions: getExtensions,\n      });\n      setState(stateCurrent);\n      if (!view) {\n        const viewCurrent = new EditorView({\n          state: stateCurrent,\n          parent: container,\n          root,\n        });\n        setView(viewCurrent);\n      }\n    }\n    return () => {\n      if (view) {\n        setView(undefined);\n      }\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [container, state]);\n\n  useEffect(\n    () => () => {\n      if (view) {\n        view.destroy();\n        setView(undefined);\n      }\n    },\n    [view],\n  );\n\n  useEffect(() => {\n    if (autoFocus && view) {\n      view.focus();\n    }\n  }, [autoFocus, view]);\n\n  useEffect(() => {\n    if (view) {\n      view.dispatch({ effects: StateEffect.reconfigure.of(getExtensions) });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    theme,\n    extensions,\n    height,\n    minHeight,\n    maxHeight,\n    width,\n    minWidth,\n    maxWidth,\n    placeholderStr,\n    editable,\n    readOnly,\n    defaultIndentWithTab,\n    defaultBasicSetup,\n    onChange,\n    onUpdate,\n  ]);\n\n  useEffect(() => {\n    const currentValue = view ? view.state.doc.toString() : '';\n    if (view && value !== currentValue) {\n      view.dispatch({\n        changes: { from: 0, to: currentValue.length, insert: value || '' },\n      });\n    }\n  }, [value, view]);\n\n  return { state, setState, view, setView, container, setContainer };\n}\n"
   ],
-  "mappings": "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"
+  "mappings": "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"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-codemirror",
-  "version": "4.9.0",
+  "version": "4.9.3",
   "description": "CodeMirror component for React.",
   "homepage": "https://uiwjs.github.io/react-codemirror",
   "author": "kenny wong <wowohoo@qq.com>",

package/src/index.tsx

@@ -49,7 +49,7 @@ export interface ReactCodeMirrorProps
   indentWithTab?: boolean;
   /** Fired whenever a change occurs to the document. */
   onChange?(value: string, viewUpdate: ViewUpdate): void;
-  /** Fired whenever a change occurs to the document. There is a certain difference with `onChange`. */
+  /** Fired whenever any state change occurs within the editor, including non-document changes like lint results. */
   onUpdate?(viewUpdate: ViewUpdate): void;
   /**
    * Extension values can be [provided](https://codemirror.net/6/docs/ref/#state.EditorStateConfig.extensions) when creating a state to attach various kinds of configuration and behavior information.

package/src/useCodeMirror.ts

@@ -144,15 +144,6 @@ export function useCodeMirror(props: UseCodeMirror) {
     }
   }, [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]);
-
   useEffect(() => {
     if (view) {
       view.dispatch({ effects: StateEffect.reconfigure.of(getExtensions) });
@@ -165,13 +156,25 @@ export function useCodeMirror(props: UseCodeMirror) {
     minHeight,
     maxHeight,
     width,
-    placeholderStr,
     minWidth,
     maxWidth,
+    placeholderStr,
     editable,
+    readOnly,
     defaultIndentWithTab,
     defaultBasicSetup,
+    onChange,
+    onUpdate,
   ]);
 
+  useEffect(() => {
+    const currentValue = view ? view.state.doc.toString() : '';
+    if (view && value !== currentValue) {
+      view.dispatch({
+        changes: { from: 0, to: currentValue.length, insert: value || '' },
+      });
+    }
+  }, [value, view]);
+
   return { state, setState, view, setView, container, setContainer };
 }