@uiw/react-codemirror 4.0.7 → 4.0.8

package/cjs/useCodeMirror.js

@@ -145,13 +145,16 @@ function useCodeMirror(props) {
   (0, _react.useEffect)(function () {
     if (view) {
       var currentValue = view.state.doc.toString();
-      view.dispatch({
-        changes: {
-          from: 0,
-          to: currentValue.length,
-          insert: value || ''
-        }
-      });
+
+      if (value !== currentValue) {
+        view.dispatch({
+          changes: {
+            from: 0,
+            to: currentValue.length,
+            insert: value || ''
+          }
+        });
+      }
     }
   }, [value, view]);
   (0, _react.useEffect)(function () {

package/cjs/useCodeMirror.js.map

@@ -64,8 +64,8 @@
     "reconfigure",
     "focus"
   ],
-  "mappings": "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",
+  "mappings": "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",
   "sourcesContent": [
-    "import { useEffect, useState } from 'react';\nimport { basicSetup as defaultBasicSetup } from '@codemirror/basic-setup';\nimport { EditorState, StateEffect } from '@codemirror/state';\nimport { indentWithTab as defaultIndentWithTab } from '@codemirror/commands';\nimport { EditorView, keymap, ViewUpdate, placeholder as extendPlaceholder } from '@codemirror/view';\nimport { oneDarkTheme } from '@codemirror/theme-one-dark';\nimport { ReactCodeMirrorProps } from './';\nimport { defaultLightThemeOption } from './theme/light';\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 = '',\n    width = '',\n    minWidth = '',\n    maxWidth = '',\n    editable = true,\n    indentWithTab = true,\n    basicSetup = true,\n  } = props;\n  const [container, setContainer] = useState(props.container);\n  const [view, setView] = useState<EditorView>();\n  const [state, setState] = useState<EditorState>();\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  let getExtensions = [updateListener, defaultThemeOption];\n  if (indentWithTab) {\n    getExtensions.unshift(keymap.of([defaultIndentWithTab]));\n  }\n  if (basicSetup) {\n    getExtensions.unshift(defaultBasicSetup);\n  }\n\n  if (placeholder) {\n    getExtensions.unshift(extendPlaceholder(placeholder));\n  }\n\n  theme === 'light' ? getExtensions.push(defaultLightThemeOption) : getExtensions.push(oneDarkTheme);\n\n  if (editable === false) {\n    getExtensions.push(EditorView.editable.of(false));\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 as any,\n        });\n        setView(viewCurrent);\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [container, state]);\n\n  useEffect(() => {\n    return () => {\n      if (view) {\n        view.destroy();\n      }\n    };\n  }, [view]);\n\n  useEffect(() => {\n    if (view) {\n      const currentValue = view.state.doc.toString();\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    placeholder,\n    height,\n    minHeight,\n    maxHeight,\n    width,\n    minWidth,\n    maxWidth,\n    editable,\n    indentWithTab,\n    basicSetup,\n  ]);\n\n  useEffect(() => {\n    if (autoFocus && view) {\n      view.focus();\n    }\n  }, [autoFocus, view]);\n\n  return { state, setState, view, setView, container, setContainer };\n}\n"
+    "import { useEffect, useState } from 'react';\nimport { basicSetup as defaultBasicSetup } from '@codemirror/basic-setup';\nimport { EditorState, StateEffect } from '@codemirror/state';\nimport { indentWithTab as defaultIndentWithTab } from '@codemirror/commands';\nimport { EditorView, keymap, ViewUpdate, placeholder as extendPlaceholder } from '@codemirror/view';\nimport { oneDarkTheme } from '@codemirror/theme-one-dark';\nimport { ReactCodeMirrorProps } from './';\nimport { defaultLightThemeOption } from './theme/light';\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 = '',\n    width = '',\n    minWidth = '',\n    maxWidth = '',\n    editable = true,\n    indentWithTab = true,\n    basicSetup = true,\n  } = props;\n  const [container, setContainer] = useState(props.container);\n  const [view, setView] = useState<EditorView>();\n  const [state, setState] = useState<EditorState>();\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  let getExtensions = [updateListener, defaultThemeOption];\n  if (indentWithTab) {\n    getExtensions.unshift(keymap.of([defaultIndentWithTab]));\n  }\n  if (basicSetup) {\n    getExtensions.unshift(defaultBasicSetup);\n  }\n\n  if (placeholder) {\n    getExtensions.unshift(extendPlaceholder(placeholder));\n  }\n\n  theme === 'light' ? getExtensions.push(defaultLightThemeOption) : getExtensions.push(oneDarkTheme);\n\n  if (editable === false) {\n    getExtensions.push(EditorView.editable.of(false));\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 as any,\n        });\n        setView(viewCurrent);\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [container, state]);\n\n  useEffect(() => {\n    return () => {\n      if (view) {\n        view.destroy();\n      }\n    };\n  }, [view]);\n\n  useEffect(() => {\n    if (view) {\n      const currentValue = view.state.doc.toString();\n      if (value !== currentValue) {\n        view.dispatch({\n          changes: { from: 0, to: currentValue.length, insert: value || '' },\n        });\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    placeholder,\n    height,\n    minHeight,\n    maxHeight,\n    width,\n    minWidth,\n    maxWidth,\n    editable,\n    indentWithTab,\n    basicSetup,\n  ]);\n\n  useEffect(() => {\n    if (autoFocus && view) {\n      view.focus();\n    }\n  }, [autoFocus, view]);\n\n  return { state, setState, view, setView, container, setContainer };\n}\n"
   ]
 }

package/esm/useCodeMirror.js

@@ -101,13 +101,16 @@ export function useCodeMirror(props) {
   useEffect(() => {
     if (view) {
       var currentValue = view.state.doc.toString();
-      view.dispatch({
-        changes: {
-          from: 0,
-          to: currentValue.length,
-          insert: value || ''
-        }
-      });
+
+      if (value !== currentValue) {
+        view.dispatch({
+          changes: {
+            from: 0,
+            to: currentValue.length,
+            insert: value || ''
+          }
+        });
+      }
     }
   }, [value, view]);
   useEffect(() => {

package/esm/useCodeMirror.js.map

@@ -67,8 +67,8 @@
     "reconfigure",
     "focus"
   ],
-  "mappings": "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",
+  "mappings": "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",
   "sourcesContent": [
-    "import { useEffect, useState } from 'react';\nimport { basicSetup as defaultBasicSetup } from '@codemirror/basic-setup';\nimport { EditorState, StateEffect } from '@codemirror/state';\nimport { indentWithTab as defaultIndentWithTab } from '@codemirror/commands';\nimport { EditorView, keymap, ViewUpdate, placeholder as extendPlaceholder } from '@codemirror/view';\nimport { oneDarkTheme } from '@codemirror/theme-one-dark';\nimport { ReactCodeMirrorProps } from './';\nimport { defaultLightThemeOption } from './theme/light';\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 = '',\n    width = '',\n    minWidth = '',\n    maxWidth = '',\n    editable = true,\n    indentWithTab = true,\n    basicSetup = true,\n  } = props;\n  const [container, setContainer] = useState(props.container);\n  const [view, setView] = useState<EditorView>();\n  const [state, setState] = useState<EditorState>();\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  let getExtensions = [updateListener, defaultThemeOption];\n  if (indentWithTab) {\n    getExtensions.unshift(keymap.of([defaultIndentWithTab]));\n  }\n  if (basicSetup) {\n    getExtensions.unshift(defaultBasicSetup);\n  }\n\n  if (placeholder) {\n    getExtensions.unshift(extendPlaceholder(placeholder));\n  }\n\n  theme === 'light' ? getExtensions.push(defaultLightThemeOption) : getExtensions.push(oneDarkTheme);\n\n  if (editable === false) {\n    getExtensions.push(EditorView.editable.of(false));\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 as any,\n        });\n        setView(viewCurrent);\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [container, state]);\n\n  useEffect(() => {\n    return () => {\n      if (view) {\n        view.destroy();\n      }\n    };\n  }, [view]);\n\n  useEffect(() => {\n    if (view) {\n      const currentValue = view.state.doc.toString();\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    placeholder,\n    height,\n    minHeight,\n    maxHeight,\n    width,\n    minWidth,\n    maxWidth,\n    editable,\n    indentWithTab,\n    basicSetup,\n  ]);\n\n  useEffect(() => {\n    if (autoFocus && view) {\n      view.focus();\n    }\n  }, [autoFocus, view]);\n\n  return { state, setState, view, setView, container, setContainer };\n}\n"
+    "import { useEffect, useState } from 'react';\nimport { basicSetup as defaultBasicSetup } from '@codemirror/basic-setup';\nimport { EditorState, StateEffect } from '@codemirror/state';\nimport { indentWithTab as defaultIndentWithTab } from '@codemirror/commands';\nimport { EditorView, keymap, ViewUpdate, placeholder as extendPlaceholder } from '@codemirror/view';\nimport { oneDarkTheme } from '@codemirror/theme-one-dark';\nimport { ReactCodeMirrorProps } from './';\nimport { defaultLightThemeOption } from './theme/light';\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 = '',\n    width = '',\n    minWidth = '',\n    maxWidth = '',\n    editable = true,\n    indentWithTab = true,\n    basicSetup = true,\n  } = props;\n  const [container, setContainer] = useState(props.container);\n  const [view, setView] = useState<EditorView>();\n  const [state, setState] = useState<EditorState>();\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  let getExtensions = [updateListener, defaultThemeOption];\n  if (indentWithTab) {\n    getExtensions.unshift(keymap.of([defaultIndentWithTab]));\n  }\n  if (basicSetup) {\n    getExtensions.unshift(defaultBasicSetup);\n  }\n\n  if (placeholder) {\n    getExtensions.unshift(extendPlaceholder(placeholder));\n  }\n\n  theme === 'light' ? getExtensions.push(defaultLightThemeOption) : getExtensions.push(oneDarkTheme);\n\n  if (editable === false) {\n    getExtensions.push(EditorView.editable.of(false));\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 as any,\n        });\n        setView(viewCurrent);\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [container, state]);\n\n  useEffect(() => {\n    return () => {\n      if (view) {\n        view.destroy();\n      }\n    };\n  }, [view]);\n\n  useEffect(() => {\n    if (view) {\n      const currentValue = view.state.doc.toString();\n      if (value !== currentValue) {\n        view.dispatch({\n          changes: { from: 0, to: currentValue.length, insert: value || '' },\n        });\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    placeholder,\n    height,\n    minHeight,\n    maxHeight,\n    width,\n    minWidth,\n    maxWidth,\n    editable,\n    indentWithTab,\n    basicSetup,\n  ]);\n\n  useEffect(() => {\n    if (autoFocus && view) {\n      view.focus();\n    }\n  }, [autoFocus, view]);\n\n  return { state, setState, view, setView, container, setContainer };\n}\n"
   ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-codemirror",
-  "version": "4.0.7",
+  "version": "4.0.8",
   "description": "CodeMirror component for React.",
   "homepage": "https://uiwjs.github.io/react-codemirror",
   "main": "cjs/index.js",
@@ -40,18 +40,6 @@
   ],
   "author": "kenny wong <wowohoo@qq.com>",
   "license": "MIT",
-  "peerDependencies": {
-    "@babel/runtime": ">=7.11.0",
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
-  },
-  "dependencies": {
-    "@babel/runtime": "7.15.4",
-    "@codemirror/basic-setup": "0.19.0",
-    "@codemirror/state": "0.19.2",
-    "@codemirror/theme-one-dark": "0.19.0",
-    "@codemirror/view": "0.19.9"
-  },
   "jest": {
     "coverageReporters": [
       "lcov",
@@ -69,6 +57,18 @@
       "prettier --write"
     ]
   },
+  "peerDependencies": {
+    "@babel/runtime": ">=7.11.0",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "dependencies": {
+    "@babel/runtime": "7.15.4",
+    "@codemirror/basic-setup": "0.19.0",
+    "@codemirror/state": "0.19.2",
+    "@codemirror/theme-one-dark": "0.19.0",
+    "@codemirror/view": "0.19.9"
+  },
   "devDependencies": {
     "@codemirror/lang-cpp": "0.19.1",
     "@codemirror/lang-html": "0.19.3",
@@ -87,24 +87,23 @@
     "@kkt/less-modules": "6.11.0",
     "@kkt/raw-modules": "6.11.0",
     "@kkt/scope-plugin-options": "6.11.0",
-    "@types/react": "17.0.27",
+    "@types/react": "17.0.29",
     "@types/react-dom": "17.0.9",
     "@types/react-test-renderer": "17.0.1",
     "@uiw/react-github-corners": "1.5.3",
-    "@uiw/react-markdown-preview": "3.3.5",
+    "@uiw/react-markdown-preview": "3.4.0",
     "@uiw/react-shields": "1.1.2",
     "@uiw/reset.css": "1.0.5",
-    "rehype-attr": "2.0.6",
     "code-example": "3.3.1",
     "husky": "7.0.2",
-    "jest": "27.2.4",
+    "jest": "27.2.5",
     "kkt": "6.11.0",
-    "lint-staged": "11.2.0",
+    "lint-staged": "11.2.3",
     "prettier": "2.4.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-test-renderer": "17.0.2",
-    "tsbb": "3.4.1"
+    "tsbb": "3.4.4"
   },
   "browserslist": {
     "production": [

package/src/useCodeMirror.ts

@@ -104,9 +104,11 @@ export function useCodeMirror(props: UseCodeMirror) {
   useEffect(() => {
     if (view) {
       const currentValue = view.state.doc.toString();
-      view.dispatch({
-        changes: { from: 0, to: currentValue.length, insert: value || '' },
-      });
+      if (value !== currentValue) {
+        view.dispatch({
+          changes: { from: 0, to: currentValue.length, insert: value || '' },
+        });
+      }
     }
   }, [value, view]);