@uiw/react-codemirror 4.3.2 → 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 +2 -2
- package/cjs/index.js +3 -2
- package/cjs/index.js.map +2 -2
- package/esm/index.js +2 -2
- package/esm/index.js.map +2 -2
- package/package.json +10 -10
- package/src/index.tsx +2 -2
- package/src/react-app-env.d.ts +0 -1
package/README.md
CHANGED
|
@@ -167,7 +167,7 @@ export default function App() {
|
|
|
167
167
|
## Using custom theme
|
|
168
168
|
|
|
169
169
|
```jsx
|
|
170
|
-
import {
|
|
170
|
+
import { oneDark } from '@codemirror/theme-one-dark';
|
|
171
171
|
import CodeMirror from '@uiw/react-codemirror';
|
|
172
172
|
import { javascript } from '@codemirror/lang-javascript';
|
|
173
173
|
|
|
@@ -176,7 +176,7 @@ export default function App() {
|
|
|
176
176
|
<CodeMirror
|
|
177
177
|
value="console.log('hello world!');"
|
|
178
178
|
height="100%"
|
|
179
|
-
theme={
|
|
179
|
+
theme={oneDark}
|
|
180
180
|
extensions={[javascript({ jsx: true })]}
|
|
181
181
|
onChange={(value, viewUpdate) => {
|
|
182
182
|
console.log('value:', value);
|
package/cjs/index.js
CHANGED
|
@@ -79,7 +79,8 @@ var _excluded = ["className", "value", "selection", "extensions", "onChange", "o
|
|
|
79
79
|
|
|
80
80
|
var ReactCodeMirror = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
81
81
|
var className = props.className,
|
|
82
|
-
value = props.value,
|
|
82
|
+
_props$value = props.value,
|
|
83
|
+
value = _props$value === void 0 ? '' : _props$value,
|
|
83
84
|
selection = props.selection,
|
|
84
85
|
_props$extensions = props.extensions,
|
|
85
86
|
extensions = _props$extensions === void 0 ? [] : _props$extensions,
|
|
@@ -134,7 +135,7 @@ var ReactCodeMirror = /*#__PURE__*/_react.default.forwardRef(function (props, re
|
|
|
134
135
|
state: state,
|
|
135
136
|
view: view
|
|
136
137
|
};
|
|
137
|
-
});
|
|
138
|
+
}, [container, state, view]);
|
|
138
139
|
(0, _react.useEffect)(function () {
|
|
139
140
|
setContainer(editor.current);
|
|
140
141
|
return function () {
|
package/cjs/index.js.map
CHANGED
|
@@ -40,8 +40,8 @@
|
|
|
40
40
|
"defaultClassNames",
|
|
41
41
|
"displayName"
|
|
42
42
|
],
|
|
43
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;;AAGA;;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;AAHA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AA8DA,IAAMA,eAAe,gBAAGC,eAAMC,UAAN,CAA2D,UAACC,KAAD,EAAQC,GAAR,EAAgB;AACjG,MACEC,SADF,GAqBIF,KArBJ,CACEE,SADF;AAAA,
|
|
43
|
+
"mappings": "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",
|
|
44
44
|
"sourcesContent": [
|
|
45
|
-
"import React, { useEffect, useRef, useImperativeHandle } from 'react';\nimport { EditorState, EditorStateConfig, Extension } from '@codemirror/state';\nimport { EditorView, ViewUpdate } from '@codemirror/view';\nimport { useCodeMirror } from './useCodeMirror';\n\nexport * from '@codemirror/view';\nexport * from '@codemirror/basic-setup';\nexport * from '@codemirror/state';\nexport * from './useCodeMirror';\n\nexport interface ReactCodeMirrorProps\n extends Omit<EditorStateConfig, 'doc' | 'extensions'>,\n Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'placeholder'> {\n /** value of the auto created model in the editor. */\n value?: string;\n height?: string;\n minHeight?: string;\n maxHeight?: string;\n width?: string;\n minWidth?: string;\n maxWidth?: string;\n /** focus on the editor. */\n autoFocus?: boolean;\n /** Enables a placeholder—a piece of example content to show when the editor is empty. */\n placeholder?: string | HTMLElement;\n /**\n * `light` / `dark` / `Extension` Defaults to `light`.\n * @default light\n */\n theme?: 'light' | 'dark' | Extension;\n /**\n * Whether to optional basicSetup by default\n * @default true\n */\n basicSetup?: boolean;\n /**\n * This disables editing of the editor content by the user.\n * @default true\n */\n editable?: boolean;\n /**\n * Whether to optional basicSetup by default\n * @default true\n */\n indentWithTab?: boolean;\n /** Fired whenever a change occurs to the document. */\n onChange?(value: string, viewUpdate: ViewUpdate): void;\n /** Fired whenever a change occurs to the document. There is a certain difference with `onChange`. */\n onUpdate?(viewUpdate: ViewUpdate): void;\n /**\n * Extension values can be [provided](https://codemirror.net/6/docs/ref/#state.EditorStateConfig.extensions) when creating a state to attach various kinds of configuration and behavior information.\n * They can either be built-in extension-providing objects,\n * such as [state fields](https://codemirror.net/6/docs/ref/#state.StateField) or [facet providers](https://codemirror.net/6/docs/ref/#state.Facet.of),\n * or objects with an extension in its `extension` property. Extensions can be nested in arrays arbitrarily deep—they will be flattened when processed.\n */\n extensions?: Extension[];\n /**\n * If the view is going to be mounted in a shadow root or document other than the one held by the global variable document (the default), you should pass it here.\n * Originally from the [config of EditorView](https://codemirror.net/6/docs/ref/#view.EditorView.constructor%5Econfig.root)\n */\n root?: ShadowRoot | Document;\n}\n\nexport interface ReactCodeMirrorRef {\n editor?: HTMLDivElement | null;\n state?: EditorState;\n view?: EditorView;\n}\n\nconst ReactCodeMirror = React.forwardRef<ReactCodeMirrorRef, ReactCodeMirrorProps>((props, ref) => {\n const {\n className,\n value,\n selection,\n extensions = [],\n onChange,\n onUpdate,\n autoFocus,\n theme = 'light',\n height,\n minHeight,\n maxHeight,\n width,\n minWidth,\n maxWidth,\n basicSetup,\n placeholder,\n indentWithTab,\n editable,\n root,\n ...other\n } = props;\n const editor = useRef<HTMLDivElement>(null);\n const { state, view, container, setContainer } = useCodeMirror({\n container: editor.current,\n root,\n value,\n autoFocus,\n theme,\n height,\n minHeight,\n maxHeight,\n width,\n minWidth,\n maxWidth,\n basicSetup,\n placeholder,\n indentWithTab,\n editable,\n selection,\n onChange,\n onUpdate,\n extensions,\n });\n useImperativeHandle(ref, () => ({ editor: container, state, view }));\n useEffect(() => {\n setContainer(editor.current);\n 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"
|
|
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"
|
|
46
46
|
]
|
|
47
47
|
}
|
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 () => {
|
package/esm/index.js.map
CHANGED
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
"defaultClassNames",
|
|
45
45
|
"displayName"
|
|
46
46
|
],
|
|
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,
|
|
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",
|
|
48
48
|
"sourcesContent": [
|
|
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 }));\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"
|
|
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"
|
|
50
50
|
]
|
|
51
51
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uiw/react-codemirror",
|
|
3
|
-
"version": "4.3.
|
|
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}'"
|
|
@@ -73,10 +73,10 @@
|
|
|
73
73
|
"@codemirror/lang-cpp": "0.19.1",
|
|
74
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",
|
|
@@ -84,20 +84,20 @@
|
|
|
84
84
|
"@codemirror/lang-xml": "0.19.2",
|
|
85
85
|
"@codemirror/legacy-modes": "0.19.0",
|
|
86
86
|
"@codemirror/stream-parser": "0.19.3",
|
|
87
|
-
"@kkt/less-modules": "7.0.
|
|
88
|
-
"@kkt/raw-modules": "7.0.
|
|
89
|
-
"@kkt/scope-plugin-options": "7.0.
|
|
87
|
+
"@kkt/less-modules": "7.0.5",
|
|
88
|
+
"@kkt/raw-modules": "7.0.5",
|
|
89
|
+
"@kkt/scope-plugin-options": "7.0.5",
|
|
90
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
|
-
"kkt": "7.0.
|
|
100
|
-
"lint-staged": "12.1.
|
|
99
|
+
"kkt": "7.0.5",
|
|
100
|
+
"lint-staged": "12.1.7",
|
|
101
101
|
"prettier": "2.5.1",
|
|
102
102
|
"react": "17.0.2",
|
|
103
103
|
"react-dom": "17.0.2",
|
package/src/index.tsx
CHANGED
|
@@ -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 () => {
|
package/src/react-app-env.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
/// <reference types="react-scripts" />
|