@uiw/react-codemirror 4.11.6 → 4.12.2
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 +48 -0
- package/cjs/index.d.ts +8 -1
- package/cjs/index.js +4 -2
- package/cjs/index.js.map +3 -2
- package/cjs/useCodeMirror.js +5 -4
- package/cjs/useCodeMirror.js.map +7 -2
- package/dist/mdeditor.js +201 -127
- package/dist/mdeditor.min.js +1 -1
- package/esm/index.d.ts +8 -1
- package/esm/index.js +5 -3
- package/esm/index.js.map +3 -2
- package/esm/useCodeMirror.js +5 -3
- package/esm/useCodeMirror.js.map +7 -2
- package/package.json +5 -2
- package/src/index.tsx +10 -1
- package/src/useCodeMirror.ts +6 -2
package/esm/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { EditorState, EditorStateConfig, Extension } from '@codemirror/state';
|
|
2
|
+
import { EditorState, EditorStateConfig, Extension, StateField } from '@codemirror/state';
|
|
3
3
|
import { EditorView, ViewUpdate } from '@codemirror/view';
|
|
4
4
|
import { BasicSetupOptions } from '@uiw/codemirror-extensions-basic-setup';
|
|
5
5
|
import { Statistics } from './utils';
|
|
@@ -64,6 +64,13 @@ export interface ReactCodeMirrorProps extends Omit<EditorStateConfig, 'doc' | 'e
|
|
|
64
64
|
* Originally from the [config of EditorView](https://codemirror.net/6/docs/ref/#view.EditorView.constructor%5Econfig.root)
|
|
65
65
|
*/
|
|
66
66
|
root?: ShadowRoot | Document;
|
|
67
|
+
/**
|
|
68
|
+
* Create a state from its JSON representation serialized with [toJSON](https://codemirror.net/docs/ref/#state.EditorState.toJSON) function
|
|
69
|
+
*/
|
|
70
|
+
initialState?: {
|
|
71
|
+
json: any;
|
|
72
|
+
fields?: Record<string, StateField<any>>;
|
|
73
|
+
};
|
|
67
74
|
}
|
|
68
75
|
export interface ReactCodeMirrorRef {
|
|
69
76
|
editor?: HTMLDivElement | null;
|
package/esm/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
|
|
3
|
-
var _excluded = ["className", "value", "selection", "extensions", "onChange", "onStatistics", "onCreateEditor", "onUpdate", "autoFocus", "theme", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "basicSetup", "placeholder", "indentWithTab", "editable", "readOnly", "root"];
|
|
3
|
+
var _excluded = ["className", "value", "selection", "extensions", "onChange", "onStatistics", "onCreateEditor", "onUpdate", "autoFocus", "theme", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "basicSetup", "placeholder", "indentWithTab", "editable", "readOnly", "root", "initialState"];
|
|
4
4
|
import React, { useRef, forwardRef, useImperativeHandle } from 'react';
|
|
5
5
|
import { useCodeMirror } from './useCodeMirror';
|
|
6
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
@@ -30,7 +30,8 @@ var ReactCodeMirror = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
30
30
|
indentWithTab,
|
|
31
31
|
editable,
|
|
32
32
|
readOnly,
|
|
33
|
-
root
|
|
33
|
+
root,
|
|
34
|
+
initialState
|
|
34
35
|
} = props,
|
|
35
36
|
other = _objectWithoutPropertiesLoose(props, _excluded);
|
|
36
37
|
|
|
@@ -62,7 +63,8 @@ var ReactCodeMirror = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
62
63
|
onStatistics,
|
|
63
64
|
onCreateEditor,
|
|
64
65
|
onUpdate,
|
|
65
|
-
extensions
|
|
66
|
+
extensions,
|
|
67
|
+
initialState
|
|
66
68
|
});
|
|
67
69
|
useImperativeHandle(ref, () => ({
|
|
68
70
|
editor: editor.current,
|
package/esm/index.js.map
CHANGED
|
@@ -31,6 +31,7 @@
|
|
|
31
31
|
"editable",
|
|
32
32
|
"readOnly",
|
|
33
33
|
"root",
|
|
34
|
+
"initialState",
|
|
34
35
|
"other",
|
|
35
36
|
"editor",
|
|
36
37
|
"state",
|
|
@@ -46,7 +47,7 @@
|
|
|
46
47
|
"../src/index.tsx"
|
|
47
48
|
],
|
|
48
49
|
"sourcesContent": [
|
|
49
|
-
"import React, { useRef, forwardRef, useImperativeHandle } from 'react';\nimport { EditorState, EditorStateConfig, Extension } from '@codemirror/state';\nimport { EditorView, ViewUpdate } from '@codemirror/view';\nimport { BasicSetupOptions } from '@uiw/codemirror-extensions-basic-setup';\nimport { useCodeMirror } from './useCodeMirror';\nimport { Statistics } from './utils';\n\nexport * from '@uiw/codemirror-extensions-basic-setup';\nexport * from './useCodeMirror';\nexport * from './utils';\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 /** Some data on the statistics editor. */\n onStatistics?(data: Statistics): void;\n /** Fired whenever any state change occurs within the editor, including non-document changes like lint results. */\n onUpdate?(viewUpdate: ViewUpdate): void;\n /** The first time the editor executes the event. */\n onCreateEditor?(view: EditorView, state: EditorState): 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 = forwardRef<ReactCodeMirrorRef, ReactCodeMirrorProps>((props, ref) => {\n const {\n className,\n value = '',\n selection,\n extensions = [],\n onChange,\n onStatistics,\n onCreateEditor,\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 onStatistics,\n onCreateEditor,\n onUpdate,\n extensions,\n });\n\n useImperativeHandle(ref, () => ({ editor: editor.current, state: state, view: view }), [\n editor,\n container,\n state,\n view,\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
|
+
"import React, { useRef, forwardRef, useImperativeHandle } from 'react';\nimport { EditorState, EditorStateConfig, Extension, StateField } from '@codemirror/state';\nimport { EditorView, ViewUpdate } from '@codemirror/view';\nimport { BasicSetupOptions } from '@uiw/codemirror-extensions-basic-setup';\nimport { useCodeMirror } from './useCodeMirror';\nimport { Statistics } from './utils';\n\nexport * from '@uiw/codemirror-extensions-basic-setup';\nexport * from './useCodeMirror';\nexport * from './utils';\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 /** Some data on the statistics editor. */\n onStatistics?(data: Statistics): void;\n /** Fired whenever any state change occurs within the editor, including non-document changes like lint results. */\n onUpdate?(viewUpdate: ViewUpdate): void;\n /** The first time the editor executes the event. */\n onCreateEditor?(view: EditorView, state: EditorState): 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 * Create a state from its JSON representation serialized with [toJSON](https://codemirror.net/docs/ref/#state.EditorState.toJSON) function\n */\n initialState?: {\n json: any;\n fields?: Record<string, StateField<any>>;\n };\n}\n\nexport interface ReactCodeMirrorRef {\n editor?: HTMLDivElement | null;\n state?: EditorState;\n view?: EditorView;\n}\n\nconst ReactCodeMirror = forwardRef<ReactCodeMirrorRef, ReactCodeMirrorProps>((props, ref) => {\n const {\n className,\n value = '',\n selection,\n extensions = [],\n onChange,\n onStatistics,\n onCreateEditor,\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 initialState,\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 onStatistics,\n onCreateEditor,\n onUpdate,\n extensions,\n initialState,\n });\n\n useImperativeHandle(ref, () => ({ editor: editor.current, state: state, view: view }), [\n editor,\n container,\n state,\n view,\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
51
|
],
|
|
51
|
-
"mappings": ";;;AAAA,OAAOA,KAAP,IAAgBC,MAAhB,EAAwBC,UAAxB,EAAoCC,mBAApC,QAA+D,OAA/D;AAIA,SAASC,aAAT,QAA8B,iBAA9B;;AAGA,cAAc,wCAAd;AACA,cAAc,iBAAd;AACA,cAAc,SAAd;
|
|
52
|
+
"mappings": ";;;AAAA,OAAOA,KAAP,IAAgBC,MAAhB,EAAwBC,UAAxB,EAAoCC,mBAApC,QAA+D,OAA/D;AAIA,SAASC,aAAT,QAA8B,iBAA9B;;AAGA,cAAc,wCAAd;AACA,cAAc,iBAAd;AACA,cAAc,SAAd;AA6EA,IAAMC,eAAe,gBAAGH,UAAU,CAA2C,CAACI,KAAD,EAAQC,GAAR,KAAgB;EAC3F,IAAM;IACJC,SADI;IAEJC,KAAK,GAAG,EAFJ;IAGJC,SAHI;IAIJC,UAAU,GAAG,EAJT;IAKJC,QALI;IAMJC,YANI;IAOJC,cAPI;IAQJC,QARI;IASJC,SATI;IAUJC,KAAK,GAAG,OAVJ;IAWJC,MAXI;IAYJC,SAZI;IAaJC,SAbI;IAcJC,KAdI;IAeJC,QAfI;IAgBJC,QAhBI;IAiBJC,UAjBI;IAkBJC,WAlBI;IAmBJC,aAnBI;IAoBJC,QApBI;IAqBJC,QArBI;IAsBJC,IAtBI;IAuBJC;EAvBI,IAyBFxB,KAzBJ;EAAA,IAwBKyB,KAxBL,iCAyBIzB,KAzBJ;;EA0BA,IAAM0B,MAAM,GAAG/B,MAAM,CAAiB,IAAjB,CAArB;EACA,IAAM;IAAEgC,KAAF;IAASC,IAAT;IAAeC,SAAf;IAA0BC;EAA1B,IAA2ChC,aAAa,CAAC;IAC7D+B,SAAS,EAAEH,MAAM,CAACK,OAD2C;IAE7DR,IAF6D;IAG7DpB,KAH6D;IAI7DO,SAJ6D;IAK7DC,KAL6D;IAM7DC,MAN6D;IAO7DC,SAP6D;IAQ7DC,SAR6D;IAS7DC,KAT6D;IAU7DC,QAV6D;IAW7DC,QAX6D;IAY7DC,UAZ6D;IAa7DC,WAb6D;IAc7DC,aAd6D;IAe7DC,QAf6D;IAgB7DC,QAhB6D;IAiB7DlB,SAjB6D;IAkB7DE,QAlB6D;IAmB7DC,YAnB6D;IAoB7DC,cApB6D;IAqB7DC,QArB6D;IAsB7DJ,UAtB6D;IAuB7DmB;EAvB6D,CAAD,CAA9D;EA0BA3B,mBAAmB,CAACI,GAAD,EAAM,OAAO;IAAEyB,MAAM,EAAEA,MAAM,CAACK,OAAjB;IAA0BJ,KAAK,EAAEA,KAAjC;IAAwCC,IAAI,EAAEA;EAA9C,CAAP,CAAN,EAAoE,CACrFF,MADqF,EAErFG,SAFqF,EAGrFF,KAHqF,EAIrFC,IAJqF,CAApE,CAAnB,CAtD2F,CA6D3F;;EACA,IAAI,OAAOzB,KAAP,KAAiB,QAArB,EAA+B;IAC7B,MAAM,IAAI6B,KAAJ,0CAAiD,OAAO7B,KAAxD,CAAN;EACD;;EAED,IAAM8B,iBAAiB,GAAG,OAAOtB,KAAP,KAAiB,QAAjB,iBAAwCA,KAAxC,GAAkD,UAA5E;EACA,oBAAO;IAAK,GAAG,EAAEe,MAAV;IAAkB,SAAS,OAAKO,iBAAL,IAAyB/B,SAAS,SAAOA,SAAP,GAAqB,EAAvD;EAA3B,GAA4FuB,KAA5F,EAAP;AACD,CApEiC,CAAlC;AAsEA1B,eAAe,CAACmC,WAAhB,GAA8B,YAA9B;AAEA,eAAenC,eAAf"
|
|
52
53
|
}
|
package/esm/useCodeMirror.js
CHANGED
|
@@ -27,7 +27,8 @@ export function useCodeMirror(props) {
|
|
|
27
27
|
readOnly = false,
|
|
28
28
|
indentWithTab: defaultIndentWithTab = true,
|
|
29
29
|
basicSetup: defaultBasicSetup = true,
|
|
30
|
-
root
|
|
30
|
+
root,
|
|
31
|
+
initialState
|
|
31
32
|
} = props;
|
|
32
33
|
var [container, setContainer] = useState();
|
|
33
34
|
var [view, setView] = useState();
|
|
@@ -107,11 +108,12 @@ export function useCodeMirror(props) {
|
|
|
107
108
|
getExtensions = getExtensions.concat(extensions);
|
|
108
109
|
useEffect(() => {
|
|
109
110
|
if (container && !state) {
|
|
110
|
-
var
|
|
111
|
+
var config = {
|
|
111
112
|
doc: value,
|
|
112
113
|
selection,
|
|
113
114
|
extensions: getExtensions
|
|
114
|
-
}
|
|
115
|
+
};
|
|
116
|
+
var stateCurrent = initialState ? EditorState.fromJSON(initialState.json, config, initialState.fields) : EditorState.create(config);
|
|
115
117
|
setState(stateCurrent);
|
|
116
118
|
|
|
117
119
|
if (!view) {
|
package/esm/useCodeMirror.js.map
CHANGED
|
@@ -35,6 +35,7 @@
|
|
|
35
35
|
"defaultIndentWithTab",
|
|
36
36
|
"defaultBasicSetup",
|
|
37
37
|
"root",
|
|
38
|
+
"initialState",
|
|
38
39
|
"container",
|
|
39
40
|
"setContainer",
|
|
40
41
|
"view",
|
|
@@ -55,7 +56,11 @@
|
|
|
55
56
|
"unshift",
|
|
56
57
|
"push",
|
|
57
58
|
"concat",
|
|
59
|
+
"config",
|
|
58
60
|
"stateCurrent",
|
|
61
|
+
"fromJSON",
|
|
62
|
+
"json",
|
|
63
|
+
"fields",
|
|
59
64
|
"create",
|
|
60
65
|
"viewCurrent",
|
|
61
66
|
"parent",
|
|
@@ -76,7 +81,7 @@
|
|
|
76
81
|
"../src/useCodeMirror.ts"
|
|
77
82
|
],
|
|
78
83
|
"sourcesContent": [
|
|
79
|
-
"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 { basicSetup } from '@uiw/codemirror-extensions-basic-setup';\nimport { oneDark } from '@codemirror/theme-one-dark';\nimport { getStatistics } from './utils';\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 onStatistics,\n onCreateEditor,\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<HTMLDivElement>();\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 onStatistics && onStatistics(getStatistics(vu));\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
|
|
84
|
+
"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 { basicSetup } from '@uiw/codemirror-extensions-basic-setup';\nimport { oneDark } from '@codemirror/theme-one-dark';\nimport { getStatistics } from './utils';\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 onStatistics,\n onCreateEditor,\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 initialState,\n } = props;\n const [container, setContainer] = useState<HTMLDivElement>();\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 onStatistics && onStatistics(getStatistics(vu));\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 config = {\n doc: value,\n selection,\n extensions: getExtensions,\n };\n const stateCurrent = initialState\n ? EditorState.fromJSON(initialState.json, config, initialState.fields)\n : EditorState.create(config);\n setState(stateCurrent);\n if (!view) {\n const viewCurrent = new EditorView({\n state: stateCurrent,\n parent: container,\n root,\n });\n setView(viewCurrent);\n onCreateEditor && onCreateEditor(viewCurrent, stateCurrent);\n }\n }\n return () => {\n if (view) {\n setState(undefined);\n setView(undefined);\n }\n };\n }, [container, state]);\n\n useEffect(() => setContainer(props.container!), [props.container]);\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"
|
|
80
85
|
],
|
|
81
|
-
"mappings": "AAAA,SAASA,SAAT,EAAoBC,QAApB,QAAoC,OAApC;AACA,SAASC,WAAT,EAAsBC,WAAtB,QAAyC,mBAAzC;AACA,SAASC,aAAT,QAA8B,sBAA9B;AACA,SAASC,UAAT,EAAqBC,MAArB,EAAyCC,WAAzC,QAA4D,kBAA5D;AACA,SAASC,UAAT,QAA2B,wCAA3B;AACA,SAASC,OAAT,QAAwB,4BAAxB;AACA,SAASC,aAAT,QAA8B,SAA9B;AAOA,OAAO,SAASC,aAAT,CAAuBC,KAAvB,EAA6C;EAClD,IAAM;IACJC,KADI;IAEJC,SAFI;IAGJC,QAHI;IAIJC,YAJI;IAKJC,cALI;IAMJC,QANI;IAOJC,UAAU,GAAG,EAPT;IAQJC,SARI;IASJC,KAAK,GAAG,OATJ;IAUJC,MAAM,GAAG,EAVL;IAWJC,SAAS,GAAG,EAXR;IAYJC,SAAS,GAAG,EAZR;IAaJjB,WAAW,EAAEkB,cAAc,GAAG,EAb1B;IAcJC,KAAK,GAAG,EAdJ;IAeJC,QAAQ,GAAG,EAfP;IAgBJC,QAAQ,GAAG,EAhBP;IAiBJC,QAAQ,GAAG,IAjBP;IAkBJC,QAAQ,GAAG,KAlBP;IAmBJ1B,aAAa,EAAE2B,oBAAoB,GAAG,IAnBlC;IAoBJvB,UAAU,EAAEwB,iBAAiB,GAAG,IApB5B;IAqBJC;
|
|
86
|
+
"mappings": "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"
|
|
82
87
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uiw/react-codemirror",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.12.2",
|
|
4
4
|
"description": "CodeMirror component for React.",
|
|
5
5
|
"homepage": "https://uiwjs.github.io/react-codemirror",
|
|
6
6
|
"author": "kenny wong <wowohoo@qq.com>",
|
|
@@ -28,6 +28,7 @@
|
|
|
28
28
|
],
|
|
29
29
|
"peerDependencies": {
|
|
30
30
|
"@babel/runtime": ">=7.11.0",
|
|
31
|
+
"@codemirror/state": ">=6.0.0",
|
|
31
32
|
"@codemirror/theme-one-dark": ">=6.0.0",
|
|
32
33
|
"@codemirror/view": ">=6.0.0",
|
|
33
34
|
"codemirror": ">=6.0.0",
|
|
@@ -36,8 +37,10 @@
|
|
|
36
37
|
},
|
|
37
38
|
"dependencies": {
|
|
38
39
|
"@babel/runtime": "^7.18.6",
|
|
40
|
+
"@codemirror/commands": "^6.1.0",
|
|
41
|
+
"@codemirror/state": "^6.1.1",
|
|
39
42
|
"@codemirror/theme-one-dark": "^6.0.0",
|
|
40
|
-
"@uiw/codemirror-extensions-basic-setup": "4.
|
|
43
|
+
"@uiw/codemirror-extensions-basic-setup": "4.12.2",
|
|
41
44
|
"codemirror": "^6.0.0"
|
|
42
45
|
},
|
|
43
46
|
"keywords": [
|
package/src/index.tsx
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { useRef, forwardRef, useImperativeHandle } from 'react';
|
|
2
|
-
import { EditorState, EditorStateConfig, Extension } from '@codemirror/state';
|
|
2
|
+
import { EditorState, EditorStateConfig, Extension, StateField } from '@codemirror/state';
|
|
3
3
|
import { EditorView, ViewUpdate } from '@codemirror/view';
|
|
4
4
|
import { BasicSetupOptions } from '@uiw/codemirror-extensions-basic-setup';
|
|
5
5
|
import { useCodeMirror } from './useCodeMirror';
|
|
@@ -69,6 +69,13 @@ export interface ReactCodeMirrorProps
|
|
|
69
69
|
* Originally from the [config of EditorView](https://codemirror.net/6/docs/ref/#view.EditorView.constructor%5Econfig.root)
|
|
70
70
|
*/
|
|
71
71
|
root?: ShadowRoot | Document;
|
|
72
|
+
/**
|
|
73
|
+
* Create a state from its JSON representation serialized with [toJSON](https://codemirror.net/docs/ref/#state.EditorState.toJSON) function
|
|
74
|
+
*/
|
|
75
|
+
initialState?: {
|
|
76
|
+
json: any;
|
|
77
|
+
fields?: Record<string, StateField<any>>;
|
|
78
|
+
};
|
|
72
79
|
}
|
|
73
80
|
|
|
74
81
|
export interface ReactCodeMirrorRef {
|
|
@@ -101,6 +108,7 @@ const ReactCodeMirror = forwardRef<ReactCodeMirrorRef, ReactCodeMirrorProps>((pr
|
|
|
101
108
|
editable,
|
|
102
109
|
readOnly,
|
|
103
110
|
root,
|
|
111
|
+
initialState,
|
|
104
112
|
...other
|
|
105
113
|
} = props;
|
|
106
114
|
const editor = useRef<HTMLDivElement>(null);
|
|
@@ -127,6 +135,7 @@ const ReactCodeMirror = forwardRef<ReactCodeMirrorRef, ReactCodeMirrorProps>((pr
|
|
|
127
135
|
onCreateEditor,
|
|
128
136
|
onUpdate,
|
|
129
137
|
extensions,
|
|
138
|
+
initialState,
|
|
130
139
|
});
|
|
131
140
|
|
|
132
141
|
useImperativeHandle(ref, () => ({ editor: editor.current, state: state, view: view }), [
|
package/src/useCodeMirror.ts
CHANGED
|
@@ -34,6 +34,7 @@ export function useCodeMirror(props: UseCodeMirror) {
|
|
|
34
34
|
indentWithTab: defaultIndentWithTab = true,
|
|
35
35
|
basicSetup: defaultBasicSetup = true,
|
|
36
36
|
root,
|
|
37
|
+
initialState,
|
|
37
38
|
} = props;
|
|
38
39
|
const [container, setContainer] = useState<HTMLDivElement>();
|
|
39
40
|
const [view, setView] = useState<EditorView>();
|
|
@@ -109,11 +110,14 @@ export function useCodeMirror(props: UseCodeMirror) {
|
|
|
109
110
|
|
|
110
111
|
useEffect(() => {
|
|
111
112
|
if (container && !state) {
|
|
112
|
-
const
|
|
113
|
+
const config = {
|
|
113
114
|
doc: value,
|
|
114
115
|
selection,
|
|
115
116
|
extensions: getExtensions,
|
|
116
|
-
}
|
|
117
|
+
};
|
|
118
|
+
const stateCurrent = initialState
|
|
119
|
+
? EditorState.fromJSON(initialState.json, config, initialState.fields)
|
|
120
|
+
: EditorState.create(config);
|
|
117
121
|
setState(stateCurrent);
|
|
118
122
|
if (!view) {
|
|
119
123
|
const viewCurrent = new EditorView({
|