@uiw/react-codemirror 4.2.4 → 4.3.3
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 +26 -4
- package/cjs/index.d.ts +2 -2
- package/cjs/index.js +13 -4
- package/cjs/index.js.map +4 -2
- package/cjs/useCodeMirror.js +13 -1
- package/cjs/useCodeMirror.js.map +3 -3
- package/esm/index.d.ts +2 -2
- package/esm/index.js +10 -4
- package/esm/index.js.map +4 -2
- package/esm/useCodeMirror.js +14 -2
- package/esm/useCodeMirror.js.map +3 -3
- package/package.json +15 -16
- package/src/index.tsx +11 -5
- package/src/useCodeMirror.ts +12 -2
- package/src/react-app-env.d.ts +0 -1
package/README.md
CHANGED
|
@@ -164,6 +164,28 @@ export default function App() {
|
|
|
164
164
|
}
|
|
165
165
|
```
|
|
166
166
|
|
|
167
|
+
## Using custom theme
|
|
168
|
+
|
|
169
|
+
```jsx
|
|
170
|
+
import { oneDark } from '@codemirror/theme-one-dark';
|
|
171
|
+
import CodeMirror from '@uiw/react-codemirror';
|
|
172
|
+
import { javascript } from '@codemirror/lang-javascript';
|
|
173
|
+
|
|
174
|
+
export default function App() {
|
|
175
|
+
return (
|
|
176
|
+
<CodeMirror
|
|
177
|
+
value="console.log('hello world!');"
|
|
178
|
+
height="100%"
|
|
179
|
+
theme={oneDark}
|
|
180
|
+
extensions={[javascript({ jsx: true })]}
|
|
181
|
+
onChange={(value, viewUpdate) => {
|
|
182
|
+
console.log('value:', value);
|
|
183
|
+
}}
|
|
184
|
+
/>
|
|
185
|
+
);
|
|
186
|
+
}
|
|
187
|
+
```
|
|
188
|
+
|
|
167
189
|
## Props
|
|
168
190
|
|
|
169
191
|
<!--rehype:style=background-color: #ffe564; display: inline-block; border-bottom: 0; padding: 3px 12px;-->
|
|
@@ -171,7 +193,7 @@ export default function App() {
|
|
|
171
193
|
- `value?: string` value of the auto created model in the editor.
|
|
172
194
|
- `width?: string` width of editor. Defaults to `auto`.
|
|
173
195
|
- `height?: string` height of editor. Defaults to `auto`.
|
|
174
|
-
- `theme?`: `light` / `dark` Defaults to `light`.
|
|
196
|
+
- `theme?`: `'light'` / `'dark'` / `Extension` Defaults to `'light'`.
|
|
175
197
|
|
|
176
198
|
```ts
|
|
177
199
|
import React from 'react';
|
|
@@ -207,10 +229,10 @@ export interface ReactCodeMirrorProps
|
|
|
207
229
|
/** Enables a placeholder—a piece of example content to show when the editor is empty. */
|
|
208
230
|
placeholder?: string | HTMLElement;
|
|
209
231
|
/**
|
|
210
|
-
* `light` / `dark` Defaults to `light`.
|
|
232
|
+
* `light` / `dark` / `Extension` Defaults to `light`.
|
|
211
233
|
* @default light
|
|
212
234
|
*/
|
|
213
|
-
theme?: 'light' | 'dark';
|
|
235
|
+
theme?: 'light' | 'dark' | Extension;
|
|
214
236
|
/**
|
|
215
237
|
* Whether to optional basicSetup by default
|
|
216
238
|
* @default true
|
|
@@ -260,7 +282,7 @@ export default ReactCodeMirror;
|
|
|
260
282
|
- [@uiw/react-md-editor](https://github.com/uiwjs/react-md-editor): A simple markdown editor with preview, implemented with React.js and TypeScript.
|
|
261
283
|
- [@uiw/react-monacoeditor](https://github.com/jaywcjlove/react-monacoeditor): Monaco Editor component for React.
|
|
262
284
|
- [@uiw/react-markdown-editor](https://github.com/uiwjs/react-markdown-editor): A markdown editor with preview, implemented with React.js and TypeScript.
|
|
263
|
-
- [@uiw/react-markdown-preview](https://github.com/
|
|
285
|
+
- [@uiw/react-markdown-preview](https://github.com/uiwjs/react-markdown-preview): React component preview markdown text in web browser.
|
|
264
286
|
|
|
265
287
|
## License
|
|
266
288
|
|
package/cjs/index.d.ts
CHANGED
|
@@ -19,10 +19,10 @@ export interface ReactCodeMirrorProps extends Omit<EditorStateConfig, 'doc' | 'e
|
|
|
19
19
|
/** Enables a placeholder—a piece of example content to show when the editor is empty. */
|
|
20
20
|
placeholder?: string | HTMLElement;
|
|
21
21
|
/**
|
|
22
|
-
* `light` / `dark` Defaults to `light`.
|
|
22
|
+
* `light` / `dark` / `Extension` Defaults to `light`.
|
|
23
23
|
* @default light
|
|
24
24
|
*/
|
|
25
|
-
theme?: 'light' | 'dark';
|
|
25
|
+
theme?: 'light' | 'dark' | Extension;
|
|
26
26
|
/**
|
|
27
27
|
* Whether to optional basicSetup by default
|
|
28
28
|
* @default true
|
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,10 +143,16 @@ 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
|
+
|
|
152
|
+
var defaultClassNames = typeof theme === 'string' ? "cm-theme-".concat(theme) : 'cm-theme';
|
|
144
153
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _objectSpread2.default)({
|
|
145
154
|
ref: editor,
|
|
146
|
-
className: "
|
|
155
|
+
className: "".concat(defaultClassNames).concat(className ? " ".concat(className) : '')
|
|
147
156
|
}, other));
|
|
148
157
|
});
|
|
149
158
|
|
package/cjs/index.js.map
CHANGED
|
@@ -36,10 +36,12 @@
|
|
|
36
36
|
"view",
|
|
37
37
|
"setContainer",
|
|
38
38
|
"destroy",
|
|
39
|
+
"Error",
|
|
40
|
+
"defaultClassNames",
|
|
39
41
|
"displayName"
|
|
40
42
|
],
|
|
41
|
-
"mappings": "
|
|
43
|
+
"mappings": "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",
|
|
42
44
|
"sourcesContent": [
|
|
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={
|
|
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"
|
|
44
46
|
]
|
|
45
47
|
}
|
package/cjs/useCodeMirror.js
CHANGED
|
@@ -105,7 +105,19 @@ function useCodeMirror(props) {
|
|
|
105
105
|
getExtensions.unshift((0, _view.placeholder)(placeholder));
|
|
106
106
|
}
|
|
107
107
|
|
|
108
|
-
|
|
108
|
+
switch (theme) {
|
|
109
|
+
case 'light':
|
|
110
|
+
getExtensions.push(_light.defaultLightThemeOption);
|
|
111
|
+
break;
|
|
112
|
+
|
|
113
|
+
case 'dark':
|
|
114
|
+
getExtensions.push(_themeOneDark.oneDark);
|
|
115
|
+
break;
|
|
116
|
+
|
|
117
|
+
default:
|
|
118
|
+
getExtensions.push(theme);
|
|
119
|
+
break;
|
|
120
|
+
}
|
|
109
121
|
|
|
110
122
|
if (editable === false) {
|
|
111
123
|
getExtensions.push(_view.EditorView.editable.of(false));
|
package/cjs/useCodeMirror.js.map
CHANGED
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"defaultBasicSetup",
|
|
46
46
|
"push",
|
|
47
47
|
"defaultLightThemeOption",
|
|
48
|
-
"
|
|
48
|
+
"oneDark",
|
|
49
49
|
"concat",
|
|
50
50
|
"stateCurrent",
|
|
51
51
|
"EditorState",
|
|
@@ -65,8 +65,8 @@
|
|
|
65
65
|
"reconfigure",
|
|
66
66
|
"focus"
|
|
67
67
|
],
|
|
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,MAWEA,WAXF,mCAWgB,EAXhB;AAAA,qBAmBIX,KAnBJ,CAYEY,KAZF;AAAA,MAYEA,KAZF,6BAYU,EAZV;AAAA,wBAmBIZ,KAnBJ,CAaEa,QAbF;AAAA,MAaEA,QAbF,gCAaa,EAbb;AAAA,wBAmBIb,KAnBJ,CAcEc,QAdF;AAAA,MAcEA,QAdF,gCAca,EAdb;AAAA,wBAmBId,KAnBJ,CAeEe,QAfF;AAAA,MAeEA,QAfF,gCAea,IAfb;AAAA,6BAmBIf,KAnBJ,CAgBEgB,aAhBF;AAAA,MAgBEA,aAhBF,qCAgBkB,IAhBlB;AAAA,0BAmBIhB,KAnBJ,CAiBEiB,UAjBF;AAAA,MAiBEA,UAjBF,kCAiBe,IAjBf;AAAA,MAkBEC,IAlBF,GAmBIlB,KAnBJ,CAkBEkB,IAlBF;;AAoBA,kBAAkC,qBAASlB,KAAK,CAACmB,SAAf,CAAlC;AAAA;AAAA,MAAOA,SAAP;AAAA,MAAkBC,YAAlB;;AACA,mBAAwB,sBAAxB;AAAA;AAAA,MAAOC,IAAP;AAAA,MAAaC,OAAb;;AACA,mBAA0B,sBAA1B;AAAA;AAAA,MAAOC,KAAP;AAAA,MAAcC,QAAd;;AACA,MAAMC,kBAAkB,GAAGC,iBAAWnB,KAAX,CAAiB;AAC1C,SAAK;AACHC,MAAAA,MAAM,EAANA,MADG;AAEHC,MAAAA,SAAS,EAATA,SAFG;AAGHC,MAAAA,SAAS,EAATA,SAHG;AAIHE,MAAAA,KAAK,EAALA,KAJG;AAKHC,MAAAA,QAAQ,EAARA,QALG;AAMHC,MAAAA,QAAQ,EAARA;AANG;AADqC,GAAjB,CAA3B;;AAUA,MAAMa,cAAc,GAAGD,iBAAWC,cAAX,CAA0BC,EAA1B,CAA6B,UAACC,EAAD,EAAoB;AACtE,QAAIA,EAAE,CAACC,UAAH,IAAiB,OAAO3B,QAAP,KAAoB,UAAzC,EAAqD;AACnD,UAAM4B,GAAG,GAAGF,EAAE,CAACN,KAAH,CAASQ,GAArB;;AACA,UAAM9B,MAAK,GAAG8B,GAAG,CAACC,QAAJ,EAAd;;AACA7B,MAAAA,QAAQ,CAACF,MAAD,EAAQ4B,EAAR,CAAR;AACD;AACF,GANsB,CAAvB;;AAOA,MAAII,aAAa,GAAG,CAACN,cAAD,EAAiBF,kBAAjB,CAApB;;AACA,MAAIT,aAAJ,EAAmB;AACjBiB,IAAAA,aAAa,CAACC,OAAd,CAAsBC,aAAOP,EAAP,CAAU,CAACQ,uBAAD,CAAV,CAAtB;AACD;;AACD,MAAInB,UAAJ,EAAgB;AACdgB,IAAAA,aAAa,CAACC,OAAd,CAAsBG,sBAAtB;AACD;;AAED,MAAI1B,WAAJ,EAAiB;AACfsB,IAAAA,aAAa,CAACC,OAAd,CAAsB,uBAAkBvB,WAAlB,CAAtB;AACD;;
|
|
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,MAWEA,WAXF,mCAWgB,EAXhB;AAAA,qBAmBIX,KAnBJ,CAYEY,KAZF;AAAA,MAYEA,KAZF,6BAYU,EAZV;AAAA,wBAmBIZ,KAnBJ,CAaEa,QAbF;AAAA,MAaEA,QAbF,gCAaa,EAbb;AAAA,wBAmBIb,KAnBJ,CAcEc,QAdF;AAAA,MAcEA,QAdF,gCAca,EAdb;AAAA,wBAmBId,KAnBJ,CAeEe,QAfF;AAAA,MAeEA,QAfF,gCAea,IAfb;AAAA,6BAmBIf,KAnBJ,CAgBEgB,aAhBF;AAAA,MAgBEA,aAhBF,qCAgBkB,IAhBlB;AAAA,0BAmBIhB,KAnBJ,CAiBEiB,UAjBF;AAAA,MAiBEA,UAjBF,kCAiBe,IAjBf;AAAA,MAkBEC,IAlBF,GAmBIlB,KAnBJ,CAkBEkB,IAlBF;;AAoBA,kBAAkC,qBAASlB,KAAK,CAACmB,SAAf,CAAlC;AAAA;AAAA,MAAOA,SAAP;AAAA,MAAkBC,YAAlB;;AACA,mBAAwB,sBAAxB;AAAA;AAAA,MAAOC,IAAP;AAAA,MAAaC,OAAb;;AACA,mBAA0B,sBAA1B;AAAA;AAAA,MAAOC,KAAP;AAAA,MAAcC,QAAd;;AACA,MAAMC,kBAAkB,GAAGC,iBAAWnB,KAAX,CAAiB;AAC1C,SAAK;AACHC,MAAAA,MAAM,EAANA,MADG;AAEHC,MAAAA,SAAS,EAATA,SAFG;AAGHC,MAAAA,SAAS,EAATA,SAHG;AAIHE,MAAAA,KAAK,EAALA,KAJG;AAKHC,MAAAA,QAAQ,EAARA,QALG;AAMHC,MAAAA,QAAQ,EAARA;AANG;AADqC,GAAjB,CAA3B;;AAUA,MAAMa,cAAc,GAAGD,iBAAWC,cAAX,CAA0BC,EAA1B,CAA6B,UAACC,EAAD,EAAoB;AACtE,QAAIA,EAAE,CAACC,UAAH,IAAiB,OAAO3B,QAAP,KAAoB,UAAzC,EAAqD;AACnD,UAAM4B,GAAG,GAAGF,EAAE,CAACN,KAAH,CAASQ,GAArB;;AACA,UAAM9B,MAAK,GAAG8B,GAAG,CAACC,QAAJ,EAAd;;AACA7B,MAAAA,QAAQ,CAACF,MAAD,EAAQ4B,EAAR,CAAR;AACD;AACF,GANsB,CAAvB;;AAOA,MAAII,aAAa,GAAG,CAACN,cAAD,EAAiBF,kBAAjB,CAApB;;AACA,MAAIT,aAAJ,EAAmB;AACjBiB,IAAAA,aAAa,CAACC,OAAd,CAAsBC,aAAOP,EAAP,CAAU,CAACQ,uBAAD,CAAV,CAAtB;AACD;;AACD,MAAInB,UAAJ,EAAgB;AACdgB,IAAAA,aAAa,CAACC,OAAd,CAAsBG,sBAAtB;AACD;;AAED,MAAI1B,WAAJ,EAAiB;AACfsB,IAAAA,aAAa,CAACC,OAAd,CAAsB,uBAAkBvB,WAAlB,CAAtB;AACD;;AAED,UAAQJ,KAAR;AACE,SAAK,OAAL;AACE0B,MAAAA,aAAa,CAACK,IAAd,CAAmBC,8BAAnB;AACA;;AACF,SAAK,MAAL;AACEN,MAAAA,aAAa,CAACK,IAAd,CAAmBE,qBAAnB;AACA;;AACF;AACEP,MAAAA,aAAa,CAACK,IAAd,CAAmB/B,KAAnB;AACA;AATJ;;AAYA,MAAIQ,QAAQ,KAAK,KAAjB,EAAwB;AACtBkB,IAAAA,aAAa,CAACK,IAAd,CAAmBZ,iBAAWX,QAAX,CAAoBa,EAApB,CAAuB,KAAvB,CAAnB;AACD;;AAED,MAAIxB,QAAQ,IAAI,OAAOA,QAAP,KAAoB,UAApC,EAAgD;AAC9C6B,IAAAA,aAAa,CAACK,IAAd,CAAmBZ,iBAAWC,cAAX,CAA0BC,EAA1B,CAA6BxB,QAA7B,CAAnB;AACD;;AACD6B,EAAAA,aAAa,GAAGA,aAAa,CAACQ,MAAd,CAAqBpC,UAArB,CAAhB;AAEA,wBAAU,YAAM;AACd,QAAIc,SAAS,IAAI,CAACI,KAAlB,EAAyB;AACvB,UAAMmB,YAAY,GAAGC,mBAAYC,MAAZ,CAAmB;AACtCb,QAAAA,GAAG,EAAE9B,KADiC;AAEtCC,QAAAA,SAAS,EAATA,SAFsC;AAGtCG,QAAAA,UAAU,EAAE4B;AAH0B,OAAnB,CAArB;;AAKAT,MAAAA,QAAQ,CAACkB,YAAD,CAAR;;AACA,UAAI,CAACrB,IAAL,EAAW;AACT,YAAMwB,WAAW,GAAG,IAAInB,gBAAJ,CAAe;AACjCH,UAAAA,KAAK,EAAEmB,YAD0B;AAEjCI,UAAAA,MAAM,EAAE3B,SAFyB;AAGjCD,UAAAA,IAAI,EAAJA;AAHiC,SAAf,CAApB;AAKAI,QAAAA,OAAO,CAACuB,WAAD,CAAP;AACD;AACF,KAhBa,CAiBd;;AACD,GAlBD,EAkBG,CAAC1B,SAAD,EAAYI,KAAZ,CAlBH;AAoBA,wBAAU,YAAM;AACd,WAAO,YAAM;AACX,UAAIF,IAAJ,EAAU;AACRA,QAAAA,IAAI,CAAC0B,OAAL;AACD;AACF,KAJD;AAKD,GAND,EAMG,CAAC1B,IAAD,CANH;AAQA,wBAAU,YAAM;AACd,QAAIA,IAAJ,EAAU;AACR,UAAM2B,YAAY,GAAG3B,IAAI,CAACE,KAAL,CAAWQ,GAAX,CAAeC,QAAf,EAArB;;AACA,UAAI/B,KAAK,KAAK+C,YAAd,EAA4B;AAC1B3B,QAAAA,IAAI,CAAC4B,QAAL,CAAc;AACZC,UAAAA,OAAO,EAAE;AAAEC,YAAAA,IAAI,EAAE,CAAR;AAAWC,YAAAA,EAAE,EAAEJ,YAAY,CAACK,MAA5B;AAAoCC,YAAAA,MAAM,EAAErD,KAAK,IAAI;AAArD;AADG,SAAd;AAGD;AACF;AACF,GATD,EASG,CAACA,KAAD,EAAQoB,IAAR,CATH;AAWA,wBAAU,YAAM;AACd,QAAIA,IAAJ,EAAU;AACRA,MAAAA,IAAI,CAAC4B,QAAL,CAAc;AAAEM,QAAAA,OAAO,EAAEC,mBAAYC,WAAZ,CAAwB7B,EAAxB,CAA2BK,aAA3B;AAAX,OAAd;AACD,KAHa,CAId;;AACD,GALD,EAKG,CACD1B,KADC,EAEDF,UAFC,EAGDM,WAHC,EAIDH,MAJC,EAKDC,SALC,EAMDC,SANC,EAODE,KAPC,EAQDC,QARC,EASDC,QATC,EAUDC,QAVC,EAWDC,aAXC,EAYDC,UAZC,CALH;AAoBA,wBAAU,YAAM;AACd,QAAIX,SAAS,IAAIe,IAAjB,EAAuB;AACrBA,MAAAA,IAAI,CAACqC,KAAL;AACD;AACF,GAJD,EAIG,CAACpD,SAAD,EAAYe,IAAZ,CAJH;AAMA,SAAO;AAAEE,IAAAA,KAAK,EAALA,KAAF;AAASC,IAAAA,QAAQ,EAARA,QAAT;AAAmBH,IAAAA,IAAI,EAAJA,IAAnB;AAAyBC,IAAAA,OAAO,EAAPA,OAAzB;AAAkCH,IAAAA,SAAS,EAATA,SAAlC;AAA6CC,IAAAA,YAAY,EAAZA;AAA7C,GAAP;AACD",
|
|
69
69
|
"sourcesContent": [
|
|
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 {
|
|
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 { 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 = '',\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 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
71
|
]
|
|
72
72
|
}
|
package/esm/index.d.ts
CHANGED
|
@@ -19,10 +19,10 @@ export interface ReactCodeMirrorProps extends Omit<EditorStateConfig, 'doc' | 'e
|
|
|
19
19
|
/** Enables a placeholder—a piece of example content to show when the editor is empty. */
|
|
20
20
|
placeholder?: string | HTMLElement;
|
|
21
21
|
/**
|
|
22
|
-
* `light` / `dark` Defaults to `light`.
|
|
22
|
+
* `light` / `dark` / `Extension` Defaults to `light`.
|
|
23
23
|
* @default light
|
|
24
24
|
*/
|
|
25
|
-
theme?: 'light' | 'dark';
|
|
25
|
+
theme?: 'light' | 'dark' | Extension;
|
|
26
26
|
/**
|
|
27
27
|
* Whether to optional basicSetup by default
|
|
28
28
|
* @default true
|
package/esm/index.js
CHANGED
|
@@ -11,7 +11,7 @@ export * from './useCodeMirror';
|
|
|
11
11
|
var ReactCodeMirror = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
12
12
|
var {
|
|
13
13
|
className,
|
|
14
|
-
value,
|
|
14
|
+
value = '',
|
|
15
15
|
selection,
|
|
16
16
|
extensions = [],
|
|
17
17
|
onChange,
|
|
@@ -63,7 +63,7 @@ var ReactCodeMirror = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
63
63
|
editor: container,
|
|
64
64
|
state,
|
|
65
65
|
view
|
|
66
|
-
}));
|
|
66
|
+
}), [container, state, view]);
|
|
67
67
|
useEffect(() => {
|
|
68
68
|
setContainer(editor.current);
|
|
69
69
|
return () => {
|
|
@@ -71,10 +71,16 @@ var ReactCodeMirror = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
71
71
|
view.destroy();
|
|
72
72
|
}
|
|
73
73
|
}; // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
74
|
-
}, []);
|
|
74
|
+
}, []); // check type of value
|
|
75
|
+
|
|
76
|
+
if (typeof value !== 'string') {
|
|
77
|
+
throw new Error("value must be typeof string but got " + typeof value);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
var defaultClassNames = typeof theme === 'string' ? "cm-theme-" + theme : 'cm-theme';
|
|
75
81
|
return /*#__PURE__*/_jsx("div", _extends({
|
|
76
82
|
ref: editor,
|
|
77
|
-
className: "
|
|
83
|
+
className: "" + defaultClassNames + (className ? " " + className : '')
|
|
78
84
|
}, other));
|
|
79
85
|
});
|
|
80
86
|
ReactCodeMirror.displayName = 'CodeMirror';
|
package/esm/index.js.map
CHANGED
|
@@ -40,10 +40,12 @@
|
|
|
40
40
|
"setContainer",
|
|
41
41
|
"current",
|
|
42
42
|
"destroy",
|
|
43
|
+
"Error",
|
|
44
|
+
"defaultClassNames",
|
|
43
45
|
"displayName"
|
|
44
46
|
],
|
|
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,
|
|
47
|
+
"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,KAAK,GAAG,EAFJ;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,EAAkD,CAACC,SAAD,EAAYF,KAAZ,EAAmBC,IAAnB,CAAlD,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,CA9CiG,CAwDjG;;AACA,MAAI,OAAOzB,KAAP,KAAiB,QAArB,EAA+B;AAC7B,UAAM,IAAI0B,KAAJ,0CAAiD,OAAO1B,KAAxD,CAAN;AACD;;AAED,MAAM2B,iBAAiB,GAAG,OAAOrB,KAAP,KAAiB,QAAjB,iBAAwCA,KAAxC,GAAkD,UAA5E;AACA,sBAAO;AAAK,IAAA,GAAG,EAAEa,MAAV;AAAkB,IAAA,SAAS,OAAKQ,iBAAL,IAAyB5B,SAAS,SAAOA,SAAP,GAAqB,EAAvD;AAA3B,KAA4FmB,KAA5F,EAAP;AACD,CA/DuB,CAAxB;AAiEAvB,eAAe,CAACiC,WAAhB,GAA8B,YAA9B;AAEA,eAAejC,eAAf",
|
|
46
48
|
"sourcesContent": [
|
|
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={
|
|
49
|
+
"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"
|
|
48
50
|
]
|
|
49
51
|
}
|
package/esm/useCodeMirror.js
CHANGED
|
@@ -3,7 +3,7 @@ import { basicSetup as defaultBasicSetup } from '@codemirror/basic-setup';
|
|
|
3
3
|
import { EditorState, StateEffect } from '@codemirror/state';
|
|
4
4
|
import { indentWithTab as defaultIndentWithTab } from '@codemirror/commands';
|
|
5
5
|
import { EditorView, keymap, placeholder as extendPlaceholder } from '@codemirror/view';
|
|
6
|
-
import {
|
|
6
|
+
import { oneDark } from '@codemirror/theme-one-dark';
|
|
7
7
|
import { defaultLightThemeOption } from './theme/light';
|
|
8
8
|
export function useCodeMirror(props) {
|
|
9
9
|
var {
|
|
@@ -62,7 +62,19 @@ export function useCodeMirror(props) {
|
|
|
62
62
|
getExtensions.unshift(extendPlaceholder(placeholder));
|
|
63
63
|
}
|
|
64
64
|
|
|
65
|
-
|
|
65
|
+
switch (theme) {
|
|
66
|
+
case 'light':
|
|
67
|
+
getExtensions.push(defaultLightThemeOption);
|
|
68
|
+
break;
|
|
69
|
+
|
|
70
|
+
case 'dark':
|
|
71
|
+
getExtensions.push(oneDark);
|
|
72
|
+
break;
|
|
73
|
+
|
|
74
|
+
default:
|
|
75
|
+
getExtensions.push(theme);
|
|
76
|
+
break;
|
|
77
|
+
}
|
|
66
78
|
|
|
67
79
|
if (editable === false) {
|
|
68
80
|
getExtensions.push(EditorView.editable.of(false));
|
package/esm/useCodeMirror.js.map
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"keymap",
|
|
17
17
|
"placeholder",
|
|
18
18
|
"extendPlaceholder",
|
|
19
|
-
"
|
|
19
|
+
"oneDark",
|
|
20
20
|
"defaultLightThemeOption",
|
|
21
21
|
"useCodeMirror",
|
|
22
22
|
"props",
|
|
@@ -68,8 +68,8 @@
|
|
|
68
68
|
"reconfigure",
|
|
69
69
|
"focus"
|
|
70
70
|
],
|
|
71
|
-
"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,
|
|
71
|
+
"mappings": "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",
|
|
72
72
|
"sourcesContent": [
|
|
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 {
|
|
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 { 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 = '',\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 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"
|
|
74
74
|
]
|
|
75
75
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uiw/react-codemirror",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.3.3",
|
|
4
4
|
"description": "CodeMirror component for React.",
|
|
5
5
|
"homepage": "https://uiwjs.github.io/react-codemirror",
|
|
6
6
|
"main": "cjs/index.js",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"watch": "tsbb watch",
|
|
15
15
|
"build": "tsbb build",
|
|
16
16
|
"test": "tsbb test --env=jsdom",
|
|
17
|
-
"coverage": "tsbb test --coverage",
|
|
17
|
+
"coverage": "tsbb test --coverage --bail",
|
|
18
18
|
"doc": "kkt build --app-src ./website",
|
|
19
19
|
"start": "kkt start --app-src ./website",
|
|
20
20
|
"prettier": "prettier --write '**/*.{js,jsx,tsx,ts,html,less,md,json}'"
|
|
@@ -71,39 +71,38 @@
|
|
|
71
71
|
},
|
|
72
72
|
"devDependencies": {
|
|
73
73
|
"@codemirror/lang-cpp": "0.19.1",
|
|
74
|
-
"@codemirror/lang-html": "0.19.
|
|
74
|
+
"@codemirror/lang-html": "0.19.4",
|
|
75
75
|
"@codemirror/lang-java": "0.19.1",
|
|
76
|
-
"@codemirror/lang-javascript": "0.19.
|
|
76
|
+
"@codemirror/lang-javascript": "0.19.4",
|
|
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.4",
|
|
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
83
|
"@codemirror/lang-sql": "0.19.4",
|
|
84
84
|
"@codemirror/lang-xml": "0.19.2",
|
|
85
85
|
"@codemirror/legacy-modes": "0.19.0",
|
|
86
|
-
"@codemirror/stream-parser": "0.19.
|
|
87
|
-
"@kkt/less-modules": "
|
|
88
|
-
"@kkt/raw-modules": "
|
|
89
|
-
"@kkt/scope-plugin-options": "
|
|
90
|
-
"@types/react": "17.0.
|
|
86
|
+
"@codemirror/stream-parser": "0.19.3",
|
|
87
|
+
"@kkt/less-modules": "7.0.5",
|
|
88
|
+
"@kkt/raw-modules": "7.0.5",
|
|
89
|
+
"@kkt/scope-plugin-options": "7.0.5",
|
|
90
|
+
"@types/react": "17.0.38",
|
|
91
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.4.
|
|
94
|
+
"@uiw/react-markdown-preview": "3.4.7",
|
|
95
95
|
"@uiw/react-shields": "1.1.2",
|
|
96
96
|
"@uiw/reset.css": "1.0.5",
|
|
97
97
|
"code-example": "3.3.1",
|
|
98
98
|
"husky": "7.0.4",
|
|
99
|
-
"
|
|
100
|
-
"
|
|
101
|
-
"
|
|
102
|
-
"prettier": "2.4.1",
|
|
99
|
+
"kkt": "7.0.5",
|
|
100
|
+
"lint-staged": "12.1.7",
|
|
101
|
+
"prettier": "2.5.1",
|
|
103
102
|
"react": "17.0.2",
|
|
104
103
|
"react-dom": "17.0.2",
|
|
105
104
|
"react-test-renderer": "17.0.2",
|
|
106
|
-
"tsbb": "3.
|
|
105
|
+
"tsbb": "3.5.4"
|
|
107
106
|
},
|
|
108
107
|
"browserslist": {
|
|
109
108
|
"production": [
|
package/src/index.tsx
CHANGED
|
@@ -24,10 +24,10 @@ export interface ReactCodeMirrorProps
|
|
|
24
24
|
/** Enables a placeholder—a piece of example content to show when the editor is empty. */
|
|
25
25
|
placeholder?: string | HTMLElement;
|
|
26
26
|
/**
|
|
27
|
-
* `light` / `dark` Defaults to `light`.
|
|
27
|
+
* `light` / `dark` / `Extension` Defaults to `light`.
|
|
28
28
|
* @default light
|
|
29
29
|
*/
|
|
30
|
-
theme?: 'light' | 'dark';
|
|
30
|
+
theme?: 'light' | 'dark' | Extension;
|
|
31
31
|
/**
|
|
32
32
|
* Whether to optional basicSetup by default
|
|
33
33
|
* @default true
|
|
@@ -70,7 +70,7 @@ export interface ReactCodeMirrorRef {
|
|
|
70
70
|
const ReactCodeMirror = React.forwardRef<ReactCodeMirrorRef, ReactCodeMirrorProps>((props, ref) => {
|
|
71
71
|
const {
|
|
72
72
|
className,
|
|
73
|
-
value,
|
|
73
|
+
value = '',
|
|
74
74
|
selection,
|
|
75
75
|
extensions = [],
|
|
76
76
|
onChange,
|
|
@@ -112,7 +112,7 @@ const ReactCodeMirror = React.forwardRef<ReactCodeMirrorRef, ReactCodeMirrorProp
|
|
|
112
112
|
onUpdate,
|
|
113
113
|
extensions,
|
|
114
114
|
});
|
|
115
|
-
useImperativeHandle(ref, () => ({ editor: container, state, view }));
|
|
115
|
+
useImperativeHandle(ref, () => ({ editor: container, state, view }), [container, state, view]);
|
|
116
116
|
useEffect(() => {
|
|
117
117
|
setContainer(editor.current);
|
|
118
118
|
return () => {
|
|
@@ -123,7 +123,13 @@ const ReactCodeMirror = React.forwardRef<ReactCodeMirrorRef, ReactCodeMirrorProp
|
|
|
123
123
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
124
124
|
}, []);
|
|
125
125
|
|
|
126
|
-
|
|
126
|
+
// check type of value
|
|
127
|
+
if (typeof value !== 'string') {
|
|
128
|
+
throw new Error(`value must be typeof string but got ${typeof value}`);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
const defaultClassNames = typeof theme === 'string' ? `cm-theme-${theme}` : 'cm-theme';
|
|
132
|
+
return <div ref={editor} className={`${defaultClassNames}${className ? ` ${className}` : ''}`} {...other}></div>;
|
|
127
133
|
});
|
|
128
134
|
|
|
129
135
|
ReactCodeMirror.displayName = 'CodeMirror';
|
package/src/useCodeMirror.ts
CHANGED
|
@@ -3,7 +3,7 @@ import { basicSetup as defaultBasicSetup } from '@codemirror/basic-setup';
|
|
|
3
3
|
import { EditorState, StateEffect } from '@codemirror/state';
|
|
4
4
|
import { indentWithTab as defaultIndentWithTab } from '@codemirror/commands';
|
|
5
5
|
import { EditorView, keymap, ViewUpdate, placeholder as extendPlaceholder } from '@codemirror/view';
|
|
6
|
-
import {
|
|
6
|
+
import { oneDark } from '@codemirror/theme-one-dark';
|
|
7
7
|
import { ReactCodeMirrorProps } from './';
|
|
8
8
|
import { defaultLightThemeOption } from './theme/light';
|
|
9
9
|
|
|
@@ -64,7 +64,17 @@ export function useCodeMirror(props: UseCodeMirror) {
|
|
|
64
64
|
getExtensions.unshift(extendPlaceholder(placeholder));
|
|
65
65
|
}
|
|
66
66
|
|
|
67
|
-
|
|
67
|
+
switch (theme) {
|
|
68
|
+
case 'light':
|
|
69
|
+
getExtensions.push(defaultLightThemeOption);
|
|
70
|
+
break;
|
|
71
|
+
case 'dark':
|
|
72
|
+
getExtensions.push(oneDark);
|
|
73
|
+
break;
|
|
74
|
+
default:
|
|
75
|
+
getExtensions.push(theme);
|
|
76
|
+
break;
|
|
77
|
+
}
|
|
68
78
|
|
|
69
79
|
if (editable === false) {
|
|
70
80
|
getExtensions.push(EditorView.editable.of(false));
|
package/src/react-app-env.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
/// <reference types="react-scripts" />
|