@uiw/react-codemirror 4.9.2 → 4.9.5
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 +47 -26
- package/cjs/index.d.ts +1 -1
- package/cjs/index.js.map +1 -1
- package/cjs/useCodeMirror.js +8 -8
- package/cjs/useCodeMirror.js.map +7 -7
- package/dist/mdeditor.js +33 -6
- package/dist/mdeditor.min.js +1 -1
- package/esm/index.d.ts +1 -1
- package/esm/index.js.map +1 -1
- package/esm/useCodeMirror.js +8 -8
- package/esm/useCodeMirror.js.map +6 -6
- package/package.json +1 -1
- package/src/index.tsx +1 -1
- package/src/useCodeMirror.ts +13 -10
package/README.md
CHANGED
|
@@ -23,7 +23,8 @@ CodeMirror component for React. Demo Preview: [@uiwjs.github.io/react-codemirror
|
|
|
23
23
|
⚛️ Support the features of React Hook(requires React 16.8+).
|
|
24
24
|
📚 Use Typescript to write, better code hints.
|
|
25
25
|
🌐 The bundled version supports use directly in the browser [#267](https://github.com/uiwjs/react-codemirror/issues/267#issuecomment-1041227592).
|
|
26
|
-
🌎 There are better [sample previews](https://uiwjs.github.io/react-codemirror).
|
|
26
|
+
🌎 There are better [sample previews](https://uiwjs.github.io/react-codemirror).
|
|
27
|
+
🎨 Support [theme](https://uiwjs.github.io/react-codemirror/#/theme/data/dracula) customization, provide theme [editor](https://uiwjs.github.io/react-codemirror/#/theme/editor).
|
|
27
28
|
|
|
28
29
|
## Install
|
|
29
30
|
|
|
@@ -43,14 +44,15 @@ import CodeMirror from '@uiw/react-codemirror';
|
|
|
43
44
|
import { javascript } from '@codemirror/lang-javascript';
|
|
44
45
|
|
|
45
46
|
function App() {
|
|
47
|
+
const onChange = React.useCallback((value, viewUpdate) => {
|
|
48
|
+
console.log('value:', value);
|
|
49
|
+
}, []);
|
|
46
50
|
return (
|
|
47
51
|
<CodeMirror
|
|
48
52
|
value="console.log('hello world!');"
|
|
49
53
|
height="200px"
|
|
50
54
|
extensions={[javascript({ jsx: true })]}
|
|
51
|
-
onChange={
|
|
52
|
-
console.log('value:', value);
|
|
53
|
-
}}
|
|
55
|
+
onChange={onChange}
|
|
54
56
|
/>
|
|
55
57
|
);
|
|
56
58
|
}
|
|
@@ -74,16 +76,7 @@ func main() {
|
|
|
74
76
|
}`;
|
|
75
77
|
|
|
76
78
|
export default function App() {
|
|
77
|
-
return (
|
|
78
|
-
<CodeMirror
|
|
79
|
-
value={goLang}
|
|
80
|
-
height="200px"
|
|
81
|
-
extensions={[StreamLanguage.define(go)]}
|
|
82
|
-
onChange={(value, viewUpdate) => {
|
|
83
|
-
console.log('value:', value);
|
|
84
|
-
}}
|
|
85
|
-
/>
|
|
86
|
-
);
|
|
79
|
+
return <CodeMirror value={goLang} height="200px" extensions={[StreamLanguage.define(go)]} />;
|
|
87
80
|
}
|
|
88
81
|
```
|
|
89
82
|
|
|
@@ -170,6 +163,27 @@ export default function App() {
|
|
|
170
163
|
}
|
|
171
164
|
```
|
|
172
165
|
|
|
166
|
+
## Using Theme
|
|
167
|
+
|
|
168
|
+
We have created a [`theme editor`](https://uiwjs.github.io/react-codemirror/#/theme/editor) where you can define your own theme. We have also defined [some themes](https://uiwjs.github.io/react-codemirror/#/theme/data/okaidia) ourselves, which can be installed and used directly. Below is a usage example:
|
|
169
|
+
|
|
170
|
+
```jsx
|
|
171
|
+
import CodeMirror from '@uiw/react-codemirror';
|
|
172
|
+
import { javascript } from '@codemirror/lang-javascript';
|
|
173
|
+
import { okaidia } from '@uiw/codemirror-theme-okaidia';
|
|
174
|
+
|
|
175
|
+
export default function App() {
|
|
176
|
+
return (
|
|
177
|
+
<CodeMirror
|
|
178
|
+
value="console.log('hello world!');"
|
|
179
|
+
height="200px"
|
|
180
|
+
theme={okaidia}
|
|
181
|
+
extensions={[javascript({ jsx: true })]}
|
|
182
|
+
/>
|
|
183
|
+
);
|
|
184
|
+
}
|
|
185
|
+
```
|
|
186
|
+
|
|
173
187
|
## Using custom theme
|
|
174
188
|
|
|
175
189
|
```jsx
|
|
@@ -179,12 +193,13 @@ import { javascript } from '@codemirror/lang-javascript';
|
|
|
179
193
|
import { tags as t } from '@lezer/highlight';
|
|
180
194
|
|
|
181
195
|
const myTheme = createTheme({
|
|
182
|
-
|
|
196
|
+
theme: 'light',
|
|
183
197
|
settings: {
|
|
184
198
|
background: '#ffffff',
|
|
185
199
|
foreground: '#75baff',
|
|
186
200
|
caret: '#5d00ff',
|
|
187
201
|
selection: '#036dd626',
|
|
202
|
+
selectionMatch: '#036dd626',
|
|
188
203
|
lineHighlight: '#8a91991a',
|
|
189
204
|
gutterBackground: '#fff',
|
|
190
205
|
gutterForeground: '#8a919966',
|
|
@@ -208,15 +223,16 @@ const myTheme = createTheme({
|
|
|
208
223
|
});
|
|
209
224
|
|
|
210
225
|
export default function App() {
|
|
226
|
+
const onChange = React.useCallback((value, viewUpdate) => {
|
|
227
|
+
console.log('value:', value);
|
|
228
|
+
}, []);
|
|
211
229
|
return (
|
|
212
230
|
<CodeMirror
|
|
213
231
|
value="console.log('hello world!');"
|
|
214
232
|
height="200px"
|
|
215
233
|
theme={myTheme}
|
|
216
234
|
extensions={[javascript({ jsx: true })]}
|
|
217
|
-
onChange={
|
|
218
|
-
console.log('value:', value);
|
|
219
|
-
}}
|
|
235
|
+
onChange={onChange}
|
|
220
236
|
/>
|
|
221
237
|
);
|
|
222
238
|
}
|
|
@@ -291,7 +307,7 @@ export interface ReactCodeMirrorProps
|
|
|
291
307
|
indentWithTab?: boolean;
|
|
292
308
|
/** Fired whenever a change occurs to the document. */
|
|
293
309
|
onChange?(value: string, viewUpdate: ViewUpdate): void;
|
|
294
|
-
/** Fired whenever
|
|
310
|
+
/** Fired whenever any state change occurs within the editor, including non-document changes like lint results. */
|
|
295
311
|
onUpdate?(viewUpdate: ViewUpdate): void;
|
|
296
312
|
/**
|
|
297
313
|
* 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.
|
|
@@ -345,13 +361,18 @@ export interface BasicSetupOptions {
|
|
|
345
361
|
|
|
346
362
|
## Packages
|
|
347
363
|
|
|
348
|
-
| Name
|
|
349
|
-
|
|
|
350
|
-
| `@uiw/react-codemirror`
|
|
351
|
-
| `@uiw/codemirror-themes`
|
|
352
|
-
| `@uiw/codemirror-
|
|
353
|
-
| `@uiw/codemirror-theme-
|
|
354
|
-
| `@uiw/codemirror-theme-
|
|
364
|
+
| Name | NPM Version | Website |
|
|
365
|
+
| ----------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
|
|
366
|
+
| `@uiw/react-codemirror` | [](https://www.npmjs.com/package/@uiw/react-codemirror) | [Preview Website](https://uiwjs.github.io/react-codemirror/) |
|
|
367
|
+
| `@uiw/codemirror-themes` | [](https://www.npmjs.com/package/@uiw/codemirror-themes) | [Preview Website](https://uiwjs.github.io/react-codemirror/#/theme/doc) |
|
|
368
|
+
| `@uiw/codemirror-extensions-events` | [](https://www.npmjs.com/package/@uiw/codemirror-extensions-events) | [Preview Website](https://uiwjs.github.io/react-codemirror/#/extensions/events) |
|
|
369
|
+
| `@uiw/codemirror-theme-abcdef` | [](https://www.npmjs.com/package/@uiw/codemirror-theme-abcdef) | [Preview Website](https://uiwjs.github.io/react-codemirror/#/theme/data/abcdef) |
|
|
370
|
+
| `@uiw/codemirror-theme-okaidia` | [](https://www.npmjs.com/package/@uiw/codemirror-theme-okaidia) | [Preview Website](https://uiwjs.github.io/react-codemirror/#/theme/data/okaidia) |
|
|
371
|
+
| `@uiw/codemirror-theme-bespin` | [](https://www.npmjs.com/package/@uiw/codemirror-theme-bespin) | [Preview Website](https://uiwjs.github.io/react-codemirror/#/theme/data/bespin) |
|
|
372
|
+
| `@uiw/codemirror-theme-duotone` | [](https://www.npmjs.com/package/@uiw/codemirror-theme-duotone) | [Preview Website](https://uiwjs.github.io/react-codemirror/#/theme/data/duotone/light) |
|
|
373
|
+
| `@uiw/codemirror-theme-dracula` | [](https://www.npmjs.com/package/@uiw/codemirror-theme-dracula) | [Preview Website](https://uiwjs.github.io/react-codemirror/#/theme/data/dracula) |
|
|
374
|
+
| `@uiw/codemirror-theme-darcula` | [](https://www.npmjs.com/package/@uiw/codemirror-theme-darcula) | [Preview Website](https://uiwjs.github.io/react-codemirror/#/theme/data/darcula) |
|
|
375
|
+
| `@uiw/codemirror-theme-eclipse` | [](https://www.npmjs.com/package/@uiw/codemirror-theme-eclipse) | [Preview Website](https://uiwjs.github.io/react-codemirror/#/theme/data/eclipse) |
|
|
355
376
|
|
|
356
377
|
<!--rehype:style=width: 100%; display: inline-table;-->
|
|
357
378
|
|
package/cjs/index.d.ts
CHANGED
|
@@ -44,7 +44,7 @@ export interface ReactCodeMirrorProps extends Omit<EditorStateConfig, 'doc' | 'e
|
|
|
44
44
|
indentWithTab?: boolean;
|
|
45
45
|
/** Fired whenever a change occurs to the document. */
|
|
46
46
|
onChange?(value: string, viewUpdate: ViewUpdate): void;
|
|
47
|
-
/** Fired whenever
|
|
47
|
+
/** Fired whenever any state change occurs within the editor, including non-document changes like lint results. */
|
|
48
48
|
onUpdate?(viewUpdate: ViewUpdate): void;
|
|
49
49
|
/**
|
|
50
50
|
* 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.
|
package/cjs/index.js.map
CHANGED
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"../src/index.tsx"
|
|
46
46
|
],
|
|
47
47
|
"sourcesContent": [
|
|
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';\nimport { BasicSetupOptions } from './basicSetup';\n\nexport * from './basicSetup';\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 | BasicSetupOptions;\n /**\n * This disables editing of the editor content by the user.\n * @default true\n */\n editable?: boolean;\n /**\n * This disables editing of the editor content by the user.\n * @default false\n */\n readOnly?: 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
|
|
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';\nimport { BasicSetupOptions } from './basicSetup';\n\nexport * from './basicSetup';\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 | BasicSetupOptions;\n /**\n * This disables editing of the editor content by the user.\n * @default true\n */\n editable?: boolean;\n /**\n * This disables editing of the editor content by the user.\n * @default false\n */\n readOnly?: 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 any state change occurs within the editor, including non-document changes like lint results. */\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 readOnly,\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 readOnly,\n selection,\n onChange,\n onUpdate,\n extensions,\n });\n useImperativeHandle(ref, () => ({ editor: container, state, view }), [container, state, view]);\n useEffect(() => {\n setContainer(editor.current);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n // check type of value\n if (typeof value !== 'string') {\n throw new Error(`value must be typeof string but got ${typeof value}`);\n }\n\n const defaultClassNames = typeof theme === 'string' ? `cm-theme-${theme}` : 'cm-theme';\n return <div ref={editor} className={`${defaultClassNames}${className ? ` ${className}` : ''}`} {...other}></div>;\n});\n\nReactCodeMirror.displayName = 'CodeMirror';\n\nexport default ReactCodeMirror;\n"
|
|
49
49
|
],
|
|
50
50
|
"mappings": "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"
|
|
51
51
|
}
|
package/cjs/useCodeMirror.js
CHANGED
|
@@ -183,6 +183,14 @@ function useCodeMirror(props) {
|
|
|
183
183
|
view.focus();
|
|
184
184
|
}
|
|
185
185
|
}, [autoFocus, view]);
|
|
186
|
+
(0, _react.useEffect)(function () {
|
|
187
|
+
if (view) {
|
|
188
|
+
view.dispatch({
|
|
189
|
+
effects: _state.StateEffect.reconfigure.of(getExtensions)
|
|
190
|
+
});
|
|
191
|
+
} // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
192
|
+
|
|
193
|
+
}, [theme, extensions, height, minHeight, maxHeight, width, minWidth, maxWidth, placeholderStr, editable, readOnly, defaultIndentWithTab, defaultBasicSetup, onChange, onUpdate]);
|
|
186
194
|
(0, _react.useEffect)(function () {
|
|
187
195
|
var currentValue = view ? view.state.doc.toString() : '';
|
|
188
196
|
|
|
@@ -196,14 +204,6 @@ function useCodeMirror(props) {
|
|
|
196
204
|
});
|
|
197
205
|
}
|
|
198
206
|
}, [value, view]);
|
|
199
|
-
(0, _react.useEffect)(function () {
|
|
200
|
-
if (view) {
|
|
201
|
-
view.dispatch({
|
|
202
|
-
effects: _state.StateEffect.reconfigure.of(getExtensions)
|
|
203
|
-
});
|
|
204
|
-
} // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
205
|
-
|
|
206
|
-
}, [theme, extensions, height, minHeight, maxHeight, width, placeholderStr, minWidth, maxWidth, editable, defaultIndentWithTab, defaultBasicSetup]);
|
|
207
207
|
return {
|
|
208
208
|
state: state,
|
|
209
209
|
setState: setState,
|
package/cjs/useCodeMirror.js.map
CHANGED
|
@@ -58,22 +58,22 @@
|
|
|
58
58
|
"undefined",
|
|
59
59
|
"destroy",
|
|
60
60
|
"focus",
|
|
61
|
-
"currentValue",
|
|
62
61
|
"dispatch",
|
|
62
|
+
"effects",
|
|
63
|
+
"StateEffect",
|
|
64
|
+
"reconfigure",
|
|
65
|
+
"currentValue",
|
|
63
66
|
"changes",
|
|
64
67
|
"from",
|
|
65
68
|
"to",
|
|
66
69
|
"length",
|
|
67
|
-
"insert"
|
|
68
|
-
"effects",
|
|
69
|
-
"StateEffect",
|
|
70
|
-
"reconfigure"
|
|
70
|
+
"insert"
|
|
71
71
|
],
|
|
72
72
|
"sources": [
|
|
73
73
|
"../src/useCodeMirror.ts"
|
|
74
74
|
],
|
|
75
75
|
"sourcesContent": [
|
|
76
|
-
"import { useEffect, useState } from 'react';\nimport { EditorState, StateEffect } from '@codemirror/state';\nimport { indentWithTab } from '@codemirror/commands';\nimport { EditorView, keymap, ViewUpdate, placeholder } from '@codemirror/view';\nimport { oneDark } from '@codemirror/theme-one-dark';\nimport { basicSetup } from './basicSetup';\nimport { ReactCodeMirrorProps } from '.';\n\nexport interface UseCodeMirror extends ReactCodeMirrorProps {\n container?: HTMLDivElement | null;\n}\n\nexport function useCodeMirror(props: UseCodeMirror) {\n const {\n value,\n selection,\n onChange,\n onUpdate,\n extensions = [],\n autoFocus,\n theme = 'light',\n height = '',\n minHeight = '',\n maxHeight = '',\n placeholder: placeholderStr = '',\n width = '',\n minWidth = '',\n maxWidth = '',\n editable = true,\n readOnly = false,\n indentWithTab: defaultIndentWithTab = true,\n basicSetup: defaultBasicSetup = true,\n root,\n } = props;\n const [container, setContainer] = useState(props.container);\n const [view, setView] = useState<EditorView>();\n const [state, setState] = useState<EditorState>();\n const defaultLightThemeOption = EditorView.theme(\n {\n '&': {\n backgroundColor: '#fff',\n },\n },\n {\n dark: false,\n },\n );\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\n let getExtensions = [updateListener, defaultThemeOption];\n if (defaultIndentWithTab) {\n getExtensions.unshift(keymap.of([indentWithTab]));\n }\n if (defaultBasicSetup) {\n if (typeof defaultBasicSetup === 'boolean') {\n getExtensions.unshift(basicSetup());\n } else {\n getExtensions.unshift(basicSetup(defaultBasicSetup));\n }\n }\n\n if (placeholderStr) {\n getExtensions.unshift(placeholder(placeholderStr));\n }\n\n switch (theme) {\n case 'light':\n getExtensions.push(defaultLightThemeOption);\n break;\n case 'dark':\n getExtensions.push(oneDark);\n break;\n default:\n getExtensions.push(theme);\n break;\n }\n\n if (editable === false) {\n getExtensions.push(EditorView.editable.of(false));\n }\n if (readOnly) {\n getExtensions.push(EditorState.readOnly.of(true));\n }\n\n if (onUpdate && typeof onUpdate === 'function') {\n getExtensions.push(EditorView.updateListener.of(onUpdate));\n }\n getExtensions = getExtensions.concat(extensions);\n\n useEffect(() => {\n if (container && !state) {\n const stateCurrent = EditorState.create({\n doc: value,\n selection,\n extensions: getExtensions,\n });\n setState(stateCurrent);\n if (!view) {\n const viewCurrent = new EditorView({\n state: stateCurrent,\n parent: container,\n root,\n });\n setView(viewCurrent);\n }\n }\n return () => {\n if (view) {\n setView(undefined);\n }\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [container, state]);\n\n useEffect(\n () => () => {\n if (view) {\n view.destroy();\n setView(undefined);\n }\n },\n [view],\n );\n\n useEffect(() => {\n if (autoFocus && view) {\n view.focus();\n }\n }, [autoFocus, view]);\n\n useEffect(() => {\n
|
|
76
|
+
"import { useEffect, useState } from 'react';\nimport { EditorState, StateEffect } from '@codemirror/state';\nimport { indentWithTab } from '@codemirror/commands';\nimport { EditorView, keymap, ViewUpdate, placeholder } from '@codemirror/view';\nimport { oneDark } from '@codemirror/theme-one-dark';\nimport { basicSetup } from './basicSetup';\nimport { ReactCodeMirrorProps } from '.';\n\nexport interface UseCodeMirror extends ReactCodeMirrorProps {\n container?: HTMLDivElement | null;\n}\n\nexport function useCodeMirror(props: UseCodeMirror) {\n const {\n value,\n selection,\n onChange,\n onUpdate,\n extensions = [],\n autoFocus,\n theme = 'light',\n height = '',\n minHeight = '',\n maxHeight = '',\n placeholder: placeholderStr = '',\n width = '',\n minWidth = '',\n maxWidth = '',\n editable = true,\n readOnly = false,\n indentWithTab: defaultIndentWithTab = true,\n basicSetup: defaultBasicSetup = true,\n root,\n } = props;\n const [container, setContainer] = useState(props.container);\n const [view, setView] = useState<EditorView>();\n const [state, setState] = useState<EditorState>();\n const defaultLightThemeOption = EditorView.theme(\n {\n '&': {\n backgroundColor: '#fff',\n },\n },\n {\n dark: false,\n },\n );\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\n let getExtensions = [updateListener, defaultThemeOption];\n if (defaultIndentWithTab) {\n getExtensions.unshift(keymap.of([indentWithTab]));\n }\n if (defaultBasicSetup) {\n if (typeof defaultBasicSetup === 'boolean') {\n getExtensions.unshift(basicSetup());\n } else {\n getExtensions.unshift(basicSetup(defaultBasicSetup));\n }\n }\n\n if (placeholderStr) {\n getExtensions.unshift(placeholder(placeholderStr));\n }\n\n switch (theme) {\n case 'light':\n getExtensions.push(defaultLightThemeOption);\n break;\n case 'dark':\n getExtensions.push(oneDark);\n break;\n default:\n getExtensions.push(theme);\n break;\n }\n\n if (editable === false) {\n getExtensions.push(EditorView.editable.of(false));\n }\n if (readOnly) {\n getExtensions.push(EditorState.readOnly.of(true));\n }\n\n if (onUpdate && typeof onUpdate === 'function') {\n getExtensions.push(EditorView.updateListener.of(onUpdate));\n }\n getExtensions = getExtensions.concat(extensions);\n\n useEffect(() => {\n if (container && !state) {\n const stateCurrent = EditorState.create({\n doc: value,\n selection,\n extensions: getExtensions,\n });\n setState(stateCurrent);\n if (!view) {\n const viewCurrent = new EditorView({\n state: stateCurrent,\n parent: container,\n root,\n });\n setView(viewCurrent);\n }\n }\n return () => {\n if (view) {\n setView(undefined);\n }\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [container, state]);\n\n useEffect(\n () => () => {\n if (view) {\n view.destroy();\n setView(undefined);\n }\n },\n [view],\n );\n\n useEffect(() => {\n if (autoFocus && view) {\n view.focus();\n }\n }, [autoFocus, view]);\n\n useEffect(() => {\n if (view) {\n view.dispatch({ effects: StateEffect.reconfigure.of(getExtensions) });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [\n theme,\n extensions,\n height,\n minHeight,\n maxHeight,\n width,\n minWidth,\n maxWidth,\n placeholderStr,\n editable,\n readOnly,\n defaultIndentWithTab,\n defaultBasicSetup,\n onChange,\n onUpdate,\n ]);\n\n useEffect(() => {\n const currentValue = view ? view.state.doc.toString() : '';\n if (view && value !== currentValue) {\n view.dispatch({\n changes: { from: 0, to: currentValue.length, insert: value || '' },\n });\n }\n }, [value, view]);\n\n return { state, setState, view, setView, container, setContainer };\n}\n"
|
|
77
77
|
],
|
|
78
|
-
"mappings": "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
|
|
78
|
+
"mappings": "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"
|
|
79
79
|
}
|
package/dist/mdeditor.js
CHANGED
|
@@ -3546,7 +3546,10 @@ const parseWorker = /*@__PURE__*/view_.ViewPlugin.fromClass(class ParseWorker {
|
|
|
3546
3546
|
eventHandlers: { focus() { this.scheduleWork(); } }
|
|
3547
3547
|
});
|
|
3548
3548
|
/**
|
|
3549
|
-
The facet used to associate a language with an editor state.
|
|
3549
|
+
The facet used to associate a language with an editor state. Used
|
|
3550
|
+
by `Language` object's `extension` property (so you don't need to
|
|
3551
|
+
manually wrap your languages in this). Can be used to access the
|
|
3552
|
+
current language on a state.
|
|
3550
3553
|
*/
|
|
3551
3554
|
const language = /*@__PURE__*/state_.Facet.define({
|
|
3552
3555
|
combine(languages) { return languages.length ? languages[0] : null; },
|
|
@@ -4134,6 +4137,13 @@ function selectedLines(view) {
|
|
|
4134
4137
|
}
|
|
4135
4138
|
return lines;
|
|
4136
4139
|
}
|
|
4140
|
+
/**
|
|
4141
|
+
The state field that stores the folded ranges (as a [decoration
|
|
4142
|
+
set](https://codemirror.net/6/docs/ref/#view.DecorationSet)). Can be passed to
|
|
4143
|
+
[`EditorState.toJSON`](https://codemirror.net/6/docs/ref/#state.EditorState.toJSON) and
|
|
4144
|
+
[`fromJSON`](https://codemirror.net/6/docs/ref/#state.EditorState^fromJSON) to serialize the fold
|
|
4145
|
+
state.
|
|
4146
|
+
*/
|
|
4137
4147
|
const foldState = /*@__PURE__*/state_.StateField.define({
|
|
4138
4148
|
create() {
|
|
4139
4149
|
return view_.Decoration.none;
|
|
@@ -4161,7 +4171,24 @@ const foldState = /*@__PURE__*/state_.StateField.define({
|
|
|
4161
4171
|
}
|
|
4162
4172
|
return folded;
|
|
4163
4173
|
},
|
|
4164
|
-
provide: f => view_.EditorView.decorations.from(f)
|
|
4174
|
+
provide: f => view_.EditorView.decorations.from(f),
|
|
4175
|
+
toJSON(folded, state) {
|
|
4176
|
+
let ranges = [];
|
|
4177
|
+
folded.between(0, state.doc.length, (from, to) => { ranges.push(from, to); });
|
|
4178
|
+
return ranges;
|
|
4179
|
+
},
|
|
4180
|
+
fromJSON(value) {
|
|
4181
|
+
if (!Array.isArray(value) || value.length % 2)
|
|
4182
|
+
throw new RangeError("Invalid JSON for fold state");
|
|
4183
|
+
let ranges = [];
|
|
4184
|
+
for (let i = 0; i < value.length;) {
|
|
4185
|
+
let from = value[i++], to = value[i++];
|
|
4186
|
+
if (typeof from != "number" || typeof to != "number")
|
|
4187
|
+
throw new RangeError("Invalid JSON for fold state");
|
|
4188
|
+
ranges.push(foldWidget.range(from, to));
|
|
4189
|
+
}
|
|
4190
|
+
return view_.Decoration.set(ranges, true);
|
|
4191
|
+
}
|
|
4165
4192
|
});
|
|
4166
4193
|
/**
|
|
4167
4194
|
Get a [range set](https://codemirror.net/6/docs/ref/#state.RangeSet) containing the folded ranges
|
|
@@ -5179,8 +5206,8 @@ for (let [legacyName, name] of [
|
|
|
5179
5206
|
["variable-2", "variableName.special"],
|
|
5180
5207
|
["string-2", "string.special"],
|
|
5181
5208
|
["def", "variableName.definition"],
|
|
5182
|
-
["tag", "
|
|
5183
|
-
["attribute", "
|
|
5209
|
+
["tag", "tagName"],
|
|
5210
|
+
["attribute", "attributeName"],
|
|
5184
5211
|
["type", "typeName"],
|
|
5185
5212
|
["builtin", "variableName.standard"],
|
|
5186
5213
|
["qualifier", "modifier"],
|
|
@@ -10491,8 +10518,8 @@ as desired.
|
|
|
10491
10518
|
*/var basicSetup=function basicSetup(){var options=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};var keymaps=[];if(options.closeBracketsKeymap!==false){keymaps.push(_toConsumableArray(closeBracketsKeymap));}if(options.defaultKeymap!==false){keymaps.push(_toConsumableArray(defaultKeymap));}if(options.searchKeymap!==false){keymaps.push(_toConsumableArray(searchKeymap));}if(options.historyKeymap!==false){keymaps.push(_toConsumableArray(historyKeymap));}if(options.foldKeymap!==false){keymaps.push(_toConsumableArray(foldKeymap));}if(options.completionKeymap!==false){keymaps.push(_toConsumableArray(completionKeymap));}if(options.lintKeymap!==false){keymaps.push(_toConsumableArray(lintKeymap));}var extensions=[];if(options.lineNumbers!==false)extensions.push((0,view_.lineNumbers)());if(options.highlightActiveLineGutter!==false)extensions.push((0,view_.highlightActiveLineGutter)());if(options.highlightSpecialChars!==false)extensions.push((0,view_.highlightSpecialChars)());if(options.history!==false)extensions.push(dist_history());if(options.foldGutter!==false)extensions.push(foldGutter());if(options.drawSelection!==false)extensions.push((0,view_.drawSelection)());if(options.dropCursor!==false)extensions.push((0,view_.dropCursor)());if(options.allowMultipleSelections!==false)extensions.push(state_.EditorState.allowMultipleSelections.of(true));if(options.indentOnInput!==false)extensions.push(indentOnInput());if(options.syntaxHighlighting!==false)extensions.push(syntaxHighlighting(defaultHighlightStyle,{fallback:true}));if(options.bracketMatching!==false)extensions.push(bracketMatching());if(options.closeBrackets!==false)extensions.push(closeBrackets());if(options.autocompletion!==false)extensions.push(autocompletion());if(options.rectangularSelection!==false)extensions.push((0,view_.rectangularSelection)());if(options.crosshairCursor!==false)extensions.push((0,view_.crosshairCursor)());if(options.highlightActiveLine!==false)extensions.push((0,view_.highlightActiveLine)());if(options.highlightSelectionMatches!==false)extensions.push(highlightSelectionMatches());return[].concat(extensions,[view_.keymap.of(keymaps.flat())]).filter(Boolean);};
|
|
10492
10519
|
;// CONCATENATED MODULE: ./src/useCodeMirror.ts
|
|
10493
10520
|
function useCodeMirror(props){var value=props.value,selection=props.selection,onChange=props.onChange,onUpdate=props.onUpdate,_props$extensions=props.extensions,extensions=_props$extensions===void 0?[]:_props$extensions,autoFocus=props.autoFocus,_props$theme=props.theme,theme=_props$theme===void 0?'light':_props$theme,_props$height=props.height,height=_props$height===void 0?'':_props$height,_props$minHeight=props.minHeight,minHeight=_props$minHeight===void 0?'':_props$minHeight,_props$maxHeight=props.maxHeight,maxHeight=_props$maxHeight===void 0?'':_props$maxHeight,_props$placeholder=props.placeholder,placeholderStr=_props$placeholder===void 0?'':_props$placeholder,_props$width=props.width,width=_props$width===void 0?'':_props$width,_props$minWidth=props.minWidth,minWidth=_props$minWidth===void 0?'':_props$minWidth,_props$maxWidth=props.maxWidth,maxWidth=_props$maxWidth===void 0?'':_props$maxWidth,_props$editable=props.editable,editable=_props$editable===void 0?true:_props$editable,_props$readOnly=props.readOnly,readOnly=_props$readOnly===void 0?false:_props$readOnly,_props$indentWithTab=props.indentWithTab,defaultIndentWithTab=_props$indentWithTab===void 0?true:_props$indentWithTab,_props$basicSetup=props.basicSetup,defaultBasicSetup=_props$basicSetup===void 0?true:_props$basicSetup,root=props.root;var _useState=(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(props.container),_useState2=_slicedToArray(_useState,2),container=_useState2[0],setContainer=_useState2[1];var _useState3=(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(),_useState4=_slicedToArray(_useState3,2),view=_useState4[0],setView=_useState4[1];var _useState5=(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(),_useState6=_slicedToArray(_useState5,2),state=_useState6[0],setState=_useState6[1];var defaultLightThemeOption=view_.EditorView.theme({'&':{backgroundColor:'#fff'}},{dark:false});var defaultThemeOption=view_.EditorView.theme({'&':{height:height,minHeight:minHeight,maxHeight:maxHeight,width:width,minWidth:minWidth,maxWidth:maxWidth}});var updateListener=view_.EditorView.updateListener.of(function(vu){if(vu.docChanged&&typeof onChange==='function'){var doc=vu.state.doc;var _value=doc.toString();onChange(_value,vu);}});var getExtensions=[updateListener,defaultThemeOption];if(defaultIndentWithTab){getExtensions.unshift(view_.keymap.of([indentWithTab]));}if(defaultBasicSetup){if(typeof defaultBasicSetup==='boolean'){getExtensions.unshift(basicSetup());}else{getExtensions.unshift(basicSetup(defaultBasicSetup));}}if(placeholderStr){getExtensions.unshift((0,view_.placeholder)(placeholderStr));}switch(theme){case'light':getExtensions.push(defaultLightThemeOption);break;case'dark':getExtensions.push(theme_one_dark_.oneDark);break;default:getExtensions.push(theme);break;}if(editable===false){getExtensions.push(view_.EditorView.editable.of(false));}if(readOnly){getExtensions.push(state_.EditorState.readOnly.of(true));}if(onUpdate&&typeof onUpdate==='function'){getExtensions.push(view_.EditorView.updateListener.of(onUpdate));}getExtensions=getExtensions.concat(extensions);(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function(){if(container&&!state){var stateCurrent=state_.EditorState.create({doc:value,selection:selection,extensions:getExtensions});setState(stateCurrent);if(!view){var viewCurrent=new view_.EditorView({state:stateCurrent,parent:container,root:root});setView(viewCurrent);}}return function(){if(view){setView(undefined);}};// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
10494
|
-
},[container,state]);(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function(){return function(){if(view){view.destroy();setView(undefined);}};},[view]);(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function(){if(autoFocus&&view){view.focus();}},[autoFocus,view]);(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function(){
|
|
10495
|
-
},[theme,extensions,height,minHeight,maxHeight,width,
|
|
10521
|
+
},[container,state]);(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function(){return function(){if(view){view.destroy();setView(undefined);}};},[view]);(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function(){if(autoFocus&&view){view.focus();}},[autoFocus,view]);(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function(){if(view){view.dispatch({effects:state_.StateEffect.reconfigure.of(getExtensions)});}// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
10522
|
+
},[theme,extensions,height,minHeight,maxHeight,width,minWidth,maxWidth,placeholderStr,editable,readOnly,defaultIndentWithTab,defaultBasicSetup,onChange,onUpdate]);(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function(){var currentValue=view?view.state.doc.toString():'';if(view&&value!==currentValue){view.dispatch({changes:{from:0,to:currentValue.length,insert:value||''}});}},[value,view]);return{state:state,setState:setState,view:view,setView:setView,container:container,setContainer:setContainer};}
|
|
10496
10523
|
// EXTERNAL MODULE: ../node_modules/react/jsx-runtime.js
|
|
10497
10524
|
var jsx_runtime = __webpack_require__(605);
|
|
10498
10525
|
;// CONCATENATED MODULE: ./src/index.tsx
|