@uiw/react-codemirror 4.5.3 → 4.8.0

package/esm/useCodeMirror.js

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { basicSetup } from '@codemirror/basic-setup';
+import { basicSetup } from 'codemirror';
 import { EditorState, StateEffect } from '@codemirror/state';
 import { indentWithTab } from '@codemirror/commands';
 import { EditorView, keymap, placeholder } from '@codemirror/view';
@@ -22,6 +22,7 @@ export function useCodeMirror(props) {
     minWidth = '',
     maxWidth = '',
     editable = true,
+    readOnly = false,
     indentWithTab: defaultIndentWithTab = true,
     basicSetup: defaultBasicSetup = true,
     root
@@ -80,6 +81,10 @@ export function useCodeMirror(props) {
     getExtensions.push(EditorView.editable.of(false));
   }
 
+  if (readOnly) {
+    getExtensions.push(EditorState.readOnly.of(true));
+  }
+
   if (onUpdate && typeof onUpdate === 'function') {
     getExtensions.push(EditorView.updateListener.of(onUpdate));
   }

package/esm/useCodeMirror.js.map

@@ -1,8 +1,5 @@
 {
   "version": 3,
-  "sources": [
-    "../src/useCodeMirror.ts"
-  ],
   "names": [
     "useEffect",
     "useState",
@@ -32,6 +29,7 @@
     "minWidth",
     "maxWidth",
     "editable",
+    "readOnly",
     "defaultIndentWithTab",
     "defaultBasicSetup",
     "root",
@@ -69,8 +67,11 @@
     "effects",
     "reconfigure"
   ],
-  "mappings": "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",
+  "sources": [
+    "../src/useCodeMirror.ts"
+  ],
   "sourcesContent": [
-    "import { useEffect, useState } from 'react';\nimport { basicSetup } from '@codemirror/basic-setup';\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 { 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: placeholderStr = '',\n    width = '',\n    minWidth = '',\n    maxWidth = '',\n    editable = true,\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 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 (defaultIndentWithTab) {\n    getExtensions.unshift(keymap.of([indentWithTab]));\n  }\n  if (defaultBasicSetup) {\n    getExtensions.unshift(basicSetup);\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\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 { basicSetup } from 'codemirror';\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 { 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: 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 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 (defaultIndentWithTab) {\n    getExtensions.unshift(keymap.of([indentWithTab]));\n  }\n  if (defaultBasicSetup) {\n    getExtensions.unshift(basicSetup);\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"
+  ],
+  "mappings": "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"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-codemirror",
-  "version": "4.5.3",
+  "version": "4.8.0",
   "description": "CodeMirror component for React.",
   "homepage": "https://uiwjs.github.io/react-codemirror",
   "main": "cjs/index.js",
@@ -61,47 +61,47 @@
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "@babel/runtime": "^7.17.2",
-    "@codemirror/basic-setup": "^0.19.1",
-    "@codemirror/state": "^0.19.9",
-    "@codemirror/theme-one-dark": "^0.19.1",
-    "@codemirror/view": "^0.19.45"
+    "@babel/runtime": ">=7.11.0",
+    "@codemirror/theme-one-dark": "^6.0.0",
+    "codemirror": "^6.0.0"
   },
   "devDependencies": {
-    "@codemirror/lang-cpp": "~0.19.1",
-    "@codemirror/lang-html": "~0.19.4",
-    "@codemirror/lang-java": "~0.19.1",
-    "@codemirror/lang-javascript": "~0.19.7",
-    "@codemirror/lang-json": "~0.19.2",
-    "@codemirror/lang-lezer": "~0.19.1",
-    "@codemirror/lang-markdown": "~0.19.6",
-    "@codemirror/lang-php": "~0.19.1",
-    "@codemirror/lang-python": "~0.19.4",
-    "@codemirror/lang-rust": "~0.19.1",
-    "@codemirror/lang-sql": "~0.19.4",
-    "@codemirror/lang-xml": "~0.19.2",
-    "@codemirror/legacy-modes": "~0.19.0",
-    "@codemirror/stream-parser": "~0.19.6",
+    "@codemirror/lang-cpp": "~6.0.0",
+    "@codemirror/lang-html": "~6.0.0",
+    "@codemirror/lang-java": "~6.0.0",
+    "@codemirror/lang-javascript": "~6.0.0",
+    "@codemirror/lang-json": "~6.0.0",
+    "@codemirror/lang-lezer": "~6.0.0",
+    "@codemirror/lang-markdown": "~6.0.0",
+    "@codemirror/lang-php": "~6.0.0",
+    "@codemirror/lang-python": "~6.0.0",
+    "@codemirror/lang-rust": "~6.0.0",
+    "@codemirror/lang-sql": "~6.0.0",
+    "@codemirror/lang-xml": "~6.0.0",
+    "@codemirror/legacy-modes": "~6.0.0",
     "@kkt/less-modules": "~7.1.1",
     "@kkt/ncc": "~1.0.8",
     "@kkt/raw-modules": "~7.1.1",
     "@kkt/scope-plugin-options": "~7.1.1",
-    "@types/react": "~17.0.39",
-    "@types/react-dom": "~17.0.11",
-    "@types/react-test-renderer": "~17.0.1",
-    "@uiw/react-github-corners": "~1.5.3",
-    "@uiw/react-markdown-preview": "~4.0.3",
-    "@uiw/react-shields": "~1.1.2",
+    "@testing-library/react": "^13.0.0",
+    "@types/react": "~18.0.1",
+    "@types/react-dom": "~18.0.0",
+    "@types/react-test-renderer": "~18.0.0",
+    "@uiw/react-github-corners": "~1.5.14",
+    "@uiw/react-markdown-preview": "~4.0.5",
+    "@uiw/react-shields": "~1.1.3",
     "@uiw/reset.css": "~1.0.5",
     "@wcj/dark-mode": "~1.0.12",
     "code-example": "~3.3.1",
-    "husky": "~7.0.4",
+    "husky": "~8.0.0",
     "kkt": "~7.1.5",
-    "lint-staged": "~12.3.4",
-    "prettier": "~2.5.1",
-    "react": "~17.0.2",
-    "react-dom": "~17.0.2",
-    "react-test-renderer": "~17.0.2",
+    "lint-staged": "~13.0.0",
+    "markdown-react-code-preview-loader": "^2.1.2",
+    "prettier": "~2.6.0",
+    "react": "~18.1.0",
+    "react-code-preview-layout": "^2.0.2",
+    "react-dom": "~18.1.0",
+    "react-test-renderer": "~18.1.0",
     "tsbb": "~3.7.0"
   },
   "browserslist": {

package/src/index.tsx

@@ -3,9 +3,6 @@ import { EditorState, EditorStateConfig, Extension } from '@codemirror/state';
 import { EditorView, ViewUpdate } from '@codemirror/view';
 import { useCodeMirror } from './useCodeMirror';
 
-export * from '@codemirror/view';
-export * from '@codemirror/basic-setup';
-export * from '@codemirror/state';
 export * from './useCodeMirror';
 
 export interface ReactCodeMirrorProps
@@ -38,6 +35,7 @@ export interface ReactCodeMirrorProps
    * @default true
    */
   editable?: boolean;
+  readOnly?: boolean;
   /**
    * Whether to optional basicSetup by default
    * @default true
@@ -87,6 +85,7 @@ const ReactCodeMirror = React.forwardRef<ReactCodeMirrorRef, ReactCodeMirrorProp
     placeholder,
     indentWithTab,
     editable,
+    readOnly,
     root,
     ...other
   } = props;
@@ -107,6 +106,7 @@ const ReactCodeMirror = React.forwardRef<ReactCodeMirrorRef, ReactCodeMirrorProp
     placeholder,
     indentWithTab,
     editable,
+    readOnly,
     selection,
     onChange,
     onUpdate,

package/src/useCodeMirror.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { basicSetup } from '@codemirror/basic-setup';
+import { basicSetup } from 'codemirror';
 import { EditorState, StateEffect } from '@codemirror/state';
 import { indentWithTab } from '@codemirror/commands';
 import { EditorView, keymap, ViewUpdate, placeholder } from '@codemirror/view';
@@ -28,6 +28,7 @@ export function useCodeMirror(props: UseCodeMirror) {
     minWidth = '',
     maxWidth = '',
     editable = true,
+    readOnly = false,
     indentWithTab: defaultIndentWithTab = true,
     basicSetup: defaultBasicSetup = true,
     root,
@@ -79,6 +80,9 @@ export function useCodeMirror(props: UseCodeMirror) {
   if (editable === false) {
     getExtensions.push(EditorView.editable.of(false));
   }
+  if (readOnly) {
+    getExtensions.push(EditorState.readOnly.of(true));
+  }
 
   if (onUpdate && typeof onUpdate === 'function') {
     getExtensions.push(EditorView.updateListener.of(onUpdate));