@uiw/react-codemirror 4.3.2 → 4.4.2
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 +14 -2
- package/cjs/index.js +4 -8
- package/cjs/index.js.map +2 -3
- package/cjs/useCodeMirror.js +22 -25
- package/cjs/useCodeMirror.js.map +8 -6
- package/dist/codemirror.js +8131 -0
- package/dist/codemirror.min.js +2 -0
- package/dist/codemirror.min.js.LICENSE.txt +14 -0
- package/esm/index.js +3 -8
- package/esm/index.js.map +2 -3
- package/esm/useCodeMirror.js +28 -35
- package/esm/useCodeMirror.js.map +8 -7
- package/package.json +17 -18
- package/src/__tests__/index.test.tsx +87 -0
- package/src/index.tsx +2 -7
- package/src/useCodeMirror.ts +29 -33
- package/src/react-app-env.d.ts +0 -1
package/README.md
CHANGED
|
@@ -20,6 +20,7 @@ CodeMirror component for React. Demo Preview: [@uiwjs.github.io/react-codemirror
|
|
|
20
20
|
🌱 Versions after `@uiw/react-codemirror@v4`<!--rehype:style=background-color: #ffe564; padding: 1px 4px;--> use [codemirror 6](https://codemirror.net/6/). [#88](https://github.com/uiwjs/react-codemirror/issues/88#issuecomment-914185563).
|
|
21
21
|
⚛️ Support the features of React Hook(requires React 16.8+).
|
|
22
22
|
📚 Use Typescript to write, better code hints.
|
|
23
|
+
🌐 The bundled version supports use directly in the browser [#267](https://github.com/uiwjs/react-codemirror/issues/267#issuecomment-1041227592).
|
|
23
24
|
🌎 There are better [sample previews](https://uiwjs.github.io/react-codemirror).
|
|
24
25
|
|
|
25
26
|
## Install
|
|
@@ -167,7 +168,7 @@ export default function App() {
|
|
|
167
168
|
## Using custom theme
|
|
168
169
|
|
|
169
170
|
```jsx
|
|
170
|
-
import {
|
|
171
|
+
import { oneDark } from '@codemirror/theme-one-dark';
|
|
171
172
|
import CodeMirror from '@uiw/react-codemirror';
|
|
172
173
|
import { javascript } from '@codemirror/lang-javascript';
|
|
173
174
|
|
|
@@ -176,7 +177,7 @@ export default function App() {
|
|
|
176
177
|
<CodeMirror
|
|
177
178
|
value="console.log('hello world!');"
|
|
178
179
|
height="100%"
|
|
179
|
-
theme={
|
|
180
|
+
theme={oneDark}
|
|
180
181
|
extensions={[javascript({ jsx: true })]}
|
|
181
182
|
onChange={(value, viewUpdate) => {
|
|
182
183
|
console.log('value:', value);
|
|
@@ -283,6 +284,17 @@ export default ReactCodeMirror;
|
|
|
283
284
|
- [@uiw/react-monacoeditor](https://github.com/jaywcjlove/react-monacoeditor): Monaco Editor component for React.
|
|
284
285
|
- [@uiw/react-markdown-editor](https://github.com/uiwjs/react-markdown-editor): A markdown editor with preview, implemented with React.js and TypeScript.
|
|
285
286
|
- [@uiw/react-markdown-preview](https://github.com/uiwjs/react-markdown-preview): React component preview markdown text in web browser.
|
|
287
|
+
- [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.
|
|
288
|
+
|
|
289
|
+
## Contributors
|
|
290
|
+
|
|
291
|
+
As always, thanks to our amazing contributors!
|
|
292
|
+
|
|
293
|
+
<a href="https://github.com/uiwjs/react-codemirror/graphs/contributors">
|
|
294
|
+
<img src="https://uiwjs.github.io/react-codemirror/CONTRIBUTORS.svg" />
|
|
295
|
+
</a>
|
|
296
|
+
|
|
297
|
+
Made with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).
|
|
286
298
|
|
|
287
299
|
## License
|
|
288
300
|
|
package/cjs/index.js
CHANGED
|
@@ -79,7 +79,8 @@ var _excluded = ["className", "value", "selection", "extensions", "onChange", "o
|
|
|
79
79
|
|
|
80
80
|
var ReactCodeMirror = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
81
81
|
var className = props.className,
|
|
82
|
-
value = props.value,
|
|
82
|
+
_props$value = props.value,
|
|
83
|
+
value = _props$value === void 0 ? '' : _props$value,
|
|
83
84
|
selection = props.selection,
|
|
84
85
|
_props$extensions = props.extensions,
|
|
85
86
|
extensions = _props$extensions === void 0 ? [] : _props$extensions,
|
|
@@ -134,14 +135,9 @@ var ReactCodeMirror = /*#__PURE__*/_react.default.forwardRef(function (props, re
|
|
|
134
135
|
state: state,
|
|
135
136
|
view: view
|
|
136
137
|
};
|
|
137
|
-
});
|
|
138
|
+
}, [container, state, view]);
|
|
138
139
|
(0, _react.useEffect)(function () {
|
|
139
|
-
setContainer(editor.current);
|
|
140
|
-
return function () {
|
|
141
|
-
if (view) {
|
|
142
|
-
view.destroy();
|
|
143
|
-
}
|
|
144
|
-
}; // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
140
|
+
setContainer(editor.current); // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
145
141
|
}, []); // check type of value
|
|
146
142
|
|
|
147
143
|
if (typeof value !== 'string') {
|
package/cjs/index.js.map
CHANGED
|
@@ -35,13 +35,12 @@
|
|
|
35
35
|
"state",
|
|
36
36
|
"view",
|
|
37
37
|
"setContainer",
|
|
38
|
-
"destroy",
|
|
39
38
|
"Error",
|
|
40
39
|
"defaultClassNames",
|
|
41
40
|
"displayName"
|
|
42
41
|
],
|
|
43
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;;AAGA;;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;AAHA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AA8DA,IAAMA,eAAe,gBAAGC,eAAMC,UAAN,CAA2D,UAACC,KAAD,EAAQC,GAAR,EAAgB;AACjG,MACEC,SADF,GAqBIF,KArBJ,CACEE,SADF;AAAA,
|
|
42
|
+
"mappings": "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",
|
|
44
43
|
"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 '@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
|
|
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 }), [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"
|
|
46
45
|
]
|
|
47
46
|
}
|
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) {
|
|
@@ -153,22 +153,24 @@ function useCodeMirror(props) {
|
|
|
153
153
|
return function () {
|
|
154
154
|
if (view) {
|
|
155
155
|
view.destroy();
|
|
156
|
+
setView(undefined);
|
|
156
157
|
}
|
|
157
158
|
};
|
|
158
159
|
}, [view]);
|
|
159
160
|
(0, _react.useEffect)(function () {
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
161
|
+
return autoFocus && view && view.focus();
|
|
162
|
+
}, [autoFocus, view]);
|
|
163
|
+
(0, _react.useEffect)(function () {
|
|
164
|
+
var currentValue = view ? view.state.doc.toString() : '';
|
|
165
|
+
|
|
166
|
+
if (view && value !== currentValue) {
|
|
167
|
+
view.dispatch({
|
|
168
|
+
changes: {
|
|
169
|
+
from: 0,
|
|
170
|
+
to: currentValue.length,
|
|
171
|
+
insert: value || ''
|
|
172
|
+
}
|
|
173
|
+
});
|
|
172
174
|
}
|
|
173
175
|
}, [value, view]);
|
|
174
176
|
(0, _react.useEffect)(function () {
|
|
@@ -178,12 +180,7 @@ function useCodeMirror(props) {
|
|
|
178
180
|
});
|
|
179
181
|
} // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
180
182
|
|
|
181
|
-
}, [theme, extensions,
|
|
182
|
-
(0, _react.useEffect)(function () {
|
|
183
|
-
if (autoFocus && view) {
|
|
184
|
-
view.focus();
|
|
185
|
-
}
|
|
186
|
-
}, [autoFocus, view]);
|
|
183
|
+
}, [theme, extensions, height, minHeight, maxHeight, width, placeholderStr, minWidth, maxWidth, editable, defaultIndentWithTab, defaultBasicSetup]);
|
|
187
184
|
return {
|
|
188
185
|
state: state,
|
|
189
186
|
setState: setState,
|
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,8 +44,6 @@
|
|
|
41
44
|
"getExtensions",
|
|
42
45
|
"unshift",
|
|
43
46
|
"keymap",
|
|
44
|
-
"defaultIndentWithTab",
|
|
45
|
-
"defaultBasicSetup",
|
|
46
47
|
"push",
|
|
47
48
|
"defaultLightThemeOption",
|
|
48
49
|
"oneDark",
|
|
@@ -53,6 +54,8 @@
|
|
|
53
54
|
"viewCurrent",
|
|
54
55
|
"parent",
|
|
55
56
|
"destroy",
|
|
57
|
+
"undefined",
|
|
58
|
+
"focus",
|
|
56
59
|
"currentValue",
|
|
57
60
|
"dispatch",
|
|
58
61
|
"changes",
|
|
@@ -62,11 +65,10 @@
|
|
|
62
65
|
"insert",
|
|
63
66
|
"effects",
|
|
64
67
|
"StateEffect",
|
|
65
|
-
"reconfigure"
|
|
66
|
-
"focus"
|
|
68
|
+
"reconfigure"
|
|
67
69
|
],
|
|
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,
|
|
70
|
+
"mappings": "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",
|
|
69
71
|
"sourcesContent": [
|
|
70
|
-
"import { useEffect, useState } from 'react';\nimport { basicSetup
|
|
72
|
+
"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 // 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(() => autoFocus && view && (view.focus() as any), [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"
|
|
71
73
|
]
|
|
72
74
|
}
|