@uiw/react-codemirror 4.5.3 → 4.8.0
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 +1 -3
- package/cjs/index.js +3 -42
- package/cjs/index.js.map +11 -6
- package/cjs/theme/light.js.map +5 -5
- package/cjs/useCodeMirror.js +8 -2
- package/cjs/useCodeMirror.js.map +10 -7
- package/dist/codemirror.js +7591 -2051
- package/dist/codemirror.min.js +1 -1
- package/dist/codemirror.min.js.LICENSE.txt +2 -7
- package/esm/index.d.ts +1 -3
- package/esm/index.js +3 -4
- package/esm/index.js.map +7 -6
- package/esm/theme/light.js.map +5 -5
- package/esm/useCodeMirror.js +6 -1
- package/esm/useCodeMirror.js.map +7 -6
- package/package.json +32 -32
- package/src/index.tsx +3 -3
- package/src/useCodeMirror.ts +5 -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. */
|
|
@@ -33,6 +30,7 @@ export interface ReactCodeMirrorProps extends Omit<EditorStateConfig, 'doc' | 'e
|
|
|
33
30
|
* @default true
|
|
34
31
|
*/
|
|
35
32
|
editable?: boolean;
|
|
33
|
+
readOnly?: boolean;
|
|
36
34
|
/**
|
|
37
35
|
* Whether to optional basicSetup by default
|
|
38
36
|
* @default true
|
package/cjs/index.js
CHANGED
|
@@ -34,48 +34,7 @@ Object.keys(_useCodeMirror2).forEach(function (key) {
|
|
|
34
34
|
|
|
35
35
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
36
36
|
|
|
37
|
-
var
|
|
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
|
-
var _excluded = ["className", "value", "selection", "extensions", "onChange", "onUpdate", "autoFocus", "theme", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "basicSetup", "placeholder", "indentWithTab", "editable", "root"];
|
|
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) {
|
|
81
40
|
var className = props.className,
|
|
@@ -99,6 +58,7 @@ var ReactCodeMirror = /*#__PURE__*/_react.default.forwardRef(function (props, re
|
|
|
99
58
|
placeholder = props.placeholder,
|
|
100
59
|
indentWithTab = props.indentWithTab,
|
|
101
60
|
editable = props.editable,
|
|
61
|
+
readOnly = props.readOnly,
|
|
102
62
|
root = props.root,
|
|
103
63
|
other = (0, _objectWithoutProperties2.default)(props, _excluded);
|
|
104
64
|
var editor = (0, _react.useRef)(null);
|
|
@@ -119,6 +79,7 @@ var ReactCodeMirror = /*#__PURE__*/_react.default.forwardRef(function (props, re
|
|
|
119
79
|
placeholder: placeholder,
|
|
120
80
|
indentWithTab: indentWithTab,
|
|
121
81
|
editable: editable,
|
|
82
|
+
readOnly: readOnly,
|
|
122
83
|
selection: selection,
|
|
123
84
|
onChange: onChange,
|
|
124
85
|
onUpdate: onUpdate,
|
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",
|
|
@@ -27,20 +24,28 @@
|
|
|
27
24
|
"placeholder",
|
|
28
25
|
"indentWithTab",
|
|
29
26
|
"editable",
|
|
27
|
+
"readOnly",
|
|
30
28
|
"root",
|
|
31
29
|
"other",
|
|
32
30
|
"editor",
|
|
31
|
+
"useRef",
|
|
32
|
+
"useCodeMirror",
|
|
33
33
|
"container",
|
|
34
34
|
"current",
|
|
35
35
|
"state",
|
|
36
36
|
"view",
|
|
37
37
|
"setContainer",
|
|
38
|
+
"useImperativeHandle",
|
|
39
|
+
"useEffect",
|
|
38
40
|
"Error",
|
|
39
41
|
"defaultClassNames",
|
|
40
42
|
"displayName"
|
|
41
43
|
],
|
|
42
|
-
"
|
|
44
|
+
"sources": [
|
|
45
|
+
"../src/index.tsx"
|
|
46
|
+
],
|
|
43
47
|
"sourcesContent": [
|
|
44
|
-
"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 '
|
|
45
|
-
]
|
|
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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"
|
|
46
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
|
|
|
@@ -49,6 +49,8 @@ function useCodeMirror(props) {
|
|
|
49
49
|
maxWidth = _props$maxWidth === void 0 ? '' : _props$maxWidth,
|
|
50
50
|
_props$editable = props.editable,
|
|
51
51
|
editable = _props$editable === void 0 ? true : _props$editable,
|
|
52
|
+
_props$readOnly = props.readOnly,
|
|
53
|
+
readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
|
|
52
54
|
_props$indentWithTab = props.indentWithTab,
|
|
53
55
|
defaultIndentWithTab = _props$indentWithTab === void 0 ? true : _props$indentWithTab,
|
|
54
56
|
_props$basicSetup = props.basicSetup,
|
|
@@ -98,7 +100,7 @@ function useCodeMirror(props) {
|
|
|
98
100
|
}
|
|
99
101
|
|
|
100
102
|
if (defaultBasicSetup) {
|
|
101
|
-
getExtensions.unshift(
|
|
103
|
+
getExtensions.unshift(_codemirror.basicSetup);
|
|
102
104
|
}
|
|
103
105
|
|
|
104
106
|
if (placeholderStr) {
|
|
@@ -123,6 +125,10 @@ function useCodeMirror(props) {
|
|
|
123
125
|
getExtensions.push(_view.EditorView.editable.of(false));
|
|
124
126
|
}
|
|
125
127
|
|
|
128
|
+
if (readOnly) {
|
|
129
|
+
getExtensions.push(_state.EditorState.readOnly.of(true));
|
|
130
|
+
}
|
|
131
|
+
|
|
126
132
|
if (onUpdate && typeof onUpdate === 'function') {
|
|
127
133
|
getExtensions.push(_view.EditorView.updateListener.of(onUpdate));
|
|
128
134
|
}
|
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",
|
|
@@ -22,11 +19,13 @@
|
|
|
22
19
|
"minWidth",
|
|
23
20
|
"maxWidth",
|
|
24
21
|
"editable",
|
|
22
|
+
"readOnly",
|
|
25
23
|
"indentWithTab",
|
|
26
24
|
"defaultIndentWithTab",
|
|
27
25
|
"basicSetup",
|
|
28
26
|
"defaultBasicSetup",
|
|
29
27
|
"root",
|
|
28
|
+
"useState",
|
|
30
29
|
"container",
|
|
31
30
|
"setContainer",
|
|
32
31
|
"view",
|
|
@@ -47,9 +46,10 @@
|
|
|
47
46
|
"push",
|
|
48
47
|
"defaultLightThemeOption",
|
|
49
48
|
"oneDark",
|
|
49
|
+
"EditorState",
|
|
50
50
|
"concat",
|
|
51
|
+
"useEffect",
|
|
51
52
|
"stateCurrent",
|
|
52
|
-
"EditorState",
|
|
53
53
|
"create",
|
|
54
54
|
"viewCurrent",
|
|
55
55
|
"parent",
|
|
@@ -67,8 +67,11 @@
|
|
|
67
67
|
"StateEffect",
|
|
68
68
|
"reconfigure"
|
|
69
69
|
],
|
|
70
|
-
"
|
|
70
|
+
"sources": [
|
|
71
|
+
"../src/useCodeMirror.ts"
|
|
72
|
+
],
|
|
71
73
|
"sourcesContent": [
|
|
72
|
-
"import { useEffect, useState } from 'react';\nimport { basicSetup } from '
|
|
73
|
-
]
|
|
74
|
+
"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"
|
|
75
|
+
],
|
|
76
|
+
"mappings": "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"
|
|
74
77
|
}
|