@uiw/react-codemirror 4.3.1 → 4.4.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 +9 -2
- package/cjs/index.js +11 -3
- package/cjs/index.js.map +3 -2
- package/cjs/useCodeMirror.js +9 -9
- package/cjs/useCodeMirror.js.map +6 -5
- package/dist/codemirror.js +8139 -0
- package/dist/codemirror.min.js +2 -0
- package/dist/codemirror.min.js.LICENSE.txt +14 -0
- package/esm/index.js +8 -3
- package/esm/index.js.map +3 -2
- package/esm/useCodeMirror.js +14 -14
- package/esm/useCodeMirror.js.map +6 -6
- package/package.json +18 -20
- package/src/__tests__/index.test.tsx +87 -0
- package/src/index.tsx +7 -2
- package/src/useCodeMirror.ts +14 -14
- package/src/react-app-env.d.ts +0 -1
package/README.md
CHANGED
|
@@ -167,7 +167,7 @@ export default function App() {
|
|
|
167
167
|
## Using custom theme
|
|
168
168
|
|
|
169
169
|
```jsx
|
|
170
|
-
import {
|
|
170
|
+
import { oneDark } from '@codemirror/theme-one-dark';
|
|
171
171
|
import CodeMirror from '@uiw/react-codemirror';
|
|
172
172
|
import { javascript } from '@codemirror/lang-javascript';
|
|
173
173
|
|
|
@@ -176,7 +176,7 @@ export default function App() {
|
|
|
176
176
|
<CodeMirror
|
|
177
177
|
value="console.log('hello world!');"
|
|
178
178
|
height="100%"
|
|
179
|
-
theme={
|
|
179
|
+
theme={oneDark}
|
|
180
180
|
extensions={[javascript({ jsx: true })]}
|
|
181
181
|
onChange={(value, viewUpdate) => {
|
|
182
182
|
console.log('value:', value);
|
|
@@ -283,6 +283,13 @@ export default ReactCodeMirror;
|
|
|
283
283
|
- [@uiw/react-monacoeditor](https://github.com/jaywcjlove/react-monacoeditor): Monaco Editor component for React.
|
|
284
284
|
- [@uiw/react-markdown-editor](https://github.com/uiwjs/react-markdown-editor): A markdown editor with preview, implemented with React.js and TypeScript.
|
|
285
285
|
- [@uiw/react-markdown-preview](https://github.com/uiwjs/react-markdown-preview): React component preview markdown text in web browser.
|
|
286
|
+
- [Online JSON Viewer](https://github.com/uiwjs/json-viewer) Online JSON Viewer, JSON Beautifier to beautify and tree view of JSON data - It works as JSON Pretty Print to pretty print JSON data.
|
|
287
|
+
|
|
288
|
+
## Contributors
|
|
289
|
+
|
|
290
|
+
<a href="https://github.com/uiwjs/react-codemirror/graphs/contributors">
|
|
291
|
+
<img src="https://uiwjs.github.io/react-codemirror/CONTRIBUTORS.svg" />
|
|
292
|
+
</a>
|
|
286
293
|
|
|
287
294
|
## License
|
|
288
295
|
|
package/cjs/index.js
CHANGED
|
@@ -12,6 +12,8 @@ exports.default = void 0;
|
|
|
12
12
|
|
|
13
13
|
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
14
14
|
|
|
15
|
+
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
16
|
+
|
|
15
17
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
16
18
|
|
|
17
19
|
var _react = _interopRequireWildcard(require("react"));
|
|
@@ -77,7 +79,8 @@ var _excluded = ["className", "value", "selection", "extensions", "onChange", "o
|
|
|
77
79
|
|
|
78
80
|
var ReactCodeMirror = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
79
81
|
var className = props.className,
|
|
80
|
-
value = props.value,
|
|
82
|
+
_props$value = props.value,
|
|
83
|
+
value = _props$value === void 0 ? '' : _props$value,
|
|
81
84
|
selection = props.selection,
|
|
82
85
|
_props$extensions = props.extensions,
|
|
83
86
|
extensions = _props$extensions === void 0 ? [] : _props$extensions,
|
|
@@ -132,7 +135,7 @@ var ReactCodeMirror = /*#__PURE__*/_react.default.forwardRef(function (props, re
|
|
|
132
135
|
state: state,
|
|
133
136
|
view: view
|
|
134
137
|
};
|
|
135
|
-
});
|
|
138
|
+
}, [container, state, view]);
|
|
136
139
|
(0, _react.useEffect)(function () {
|
|
137
140
|
setContainer(editor.current);
|
|
138
141
|
return function () {
|
|
@@ -140,7 +143,12 @@ var ReactCodeMirror = /*#__PURE__*/_react.default.forwardRef(function (props, re
|
|
|
140
143
|
view.destroy();
|
|
141
144
|
}
|
|
142
145
|
}; // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
143
|
-
}, []);
|
|
146
|
+
}, []); // check type of value
|
|
147
|
+
|
|
148
|
+
if (typeof value !== 'string') {
|
|
149
|
+
throw new Error("value must be typeof string but got ".concat((0, _typeof2.default)(value)));
|
|
150
|
+
}
|
|
151
|
+
|
|
144
152
|
var defaultClassNames = typeof theme === 'string' ? "cm-theme-".concat(theme) : 'cm-theme';
|
|
145
153
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _objectSpread2.default)({
|
|
146
154
|
ref: editor,
|
package/cjs/index.js.map
CHANGED
|
@@ -36,11 +36,12 @@
|
|
|
36
36
|
"view",
|
|
37
37
|
"setContainer",
|
|
38
38
|
"destroy",
|
|
39
|
+
"Error",
|
|
39
40
|
"defaultClassNames",
|
|
40
41
|
"displayName"
|
|
41
42
|
],
|
|
42
|
-
"mappings": "
|
|
43
|
+
"mappings": "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",
|
|
43
44
|
"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 '@codemirror/view';\nexport * from '@codemirror/basic-setup';\nexport * from '@codemirror/state';\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 /**\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 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 selection,\n onChange,\n onUpdate,\n extensions,\n });\n useImperativeHandle(ref, () => ({ editor: container, state, view }));\n useEffect(() => {\n setContainer(editor.current);\n return () => {\n if (view) {\n view.destroy();\n }\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\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"
|
|
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 '@codemirror/view';\nexport * from '@codemirror/basic-setup';\nexport * from '@codemirror/state';\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 /**\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 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 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 return () => {\n if (view) {\n view.destroy();\n }\n };\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"
|
|
45
46
|
]
|
|
46
47
|
}
|
package/cjs/useCodeMirror.js
CHANGED
|
@@ -40,7 +40,7 @@ function useCodeMirror(props) {
|
|
|
40
40
|
_props$maxHeight = props.maxHeight,
|
|
41
41
|
maxHeight = _props$maxHeight === void 0 ? '' : _props$maxHeight,
|
|
42
42
|
_props$placeholder = props.placeholder,
|
|
43
|
-
|
|
43
|
+
placeholderStr = _props$placeholder === void 0 ? '' : _props$placeholder,
|
|
44
44
|
_props$width = props.width,
|
|
45
45
|
width = _props$width === void 0 ? '' : _props$width,
|
|
46
46
|
_props$minWidth = props.minWidth,
|
|
@@ -50,9 +50,9 @@ function useCodeMirror(props) {
|
|
|
50
50
|
_props$editable = props.editable,
|
|
51
51
|
editable = _props$editable === void 0 ? true : _props$editable,
|
|
52
52
|
_props$indentWithTab = props.indentWithTab,
|
|
53
|
-
|
|
53
|
+
defaultIndentWithTab = _props$indentWithTab === void 0 ? true : _props$indentWithTab,
|
|
54
54
|
_props$basicSetup = props.basicSetup,
|
|
55
|
-
|
|
55
|
+
defaultBasicSetup = _props$basicSetup === void 0 ? true : _props$basicSetup,
|
|
56
56
|
root = props.root;
|
|
57
57
|
|
|
58
58
|
var _useState = (0, _react.useState)(props.container),
|
|
@@ -93,16 +93,16 @@ function useCodeMirror(props) {
|
|
|
93
93
|
|
|
94
94
|
var getExtensions = [updateListener, defaultThemeOption];
|
|
95
95
|
|
|
96
|
-
if (
|
|
96
|
+
if (defaultIndentWithTab) {
|
|
97
97
|
getExtensions.unshift(_view.keymap.of([_commands.indentWithTab]));
|
|
98
98
|
}
|
|
99
99
|
|
|
100
|
-
if (
|
|
100
|
+
if (defaultBasicSetup) {
|
|
101
101
|
getExtensions.unshift(_basicSetup.basicSetup);
|
|
102
102
|
}
|
|
103
103
|
|
|
104
|
-
if (
|
|
105
|
-
getExtensions.unshift((0, _view.placeholder)(
|
|
104
|
+
if (placeholderStr) {
|
|
105
|
+
getExtensions.unshift((0, _view.placeholder)(placeholderStr));
|
|
106
106
|
}
|
|
107
107
|
|
|
108
108
|
switch (theme) {
|
|
@@ -111,7 +111,7 @@ function useCodeMirror(props) {
|
|
|
111
111
|
break;
|
|
112
112
|
|
|
113
113
|
case 'dark':
|
|
114
|
-
getExtensions.push(_themeOneDark.
|
|
114
|
+
getExtensions.push(_themeOneDark.oneDark);
|
|
115
115
|
break;
|
|
116
116
|
|
|
117
117
|
default:
|
|
@@ -178,7 +178,7 @@ function useCodeMirror(props) {
|
|
|
178
178
|
});
|
|
179
179
|
} // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
180
180
|
|
|
181
|
-
}, [theme, extensions, placeholder, height, minHeight, maxHeight, width, minWidth, maxWidth, editable, indentWithTab, basicSetup]);
|
|
181
|
+
}, [theme, extensions, _view.placeholder, height, minHeight, maxHeight, width, minWidth, maxWidth, editable, _commands.indentWithTab, _basicSetup.basicSetup]);
|
|
182
182
|
(0, _react.useEffect)(function () {
|
|
183
183
|
if (autoFocus && view) {
|
|
184
184
|
view.focus();
|
package/cjs/useCodeMirror.js.map
CHANGED
|
@@ -17,12 +17,15 @@
|
|
|
17
17
|
"minHeight",
|
|
18
18
|
"maxHeight",
|
|
19
19
|
"placeholder",
|
|
20
|
+
"placeholderStr",
|
|
20
21
|
"width",
|
|
21
22
|
"minWidth",
|
|
22
23
|
"maxWidth",
|
|
23
24
|
"editable",
|
|
24
25
|
"indentWithTab",
|
|
26
|
+
"defaultIndentWithTab",
|
|
25
27
|
"basicSetup",
|
|
28
|
+
"defaultBasicSetup",
|
|
26
29
|
"root",
|
|
27
30
|
"container",
|
|
28
31
|
"setContainer",
|
|
@@ -41,11 +44,9 @@
|
|
|
41
44
|
"getExtensions",
|
|
42
45
|
"unshift",
|
|
43
46
|
"keymap",
|
|
44
|
-
"defaultIndentWithTab",
|
|
45
|
-
"defaultBasicSetup",
|
|
46
47
|
"push",
|
|
47
48
|
"defaultLightThemeOption",
|
|
48
|
-
"
|
|
49
|
+
"oneDark",
|
|
49
50
|
"concat",
|
|
50
51
|
"stateCurrent",
|
|
51
52
|
"EditorState",
|
|
@@ -65,8 +66,8 @@
|
|
|
65
66
|
"reconfigure",
|
|
66
67
|
"focus"
|
|
67
68
|
],
|
|
68
|
-
"mappings": ";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AAMO,SAASA,aAAT,CAAuBC,KAAvB,EAA6C;AAClD,MACEC,KADF,GAmBID,KAnBJ,CACEC,KADF;AAAA,MAEEC,SAFF,GAmBIF,KAnBJ,CAEEE,SAFF;AAAA,MAGEC,QAHF,GAmBIH,KAnBJ,CAGEG,QAHF;AAAA,MAIEC,QAJF,GAmBIJ,KAnBJ,CAIEI,QAJF;AAAA,0BAmBIJ,KAnBJ,CAKEK,UALF;AAAA,MAKEA,UALF,kCAKe,EALf;AAAA,MAMEC,SANF,GAmBIN,KAnBJ,CAMEM,SANF;AAAA,qBAmBIN,KAnBJ,CAOEO,KAPF;AAAA,MAOEA,KAPF,6BAOU,OAPV;AAAA,sBAmBIP,KAnBJ,CAQEQ,MARF;AAAA,MAQEA,MARF,8BAQW,EARX;AAAA,yBAmBIR,KAnBJ,CASES,SATF;AAAA,MASEA,SATF,iCASc,EATd;AAAA,yBAmBIT,KAnBJ,CAUEU,SAVF;AAAA,MAUEA,SAVF,iCAUc,EAVd;AAAA,2BAmBIV,KAnBJ,CAWEW,WAXF;AAAA,
|
|
69
|
+
"mappings": "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",
|
|
69
70
|
"sourcesContent": [
|
|
70
|
-
"import { useEffect, useState } from 'react';\nimport { basicSetup
|
|
71
|
+
"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 as any,\n root,\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"
|
|
71
72
|
]
|
|
72
73
|
}
|