@uiw/react-codemirror 4.0.7 → 4.2.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 +57 -1
- package/cjs/index.d.ts +5 -0
- package/cjs/index.js +3 -1
- package/cjs/index.js.map +3 -2
- package/cjs/useCodeMirror.js +14 -9
- package/cjs/useCodeMirror.js.map +3 -2
- package/esm/index.d.ts +5 -0
- package/esm/index.js +4 -2
- package/esm/index.js.map +3 -2
- package/esm/useCodeMirror.js +14 -9
- package/esm/useCodeMirror.js.map +3 -2
- package/package.json +22 -23
- package/src/index.tsx +7 -0
- package/src/useCodeMirror.ts +7 -3
package/README.md
CHANGED
|
@@ -94,6 +94,47 @@ export default function App() {
|
|
|
94
94
|
> - ~~`@codemirror/legacy-modes/mode/sql`~~ => [`@codemirror/lang-sql`](https://www.npmjs.com/package/@codemirror/lang-sql)
|
|
95
95
|
> - ~~`@codemirror/legacy-modes/mode/xml`~~ => [`@codemirror/lang-xml`](https://www.npmjs.com/package/@codemirror/lang-xml)
|
|
96
96
|
|
|
97
|
+
### Markdown Example
|
|
98
|
+
|
|
99
|
+
Markdown language code is automatically highlighted.
|
|
100
|
+
|
|
101
|
+
[](https://codesandbox.io/embed/react-codemirror-example-codemirror-6-markdown-auto-languages-iudnj?fontsize=14&hidenavigation=1&theme=dark)
|
|
102
|
+
|
|
103
|
+
```jsx
|
|
104
|
+
import CodeMirror from '@uiw/react-codemirror';
|
|
105
|
+
import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
|
|
106
|
+
import { languages } from '@codemirror/language-data';
|
|
107
|
+
|
|
108
|
+
const code = `## Title
|
|
109
|
+
|
|
110
|
+
\`\`\`jsx
|
|
111
|
+
function Demo() {
|
|
112
|
+
return <div>demo</div>
|
|
113
|
+
}
|
|
114
|
+
\`\`\`
|
|
115
|
+
|
|
116
|
+
\`\`\`bash
|
|
117
|
+
# Not dependent on uiw.
|
|
118
|
+
npm install @codemirror/lang-markdown --save
|
|
119
|
+
npm install @codemirror/language-data --save
|
|
120
|
+
\`\`\`
|
|
121
|
+
|
|
122
|
+
[weisit ulr](https://uiwjs.github.io/react-codemirror/)
|
|
123
|
+
|
|
124
|
+
\`\`\`go
|
|
125
|
+
package main
|
|
126
|
+
import "fmt"
|
|
127
|
+
func main() {
|
|
128
|
+
fmt.Println("Hello, 世界")
|
|
129
|
+
}
|
|
130
|
+
\`\`\`
|
|
131
|
+
`;
|
|
132
|
+
|
|
133
|
+
export default function App() {
|
|
134
|
+
return <CodeMirror value={code} extensions={[markdown({ base: markdownLanguage, codeLanguages: languages })]} />;
|
|
135
|
+
}
|
|
136
|
+
```
|
|
137
|
+
|
|
97
138
|
## Support Hook
|
|
98
139
|
|
|
99
140
|
[](https://codesandbox.io/embed/react-codemirror-example-codemirror-6-hook-yr4vg?fontsize=14&hidenavigation=1&theme=dark)
|
|
@@ -139,7 +180,17 @@ import { EditorView, ViewUpdate } from '@codemirror/view';
|
|
|
139
180
|
export * from '@codemirror/view';
|
|
140
181
|
export * from '@codemirror/basic-setup';
|
|
141
182
|
export * from '@codemirror/state';
|
|
142
|
-
export
|
|
183
|
+
export interface UseCodeMirror extends ReactCodeMirrorProps {
|
|
184
|
+
container?: HTMLDivElement | null;
|
|
185
|
+
}
|
|
186
|
+
export declare function useCodeMirror(props: UseCodeMirror): {
|
|
187
|
+
state: EditorState | undefined;
|
|
188
|
+
setState: import('react').Dispatch<import('react').SetStateAction<EditorState | undefined>>;
|
|
189
|
+
view: EditorView | undefined;
|
|
190
|
+
setView: import('react').Dispatch<import('react').SetStateAction<EditorView | undefined>>;
|
|
191
|
+
container: HTMLDivElement | null | undefined;
|
|
192
|
+
setContainer: import('react').Dispatch<import('react').SetStateAction<HTMLDivElement | null | undefined>>;
|
|
193
|
+
};
|
|
143
194
|
export interface ReactCodeMirrorProps
|
|
144
195
|
extends Omit<EditorStateConfig, 'doc' | 'extensions'>,
|
|
145
196
|
Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'placeholder'> {
|
|
@@ -186,6 +237,11 @@ export interface ReactCodeMirrorProps
|
|
|
186
237
|
* or objects with an extension in its `extension` property. Extensions can be nested in arrays arbitrarily deep—they will be flattened when processed.
|
|
187
238
|
*/
|
|
188
239
|
extensions?: Extension[];
|
|
240
|
+
/**
|
|
241
|
+
* 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.
|
|
242
|
+
* Originally from the [config of EditorView](https://codemirror.net/6/docs/ref/#view.EditorView.constructor%5Econfig.root)
|
|
243
|
+
*/
|
|
244
|
+
root?: ShadowRoot | Document;
|
|
189
245
|
}
|
|
190
246
|
export interface ReactCodeMirrorRef {
|
|
191
247
|
editor?: HTMLDivElement | null;
|
package/cjs/index.d.ts
CHANGED
|
@@ -49,6 +49,11 @@ export interface ReactCodeMirrorProps extends Omit<EditorStateConfig, 'doc' | 'e
|
|
|
49
49
|
* or objects with an extension in its `extension` property. Extensions can be nested in arrays arbitrarily deep—they will be flattened when processed.
|
|
50
50
|
*/
|
|
51
51
|
extensions?: Extension[];
|
|
52
|
+
/**
|
|
53
|
+
* 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.
|
|
54
|
+
* Originally from the [config of EditorView](https://codemirror.net/6/docs/ref/#view.EditorView.constructor%5Econfig.root)
|
|
55
|
+
*/
|
|
56
|
+
root?: ShadowRoot | Document;
|
|
52
57
|
}
|
|
53
58
|
export interface ReactCodeMirrorRef {
|
|
54
59
|
editor?: HTMLDivElement | null;
|
package/cjs/index.js
CHANGED
|
@@ -73,7 +73,7 @@ Object.keys(_state).forEach(function (key) {
|
|
|
73
73
|
}
|
|
74
74
|
});
|
|
75
75
|
});
|
|
76
|
-
var _excluded = ["className", "value", "selection", "extensions", "onChange", "onUpdate", "autoFocus", "theme", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "basicSetup", "placeholder", "indentWithTab", "editable"];
|
|
76
|
+
var _excluded = ["className", "value", "selection", "extensions", "onChange", "onUpdate", "autoFocus", "theme", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "basicSetup", "placeholder", "indentWithTab", "editable", "root"];
|
|
77
77
|
|
|
78
78
|
var ReactCodeMirror = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
79
79
|
var className = props.className,
|
|
@@ -96,11 +96,13 @@ var ReactCodeMirror = /*#__PURE__*/_react.default.forwardRef(function (props, re
|
|
|
96
96
|
placeholder = props.placeholder,
|
|
97
97
|
indentWithTab = props.indentWithTab,
|
|
98
98
|
editable = props.editable,
|
|
99
|
+
root = props.root,
|
|
99
100
|
other = (0, _objectWithoutProperties2.default)(props, _excluded);
|
|
100
101
|
var editor = (0, _react.useRef)(null);
|
|
101
102
|
|
|
102
103
|
var _useCodeMirror = (0, _useCodeMirror2.useCodeMirror)({
|
|
103
104
|
container: editor.current,
|
|
105
|
+
root: root,
|
|
104
106
|
value: value,
|
|
105
107
|
autoFocus: autoFocus,
|
|
106
108
|
theme: theme,
|
package/cjs/index.js.map
CHANGED
|
@@ -27,6 +27,7 @@
|
|
|
27
27
|
"placeholder",
|
|
28
28
|
"indentWithTab",
|
|
29
29
|
"editable",
|
|
30
|
+
"root",
|
|
30
31
|
"other",
|
|
31
32
|
"editor",
|
|
32
33
|
"container",
|
|
@@ -37,8 +38,8 @@
|
|
|
37
38
|
"destroy",
|
|
38
39
|
"displayName"
|
|
39
40
|
],
|
|
40
|
-
"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;;;
|
|
41
|
+
"mappings": "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",
|
|
41
42
|
"sourcesContent": [
|
|
42
|
-
"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` Defaults to `light`.\n * @default light\n */\n theme?: 'light' | 'dark';\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\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 ...other\n } = props;\n const editor = useRef<HTMLDivElement>(null);\n const { state, view, container, setContainer } = useCodeMirror({\n container: editor.current,\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 return <div ref={editor} className={`cm-theme-${theme}${className ? ` ${className}` : ''}`} {...other}></div>;\n});\n\nReactCodeMirror.displayName = 'CodeMirror';\n\nexport default ReactCodeMirror;\n"
|
|
43
|
+
"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` Defaults to `light`.\n * @default light\n */\n theme?: 'light' | 'dark';\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 return <div ref={editor} className={`cm-theme-${theme}${className ? ` ${className}` : ''}`} {...other}></div>;\n});\n\nReactCodeMirror.displayName = 'CodeMirror';\n\nexport default ReactCodeMirror;\n"
|
|
43
44
|
]
|
|
44
45
|
}
|
package/cjs/useCodeMirror.js
CHANGED
|
@@ -52,7 +52,8 @@ function useCodeMirror(props) {
|
|
|
52
52
|
_props$indentWithTab = props.indentWithTab,
|
|
53
53
|
indentWithTab = _props$indentWithTab === void 0 ? true : _props$indentWithTab,
|
|
54
54
|
_props$basicSetup = props.basicSetup,
|
|
55
|
-
basicSetup = _props$basicSetup === void 0 ? true : _props$basicSetup
|
|
55
|
+
basicSetup = _props$basicSetup === void 0 ? true : _props$basicSetup,
|
|
56
|
+
root = props.root;
|
|
56
57
|
|
|
57
58
|
var _useState = (0, _react.useState)(props.container),
|
|
58
59
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
@@ -128,7 +129,8 @@ function useCodeMirror(props) {
|
|
|
128
129
|
if (!view) {
|
|
129
130
|
var viewCurrent = new _view.EditorView({
|
|
130
131
|
state: stateCurrent,
|
|
131
|
-
parent: container
|
|
132
|
+
parent: container,
|
|
133
|
+
root: root
|
|
132
134
|
});
|
|
133
135
|
setView(viewCurrent);
|
|
134
136
|
}
|
|
@@ -145,13 +147,16 @@ function useCodeMirror(props) {
|
|
|
145
147
|
(0, _react.useEffect)(function () {
|
|
146
148
|
if (view) {
|
|
147
149
|
var currentValue = view.state.doc.toString();
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
150
|
+
|
|
151
|
+
if (value !== currentValue) {
|
|
152
|
+
view.dispatch({
|
|
153
|
+
changes: {
|
|
154
|
+
from: 0,
|
|
155
|
+
to: currentValue.length,
|
|
156
|
+
insert: value || ''
|
|
157
|
+
}
|
|
158
|
+
});
|
|
159
|
+
}
|
|
155
160
|
}
|
|
156
161
|
}, [value, view]);
|
|
157
162
|
(0, _react.useEffect)(function () {
|
package/cjs/useCodeMirror.js.map
CHANGED
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
"editable",
|
|
24
24
|
"indentWithTab",
|
|
25
25
|
"basicSetup",
|
|
26
|
+
"root",
|
|
26
27
|
"container",
|
|
27
28
|
"setContainer",
|
|
28
29
|
"view",
|
|
@@ -64,8 +65,8 @@
|
|
|
64
65
|
"reconfigure",
|
|
65
66
|
"focus"
|
|
66
67
|
],
|
|
67
|
-
"mappings": ";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AAMO,SAASA,aAAT,CAAuBC,KAAvB,EAA6C;AAClD,MACEC,KADF,
|
|
68
|
+
"mappings": "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",
|
|
68
69
|
"sourcesContent": [
|
|
69
|
-
"import { useEffect, useState } from 'react';\nimport { basicSetup as defaultBasicSetup } from '@codemirror/basic-setup';\nimport { EditorState, StateEffect } from '@codemirror/state';\nimport { indentWithTab as defaultIndentWithTab } from '@codemirror/commands';\nimport { EditorView, keymap, ViewUpdate, placeholder as extendPlaceholder } from '@codemirror/view';\nimport { oneDarkTheme } 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 = '',\n width = '',\n minWidth = '',\n maxWidth = '',\n editable = true,\n indentWithTab = true,\n basicSetup = true,\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 (indentWithTab) {\n getExtensions.unshift(keymap.of([defaultIndentWithTab]));\n }\n if (basicSetup) {\n getExtensions.unshift(defaultBasicSetup);\n }\n\n if (placeholder) {\n getExtensions.unshift(extendPlaceholder(placeholder));\n }\n\n theme === 'light' ? getExtensions.push(defaultLightThemeOption) : getExtensions.push(oneDarkTheme);\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 });\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 view.dispatch({\n
|
|
70
|
+
"import { useEffect, useState } from 'react';\nimport { basicSetup as defaultBasicSetup } from '@codemirror/basic-setup';\nimport { EditorState, StateEffect } from '@codemirror/state';\nimport { indentWithTab as defaultIndentWithTab } from '@codemirror/commands';\nimport { EditorView, keymap, ViewUpdate, placeholder as extendPlaceholder } from '@codemirror/view';\nimport { oneDarkTheme } 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 = '',\n width = '',\n minWidth = '',\n maxWidth = '',\n editable = true,\n indentWithTab = true,\n basicSetup = 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 (indentWithTab) {\n getExtensions.unshift(keymap.of([defaultIndentWithTab]));\n }\n if (basicSetup) {\n getExtensions.unshift(defaultBasicSetup);\n }\n\n if (placeholder) {\n getExtensions.unshift(extendPlaceholder(placeholder));\n }\n\n theme === 'light' ? getExtensions.push(defaultLightThemeOption) : getExtensions.push(oneDarkTheme);\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"
|
|
70
71
|
]
|
|
71
72
|
}
|
package/esm/index.d.ts
CHANGED
|
@@ -49,6 +49,11 @@ export interface ReactCodeMirrorProps extends Omit<EditorStateConfig, 'doc' | 'e
|
|
|
49
49
|
* or objects with an extension in its `extension` property. Extensions can be nested in arrays arbitrarily deep—they will be flattened when processed.
|
|
50
50
|
*/
|
|
51
51
|
extensions?: Extension[];
|
|
52
|
+
/**
|
|
53
|
+
* 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.
|
|
54
|
+
* Originally from the [config of EditorView](https://codemirror.net/6/docs/ref/#view.EditorView.constructor%5Econfig.root)
|
|
55
|
+
*/
|
|
56
|
+
root?: ShadowRoot | Document;
|
|
52
57
|
}
|
|
53
58
|
export interface ReactCodeMirrorRef {
|
|
54
59
|
editor?: HTMLDivElement | null;
|
package/esm/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
|
|
3
|
-
var _excluded = ["className", "value", "selection", "extensions", "onChange", "onUpdate", "autoFocus", "theme", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "basicSetup", "placeholder", "indentWithTab", "editable"];
|
|
3
|
+
var _excluded = ["className", "value", "selection", "extensions", "onChange", "onUpdate", "autoFocus", "theme", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "basicSetup", "placeholder", "indentWithTab", "editable", "root"];
|
|
4
4
|
import React, { useEffect, useRef, useImperativeHandle } from 'react';
|
|
5
5
|
import { useCodeMirror } from './useCodeMirror';
|
|
6
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
@@ -27,7 +27,8 @@ var ReactCodeMirror = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
27
27
|
basicSetup,
|
|
28
28
|
placeholder,
|
|
29
29
|
indentWithTab,
|
|
30
|
-
editable
|
|
30
|
+
editable,
|
|
31
|
+
root
|
|
31
32
|
} = props,
|
|
32
33
|
other = _objectWithoutPropertiesLoose(props, _excluded);
|
|
33
34
|
|
|
@@ -39,6 +40,7 @@ var ReactCodeMirror = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
39
40
|
setContainer
|
|
40
41
|
} = useCodeMirror({
|
|
41
42
|
container: editor.current,
|
|
43
|
+
root,
|
|
42
44
|
value,
|
|
43
45
|
autoFocus,
|
|
44
46
|
theme,
|
package/esm/index.js.map
CHANGED
|
@@ -31,6 +31,7 @@
|
|
|
31
31
|
"placeholder",
|
|
32
32
|
"indentWithTab",
|
|
33
33
|
"editable",
|
|
34
|
+
"root",
|
|
34
35
|
"other",
|
|
35
36
|
"editor",
|
|
36
37
|
"state",
|
|
@@ -41,8 +42,8 @@
|
|
|
41
42
|
"destroy",
|
|
42
43
|
"displayName"
|
|
43
44
|
],
|
|
44
|
-
"mappings": ";;;AAAA,OAAOA,KAAP,IAAgBC,SAAhB,EAA2BC,MAA3B,EAAmCC,mBAAnC,QAA8D,OAA9D;AAGA,SAASC,aAAT,QAA8B,iBAA9B;;AAEA,cAAc,kBAAd;AACA,cAAc,yBAAd;AACA,cAAc,mBAAd;AACA,cAAc,iBAAd;
|
|
45
|
+
"mappings": ";;;AAAA,OAAOA,KAAP,IAAgBC,SAAhB,EAA2BC,MAA3B,EAAmCC,mBAAnC,QAA8D,OAA9D;AAGA,SAASC,aAAT,QAA8B,iBAA9B;;AAEA,cAAc,kBAAd;AACA,cAAc,yBAAd;AACA,cAAc,mBAAd;AACA,cAAc,iBAAd;AA6DA,IAAMC,eAAe,gBAAGL,KAAK,CAACM,UAAN,CAA2D,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACjG,MAAM;AACJC,IAAAA,SADI;AAEJC,IAAAA,KAFI;AAGJC,IAAAA,SAHI;AAIJC,IAAAA,UAAU,GAAG,EAJT;AAKJC,IAAAA,QALI;AAMJC,IAAAA,QANI;AAOJC,IAAAA,SAPI;AAQJC,IAAAA,KAAK,GAAG,OARJ;AASJC,IAAAA,MATI;AAUJC,IAAAA,SAVI;AAWJC,IAAAA,SAXI;AAYJC,IAAAA,KAZI;AAaJC,IAAAA,QAbI;AAcJC,IAAAA,QAdI;AAeJC,IAAAA,UAfI;AAgBJC,IAAAA,WAhBI;AAiBJC,IAAAA,aAjBI;AAkBJC,IAAAA,QAlBI;AAmBJC,IAAAA;AAnBI,MAqBFpB,KArBJ;AAAA,MAoBKqB,KApBL,iCAqBIrB,KArBJ;;AAsBA,MAAMsB,MAAM,GAAG3B,MAAM,CAAiB,IAAjB,CAArB;AACA,MAAM;AAAE4B,IAAAA,KAAF;AAASC,IAAAA,IAAT;AAAeC,IAAAA,SAAf;AAA0BC,IAAAA;AAA1B,MAA2C7B,aAAa,CAAC;AAC7D4B,IAAAA,SAAS,EAAEH,MAAM,CAACK,OAD2C;AAE7DP,IAAAA,IAF6D;AAG7DjB,IAAAA,KAH6D;AAI7DK,IAAAA,SAJ6D;AAK7DC,IAAAA,KAL6D;AAM7DC,IAAAA,MAN6D;AAO7DC,IAAAA,SAP6D;AAQ7DC,IAAAA,SAR6D;AAS7DC,IAAAA,KAT6D;AAU7DC,IAAAA,QAV6D;AAW7DC,IAAAA,QAX6D;AAY7DC,IAAAA,UAZ6D;AAa7DC,IAAAA,WAb6D;AAc7DC,IAAAA,aAd6D;AAe7DC,IAAAA,QAf6D;AAgB7Df,IAAAA,SAhB6D;AAiB7DE,IAAAA,QAjB6D;AAkB7DC,IAAAA,QAlB6D;AAmB7DF,IAAAA;AAnB6D,GAAD,CAA9D;AAqBAT,EAAAA,mBAAmB,CAACK,GAAD,EAAM,OAAO;AAAEqB,IAAAA,MAAM,EAAEG,SAAV;AAAqBF,IAAAA,KAArB;AAA4BC,IAAAA;AAA5B,GAAP,CAAN,CAAnB;AACA9B,EAAAA,SAAS,CAAC,MAAM;AACdgC,IAAAA,YAAY,CAACJ,MAAM,CAACK,OAAR,CAAZ;AACA,WAAO,MAAM;AACX,UAAIH,IAAJ,EAAU;AACRA,QAAAA,IAAI,CAACI,OAAL;AACD;AACF,KAJD,CAFc,CAOd;AACD,GARQ,EAQN,EARM,CAAT;AAUA,sBAAO;AAAK,IAAA,GAAG,EAAEN,MAAV;AAAkB,IAAA,SAAS,gBAAcb,KAAd,IAAsBP,SAAS,SAAOA,SAAP,GAAqB,EAApD;AAA3B,KAAyFmB,KAAzF,EAAP;AACD,CAzDuB,CAAxB;AA2DAvB,eAAe,CAAC+B,WAAhB,GAA8B,YAA9B;AAEA,eAAe/B,eAAf",
|
|
45
46
|
"sourcesContent": [
|
|
46
|
-
"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` Defaults to `light`.\n * @default light\n */\n theme?: 'light' | 'dark';\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\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 ...other\n } = props;\n const editor = useRef<HTMLDivElement>(null);\n const { state, view, container, setContainer } = useCodeMirror({\n container: editor.current,\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 return <div ref={editor} className={`cm-theme-${theme}${className ? ` ${className}` : ''}`} {...other}></div>;\n});\n\nReactCodeMirror.displayName = 'CodeMirror';\n\nexport default ReactCodeMirror;\n"
|
|
47
|
+
"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` Defaults to `light`.\n * @default light\n */\n theme?: 'light' | 'dark';\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 return <div ref={editor} className={`cm-theme-${theme}${className ? ` ${className}` : ''}`} {...other}></div>;\n});\n\nReactCodeMirror.displayName = 'CodeMirror';\n\nexport default ReactCodeMirror;\n"
|
|
47
48
|
]
|
|
48
49
|
}
|
package/esm/useCodeMirror.js
CHANGED
|
@@ -23,7 +23,8 @@ export function useCodeMirror(props) {
|
|
|
23
23
|
maxWidth = '',
|
|
24
24
|
editable = true,
|
|
25
25
|
indentWithTab = true,
|
|
26
|
-
basicSetup = true
|
|
26
|
+
basicSetup = true,
|
|
27
|
+
root
|
|
27
28
|
} = props;
|
|
28
29
|
var [container, setContainer] = useState(props.container);
|
|
29
30
|
var [view, setView] = useState();
|
|
@@ -84,7 +85,8 @@ export function useCodeMirror(props) {
|
|
|
84
85
|
if (!view) {
|
|
85
86
|
var viewCurrent = new EditorView({
|
|
86
87
|
state: stateCurrent,
|
|
87
|
-
parent: container
|
|
88
|
+
parent: container,
|
|
89
|
+
root
|
|
88
90
|
});
|
|
89
91
|
setView(viewCurrent);
|
|
90
92
|
}
|
|
@@ -101,13 +103,16 @@ export function useCodeMirror(props) {
|
|
|
101
103
|
useEffect(() => {
|
|
102
104
|
if (view) {
|
|
103
105
|
var currentValue = view.state.doc.toString();
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
106
|
+
|
|
107
|
+
if (value !== currentValue) {
|
|
108
|
+
view.dispatch({
|
|
109
|
+
changes: {
|
|
110
|
+
from: 0,
|
|
111
|
+
to: currentValue.length,
|
|
112
|
+
insert: value || ''
|
|
113
|
+
}
|
|
114
|
+
});
|
|
115
|
+
}
|
|
111
116
|
}
|
|
112
117
|
}, [value, view]);
|
|
113
118
|
useEffect(() => {
|
package/esm/useCodeMirror.js.map
CHANGED
|
@@ -34,6 +34,7 @@
|
|
|
34
34
|
"minWidth",
|
|
35
35
|
"maxWidth",
|
|
36
36
|
"editable",
|
|
37
|
+
"root",
|
|
37
38
|
"container",
|
|
38
39
|
"setContainer",
|
|
39
40
|
"view",
|
|
@@ -67,8 +68,8 @@
|
|
|
67
68
|
"reconfigure",
|
|
68
69
|
"focus"
|
|
69
70
|
],
|
|
70
|
-
"mappings": "AAAA,SAASA,SAAT,EAAoBC,QAApB,QAAoC,OAApC;AACA,SAASC,UAAU,IAAIC,iBAAvB,QAAgD,yBAAhD;AACA,SAASC,WAAT,EAAsBC,WAAtB,QAAyC,mBAAzC;AACA,SAASC,aAAa,IAAIC,oBAA1B,QAAsD,sBAAtD;AACA,SAASC,UAAT,EAAqBC,MAArB,EAAyCC,WAAW,IAAIC,iBAAxD,QAAiF,kBAAjF;AACA,SAASC,YAAT,QAA6B,4BAA7B;AAEA,SAASC,uBAAT,QAAwC,eAAxC;AAMA,OAAO,SAASC,aAAT,CAAuBC,KAAvB,EAA6C;AAClD,MAAM;AACJC,IAAAA,KADI;AAEJC,IAAAA,SAFI;AAGJC,IAAAA,QAHI;AAIJC,IAAAA,QAJI;AAKJC,IAAAA,UAAU,GAAG,EALT;AAMJC,IAAAA,SANI;AAOJC,IAAAA,KAAK,GAAG,OAPJ;AAQJC,IAAAA,MAAM,GAAG,EARL;AASJC,IAAAA,SAAS,GAAG,EATR;AAUJC,IAAAA,SAAS,GAAG,EAVR;AAWJf,IAAAA,WAAW,GAAG,EAXV;AAYJgB,IAAAA,KAAK,GAAG,EAZJ;AAaJC,IAAAA,QAAQ,GAAG,EAbP;AAcJC,IAAAA,QAAQ,GAAG,EAdP;AAeJC,IAAAA,QAAQ,GAAG,IAfP;AAgBJvB,IAAAA,aAAa,GAAG,IAhBZ;AAiBJJ,IAAAA,UAAU,GAAG;
|
|
71
|
+
"mappings": "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",
|
|
71
72
|
"sourcesContent": [
|
|
72
|
-
"import { useEffect, useState } from 'react';\nimport { basicSetup as defaultBasicSetup } from '@codemirror/basic-setup';\nimport { EditorState, StateEffect } from '@codemirror/state';\nimport { indentWithTab as defaultIndentWithTab } from '@codemirror/commands';\nimport { EditorView, keymap, ViewUpdate, placeholder as extendPlaceholder } from '@codemirror/view';\nimport { oneDarkTheme } 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 = '',\n width = '',\n minWidth = '',\n maxWidth = '',\n editable = true,\n indentWithTab = true,\n basicSetup = true,\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 (indentWithTab) {\n getExtensions.unshift(keymap.of([defaultIndentWithTab]));\n }\n if (basicSetup) {\n getExtensions.unshift(defaultBasicSetup);\n }\n\n if (placeholder) {\n getExtensions.unshift(extendPlaceholder(placeholder));\n }\n\n theme === 'light' ? getExtensions.push(defaultLightThemeOption) : getExtensions.push(oneDarkTheme);\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 });\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 view.dispatch({\n
|
|
73
|
+
"import { useEffect, useState } from 'react';\nimport { basicSetup as defaultBasicSetup } from '@codemirror/basic-setup';\nimport { EditorState, StateEffect } from '@codemirror/state';\nimport { indentWithTab as defaultIndentWithTab } from '@codemirror/commands';\nimport { EditorView, keymap, ViewUpdate, placeholder as extendPlaceholder } from '@codemirror/view';\nimport { oneDarkTheme } 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 = '',\n width = '',\n minWidth = '',\n maxWidth = '',\n editable = true,\n indentWithTab = true,\n basicSetup = 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 (indentWithTab) {\n getExtensions.unshift(keymap.of([defaultIndentWithTab]));\n }\n if (basicSetup) {\n getExtensions.unshift(defaultBasicSetup);\n }\n\n if (placeholder) {\n getExtensions.unshift(extendPlaceholder(placeholder));\n }\n\n theme === 'light' ? getExtensions.push(defaultLightThemeOption) : getExtensions.push(oneDarkTheme);\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"
|
|
73
74
|
]
|
|
74
75
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uiw/react-codemirror",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.2.1",
|
|
4
4
|
"description": "CodeMirror component for React.",
|
|
5
5
|
"homepage": "https://uiwjs.github.io/react-codemirror",
|
|
6
6
|
"main": "cjs/index.js",
|
|
@@ -40,18 +40,6 @@
|
|
|
40
40
|
],
|
|
41
41
|
"author": "kenny wong <wowohoo@qq.com>",
|
|
42
42
|
"license": "MIT",
|
|
43
|
-
"peerDependencies": {
|
|
44
|
-
"@babel/runtime": ">=7.11.0",
|
|
45
|
-
"react": ">=16.8.0",
|
|
46
|
-
"react-dom": ">=16.8.0"
|
|
47
|
-
},
|
|
48
|
-
"dependencies": {
|
|
49
|
-
"@babel/runtime": "7.15.4",
|
|
50
|
-
"@codemirror/basic-setup": "0.19.0",
|
|
51
|
-
"@codemirror/state": "0.19.2",
|
|
52
|
-
"@codemirror/theme-one-dark": "0.19.0",
|
|
53
|
-
"@codemirror/view": "0.19.9"
|
|
54
|
-
},
|
|
55
43
|
"jest": {
|
|
56
44
|
"coverageReporters": [
|
|
57
45
|
"lcov",
|
|
@@ -69,6 +57,18 @@
|
|
|
69
57
|
"prettier --write"
|
|
70
58
|
]
|
|
71
59
|
},
|
|
60
|
+
"peerDependencies": {
|
|
61
|
+
"@babel/runtime": ">=7.11.0",
|
|
62
|
+
"react": ">=16.8.0",
|
|
63
|
+
"react-dom": ">=16.8.0"
|
|
64
|
+
},
|
|
65
|
+
"dependencies": {
|
|
66
|
+
"@babel/runtime": "7.16.0",
|
|
67
|
+
"@codemirror/basic-setup": "0.19.0",
|
|
68
|
+
"@codemirror/state": "0.19.4",
|
|
69
|
+
"@codemirror/theme-one-dark": "0.19.1",
|
|
70
|
+
"@codemirror/view": "0.19.13"
|
|
71
|
+
},
|
|
72
72
|
"devDependencies": {
|
|
73
73
|
"@codemirror/lang-cpp": "0.19.1",
|
|
74
74
|
"@codemirror/lang-html": "0.19.3",
|
|
@@ -76,35 +76,34 @@
|
|
|
76
76
|
"@codemirror/lang-javascript": "0.19.2",
|
|
77
77
|
"@codemirror/lang-json": "0.19.1",
|
|
78
78
|
"@codemirror/lang-lezer": "0.19.1",
|
|
79
|
-
"@codemirror/lang-markdown": "0.19.
|
|
79
|
+
"@codemirror/lang-markdown": "0.19.2",
|
|
80
80
|
"@codemirror/lang-php": "0.19.1",
|
|
81
81
|
"@codemirror/lang-python": "0.19.2",
|
|
82
82
|
"@codemirror/lang-rust": "0.19.1",
|
|
83
|
-
"@codemirror/lang-sql": "0.19.
|
|
83
|
+
"@codemirror/lang-sql": "0.19.4",
|
|
84
84
|
"@codemirror/lang-xml": "0.19.2",
|
|
85
85
|
"@codemirror/legacy-modes": "0.19.0",
|
|
86
86
|
"@codemirror/stream-parser": "0.19.2",
|
|
87
87
|
"@kkt/less-modules": "6.11.0",
|
|
88
88
|
"@kkt/raw-modules": "6.11.0",
|
|
89
89
|
"@kkt/scope-plugin-options": "6.11.0",
|
|
90
|
-
"@types/react": "17.0.
|
|
91
|
-
"@types/react-dom": "17.0.
|
|
90
|
+
"@types/react": "17.0.34",
|
|
91
|
+
"@types/react-dom": "17.0.11",
|
|
92
92
|
"@types/react-test-renderer": "17.0.1",
|
|
93
93
|
"@uiw/react-github-corners": "1.5.3",
|
|
94
|
-
"@uiw/react-markdown-preview": "3.
|
|
94
|
+
"@uiw/react-markdown-preview": "3.4.1",
|
|
95
95
|
"@uiw/react-shields": "1.1.2",
|
|
96
96
|
"@uiw/reset.css": "1.0.5",
|
|
97
|
-
"rehype-attr": "2.0.6",
|
|
98
97
|
"code-example": "3.3.1",
|
|
99
|
-
"husky": "7.0.
|
|
100
|
-
"jest": "27.
|
|
98
|
+
"husky": "7.0.4",
|
|
99
|
+
"jest": "27.3.1",
|
|
101
100
|
"kkt": "6.11.0",
|
|
102
|
-
"lint-staged": "11.2.
|
|
101
|
+
"lint-staged": "11.2.6",
|
|
103
102
|
"prettier": "2.4.1",
|
|
104
103
|
"react": "17.0.2",
|
|
105
104
|
"react-dom": "17.0.2",
|
|
106
105
|
"react-test-renderer": "17.0.2",
|
|
107
|
-
"tsbb": "3.4.
|
|
106
|
+
"tsbb": "3.4.4"
|
|
108
107
|
},
|
|
109
108
|
"browserslist": {
|
|
110
109
|
"production": [
|
package/src/index.tsx
CHANGED
|
@@ -54,6 +54,11 @@ export interface ReactCodeMirrorProps
|
|
|
54
54
|
* or objects with an extension in its `extension` property. Extensions can be nested in arrays arbitrarily deep—they will be flattened when processed.
|
|
55
55
|
*/
|
|
56
56
|
extensions?: Extension[];
|
|
57
|
+
/**
|
|
58
|
+
* 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.
|
|
59
|
+
* Originally from the [config of EditorView](https://codemirror.net/6/docs/ref/#view.EditorView.constructor%5Econfig.root)
|
|
60
|
+
*/
|
|
61
|
+
root?: ShadowRoot | Document;
|
|
57
62
|
}
|
|
58
63
|
|
|
59
64
|
export interface ReactCodeMirrorRef {
|
|
@@ -82,11 +87,13 @@ const ReactCodeMirror = React.forwardRef<ReactCodeMirrorRef, ReactCodeMirrorProp
|
|
|
82
87
|
placeholder,
|
|
83
88
|
indentWithTab,
|
|
84
89
|
editable,
|
|
90
|
+
root,
|
|
85
91
|
...other
|
|
86
92
|
} = props;
|
|
87
93
|
const editor = useRef<HTMLDivElement>(null);
|
|
88
94
|
const { state, view, container, setContainer } = useCodeMirror({
|
|
89
95
|
container: editor.current,
|
|
96
|
+
root,
|
|
90
97
|
value,
|
|
91
98
|
autoFocus,
|
|
92
99
|
theme,
|
package/src/useCodeMirror.ts
CHANGED
|
@@ -30,6 +30,7 @@ export function useCodeMirror(props: UseCodeMirror) {
|
|
|
30
30
|
editable = true,
|
|
31
31
|
indentWithTab = true,
|
|
32
32
|
basicSetup = true,
|
|
33
|
+
root,
|
|
33
34
|
} = props;
|
|
34
35
|
const [container, setContainer] = useState(props.container);
|
|
35
36
|
const [view, setView] = useState<EditorView>();
|
|
@@ -86,6 +87,7 @@ export function useCodeMirror(props: UseCodeMirror) {
|
|
|
86
87
|
const viewCurrent = new EditorView({
|
|
87
88
|
state: stateCurrent,
|
|
88
89
|
parent: container as any,
|
|
90
|
+
root,
|
|
89
91
|
});
|
|
90
92
|
setView(viewCurrent);
|
|
91
93
|
}
|
|
@@ -104,9 +106,11 @@ export function useCodeMirror(props: UseCodeMirror) {
|
|
|
104
106
|
useEffect(() => {
|
|
105
107
|
if (view) {
|
|
106
108
|
const currentValue = view.state.doc.toString();
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
109
|
+
if (value !== currentValue) {
|
|
110
|
+
view.dispatch({
|
|
111
|
+
changes: { from: 0, to: currentValue.length, insert: value || '' },
|
|
112
|
+
});
|
|
113
|
+
}
|
|
110
114
|
}
|
|
111
115
|
}, [value, view]);
|
|
112
116
|
|