@uiw/react-codemirror 4.2.2 → 4.3.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.
Files changed (15) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +38 -16
  3. package/cjs/index.d.ts +2 -2
  4. package/cjs/index.js +2 -1
  5. package/cjs/index.js.map +3 -2
  6. package/cjs/useCodeMirror.js +13 -1
  7. package/cjs/useCodeMirror.js.map +2 -2
  8. package/esm/index.d.ts +2 -2
  9. package/esm/index.js +2 -1
  10. package/esm/index.js.map +3 -2
  11. package/esm/useCodeMirror.js +13 -1
  12. package/esm/useCodeMirror.js.map +2 -2
  13. package/package.json +15 -15
  14. package/src/index.tsx +4 -3
  15. package/src/useCodeMirror.ts +11 -1
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2021 uiw
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -81,18 +81,18 @@ export default function App() {
81
81
  }
82
82
  ```
83
83
 
84
- > - ~~`@codemirror/legacy-modes/mode/cpp`~~ => [`@codemirror/lang-cpp`](https://www.npmjs.com/package/@codemirror/lang-cpp)
85
- > - ~~`@codemirror/legacy-modes/mode/html`~~ => [`@codemirror/lang-html`](https://www.npmjs.com/package/@codemirror/lang-html)
86
- > - ~~`@codemirror/legacy-modes/mode/java`~~ => [`@codemirror/lang-java`](https://www.npmjs.com/package/@codemirror/lang-java)
87
- > - ~~`@codemirror/legacy-modes/mode/javascript`~~ => [`@codemirror/lang-javascript`](https://www.npmjs.com/package/@codemirror/lang-javascript)
88
- > - ~~`@codemirror/legacy-modes/mode/json`~~ => [`@codemirror/lang-json`](https://www.npmjs.com/package/@codemirror/lang-json)
89
- > - ~~`@codemirror/legacy-modes/mode/lezer`~~ => [`@codemirror/lang-lezer`](https://www.npmjs.com/package/@codemirror/lang-lezer)
90
- > - ~~`@codemirror/legacy-modes/mode/markdown`~~ => [`@codemirror/lang-markdown`](https://www.npmjs.com/package/@codemirror/lang-markdown)
91
- > - ~~`@codemirror/legacy-modes/mode/php`~~ => [`@codemirror/lang-php`](https://www.npmjs.com/package/@codemirror/lang-php)
92
- > - ~~`@codemirror/legacy-modes/mode/python`~~ => [`@codemirror/lang-python`](https://www.npmjs.com/package/@codemirror/lang-python)
93
- > - ~~`@codemirror/legacy-modes/mode/rust`~~ => [`@codemirror/lang-rust`](https://www.npmjs.com/package/@codemirror/lang-rust)
94
- > - ~~`@codemirror/legacy-modes/mode/sql`~~ => [`@codemirror/lang-sql`](https://www.npmjs.com/package/@codemirror/lang-sql)
95
- > - ~~`@codemirror/legacy-modes/mode/xml`~~ => [`@codemirror/lang-xml`](https://www.npmjs.com/package/@codemirror/lang-xml)
84
+ - ~~`@codemirror/legacy-modes/mode/cpp`~~ => [`@codemirror/lang-cpp`](https://www.npmjs.com/package/@codemirror/lang-cpp)
85
+ - ~~`@codemirror/legacy-modes/mode/html`~~ => [`@codemirror/lang-html`](https://www.npmjs.com/package/@codemirror/lang-html)
86
+ - ~~`@codemirror/legacy-modes/mode/java`~~ => [`@codemirror/lang-java`](https://www.npmjs.com/package/@codemirror/lang-java)
87
+ - ~~`@codemirror/legacy-modes/mode/javascript`~~ => [`@codemirror/lang-javascript`](https://www.npmjs.com/package/@codemirror/lang-javascript)
88
+ - ~~`@codemirror/legacy-modes/mode/json`~~ => [`@codemirror/lang-json`](https://www.npmjs.com/package/@codemirror/lang-json)
89
+ - ~~`@codemirror/legacy-modes/mode/lezer`~~ => [`@codemirror/lang-lezer`](https://www.npmjs.com/package/@codemirror/lang-lezer)
90
+ - ~~`@codemirror/legacy-modes/mode/markdown`~~ => [`@codemirror/lang-markdown`](https://www.npmjs.com/package/@codemirror/lang-markdown)
91
+ - ~~`@codemirror/legacy-modes/mode/php`~~ => [`@codemirror/lang-php`](https://www.npmjs.com/package/@codemirror/lang-php)
92
+ - ~~`@codemirror/legacy-modes/mode/python`~~ => [`@codemirror/lang-python`](https://www.npmjs.com/package/@codemirror/lang-python)
93
+ - ~~`@codemirror/legacy-modes/mode/rust`~~ => [`@codemirror/lang-rust`](https://www.npmjs.com/package/@codemirror/lang-rust)
94
+ - ~~`@codemirror/legacy-modes/mode/sql`~~ => [`@codemirror/lang-sql`](https://www.npmjs.com/package/@codemirror/lang-sql)
95
+ - ~~`@codemirror/legacy-modes/mode/xml`~~ => [`@codemirror/lang-xml`](https://www.npmjs.com/package/@codemirror/lang-xml)
96
96
 
97
97
  ### Markdown Example
98
98
 
@@ -164,6 +164,28 @@ export default function App() {
164
164
  }
165
165
  ```
166
166
 
167
+ ## Using custom theme
168
+
169
+ ```jsx
170
+ import { oneDarkTheme } 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={oneDarkTheme}
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/jaywcjlove/react-monacoeditor): React component preview markdown text in web browser.
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
@@ -141,9 +141,10 @@ var ReactCodeMirror = /*#__PURE__*/_react.default.forwardRef(function (props, re
141
141
  }
142
142
  }; // eslint-disable-next-line react-hooks/exhaustive-deps
143
143
  }, []);
144
+ var defaultClassNames = typeof theme === 'string' ? "cm-theme-".concat(theme) : 'cm-theme';
144
145
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _objectSpread2.default)({
145
146
  ref: editor,
146
- className: "cm-theme-".concat(theme).concat(className ? " ".concat(className) : '')
147
+ className: "".concat(defaultClassNames).concat(className ? " ".concat(className) : '')
147
148
  }, other));
148
149
  });
149
150
 
package/cjs/index.js.map CHANGED
@@ -36,10 +36,11 @@
36
36
  "view",
37
37
  "setContainer",
38
38
  "destroy",
39
+ "defaultClassNames",
39
40
  "displayName"
40
41
  ],
41
- "mappings": "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",
42
+ "mappings": "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",
42
43
  "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={`cm-theme-${theme}${className ? ` ${className}` : ''}`} {...other}></div>;\n});\n\nReactCodeMirror.displayName = 'CodeMirror';\n\nexport default ReactCodeMirror;\n"
44
+ "import React, { useEffect, useRef, useImperativeHandle } from 'react';\nimport { EditorState, EditorStateConfig, Extension } from '@codemirror/state';\nimport { EditorView, ViewUpdate } from '@codemirror/view';\nimport { useCodeMirror } from './useCodeMirror';\n\nexport * from '@codemirror/view';\nexport * from '@codemirror/basic-setup';\nexport * from '@codemirror/state';\nexport * from './useCodeMirror';\n\nexport interface ReactCodeMirrorProps\n extends Omit<EditorStateConfig, 'doc' | 'extensions'>,\n Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'placeholder'> {\n /** value of the auto created model in the editor. */\n value?: string;\n height?: string;\n minHeight?: string;\n maxHeight?: string;\n width?: string;\n minWidth?: string;\n maxWidth?: string;\n /** focus on the editor. */\n autoFocus?: boolean;\n /** Enables a placeholder—a piece of example content to show when the editor is empty. */\n placeholder?: string | HTMLElement;\n /**\n * `light` / `dark` / `Extension` Defaults to `light`.\n * @default light\n */\n theme?: 'light' | 'dark' | Extension;\n /**\n * Whether to optional basicSetup by default\n * @default true\n */\n basicSetup?: boolean;\n /**\n * This disables editing of the editor content by the user.\n * @default true\n */\n editable?: boolean;\n /**\n * Whether to optional basicSetup by default\n * @default true\n */\n indentWithTab?: boolean;\n /** Fired whenever a change occurs to the document. */\n onChange?(value: string, viewUpdate: ViewUpdate): void;\n /** Fired whenever a change occurs to the document. There is a certain difference with `onChange`. */\n onUpdate?(viewUpdate: ViewUpdate): void;\n /**\n * Extension values can be [provided](https://codemirror.net/6/docs/ref/#state.EditorStateConfig.extensions) when creating a state to attach various kinds of configuration and behavior information.\n * They can either be built-in extension-providing objects,\n * such as [state fields](https://codemirror.net/6/docs/ref/#state.StateField) or [facet providers](https://codemirror.net/6/docs/ref/#state.Facet.of),\n * or objects with an extension in its `extension` property. Extensions can be nested in arrays arbitrarily deep—they will be flattened when processed.\n */\n extensions?: Extension[];\n /**\n * If the view is going to be mounted in a shadow root or document other than the one held by the global variable document (the default), you should pass it here.\n * Originally from the [config of EditorView](https://codemirror.net/6/docs/ref/#view.EditorView.constructor%5Econfig.root)\n */\n root?: ShadowRoot | Document;\n}\n\nexport interface ReactCodeMirrorRef {\n editor?: HTMLDivElement | null;\n state?: EditorState;\n view?: EditorView;\n}\n\nconst ReactCodeMirror = React.forwardRef<ReactCodeMirrorRef, ReactCodeMirrorProps>((props, ref) => {\n const {\n className,\n value,\n selection,\n extensions = [],\n onChange,\n onUpdate,\n autoFocus,\n theme = 'light',\n height,\n minHeight,\n maxHeight,\n width,\n minWidth,\n maxWidth,\n basicSetup,\n placeholder,\n indentWithTab,\n editable,\n root,\n ...other\n } = props;\n const editor = useRef<HTMLDivElement>(null);\n const { state, view, container, setContainer } = useCodeMirror({\n container: editor.current,\n root,\n value,\n autoFocus,\n theme,\n height,\n minHeight,\n maxHeight,\n width,\n minWidth,\n maxWidth,\n basicSetup,\n placeholder,\n indentWithTab,\n editable,\n selection,\n onChange,\n onUpdate,\n extensions,\n });\n useImperativeHandle(ref, () => ({ editor: container, state, view }));\n useEffect(() => {\n setContainer(editor.current);\n return () => {\n if (view) {\n view.destroy();\n }\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const defaultClassNames = typeof theme === 'string' ? `cm-theme-${theme}` : 'cm-theme';\n return <div ref={editor} className={`${defaultClassNames}${className ? ` ${className}` : ''}`} {...other}></div>;\n});\n\nReactCodeMirror.displayName = 'CodeMirror';\n\nexport default ReactCodeMirror;\n"
44
45
  ]
45
46
  }
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
- theme === 'light' ? getExtensions.push(_light.defaultLightThemeOption) : getExtensions.push(_themeOneDark.oneDarkTheme);
108
+ switch (theme) {
109
+ case 'light':
110
+ getExtensions.push(_light.defaultLightThemeOption);
111
+ break;
112
+
113
+ case 'dark':
114
+ getExtensions.push(_themeOneDark.oneDarkTheme);
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
@@ -65,8 +65,8 @@
65
65
  "reconfigure",
66
66
  "focus"
67
67
  ],
68
- "mappings": "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",
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,0BAAnB;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 { 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
+ "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 switch (theme) {\n case 'light':\n getExtensions.push(defaultLightThemeOption);\n break;\n case 'dark':\n getExtensions.push(oneDarkTheme);\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
@@ -72,9 +72,10 @@ var ReactCodeMirror = /*#__PURE__*/React.forwardRef((props, ref) => {
72
72
  }
73
73
  }; // eslint-disable-next-line react-hooks/exhaustive-deps
74
74
  }, []);
75
+ var defaultClassNames = typeof theme === 'string' ? "cm-theme-" + theme : 'cm-theme';
75
76
  return /*#__PURE__*/_jsx("div", _extends({
76
77
  ref: editor,
77
- className: "cm-theme-" + theme + (className ? " " + className : '')
78
+ className: "" + defaultClassNames + (className ? " " + className : '')
78
79
  }, other));
79
80
  });
80
81
  ReactCodeMirror.displayName = 'CodeMirror';
package/esm/index.js.map CHANGED
@@ -40,10 +40,11 @@
40
40
  "setContainer",
41
41
  "current",
42
42
  "destroy",
43
+ "defaultClassNames",
43
44
  "displayName"
44
45
  ],
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",
46
+ "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,MAAMC,iBAAiB,GAAG,OAAOpB,KAAP,KAAiB,QAAjB,iBAAwCA,KAAxC,GAAkD,UAA5E;AACA,sBAAO;AAAK,IAAA,GAAG,EAAEa,MAAV;AAAkB,IAAA,SAAS,OAAKO,iBAAL,IAAyB3B,SAAS,SAAOA,SAAP,GAAqB,EAAvD;AAA3B,KAA4FmB,KAA5F,EAAP;AACD,CA1DuB,CAAxB;AA4DAvB,eAAe,CAACgC,WAAhB,GAA8B,YAA9B;AAEA,eAAehC,eAAf",
46
47
  "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={`cm-theme-${theme}${className ? ` ${className}` : ''}`} {...other}></div>;\n});\n\nReactCodeMirror.displayName = 'CodeMirror';\n\nexport default ReactCodeMirror;\n"
48
+ "import React, { useEffect, useRef, useImperativeHandle } from 'react';\nimport { EditorState, EditorStateConfig, Extension } from '@codemirror/state';\nimport { EditorView, ViewUpdate } from '@codemirror/view';\nimport { useCodeMirror } from './useCodeMirror';\n\nexport * from '@codemirror/view';\nexport * from '@codemirror/basic-setup';\nexport * from '@codemirror/state';\nexport * from './useCodeMirror';\n\nexport interface ReactCodeMirrorProps\n extends Omit<EditorStateConfig, 'doc' | 'extensions'>,\n Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'placeholder'> {\n /** value of the auto created model in the editor. */\n value?: string;\n height?: string;\n minHeight?: string;\n maxHeight?: string;\n width?: string;\n minWidth?: string;\n maxWidth?: string;\n /** focus on the editor. */\n autoFocus?: boolean;\n /** Enables a placeholder—a piece of example content to show when the editor is empty. */\n placeholder?: string | HTMLElement;\n /**\n * `light` / `dark` / `Extension` Defaults to `light`.\n * @default light\n */\n theme?: 'light' | 'dark' | Extension;\n /**\n * Whether to optional basicSetup by default\n * @default true\n */\n basicSetup?: boolean;\n /**\n * This disables editing of the editor content by the user.\n * @default true\n */\n editable?: boolean;\n /**\n * Whether to optional basicSetup by default\n * @default true\n */\n indentWithTab?: boolean;\n /** Fired whenever a change occurs to the document. */\n onChange?(value: string, viewUpdate: ViewUpdate): void;\n /** Fired whenever a change occurs to the document. There is a certain difference with `onChange`. */\n onUpdate?(viewUpdate: ViewUpdate): void;\n /**\n * Extension values can be [provided](https://codemirror.net/6/docs/ref/#state.EditorStateConfig.extensions) when creating a state to attach various kinds of configuration and behavior information.\n * They can either be built-in extension-providing objects,\n * such as [state fields](https://codemirror.net/6/docs/ref/#state.StateField) or [facet providers](https://codemirror.net/6/docs/ref/#state.Facet.of),\n * or objects with an extension in its `extension` property. Extensions can be nested in arrays arbitrarily deep—they will be flattened when processed.\n */\n extensions?: Extension[];\n /**\n * If the view is going to be mounted in a shadow root or document other than the one held by the global variable document (the default), you should pass it here.\n * Originally from the [config of EditorView](https://codemirror.net/6/docs/ref/#view.EditorView.constructor%5Econfig.root)\n */\n root?: ShadowRoot | Document;\n}\n\nexport interface ReactCodeMirrorRef {\n editor?: HTMLDivElement | null;\n state?: EditorState;\n view?: EditorView;\n}\n\nconst ReactCodeMirror = React.forwardRef<ReactCodeMirrorRef, ReactCodeMirrorProps>((props, ref) => {\n const {\n className,\n value,\n selection,\n extensions = [],\n onChange,\n onUpdate,\n autoFocus,\n theme = 'light',\n height,\n minHeight,\n maxHeight,\n width,\n minWidth,\n maxWidth,\n basicSetup,\n placeholder,\n indentWithTab,\n editable,\n root,\n ...other\n } = props;\n const editor = useRef<HTMLDivElement>(null);\n const { state, view, container, setContainer } = useCodeMirror({\n container: editor.current,\n root,\n value,\n autoFocus,\n theme,\n height,\n minHeight,\n maxHeight,\n width,\n minWidth,\n maxWidth,\n basicSetup,\n placeholder,\n indentWithTab,\n editable,\n selection,\n onChange,\n onUpdate,\n extensions,\n });\n useImperativeHandle(ref, () => ({ editor: container, state, view }));\n useEffect(() => {\n setContainer(editor.current);\n return () => {\n if (view) {\n view.destroy();\n }\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const defaultClassNames = typeof theme === 'string' ? `cm-theme-${theme}` : 'cm-theme';\n return <div ref={editor} className={`${defaultClassNames}${className ? ` ${className}` : ''}`} {...other}></div>;\n});\n\nReactCodeMirror.displayName = 'CodeMirror';\n\nexport default ReactCodeMirror;\n"
48
49
  ]
49
50
  }
package/esm/useCodeMirror.js CHANGED
@@ -62,7 +62,19 @@ export function useCodeMirror(props) {
62
62
  getExtensions.unshift(extendPlaceholder(placeholder));
63
63
  }
64
64
 
65
- theme === 'light' ? getExtensions.push(defaultLightThemeOption) : getExtensions.push(oneDarkTheme);
65
+ switch (theme) {
66
+ case 'light':
67
+ getExtensions.push(defaultLightThemeOption);
68
+ break;
69
+
70
+ case 'dark':
71
+ getExtensions.push(oneDarkTheme);
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
@@ -68,8 +68,8 @@
68
68
  "reconfigure",
69
69
  "focus"
70
70
  ],
71
- "mappings": "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",
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 { 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
+ "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 switch (theme) {\n case 'light':\n getExtensions.push(defaultLightThemeOption);\n break;\n case 'dark':\n getExtensions.push(oneDarkTheme);\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.2.2",
3
+ "version": "4.3.1",
4
4
  "description": "CodeMirror component for React.",
5
5
  "homepage": "https://uiwjs.github.io/react-codemirror",
6
6
  "main": "cjs/index.js",
@@ -63,47 +63,47 @@
63
63
  "react-dom": ">=16.8.0"
64
64
  },
65
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.14"
66
+ "@babel/runtime": "^7.16.3",
67
+ "@codemirror/basic-setup": "^0.19.0",
68
+ "@codemirror/state": "^0.19.5",
69
+ "@codemirror/theme-one-dark": "^0.19.1",
70
+ "@codemirror/view": "^0.19.15"
71
71
  },
72
72
  "devDependencies": {
73
73
  "@codemirror/lang-cpp": "0.19.1",
74
- "@codemirror/lang-html": "0.19.3",
74
+ "@codemirror/lang-html": "0.19.4",
75
75
  "@codemirror/lang-java": "0.19.1",
76
- "@codemirror/lang-javascript": "0.19.2",
76
+ "@codemirror/lang-javascript": "0.19.3",
77
77
  "@codemirror/lang-json": "0.19.1",
78
78
  "@codemirror/lang-lezer": "0.19.1",
79
- "@codemirror/lang-markdown": "0.19.2",
79
+ "@codemirror/lang-markdown": "0.19.3",
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.2",
86
+ "@codemirror/stream-parser": "0.19.3",
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.34",
90
+ "@types/react": "17.0.37",
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.1",
94
+ "@uiw/react-markdown-preview": "3.4.5",
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
- "jest": "27.3.1",
99
+ "jest": "27.4.5",
100
100
  "kkt": "6.11.0",
101
101
  "lint-staged": "11.2.6",
102
- "prettier": "2.4.1",
102
+ "prettier": "2.5.1",
103
103
  "react": "17.0.2",
104
104
  "react-dom": "17.0.2",
105
105
  "react-test-renderer": "17.0.2",
106
- "tsbb": "3.4.4"
106
+ "tsbb": "3.5.4"
107
107
  },
108
108
  "browserslist": {
109
109
  "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
@@ -123,7 +123,8 @@ const ReactCodeMirror = React.forwardRef<ReactCodeMirrorRef, ReactCodeMirrorProp
123
123
  // eslint-disable-next-line react-hooks/exhaustive-deps
124
124
  }, []);
125
125
 
126
- return <div ref={editor} className={`cm-theme-${theme}${className ? ` ${className}` : ''}`} {...other}></div>;
126
+ const defaultClassNames = typeof theme === 'string' ? `cm-theme-${theme}` : 'cm-theme';
127
+ return <div ref={editor} className={`${defaultClassNames}${className ? ` ${className}` : ''}`} {...other}></div>;
127
128
  });
128
129
 
129
130
  ReactCodeMirror.displayName = 'CodeMirror';
package/src/useCodeMirror.ts CHANGED
@@ -64,7 +64,17 @@ export function useCodeMirror(props: UseCodeMirror) {
64
64
  getExtensions.unshift(extendPlaceholder(placeholder));
65
65
  }
66
66
 
67
- theme === 'light' ? getExtensions.push(defaultLightThemeOption) : getExtensions.push(oneDarkTheme);
67
+ switch (theme) {
68
+ case 'light':
69
+ getExtensions.push(defaultLightThemeOption);
70
+ break;
71
+ case 'dark':
72
+ getExtensions.push(oneDarkTheme);
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));