@uiw/react-codemirror 4.6.0 → 4.8.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +13 -5
- package/cjs/index.d.ts +0 -3
- package/cjs/index.js +0 -41
- package/cjs/index.js.map +10 -6
- package/cjs/theme/light.js.map +5 -5
- package/cjs/useCodeMirror.js +11 -5
- package/cjs/useCodeMirror.js.map +12 -8
- package/dist/codemirror.js +7620 -1998
- package/dist/codemirror.min.js +1 -1
- package/esm/index.d.ts +0 -3
- package/esm/index.js +0 -3
- package/esm/index.js.map +6 -6
- package/esm/theme/light.js.map +5 -5
- package/esm/useCodeMirror.js +8 -2
- package/esm/useCodeMirror.js.map +9 -7
- package/package.json +24 -25
- package/src/index.tsx +0 -3
- package/src/useCodeMirror.ts +11 -2
- package/cjs/theme/light.d.ts +0 -1
- package/esm/theme/light.d.ts +0 -1
package/README.md
CHANGED
|
@@ -27,8 +27,9 @@ CodeMirror component for React. Demo Preview: [@uiwjs.github.io/react-codemirror
|
|
|
27
27
|
|
|
28
28
|
## Install
|
|
29
29
|
|
|
30
|
+
**Not dependent on uiw.**
|
|
31
|
+
|
|
30
32
|
```bash
|
|
31
|
-
# Not dependent on uiw.
|
|
32
33
|
npm install @uiw/react-codemirror --save
|
|
33
34
|
```
|
|
34
35
|
|
|
@@ -36,22 +37,24 @@ npm install @uiw/react-codemirror --save
|
|
|
36
37
|
|
|
37
38
|
[](https://codesandbox.io/embed/react-codemirror-example-codemirror-6-slvju?fontsize=14&hidenavigation=1&theme=dark)
|
|
38
39
|
|
|
39
|
-
```jsx
|
|
40
|
+
```jsx mdx:preview
|
|
41
|
+
import React from 'react';
|
|
40
42
|
import CodeMirror from '@uiw/react-codemirror';
|
|
41
43
|
import { javascript } from '@codemirror/lang-javascript';
|
|
42
44
|
|
|
43
|
-
|
|
45
|
+
function App() {
|
|
44
46
|
return (
|
|
45
47
|
<CodeMirror
|
|
46
48
|
value="console.log('hello world!');"
|
|
47
49
|
height="200px"
|
|
48
|
-
extensions={[javascript({ jsx: true })]}
|
|
50
|
+
extensions={[lang.javascript({ jsx: true })]}
|
|
49
51
|
onChange={(value, viewUpdate) => {
|
|
50
52
|
console.log('value:', value);
|
|
51
53
|
}}
|
|
52
54
|
/>
|
|
53
55
|
);
|
|
54
56
|
}
|
|
57
|
+
export default App;
|
|
55
58
|
```
|
|
56
59
|
|
|
57
60
|
## Support Language
|
|
@@ -60,7 +63,7 @@ export default function App() {
|
|
|
60
63
|
|
|
61
64
|
```jsx
|
|
62
65
|
import CodeMirror from '@uiw/react-codemirror';
|
|
63
|
-
import { StreamLanguage } from '@codemirror/
|
|
66
|
+
import { StreamLanguage } from '@codemirror/language';
|
|
64
67
|
import { go } from '@codemirror/legacy-modes/mode/go';
|
|
65
68
|
|
|
66
69
|
const goLang = `package main
|
|
@@ -246,6 +249,11 @@ export interface ReactCodeMirrorProps
|
|
|
246
249
|
* @default true
|
|
247
250
|
*/
|
|
248
251
|
editable?: boolean;
|
|
252
|
+
/**
|
|
253
|
+
* This disables editing of the editor content by the user.
|
|
254
|
+
* @default false
|
|
255
|
+
*/
|
|
256
|
+
readOnly?: boolean;
|
|
249
257
|
/**
|
|
250
258
|
* Whether to optional basicSetup by default
|
|
251
259
|
* @default true
|
package/cjs/index.d.ts
CHANGED
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { EditorState, EditorStateConfig, Extension } from '@codemirror/state';
|
|
3
3
|
import { EditorView, ViewUpdate } from '@codemirror/view';
|
|
4
|
-
export * from '@codemirror/view';
|
|
5
|
-
export * from '@codemirror/basic-setup';
|
|
6
|
-
export * from '@codemirror/state';
|
|
7
4
|
export * from './useCodeMirror';
|
|
8
5
|
export interface ReactCodeMirrorProps extends Omit<EditorStateConfig, 'doc' | 'extensions'>, Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'placeholder'> {
|
|
9
6
|
/** value of the auto created model in the editor. */
|
package/cjs/index.js
CHANGED
|
@@ -34,47 +34,6 @@ Object.keys(_useCodeMirror2).forEach(function (key) {
|
|
|
34
34
|
|
|
35
35
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
36
36
|
|
|
37
|
-
var _view = require("@codemirror/view");
|
|
38
|
-
|
|
39
|
-
Object.keys(_view).forEach(function (key) {
|
|
40
|
-
if (key === "default" || key === "__esModule") return;
|
|
41
|
-
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
42
|
-
if (key in exports && exports[key] === _view[key]) return;
|
|
43
|
-
Object.defineProperty(exports, key, {
|
|
44
|
-
enumerable: true,
|
|
45
|
-
get: function get() {
|
|
46
|
-
return _view[key];
|
|
47
|
-
}
|
|
48
|
-
});
|
|
49
|
-
});
|
|
50
|
-
|
|
51
|
-
var _basicSetup = require("@codemirror/basic-setup");
|
|
52
|
-
|
|
53
|
-
Object.keys(_basicSetup).forEach(function (key) {
|
|
54
|
-
if (key === "default" || key === "__esModule") return;
|
|
55
|
-
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
56
|
-
if (key in exports && exports[key] === _basicSetup[key]) return;
|
|
57
|
-
Object.defineProperty(exports, key, {
|
|
58
|
-
enumerable: true,
|
|
59
|
-
get: function get() {
|
|
60
|
-
return _basicSetup[key];
|
|
61
|
-
}
|
|
62
|
-
});
|
|
63
|
-
});
|
|
64
|
-
|
|
65
|
-
var _state = require("@codemirror/state");
|
|
66
|
-
|
|
67
|
-
Object.keys(_state).forEach(function (key) {
|
|
68
|
-
if (key === "default" || key === "__esModule") return;
|
|
69
|
-
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
70
|
-
if (key in exports && exports[key] === _state[key]) return;
|
|
71
|
-
Object.defineProperty(exports, key, {
|
|
72
|
-
enumerable: true,
|
|
73
|
-
get: function get() {
|
|
74
|
-
return _state[key];
|
|
75
|
-
}
|
|
76
|
-
});
|
|
77
|
-
});
|
|
78
37
|
var _excluded = ["className", "value", "selection", "extensions", "onChange", "onUpdate", "autoFocus", "theme", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "basicSetup", "placeholder", "indentWithTab", "editable", "readOnly", "root"];
|
|
79
38
|
|
|
80
39
|
var ReactCodeMirror = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
package/cjs/index.js.map
CHANGED
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": [
|
|
4
|
-
"../src/index.tsx"
|
|
5
|
-
],
|
|
6
3
|
"names": [
|
|
7
4
|
"ReactCodeMirror",
|
|
8
5
|
"React",
|
|
@@ -31,17 +28,24 @@
|
|
|
31
28
|
"root",
|
|
32
29
|
"other",
|
|
33
30
|
"editor",
|
|
31
|
+
"useRef",
|
|
32
|
+
"useCodeMirror",
|
|
34
33
|
"container",
|
|
35
34
|
"current",
|
|
36
35
|
"state",
|
|
37
36
|
"view",
|
|
38
37
|
"setContainer",
|
|
38
|
+
"useImperativeHandle",
|
|
39
|
+
"useEffect",
|
|
39
40
|
"Error",
|
|
40
41
|
"defaultClassNames",
|
|
41
42
|
"displayName"
|
|
42
43
|
],
|
|
43
|
-
"
|
|
44
|
+
"sources": [
|
|
45
|
+
"../src/index.tsx"
|
|
46
|
+
],
|
|
44
47
|
"sourcesContent": [
|
|
45
|
-
"import React, { useEffect, useRef, useImperativeHandle } from 'react';\nimport { EditorState, EditorStateConfig, Extension } from '@codemirror/state';\nimport { EditorView, ViewUpdate } from '@codemirror/view';\nimport { useCodeMirror } from './useCodeMirror';\n\nexport * from '
|
|
46
|
-
]
|
|
48
|
+
"import React, { useEffect, useRef, useImperativeHandle } from 'react';\nimport { EditorState, EditorStateConfig, Extension } from '@codemirror/state';\nimport { EditorView, ViewUpdate } from '@codemirror/view';\nimport { useCodeMirror } from './useCodeMirror';\n\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;\n /**\n * This disables editing of the editor content by the user.\n * @default true\n */\n editable?: boolean;\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"
|
|
49
|
+
],
|
|
50
|
+
"mappings": "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"
|
|
47
51
|
}
|
package/cjs/theme/light.js.map
CHANGED
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": [
|
|
4
|
-
"../../src/theme/light.ts"
|
|
5
|
-
],
|
|
6
3
|
"names": [
|
|
7
4
|
"defaultLightThemeOption",
|
|
8
5
|
"EditorView",
|
|
@@ -10,8 +7,11 @@
|
|
|
10
7
|
"backgroundColor",
|
|
11
8
|
"dark"
|
|
12
9
|
],
|
|
13
|
-
"
|
|
10
|
+
"sources": [
|
|
11
|
+
"../../src/theme/light.ts"
|
|
12
|
+
],
|
|
14
13
|
"sourcesContent": [
|
|
15
14
|
"import { EditorView } from '@codemirror/view';\n\nexport const defaultLightThemeOption = EditorView.theme(\n {\n '&': {\n backgroundColor: '#fff',\n },\n },\n {\n dark: false,\n },\n);\n"
|
|
16
|
-
]
|
|
15
|
+
],
|
|
16
|
+
"mappings": ";;;;;;;AAAA;;AAEO,IAAMA,uBAAuB,GAAGC,gBAAA,CAAWC,KAAX,CACrC;EACE,KAAK;IACHC,eAAe,EAAE;EADd;AADP,CADqC,EAMrC;EACEC,IAAI,EAAE;AADR,CANqC,CAAhC"
|
|
17
17
|
}
|
package/cjs/useCodeMirror.js
CHANGED
|
@@ -11,7 +11,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
|
|
|
11
11
|
|
|
12
12
|
var _react = require("react");
|
|
13
13
|
|
|
14
|
-
var
|
|
14
|
+
var _codemirror = require("codemirror");
|
|
15
15
|
|
|
16
16
|
var _state = require("@codemirror/state");
|
|
17
17
|
|
|
@@ -21,8 +21,6 @@ var _view = require("@codemirror/view");
|
|
|
21
21
|
|
|
22
22
|
var _themeOneDark = require("@codemirror/theme-one-dark");
|
|
23
23
|
|
|
24
|
-
var _light = require("./theme/light");
|
|
25
|
-
|
|
26
24
|
function useCodeMirror(props) {
|
|
27
25
|
var value = props.value,
|
|
28
26
|
selection = props.selection,
|
|
@@ -72,6 +70,14 @@ function useCodeMirror(props) {
|
|
|
72
70
|
state = _useState6[0],
|
|
73
71
|
setState = _useState6[1];
|
|
74
72
|
|
|
73
|
+
var defaultLightThemeOption = _view.EditorView.theme({
|
|
74
|
+
'&': {
|
|
75
|
+
backgroundColor: '#fff'
|
|
76
|
+
}
|
|
77
|
+
}, {
|
|
78
|
+
dark: false
|
|
79
|
+
});
|
|
80
|
+
|
|
75
81
|
var defaultThemeOption = _view.EditorView.theme({
|
|
76
82
|
'&': {
|
|
77
83
|
height: height,
|
|
@@ -100,7 +106,7 @@ function useCodeMirror(props) {
|
|
|
100
106
|
}
|
|
101
107
|
|
|
102
108
|
if (defaultBasicSetup) {
|
|
103
|
-
getExtensions.unshift(
|
|
109
|
+
getExtensions.unshift(_codemirror.basicSetup);
|
|
104
110
|
}
|
|
105
111
|
|
|
106
112
|
if (placeholderStr) {
|
|
@@ -109,7 +115,7 @@ function useCodeMirror(props) {
|
|
|
109
115
|
|
|
110
116
|
switch (theme) {
|
|
111
117
|
case 'light':
|
|
112
|
-
getExtensions.push(
|
|
118
|
+
getExtensions.push(defaultLightThemeOption);
|
|
113
119
|
break;
|
|
114
120
|
|
|
115
121
|
case 'dark':
|
package/cjs/useCodeMirror.js.map
CHANGED
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": [
|
|
4
|
-
"../src/useCodeMirror.ts"
|
|
5
|
-
],
|
|
6
3
|
"names": [
|
|
7
4
|
"useCodeMirror",
|
|
8
5
|
"props",
|
|
@@ -28,14 +25,18 @@
|
|
|
28
25
|
"basicSetup",
|
|
29
26
|
"defaultBasicSetup",
|
|
30
27
|
"root",
|
|
28
|
+
"useState",
|
|
31
29
|
"container",
|
|
32
30
|
"setContainer",
|
|
33
31
|
"view",
|
|
34
32
|
"setView",
|
|
35
33
|
"state",
|
|
36
34
|
"setState",
|
|
37
|
-
"
|
|
35
|
+
"defaultLightThemeOption",
|
|
38
36
|
"EditorView",
|
|
37
|
+
"backgroundColor",
|
|
38
|
+
"dark",
|
|
39
|
+
"defaultThemeOption",
|
|
39
40
|
"updateListener",
|
|
40
41
|
"of",
|
|
41
42
|
"vu",
|
|
@@ -46,10 +47,10 @@
|
|
|
46
47
|
"unshift",
|
|
47
48
|
"keymap",
|
|
48
49
|
"push",
|
|
49
|
-
"defaultLightThemeOption",
|
|
50
50
|
"oneDark",
|
|
51
51
|
"EditorState",
|
|
52
52
|
"concat",
|
|
53
|
+
"useEffect",
|
|
53
54
|
"stateCurrent",
|
|
54
55
|
"create",
|
|
55
56
|
"viewCurrent",
|
|
@@ -68,8 +69,11 @@
|
|
|
68
69
|
"StateEffect",
|
|
69
70
|
"reconfigure"
|
|
70
71
|
],
|
|
71
|
-
"
|
|
72
|
+
"sources": [
|
|
73
|
+
"../src/useCodeMirror.ts"
|
|
74
|
+
],
|
|
72
75
|
"sourcesContent": [
|
|
73
|
-
"import { useEffect, useState } from 'react';\nimport { basicSetup } from '
|
|
74
|
-
]
|
|
76
|
+
"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 './';\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 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"
|
|
77
|
+
],
|
|
78
|
+
"mappings": "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"
|
|
75
79
|
}
|