@uiw/react-codemirror 3.2.1 → 3.2.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 +4 -0
- package/esm/index.js +47 -78
- package/esm/index.js.map +3 -2
- package/lib/index.js +36 -29
- package/lib/index.js.map +3 -2
- package/package.json +5 -6
- package/src/index.js +1 -1
package/README.md
CHANGED
|
@@ -17,6 +17,8 @@ CodeMirror component for React. demo @[uiwjs.github.io/react-codemirror/](https:
|
|
|
17
17
|
|
|
18
18
|
🌱 Automatically load `mode` files based on configuration.
|
|
19
19
|
🚀 Quickly and easily configure the API.
|
|
20
|
+
🌎 There are better sample previews.
|
|
21
|
+
📚 Use Typescript to write and integrate [@type](/typings) declaration file.
|
|
20
22
|
|
|
21
23
|
## Install
|
|
22
24
|
|
|
@@ -27,6 +29,8 @@ npm install @uiw/react-codemirror --save
|
|
|
27
29
|
|
|
28
30
|
## Usage
|
|
29
31
|
|
|
32
|
+
[](https://codesandbox.io/embed/react-codemirror-example-vgr4n?fontsize=14&hidenavigation=1&theme=dark)
|
|
33
|
+
|
|
30
34
|
```jsx
|
|
31
35
|
import CodeMirror from '@uiw/react-codemirror';
|
|
32
36
|
import 'codemirror/keymap/sublime';
|
package/esm/index.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import _extends from "@babel/runtime/helpers/
|
|
2
|
-
import _asyncToGenerator from "@babel/runtime/helpers/
|
|
3
|
-
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
|
|
4
3
|
import React, { useRef, useEffect, useImperativeHandle, useState, useMemo } from 'react';
|
|
5
4
|
import CodeMirror from 'codemirror';
|
|
6
5
|
import 'codemirror/mode/meta';
|
|
7
6
|
import './codemirror.css';
|
|
7
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
8
|
var defaultOptions = {
|
|
9
9
|
tabSize: 2,
|
|
10
10
|
autoCloseBrackets: true,
|
|
@@ -20,38 +20,29 @@ function ReactCodeMirror(props, ref) {
|
|
|
20
20
|
props = {};
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
-
var
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
height = _props$height === void 0 ? '100%' : _props$height,
|
|
32
|
-
_props$lazyLoadMode = _props.lazyLoadMode,
|
|
33
|
-
lazyLoadMode = _props$lazyLoadMode === void 0 ? true : _props$lazyLoadMode;
|
|
34
|
-
|
|
35
|
-
var _useState = useState(),
|
|
36
|
-
editor = _useState[0],
|
|
37
|
-
setEditor = _useState[1];
|
|
38
|
-
|
|
23
|
+
var {
|
|
24
|
+
options = {},
|
|
25
|
+
value = '',
|
|
26
|
+
width = '100%',
|
|
27
|
+
height = '100%',
|
|
28
|
+
lazyLoadMode = true
|
|
29
|
+
} = props;
|
|
30
|
+
var [editor, setEditor] = useState();
|
|
39
31
|
var textareaRef = useRef();
|
|
40
32
|
var lastestProps = useRef(props);
|
|
41
|
-
useImperativeHandle(ref,
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
}, [editor]);
|
|
33
|
+
useImperativeHandle(ref, () => ({
|
|
34
|
+
editor,
|
|
35
|
+
textarea: textareaRef.current
|
|
36
|
+
}), [editor, textareaRef]);
|
|
46
37
|
lastestProps.current = props; // 将props中所有的事件处理函数映射并保存
|
|
47
38
|
|
|
48
39
|
function getEventHandleFromProps() {
|
|
49
40
|
var propNames = Object.keys(props);
|
|
50
|
-
var eventHandle = propNames.filter(
|
|
41
|
+
var eventHandle = propNames.filter(keyName => {
|
|
51
42
|
return /^on+/.test(keyName);
|
|
52
43
|
});
|
|
53
44
|
var eventDict = {};
|
|
54
|
-
eventHandle.forEach(
|
|
45
|
+
eventHandle.forEach(ele => {
|
|
55
46
|
var name = ele.slice(2);
|
|
56
47
|
|
|
57
48
|
if (name && name[0]) {
|
|
@@ -67,62 +58,40 @@ function ReactCodeMirror(props, ref) {
|
|
|
67
58
|
}
|
|
68
59
|
|
|
69
60
|
function _setOptions() {
|
|
70
|
-
_setOptions = _asyncToGenerator(
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
mode = CodeMirror.findModeByName(opt.mode || '');
|
|
86
|
-
|
|
87
|
-
if (!(lazyLoadMode && mode && mode.mode)) {
|
|
88
|
-
_context.next = 6;
|
|
89
|
-
break;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
_context.next = 6;
|
|
93
|
-
return import("codemirror/mode/" + mode.mode + "/" + mode.mode + ".js");
|
|
94
|
-
|
|
95
|
-
case 6:
|
|
96
|
-
if (mode) {
|
|
97
|
-
opt.mode = mode.mime;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
Object.keys(opt).forEach(function (name) {
|
|
101
|
-
if ((opt[name] || opt[name] === false) && JSON.stringify(opt[name])) {
|
|
102
|
-
instance.setOption(name, opt[name]);
|
|
103
|
-
}
|
|
104
|
-
});
|
|
105
|
-
|
|
106
|
-
case 8:
|
|
107
|
-
case "end":
|
|
108
|
-
return _context.stop();
|
|
109
|
-
}
|
|
61
|
+
_setOptions = _asyncToGenerator(function* (instance, opt) {
|
|
62
|
+
if (opt === void 0) {
|
|
63
|
+
opt = {};
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
if (typeof opt === 'object' && window) {
|
|
67
|
+
var mode = CodeMirror.findModeByName(opt.mode || '');
|
|
68
|
+
|
|
69
|
+
if (lazyLoadMode && mode && mode.mode) {
|
|
70
|
+
yield import("codemirror/mode/" + mode.mode + "/" + mode.mode + ".js");
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
if (mode) {
|
|
74
|
+
opt.mode = mode.mime;
|
|
110
75
|
}
|
|
111
|
-
|
|
112
|
-
|
|
76
|
+
|
|
77
|
+
Object.keys(opt).forEach(name => {
|
|
78
|
+
if ((opt[name] || opt[name] === false) && JSON.stringify(opt[name])) {
|
|
79
|
+
instance.setOption(name, opt[name]);
|
|
80
|
+
}
|
|
81
|
+
});
|
|
82
|
+
}
|
|
83
|
+
});
|
|
113
84
|
return _setOptions.apply(this, arguments);
|
|
114
85
|
}
|
|
115
86
|
|
|
116
|
-
useEffect(
|
|
87
|
+
useEffect(() => {
|
|
117
88
|
if (!editor && window) {
|
|
118
89
|
// 生成codemirror实例
|
|
119
90
|
var instance = CodeMirror.fromTextArea(textareaRef.current, _extends({}, defaultOptions, options));
|
|
120
91
|
var eventDict = getEventHandleFromProps();
|
|
121
|
-
Object.keys(eventDict).forEach(
|
|
92
|
+
Object.keys(eventDict).forEach(event => {
|
|
122
93
|
instance.on(eventDict[event], function () {
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
return (_lastestProps$current = lastestProps.current)[event].apply(_lastestProps$current, arguments);
|
|
94
|
+
return lastestProps.current[event](...arguments);
|
|
126
95
|
});
|
|
127
96
|
});
|
|
128
97
|
instance.setValue(value || '');
|
|
@@ -136,14 +105,14 @@ function ReactCodeMirror(props, ref) {
|
|
|
136
105
|
setOptions(instance, _extends({}, defaultOptions, options));
|
|
137
106
|
}
|
|
138
107
|
|
|
139
|
-
return
|
|
108
|
+
return () => {
|
|
140
109
|
if (editor && window) {
|
|
141
110
|
editor.toTextArea();
|
|
142
111
|
setEditor(undefined);
|
|
143
112
|
}
|
|
144
113
|
};
|
|
145
114
|
}, []);
|
|
146
|
-
useMemo(
|
|
115
|
+
useMemo(() => {
|
|
147
116
|
if (!editor || !window) return;
|
|
148
117
|
var val = editor.getValue();
|
|
149
118
|
|
|
@@ -151,15 +120,15 @@ function ReactCodeMirror(props, ref) {
|
|
|
151
120
|
editor.setValue(value);
|
|
152
121
|
}
|
|
153
122
|
}, [value]);
|
|
154
|
-
useMemo(
|
|
123
|
+
useMemo(() => {
|
|
155
124
|
if (!editor || !window) return;
|
|
156
125
|
editor.setSize(width, height);
|
|
157
126
|
}, [width, height]);
|
|
158
|
-
useMemo(
|
|
127
|
+
useMemo(() => {
|
|
159
128
|
if (!editor || !window) return;
|
|
160
129
|
setOptions(editor, _extends({}, defaultOptions, options));
|
|
161
130
|
}, [editor, options]);
|
|
162
|
-
return /*#__PURE__*/
|
|
131
|
+
return /*#__PURE__*/_jsx("textarea", {
|
|
163
132
|
ref: textareaRef
|
|
164
133
|
});
|
|
165
134
|
}
|
package/esm/index.js.map
CHANGED
|
@@ -30,6 +30,7 @@
|
|
|
30
30
|
"setEditor",
|
|
31
31
|
"textareaRef",
|
|
32
32
|
"lastestProps",
|
|
33
|
+
"textarea",
|
|
33
34
|
"current",
|
|
34
35
|
"getEventHandleFromProps",
|
|
35
36
|
"propNames",
|
|
@@ -67,8 +68,8 @@
|
|
|
67
68
|
"getValue",
|
|
68
69
|
"forwardRef"
|
|
69
70
|
],
|
|
70
|
-
"mappings": "
|
|
71
|
+
"mappings": "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",
|
|
71
72
|
"sourcesContent": [
|
|
72
|
-
"import React, { useRef, useEffect, useImperativeHandle, useState, useMemo } from 'react';\nimport CodeMirror from 'codemirror';\nimport 'codemirror/mode/meta';\nimport './codemirror.css';\n\nconst defaultOptions = {\n tabSize: 2,\n autoCloseBrackets: true,\n matchBrackets: true,\n showCursorWhenSelecting: true,\n // 显示行号\n lineNumbers: true,\n fullScreen: true,\n}\n\nfunction ReactCodeMirror(props = {}, ref) {\n const { options = {}, value = '', width = '100%', height = '100%', lazyLoadMode = true } = props;\n const [editor, setEditor] = useState();\n const textareaRef = useRef();\n const lastestProps = useRef(props);\n\n useImperativeHandle(ref, () => ({ editor }), [editor]);\n lastestProps.current = props;\n \n // 将props中所有的事件处理函数映射并保存\n function getEventHandleFromProps() {\n const propNames = Object.keys(props);\n const eventHandle = propNames.filter((keyName) => {\n return /^on+/.test(keyName);\n });\n\n const eventDict = {};\n eventHandle.forEach((ele) => {\n const name = ele.slice(2);\n if (name && name[0]) {\n eventDict[ele] = name.replace(name[0], name[0].toLowerCase());\n }\n });\n\n return eventDict;\n }\n\n // http://codemirror.net/doc/manual.html#config\n async function setOptions(instance, opt = {}) {\n if (typeof opt === 'object' && window) {\n const mode = CodeMirror.findModeByName(opt.mode || '');\n if (lazyLoadMode && mode && mode.mode) {\n await import(`codemirror/mode/${mode.mode}/${mode.mode}.js`);\n }\n if (mode) {\n opt.mode = mode.mime;\n }\n Object.keys(opt).forEach((name) => {\n if ((opt[name] || opt[name] === false) && JSON.stringify(opt[name])) {\n instance.setOption(name, opt[name]);\n }\n });\n }\n }\n\n useEffect(() => {\n if (!editor && window) {\n // 生成codemirror实例\n const instance = CodeMirror.fromTextArea(textareaRef.current, {...defaultOptions, ...options});\n const eventDict = getEventHandleFromProps();\n Object.keys(eventDict).forEach((event) => {\n instance.on(eventDict[event], (...params) => lastestProps.current[event](...params));\n });\n instance.setValue(value || '');\n\n if (width || height) {\n // 设置尺寸\n instance.setSize(width, height);\n }\n setEditor(instance);\n setOptions(instance, {...defaultOptions, ...options});\n }\n return () => {\n if (editor && window) {\n editor.toTextArea();\n setEditor(undefined);\n }\n }\n }, []);\n\n useMemo(() => {\n if (!editor || !window) return;\n const val = editor.getValue();\n if (value !== undefined && value !== val) {\n editor.setValue(value);\n }\n }, [value]);\n\n useMemo(() => {\n if (!editor || !window) return;\n editor.setSize(width, height);\n }, [width, height]);\n\n\n useMemo(() => {\n if (!editor || !window) return;\n setOptions(editor, {...defaultOptions, ...options});\n }, [editor, options]);\n \n return (\n <textarea ref={textareaRef} />\n );\n}\n\nexport default React.forwardRef(ReactCodeMirror);\n"
|
|
73
|
+
"import React, { useRef, useEffect, useImperativeHandle, useState, useMemo } from 'react';\nimport CodeMirror from 'codemirror';\nimport 'codemirror/mode/meta';\nimport './codemirror.css';\n\nconst defaultOptions = {\n tabSize: 2,\n autoCloseBrackets: true,\n matchBrackets: true,\n showCursorWhenSelecting: true,\n // 显示行号\n lineNumbers: true,\n fullScreen: true,\n}\n\nfunction ReactCodeMirror(props = {}, ref) {\n const { options = {}, value = '', width = '100%', height = '100%', lazyLoadMode = true } = props;\n const [editor, setEditor] = useState();\n const textareaRef = useRef();\n const lastestProps = useRef(props);\n\n useImperativeHandle(ref, () => ({ editor, textarea: textareaRef.current }), [editor, textareaRef]);\n lastestProps.current = props;\n \n // 将props中所有的事件处理函数映射并保存\n function getEventHandleFromProps() {\n const propNames = Object.keys(props);\n const eventHandle = propNames.filter((keyName) => {\n return /^on+/.test(keyName);\n });\n\n const eventDict = {};\n eventHandle.forEach((ele) => {\n const name = ele.slice(2);\n if (name && name[0]) {\n eventDict[ele] = name.replace(name[0], name[0].toLowerCase());\n }\n });\n\n return eventDict;\n }\n\n // http://codemirror.net/doc/manual.html#config\n async function setOptions(instance, opt = {}) {\n if (typeof opt === 'object' && window) {\n const mode = CodeMirror.findModeByName(opt.mode || '');\n if (lazyLoadMode && mode && mode.mode) {\n await import(`codemirror/mode/${mode.mode}/${mode.mode}.js`);\n }\n if (mode) {\n opt.mode = mode.mime;\n }\n Object.keys(opt).forEach((name) => {\n if ((opt[name] || opt[name] === false) && JSON.stringify(opt[name])) {\n instance.setOption(name, opt[name]);\n }\n });\n }\n }\n\n useEffect(() => {\n if (!editor && window) {\n // 生成codemirror实例\n const instance = CodeMirror.fromTextArea(textareaRef.current, {...defaultOptions, ...options});\n const eventDict = getEventHandleFromProps();\n Object.keys(eventDict).forEach((event) => {\n instance.on(eventDict[event], (...params) => lastestProps.current[event](...params));\n });\n instance.setValue(value || '');\n\n if (width || height) {\n // 设置尺寸\n instance.setSize(width, height);\n }\n setEditor(instance);\n setOptions(instance, {...defaultOptions, ...options});\n }\n return () => {\n if (editor && window) {\n editor.toTextArea();\n setEditor(undefined);\n }\n }\n }, []);\n\n useMemo(() => {\n if (!editor || !window) return;\n const val = editor.getValue();\n if (value !== undefined && value !== val) {\n editor.setValue(value);\n }\n }, [value]);\n\n useMemo(() => {\n if (!editor || !window) return;\n editor.setSize(width, height);\n }, [width, height]);\n\n\n useMemo(() => {\n if (!editor || !window) return;\n setOptions(editor, {...defaultOptions, ...options});\n }, [editor, options]);\n \n return (\n <textarea ref={textareaRef} />\n );\n}\n\nexport default React.forwardRef(ReactCodeMirror);\n"
|
|
73
74
|
]
|
|
74
75
|
}
|
package/lib/index.js
CHANGED
|
@@ -4,23 +4,31 @@ var _interopRequireWildcard3 = require("@babel/runtime/helpers/interopRequireWil
|
|
|
4
4
|
|
|
5
5
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
6
6
|
|
|
7
|
-
exports
|
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
8
10
|
exports.default = void 0;
|
|
9
11
|
|
|
10
12
|
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
|
|
11
13
|
|
|
12
14
|
var _interopRequireWildcard2 = _interopRequireDefault(require("@babel/runtime/helpers/interopRequireWildcard"));
|
|
13
15
|
|
|
14
|
-
var
|
|
16
|
+
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
17
|
+
|
|
18
|
+
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
15
19
|
|
|
16
20
|
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
|
17
21
|
|
|
22
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
23
|
+
|
|
18
24
|
var _react = _interopRequireWildcard3(require("react"));
|
|
19
25
|
|
|
20
26
|
var _codemirror = _interopRequireDefault(require("codemirror"));
|
|
21
27
|
|
|
22
28
|
require("codemirror/mode/meta");
|
|
23
29
|
|
|
30
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
31
|
+
|
|
24
32
|
var defaultOptions = {
|
|
25
33
|
tabSize: 2,
|
|
26
34
|
autoCloseBrackets: true,
|
|
@@ -31,34 +39,33 @@ var defaultOptions = {
|
|
|
31
39
|
fullScreen: true
|
|
32
40
|
};
|
|
33
41
|
|
|
34
|
-
function ReactCodeMirror(
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
var _props = props,
|
|
40
|
-
_props$options = _props.options,
|
|
42
|
+
function ReactCodeMirror() {
|
|
43
|
+
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
44
|
+
var ref = arguments.length > 1 ? arguments[1] : undefined;
|
|
45
|
+
var _props$options = props.options,
|
|
41
46
|
options = _props$options === void 0 ? {} : _props$options,
|
|
42
|
-
_props$value =
|
|
47
|
+
_props$value = props.value,
|
|
43
48
|
value = _props$value === void 0 ? '' : _props$value,
|
|
44
|
-
_props$width =
|
|
49
|
+
_props$width = props.width,
|
|
45
50
|
width = _props$width === void 0 ? '100%' : _props$width,
|
|
46
|
-
_props$height =
|
|
51
|
+
_props$height = props.height,
|
|
47
52
|
height = _props$height === void 0 ? '100%' : _props$height,
|
|
48
|
-
_props$lazyLoadMode =
|
|
53
|
+
_props$lazyLoadMode = props.lazyLoadMode,
|
|
49
54
|
lazyLoadMode = _props$lazyLoadMode === void 0 ? true : _props$lazyLoadMode;
|
|
50
55
|
|
|
51
56
|
var _useState = (0, _react.useState)(),
|
|
52
|
-
|
|
53
|
-
|
|
57
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
58
|
+
editor = _useState2[0],
|
|
59
|
+
setEditor = _useState2[1];
|
|
54
60
|
|
|
55
61
|
var textareaRef = (0, _react.useRef)();
|
|
56
62
|
var lastestProps = (0, _react.useRef)(props);
|
|
57
63
|
(0, _react.useImperativeHandle)(ref, function () {
|
|
58
64
|
return {
|
|
59
|
-
editor: editor
|
|
65
|
+
editor: editor,
|
|
66
|
+
textarea: textareaRef.current
|
|
60
67
|
};
|
|
61
|
-
}, [editor]);
|
|
68
|
+
}, [editor, textareaRef]);
|
|
62
69
|
lastestProps.current = props; // 将props中所有的事件处理函数映射并保存
|
|
63
70
|
|
|
64
71
|
function getEventHandleFromProps() {
|
|
@@ -78,22 +85,22 @@ function ReactCodeMirror(props, ref) {
|
|
|
78
85
|
} // http://codemirror.net/doc/manual.html#config
|
|
79
86
|
|
|
80
87
|
|
|
81
|
-
function setOptions(_x
|
|
88
|
+
function setOptions(_x) {
|
|
82
89
|
return _setOptions.apply(this, arguments);
|
|
83
90
|
}
|
|
84
91
|
|
|
85
92
|
function _setOptions() {
|
|
86
|
-
_setOptions = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(instance
|
|
87
|
-
var
|
|
93
|
+
_setOptions = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(instance) {
|
|
94
|
+
var opt,
|
|
95
|
+
mode,
|
|
96
|
+
_args = arguments;
|
|
88
97
|
return _regenerator.default.wrap(function _callee$(_context) {
|
|
89
98
|
while (1) {
|
|
90
99
|
switch (_context.prev = _context.next) {
|
|
91
100
|
case 0:
|
|
92
|
-
|
|
93
|
-
opt = {};
|
|
94
|
-
}
|
|
101
|
+
opt = _args.length > 1 && _args[1] !== undefined ? _args[1] : {};
|
|
95
102
|
|
|
96
|
-
if (!(
|
|
103
|
+
if (!((0, _typeof2.default)(opt) === 'object' && window)) {
|
|
97
104
|
_context.next = 8;
|
|
98
105
|
break;
|
|
99
106
|
}
|
|
@@ -106,7 +113,7 @@ function ReactCodeMirror(props, ref) {
|
|
|
106
113
|
}
|
|
107
114
|
|
|
108
115
|
_context.next = 6;
|
|
109
|
-
return Promise.resolve("codemirror/mode/"
|
|
116
|
+
return Promise.resolve("codemirror/mode/".concat(mode.mode, "/").concat(mode.mode, ".js")).then(function (s) {
|
|
110
117
|
return (0, _interopRequireWildcard2.default)(require(s));
|
|
111
118
|
});
|
|
112
119
|
|
|
@@ -134,7 +141,7 @@ function ReactCodeMirror(props, ref) {
|
|
|
134
141
|
(0, _react.useEffect)(function () {
|
|
135
142
|
if (!editor && window) {
|
|
136
143
|
// 生成codemirror实例
|
|
137
|
-
var instance = _codemirror.default.fromTextArea(textareaRef.current, (0,
|
|
144
|
+
var instance = _codemirror.default.fromTextArea(textareaRef.current, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, defaultOptions), options));
|
|
138
145
|
|
|
139
146
|
var eventDict = getEventHandleFromProps();
|
|
140
147
|
Object.keys(eventDict).forEach(function (event) {
|
|
@@ -152,7 +159,7 @@ function ReactCodeMirror(props, ref) {
|
|
|
152
159
|
}
|
|
153
160
|
|
|
154
161
|
setEditor(instance);
|
|
155
|
-
setOptions(instance, (0,
|
|
162
|
+
setOptions(instance, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, defaultOptions), options));
|
|
156
163
|
}
|
|
157
164
|
|
|
158
165
|
return function () {
|
|
@@ -176,9 +183,9 @@ function ReactCodeMirror(props, ref) {
|
|
|
176
183
|
}, [width, height]);
|
|
177
184
|
(0, _react.useMemo)(function () {
|
|
178
185
|
if (!editor || !window) return;
|
|
179
|
-
setOptions(editor, (0,
|
|
186
|
+
setOptions(editor, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, defaultOptions), options));
|
|
180
187
|
}, [editor, options]);
|
|
181
|
-
return /*#__PURE__*/
|
|
188
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", {
|
|
182
189
|
ref: textareaRef
|
|
183
190
|
});
|
|
184
191
|
}
|
package/lib/index.js.map
CHANGED
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
"setEditor",
|
|
24
24
|
"textareaRef",
|
|
25
25
|
"lastestProps",
|
|
26
|
+
"textarea",
|
|
26
27
|
"current",
|
|
27
28
|
"getEventHandleFromProps",
|
|
28
29
|
"propNames",
|
|
@@ -62,8 +63,8 @@
|
|
|
62
63
|
"React",
|
|
63
64
|
"forwardRef"
|
|
64
65
|
],
|
|
65
|
-
"mappings": "
|
|
66
|
+
"mappings": "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",
|
|
66
67
|
"sourcesContent": [
|
|
67
|
-
"import React, { useRef, useEffect, useImperativeHandle, useState, useMemo } from 'react';\nimport CodeMirror from 'codemirror';\nimport 'codemirror/mode/meta';\nimport './codemirror.css';\n\nconst defaultOptions = {\n tabSize: 2,\n autoCloseBrackets: true,\n matchBrackets: true,\n showCursorWhenSelecting: true,\n // 显示行号\n lineNumbers: true,\n fullScreen: true,\n}\n\nfunction ReactCodeMirror(props = {}, ref) {\n const { options = {}, value = '', width = '100%', height = '100%', lazyLoadMode = true } = props;\n const [editor, setEditor] = useState();\n const textareaRef = useRef();\n const lastestProps = useRef(props);\n\n useImperativeHandle(ref, () => ({ editor }), [editor]);\n lastestProps.current = props;\n \n // 将props中所有的事件处理函数映射并保存\n function getEventHandleFromProps() {\n const propNames = Object.keys(props);\n const eventHandle = propNames.filter((keyName) => {\n return /^on+/.test(keyName);\n });\n\n const eventDict = {};\n eventHandle.forEach((ele) => {\n const name = ele.slice(2);\n if (name && name[0]) {\n eventDict[ele] = name.replace(name[0], name[0].toLowerCase());\n }\n });\n\n return eventDict;\n }\n\n // http://codemirror.net/doc/manual.html#config\n async function setOptions(instance, opt = {}) {\n if (typeof opt === 'object' && window) {\n const mode = CodeMirror.findModeByName(opt.mode || '');\n if (lazyLoadMode && mode && mode.mode) {\n await import(`codemirror/mode/${mode.mode}/${mode.mode}.js`);\n }\n if (mode) {\n opt.mode = mode.mime;\n }\n Object.keys(opt).forEach((name) => {\n if ((opt[name] || opt[name] === false) && JSON.stringify(opt[name])) {\n instance.setOption(name, opt[name]);\n }\n });\n }\n }\n\n useEffect(() => {\n if (!editor && window) {\n // 生成codemirror实例\n const instance = CodeMirror.fromTextArea(textareaRef.current, {...defaultOptions, ...options});\n const eventDict = getEventHandleFromProps();\n Object.keys(eventDict).forEach((event) => {\n instance.on(eventDict[event], (...params) => lastestProps.current[event](...params));\n });\n instance.setValue(value || '');\n\n if (width || height) {\n // 设置尺寸\n instance.setSize(width, height);\n }\n setEditor(instance);\n setOptions(instance, {...defaultOptions, ...options});\n }\n return () => {\n if (editor && window) {\n editor.toTextArea();\n setEditor(undefined);\n }\n }\n }, []);\n\n useMemo(() => {\n if (!editor || !window) return;\n const val = editor.getValue();\n if (value !== undefined && value !== val) {\n editor.setValue(value);\n }\n }, [value]);\n\n useMemo(() => {\n if (!editor || !window) return;\n editor.setSize(width, height);\n }, [width, height]);\n\n\n useMemo(() => {\n if (!editor || !window) return;\n setOptions(editor, {...defaultOptions, ...options});\n }, [editor, options]);\n \n return (\n <textarea ref={textareaRef} />\n );\n}\n\nexport default React.forwardRef(ReactCodeMirror);\n"
|
|
68
|
+
"import React, { useRef, useEffect, useImperativeHandle, useState, useMemo } from 'react';\nimport CodeMirror from 'codemirror';\nimport 'codemirror/mode/meta';\nimport './codemirror.css';\n\nconst defaultOptions = {\n tabSize: 2,\n autoCloseBrackets: true,\n matchBrackets: true,\n showCursorWhenSelecting: true,\n // 显示行号\n lineNumbers: true,\n fullScreen: true,\n}\n\nfunction ReactCodeMirror(props = {}, ref) {\n const { options = {}, value = '', width = '100%', height = '100%', lazyLoadMode = true } = props;\n const [editor, setEditor] = useState();\n const textareaRef = useRef();\n const lastestProps = useRef(props);\n\n useImperativeHandle(ref, () => ({ editor, textarea: textareaRef.current }), [editor, textareaRef]);\n lastestProps.current = props;\n \n // 将props中所有的事件处理函数映射并保存\n function getEventHandleFromProps() {\n const propNames = Object.keys(props);\n const eventHandle = propNames.filter((keyName) => {\n return /^on+/.test(keyName);\n });\n\n const eventDict = {};\n eventHandle.forEach((ele) => {\n const name = ele.slice(2);\n if (name && name[0]) {\n eventDict[ele] = name.replace(name[0], name[0].toLowerCase());\n }\n });\n\n return eventDict;\n }\n\n // http://codemirror.net/doc/manual.html#config\n async function setOptions(instance, opt = {}) {\n if (typeof opt === 'object' && window) {\n const mode = CodeMirror.findModeByName(opt.mode || '');\n if (lazyLoadMode && mode && mode.mode) {\n await import(`codemirror/mode/${mode.mode}/${mode.mode}.js`);\n }\n if (mode) {\n opt.mode = mode.mime;\n }\n Object.keys(opt).forEach((name) => {\n if ((opt[name] || opt[name] === false) && JSON.stringify(opt[name])) {\n instance.setOption(name, opt[name]);\n }\n });\n }\n }\n\n useEffect(() => {\n if (!editor && window) {\n // 生成codemirror实例\n const instance = CodeMirror.fromTextArea(textareaRef.current, {...defaultOptions, ...options});\n const eventDict = getEventHandleFromProps();\n Object.keys(eventDict).forEach((event) => {\n instance.on(eventDict[event], (...params) => lastestProps.current[event](...params));\n });\n instance.setValue(value || '');\n\n if (width || height) {\n // 设置尺寸\n instance.setSize(width, height);\n }\n setEditor(instance);\n setOptions(instance, {...defaultOptions, ...options});\n }\n return () => {\n if (editor && window) {\n editor.toTextArea();\n setEditor(undefined);\n }\n }\n }, []);\n\n useMemo(() => {\n if (!editor || !window) return;\n const val = editor.getValue();\n if (value !== undefined && value !== val) {\n editor.setValue(value);\n }\n }, [value]);\n\n useMemo(() => {\n if (!editor || !window) return;\n editor.setSize(width, height);\n }, [width, height]);\n\n\n useMemo(() => {\n if (!editor || !window) return;\n setOptions(editor, {...defaultOptions, ...options});\n }, [editor, options]);\n \n return (\n <textarea ref={textareaRef} />\n );\n}\n\nexport default React.forwardRef(ReactCodeMirror);\n"
|
|
68
69
|
]
|
|
69
70
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uiw/react-codemirror",
|
|
3
|
-
"version": "3.2.
|
|
3
|
+
"version": "3.2.2",
|
|
4
4
|
"description": "CodeMirror component for React.",
|
|
5
5
|
"homepage": "https://uiwjs.github.io/react-codemirror",
|
|
6
6
|
"main": "lib/index.js",
|
|
@@ -8,8 +8,8 @@
|
|
|
8
8
|
"typings": "typings/index.d.ts",
|
|
9
9
|
"scripts": {
|
|
10
10
|
"prepare": "npm run build",
|
|
11
|
-
"watch": "tsbb watch",
|
|
12
|
-
"build": "tsbb build",
|
|
11
|
+
"watch": "tsbb watch --entry src/index.js",
|
|
12
|
+
"build": "tsbb build --entry src/index.js",
|
|
13
13
|
"doc": "kkt build --app-src ./website",
|
|
14
14
|
"start": "kkt start --app-src ./website"
|
|
15
15
|
},
|
|
@@ -56,15 +56,14 @@
|
|
|
56
56
|
"@kkt/scope-plugin-options": "6.11.0",
|
|
57
57
|
"@types/codemirror": "5.60.2",
|
|
58
58
|
"@uiw/react-github-corners": "1.4.0",
|
|
59
|
-
"@uiw/react-markdown-preview": "3.
|
|
59
|
+
"@uiw/react-markdown-preview": "3.3.0",
|
|
60
60
|
"@uiw/react-shields": "1.1.1",
|
|
61
61
|
"@uiw/reset.css": "1.0.5",
|
|
62
|
-
"babel-plugin-transform-remove-imports": "1.5.5",
|
|
63
62
|
"code-example": "3.0.6",
|
|
64
63
|
"kkt": "6.11.0",
|
|
65
64
|
"react": "17.0.2",
|
|
66
65
|
"react-dom": "17.0.2",
|
|
67
|
-
"tsbb": "3.
|
|
66
|
+
"tsbb": "3.3.7"
|
|
68
67
|
},
|
|
69
68
|
"browserslist": {
|
|
70
69
|
"production": [
|
package/src/index.js
CHANGED
|
@@ -19,7 +19,7 @@ function ReactCodeMirror(props = {}, ref) {
|
|
|
19
19
|
const textareaRef = useRef();
|
|
20
20
|
const lastestProps = useRef(props);
|
|
21
21
|
|
|
22
|
-
useImperativeHandle(ref, () => ({ editor }), [editor]);
|
|
22
|
+
useImperativeHandle(ref, () => ({ editor, textarea: textareaRef.current }), [editor, textareaRef]);
|
|
23
23
|
lastestProps.current = props;
|
|
24
24
|
|
|
25
25
|
// 将props中所有的事件处理函数映射并保存
|