@uiw/react-codemirror 3.0.14 → 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 +29 -1
- package/{lib/cjs → esm}/codemirror.css +0 -0
- package/esm/index.js +137 -0
- package/esm/index.js.map +75 -0
- package/lib/{esm/codemirror.css → codemirror.css} +0 -0
- package/lib/index.js +197 -0
- package/lib/index.js.map +70 -0
- package/package.json +14 -14
- package/src/codemirror.css +345 -0
- package/src/index.js +110 -0
- package/typings/index.d.ts +12 -5
- package/lib/cjs/index.js +0 -192
- package/lib/esm/index.js +0 -166
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';
|
|
@@ -44,7 +48,7 @@ const code = 'const a = 0;';
|
|
|
44
48
|
/>
|
|
45
49
|
```
|
|
46
50
|
|
|
47
|
-
requiring codemirror resources
|
|
51
|
+
requiring codemirror resources. This is often done when specifying certain language modes and themes. Language resources do not need to be imported, just set the mode and they will be automatically lazy loaded.
|
|
48
52
|
|
|
49
53
|
```jsx
|
|
50
54
|
import CodeMirror from '@uiw/react-codemirror';
|
|
@@ -67,6 +71,29 @@ const code = 'const a = 0;';
|
|
|
67
71
|
/>
|
|
68
72
|
```
|
|
69
73
|
|
|
74
|
+
If you do not want to lazy load the language resources, you can set the prop `lazyLoadMode` to `false`. You will need to load the language resources yourself in this case.
|
|
75
|
+
|
|
76
|
+
```jsx
|
|
77
|
+
import CodeMirror from '@uiw/react-codemirror';
|
|
78
|
+
import 'codemirror/keymap/sublime';
|
|
79
|
+
import 'codemirror/theme/monokai.css';
|
|
80
|
+
// Manually loading the language resources here
|
|
81
|
+
import 'codemirror/mode/javascript/javascript';
|
|
82
|
+
|
|
83
|
+
const code = 'console.log("hello world!");';
|
|
84
|
+
|
|
85
|
+
<CodeMirror
|
|
86
|
+
value={code}
|
|
87
|
+
lazyLoadMode={false}
|
|
88
|
+
options={{
|
|
89
|
+
theme: 'monokai',
|
|
90
|
+
tabSize: 2,
|
|
91
|
+
keyMap: 'sublime',
|
|
92
|
+
mode: 'js',
|
|
93
|
+
}}
|
|
94
|
+
/>
|
|
95
|
+
```
|
|
96
|
+
|
|
70
97
|
## Change Theme
|
|
71
98
|
|
|
72
99
|
```diff
|
|
@@ -94,6 +121,7 @@ const code = 'const a = 0;';
|
|
|
94
121
|
- `width` width of editor. Defaults to `100%`.
|
|
95
122
|
- `height` height of editor. Defaults to `100%`.
|
|
96
123
|
- `value` value of the auto created model in the editor.
|
|
124
|
+
- `lazyLoadMode` should the mode by automatically lazy loaded. If this is set to false you will need to load the mode yourself. Defaults to true.
|
|
97
125
|
- `options` refer to [codemirror options](https://codemirror.net/doc/manual.html#config).
|
|
98
126
|
|
|
99
127
|
## Props Events
|
|
File without changes
|
package/esm/index.js
ADDED
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
|
|
3
|
+
import React, { useRef, useEffect, useImperativeHandle, useState, useMemo } from 'react';
|
|
4
|
+
import CodeMirror from 'codemirror';
|
|
5
|
+
import 'codemirror/mode/meta';
|
|
6
|
+
import './codemirror.css';
|
|
7
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
|
+
var defaultOptions = {
|
|
9
|
+
tabSize: 2,
|
|
10
|
+
autoCloseBrackets: true,
|
|
11
|
+
matchBrackets: true,
|
|
12
|
+
showCursorWhenSelecting: true,
|
|
13
|
+
// 显示行号
|
|
14
|
+
lineNumbers: true,
|
|
15
|
+
fullScreen: true
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
function ReactCodeMirror(props, ref) {
|
|
19
|
+
if (props === void 0) {
|
|
20
|
+
props = {};
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
var {
|
|
24
|
+
options = {},
|
|
25
|
+
value = '',
|
|
26
|
+
width = '100%',
|
|
27
|
+
height = '100%',
|
|
28
|
+
lazyLoadMode = true
|
|
29
|
+
} = props;
|
|
30
|
+
var [editor, setEditor] = useState();
|
|
31
|
+
var textareaRef = useRef();
|
|
32
|
+
var lastestProps = useRef(props);
|
|
33
|
+
useImperativeHandle(ref, () => ({
|
|
34
|
+
editor,
|
|
35
|
+
textarea: textareaRef.current
|
|
36
|
+
}), [editor, textareaRef]);
|
|
37
|
+
lastestProps.current = props; // 将props中所有的事件处理函数映射并保存
|
|
38
|
+
|
|
39
|
+
function getEventHandleFromProps() {
|
|
40
|
+
var propNames = Object.keys(props);
|
|
41
|
+
var eventHandle = propNames.filter(keyName => {
|
|
42
|
+
return /^on+/.test(keyName);
|
|
43
|
+
});
|
|
44
|
+
var eventDict = {};
|
|
45
|
+
eventHandle.forEach(ele => {
|
|
46
|
+
var name = ele.slice(2);
|
|
47
|
+
|
|
48
|
+
if (name && name[0]) {
|
|
49
|
+
eventDict[ele] = name.replace(name[0], name[0].toLowerCase());
|
|
50
|
+
}
|
|
51
|
+
});
|
|
52
|
+
return eventDict;
|
|
53
|
+
} // http://codemirror.net/doc/manual.html#config
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
function setOptions(_x, _x2) {
|
|
57
|
+
return _setOptions.apply(this, arguments);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
function _setOptions() {
|
|
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;
|
|
75
|
+
}
|
|
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
|
+
});
|
|
84
|
+
return _setOptions.apply(this, arguments);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
useEffect(() => {
|
|
88
|
+
if (!editor && window) {
|
|
89
|
+
// 生成codemirror实例
|
|
90
|
+
var instance = CodeMirror.fromTextArea(textareaRef.current, _extends({}, defaultOptions, options));
|
|
91
|
+
var eventDict = getEventHandleFromProps();
|
|
92
|
+
Object.keys(eventDict).forEach(event => {
|
|
93
|
+
instance.on(eventDict[event], function () {
|
|
94
|
+
return lastestProps.current[event](...arguments);
|
|
95
|
+
});
|
|
96
|
+
});
|
|
97
|
+
instance.setValue(value || '');
|
|
98
|
+
|
|
99
|
+
if (width || height) {
|
|
100
|
+
// 设置尺寸
|
|
101
|
+
instance.setSize(width, height);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
setEditor(instance);
|
|
105
|
+
setOptions(instance, _extends({}, defaultOptions, options));
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
return () => {
|
|
109
|
+
if (editor && window) {
|
|
110
|
+
editor.toTextArea();
|
|
111
|
+
setEditor(undefined);
|
|
112
|
+
}
|
|
113
|
+
};
|
|
114
|
+
}, []);
|
|
115
|
+
useMemo(() => {
|
|
116
|
+
if (!editor || !window) return;
|
|
117
|
+
var val = editor.getValue();
|
|
118
|
+
|
|
119
|
+
if (value !== undefined && value !== val) {
|
|
120
|
+
editor.setValue(value);
|
|
121
|
+
}
|
|
122
|
+
}, [value]);
|
|
123
|
+
useMemo(() => {
|
|
124
|
+
if (!editor || !window) return;
|
|
125
|
+
editor.setSize(width, height);
|
|
126
|
+
}, [width, height]);
|
|
127
|
+
useMemo(() => {
|
|
128
|
+
if (!editor || !window) return;
|
|
129
|
+
setOptions(editor, _extends({}, defaultOptions, options));
|
|
130
|
+
}, [editor, options]);
|
|
131
|
+
return /*#__PURE__*/_jsx("textarea", {
|
|
132
|
+
ref: textareaRef
|
|
133
|
+
});
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
export default /*#__PURE__*/React.forwardRef(ReactCodeMirror);
|
|
137
|
+
//# sourceMappingURL=index.js.map
|
package/esm/index.js.map
ADDED
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": [
|
|
4
|
+
"../src/index.js"
|
|
5
|
+
],
|
|
6
|
+
"names": [
|
|
7
|
+
"React",
|
|
8
|
+
"useRef",
|
|
9
|
+
"useEffect",
|
|
10
|
+
"useImperativeHandle",
|
|
11
|
+
"useState",
|
|
12
|
+
"useMemo",
|
|
13
|
+
"CodeMirror",
|
|
14
|
+
"defaultOptions",
|
|
15
|
+
"tabSize",
|
|
16
|
+
"autoCloseBrackets",
|
|
17
|
+
"matchBrackets",
|
|
18
|
+
"showCursorWhenSelecting",
|
|
19
|
+
"lineNumbers",
|
|
20
|
+
"fullScreen",
|
|
21
|
+
"ReactCodeMirror",
|
|
22
|
+
"props",
|
|
23
|
+
"ref",
|
|
24
|
+
"options",
|
|
25
|
+
"value",
|
|
26
|
+
"width",
|
|
27
|
+
"height",
|
|
28
|
+
"lazyLoadMode",
|
|
29
|
+
"editor",
|
|
30
|
+
"setEditor",
|
|
31
|
+
"textareaRef",
|
|
32
|
+
"lastestProps",
|
|
33
|
+
"textarea",
|
|
34
|
+
"current",
|
|
35
|
+
"getEventHandleFromProps",
|
|
36
|
+
"propNames",
|
|
37
|
+
"Object",
|
|
38
|
+
"keys",
|
|
39
|
+
"eventHandle",
|
|
40
|
+
"filter",
|
|
41
|
+
"keyName",
|
|
42
|
+
"test",
|
|
43
|
+
"eventDict",
|
|
44
|
+
"forEach",
|
|
45
|
+
"ele",
|
|
46
|
+
"name",
|
|
47
|
+
"slice",
|
|
48
|
+
"replace",
|
|
49
|
+
"toLowerCase",
|
|
50
|
+
"setOptions",
|
|
51
|
+
"instance",
|
|
52
|
+
"opt",
|
|
53
|
+
"window",
|
|
54
|
+
"mode",
|
|
55
|
+
"findModeByName",
|
|
56
|
+
"mime",
|
|
57
|
+
"JSON",
|
|
58
|
+
"stringify",
|
|
59
|
+
"setOption",
|
|
60
|
+
"fromTextArea",
|
|
61
|
+
"event",
|
|
62
|
+
"on",
|
|
63
|
+
"setValue",
|
|
64
|
+
"setSize",
|
|
65
|
+
"toTextArea",
|
|
66
|
+
"undefined",
|
|
67
|
+
"val",
|
|
68
|
+
"getValue",
|
|
69
|
+
"forwardRef"
|
|
70
|
+
],
|
|
71
|
+
"mappings": "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",
|
|
72
|
+
"sourcesContent": [
|
|
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"
|
|
74
|
+
]
|
|
75
|
+
}
|
|
File without changes
|
package/lib/index.js
ADDED
|
@@ -0,0 +1,197 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireWildcard3 = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
|
+
|
|
5
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
6
|
+
|
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
10
|
+
exports.default = void 0;
|
|
11
|
+
|
|
12
|
+
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
|
|
13
|
+
|
|
14
|
+
var _interopRequireWildcard2 = _interopRequireDefault(require("@babel/runtime/helpers/interopRequireWildcard"));
|
|
15
|
+
|
|
16
|
+
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
17
|
+
|
|
18
|
+
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
19
|
+
|
|
20
|
+
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
|
21
|
+
|
|
22
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
23
|
+
|
|
24
|
+
var _react = _interopRequireWildcard3(require("react"));
|
|
25
|
+
|
|
26
|
+
var _codemirror = _interopRequireDefault(require("codemirror"));
|
|
27
|
+
|
|
28
|
+
require("codemirror/mode/meta");
|
|
29
|
+
|
|
30
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
31
|
+
|
|
32
|
+
var defaultOptions = {
|
|
33
|
+
tabSize: 2,
|
|
34
|
+
autoCloseBrackets: true,
|
|
35
|
+
matchBrackets: true,
|
|
36
|
+
showCursorWhenSelecting: true,
|
|
37
|
+
// 显示行号
|
|
38
|
+
lineNumbers: true,
|
|
39
|
+
fullScreen: true
|
|
40
|
+
};
|
|
41
|
+
|
|
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,
|
|
46
|
+
options = _props$options === void 0 ? {} : _props$options,
|
|
47
|
+
_props$value = props.value,
|
|
48
|
+
value = _props$value === void 0 ? '' : _props$value,
|
|
49
|
+
_props$width = props.width,
|
|
50
|
+
width = _props$width === void 0 ? '100%' : _props$width,
|
|
51
|
+
_props$height = props.height,
|
|
52
|
+
height = _props$height === void 0 ? '100%' : _props$height,
|
|
53
|
+
_props$lazyLoadMode = props.lazyLoadMode,
|
|
54
|
+
lazyLoadMode = _props$lazyLoadMode === void 0 ? true : _props$lazyLoadMode;
|
|
55
|
+
|
|
56
|
+
var _useState = (0, _react.useState)(),
|
|
57
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
58
|
+
editor = _useState2[0],
|
|
59
|
+
setEditor = _useState2[1];
|
|
60
|
+
|
|
61
|
+
var textareaRef = (0, _react.useRef)();
|
|
62
|
+
var lastestProps = (0, _react.useRef)(props);
|
|
63
|
+
(0, _react.useImperativeHandle)(ref, function () {
|
|
64
|
+
return {
|
|
65
|
+
editor: editor,
|
|
66
|
+
textarea: textareaRef.current
|
|
67
|
+
};
|
|
68
|
+
}, [editor, textareaRef]);
|
|
69
|
+
lastestProps.current = props; // 将props中所有的事件处理函数映射并保存
|
|
70
|
+
|
|
71
|
+
function getEventHandleFromProps() {
|
|
72
|
+
var propNames = Object.keys(props);
|
|
73
|
+
var eventHandle = propNames.filter(function (keyName) {
|
|
74
|
+
return /^on+/.test(keyName);
|
|
75
|
+
});
|
|
76
|
+
var eventDict = {};
|
|
77
|
+
eventHandle.forEach(function (ele) {
|
|
78
|
+
var name = ele.slice(2);
|
|
79
|
+
|
|
80
|
+
if (name && name[0]) {
|
|
81
|
+
eventDict[ele] = name.replace(name[0], name[0].toLowerCase());
|
|
82
|
+
}
|
|
83
|
+
});
|
|
84
|
+
return eventDict;
|
|
85
|
+
} // http://codemirror.net/doc/manual.html#config
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
function setOptions(_x) {
|
|
89
|
+
return _setOptions.apply(this, arguments);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
function _setOptions() {
|
|
93
|
+
_setOptions = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(instance) {
|
|
94
|
+
var opt,
|
|
95
|
+
mode,
|
|
96
|
+
_args = arguments;
|
|
97
|
+
return _regenerator.default.wrap(function _callee$(_context) {
|
|
98
|
+
while (1) {
|
|
99
|
+
switch (_context.prev = _context.next) {
|
|
100
|
+
case 0:
|
|
101
|
+
opt = _args.length > 1 && _args[1] !== undefined ? _args[1] : {};
|
|
102
|
+
|
|
103
|
+
if (!((0, _typeof2.default)(opt) === 'object' && window)) {
|
|
104
|
+
_context.next = 8;
|
|
105
|
+
break;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
mode = _codemirror.default.findModeByName(opt.mode || '');
|
|
109
|
+
|
|
110
|
+
if (!(lazyLoadMode && mode && mode.mode)) {
|
|
111
|
+
_context.next = 6;
|
|
112
|
+
break;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
_context.next = 6;
|
|
116
|
+
return Promise.resolve("codemirror/mode/".concat(mode.mode, "/").concat(mode.mode, ".js")).then(function (s) {
|
|
117
|
+
return (0, _interopRequireWildcard2.default)(require(s));
|
|
118
|
+
});
|
|
119
|
+
|
|
120
|
+
case 6:
|
|
121
|
+
if (mode) {
|
|
122
|
+
opt.mode = mode.mime;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
Object.keys(opt).forEach(function (name) {
|
|
126
|
+
if ((opt[name] || opt[name] === false) && JSON.stringify(opt[name])) {
|
|
127
|
+
instance.setOption(name, opt[name]);
|
|
128
|
+
}
|
|
129
|
+
});
|
|
130
|
+
|
|
131
|
+
case 8:
|
|
132
|
+
case "end":
|
|
133
|
+
return _context.stop();
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
}, _callee);
|
|
137
|
+
}));
|
|
138
|
+
return _setOptions.apply(this, arguments);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
(0, _react.useEffect)(function () {
|
|
142
|
+
if (!editor && window) {
|
|
143
|
+
// 生成codemirror实例
|
|
144
|
+
var instance = _codemirror.default.fromTextArea(textareaRef.current, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, defaultOptions), options));
|
|
145
|
+
|
|
146
|
+
var eventDict = getEventHandleFromProps();
|
|
147
|
+
Object.keys(eventDict).forEach(function (event) {
|
|
148
|
+
instance.on(eventDict[event], function () {
|
|
149
|
+
var _lastestProps$current;
|
|
150
|
+
|
|
151
|
+
return (_lastestProps$current = lastestProps.current)[event].apply(_lastestProps$current, arguments);
|
|
152
|
+
});
|
|
153
|
+
});
|
|
154
|
+
instance.setValue(value || '');
|
|
155
|
+
|
|
156
|
+
if (width || height) {
|
|
157
|
+
// 设置尺寸
|
|
158
|
+
instance.setSize(width, height);
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
setEditor(instance);
|
|
162
|
+
setOptions(instance, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, defaultOptions), options));
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
return function () {
|
|
166
|
+
if (editor && window) {
|
|
167
|
+
editor.toTextArea();
|
|
168
|
+
setEditor(undefined);
|
|
169
|
+
}
|
|
170
|
+
};
|
|
171
|
+
}, []);
|
|
172
|
+
(0, _react.useMemo)(function () {
|
|
173
|
+
if (!editor || !window) return;
|
|
174
|
+
var val = editor.getValue();
|
|
175
|
+
|
|
176
|
+
if (value !== undefined && value !== val) {
|
|
177
|
+
editor.setValue(value);
|
|
178
|
+
}
|
|
179
|
+
}, [value]);
|
|
180
|
+
(0, _react.useMemo)(function () {
|
|
181
|
+
if (!editor || !window) return;
|
|
182
|
+
editor.setSize(width, height);
|
|
183
|
+
}, [width, height]);
|
|
184
|
+
(0, _react.useMemo)(function () {
|
|
185
|
+
if (!editor || !window) return;
|
|
186
|
+
setOptions(editor, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, defaultOptions), options));
|
|
187
|
+
}, [editor, options]);
|
|
188
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", {
|
|
189
|
+
ref: textareaRef
|
|
190
|
+
});
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
var _default = /*#__PURE__*/_react.default.forwardRef(ReactCodeMirror);
|
|
194
|
+
|
|
195
|
+
exports.default = _default;
|
|
196
|
+
module.exports = exports.default;
|
|
197
|
+
//# sourceMappingURL=index.js.map
|
package/lib/index.js.map
ADDED
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": [
|
|
4
|
+
"../src/index.js"
|
|
5
|
+
],
|
|
6
|
+
"names": [
|
|
7
|
+
"defaultOptions",
|
|
8
|
+
"tabSize",
|
|
9
|
+
"autoCloseBrackets",
|
|
10
|
+
"matchBrackets",
|
|
11
|
+
"showCursorWhenSelecting",
|
|
12
|
+
"lineNumbers",
|
|
13
|
+
"fullScreen",
|
|
14
|
+
"ReactCodeMirror",
|
|
15
|
+
"props",
|
|
16
|
+
"ref",
|
|
17
|
+
"options",
|
|
18
|
+
"value",
|
|
19
|
+
"width",
|
|
20
|
+
"height",
|
|
21
|
+
"lazyLoadMode",
|
|
22
|
+
"editor",
|
|
23
|
+
"setEditor",
|
|
24
|
+
"textareaRef",
|
|
25
|
+
"lastestProps",
|
|
26
|
+
"textarea",
|
|
27
|
+
"current",
|
|
28
|
+
"getEventHandleFromProps",
|
|
29
|
+
"propNames",
|
|
30
|
+
"Object",
|
|
31
|
+
"keys",
|
|
32
|
+
"eventHandle",
|
|
33
|
+
"filter",
|
|
34
|
+
"keyName",
|
|
35
|
+
"test",
|
|
36
|
+
"eventDict",
|
|
37
|
+
"forEach",
|
|
38
|
+
"ele",
|
|
39
|
+
"name",
|
|
40
|
+
"slice",
|
|
41
|
+
"replace",
|
|
42
|
+
"toLowerCase",
|
|
43
|
+
"setOptions",
|
|
44
|
+
"instance",
|
|
45
|
+
"opt",
|
|
46
|
+
"window",
|
|
47
|
+
"mode",
|
|
48
|
+
"CodeMirror",
|
|
49
|
+
"findModeByName",
|
|
50
|
+
"mime",
|
|
51
|
+
"JSON",
|
|
52
|
+
"stringify",
|
|
53
|
+
"setOption",
|
|
54
|
+
"fromTextArea",
|
|
55
|
+
"event",
|
|
56
|
+
"on",
|
|
57
|
+
"setValue",
|
|
58
|
+
"setSize",
|
|
59
|
+
"toTextArea",
|
|
60
|
+
"undefined",
|
|
61
|
+
"val",
|
|
62
|
+
"getValue",
|
|
63
|
+
"React",
|
|
64
|
+
"forwardRef"
|
|
65
|
+
],
|
|
66
|
+
"mappings": "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",
|
|
67
|
+
"sourcesContent": [
|
|
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"
|
|
69
|
+
]
|
|
70
|
+
}
|
package/package.json
CHANGED
|
@@ -1,16 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uiw/react-codemirror",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.2.2",
|
|
4
4
|
"description": "CodeMirror component for React.",
|
|
5
|
-
"homepage": "https://uiwjs.github.io/react-codemirror
|
|
6
|
-
"main": "lib/
|
|
7
|
-
"module": "
|
|
5
|
+
"homepage": "https://uiwjs.github.io/react-codemirror",
|
|
6
|
+
"main": "lib/index.js",
|
|
7
|
+
"module": "esm/index.js",
|
|
8
8
|
"typings": "typings/index.d.ts",
|
|
9
9
|
"scripts": {
|
|
10
|
-
"prepare": "npm run build
|
|
11
|
-
"watch": "tsbb watch --
|
|
12
|
-
"build": "tsbb build --
|
|
13
|
-
"build:lib": "tsbb build --target react",
|
|
10
|
+
"prepare": "npm run build",
|
|
11
|
+
"watch": "tsbb watch --entry src/index.js",
|
|
12
|
+
"build": "tsbb build --entry src/index.js",
|
|
14
13
|
"doc": "kkt build --app-src ./website",
|
|
15
14
|
"start": "kkt start --app-src ./website"
|
|
16
15
|
},
|
|
@@ -29,6 +28,8 @@
|
|
|
29
28
|
],
|
|
30
29
|
"files": [
|
|
31
30
|
"typings",
|
|
31
|
+
"src",
|
|
32
|
+
"esm",
|
|
32
33
|
"lib"
|
|
33
34
|
],
|
|
34
35
|
"author": "kenny wong <wowohoo@qq.com>",
|
|
@@ -40,8 +41,8 @@
|
|
|
40
41
|
"codemirror": ">=5.49.2"
|
|
41
42
|
},
|
|
42
43
|
"dependencies": {
|
|
43
|
-
"@babel/runtime": "7.
|
|
44
|
-
"codemirror": "5.62.
|
|
44
|
+
"@babel/runtime": "7.15.3",
|
|
45
|
+
"codemirror": "5.62.3"
|
|
45
46
|
},
|
|
46
47
|
"eslintConfig": {
|
|
47
48
|
"extends": [
|
|
@@ -55,15 +56,14 @@
|
|
|
55
56
|
"@kkt/scope-plugin-options": "6.11.0",
|
|
56
57
|
"@types/codemirror": "5.60.2",
|
|
57
58
|
"@uiw/react-github-corners": "1.4.0",
|
|
58
|
-
"@uiw/react-markdown-preview": "3.
|
|
59
|
+
"@uiw/react-markdown-preview": "3.3.0",
|
|
59
60
|
"@uiw/react-shields": "1.1.1",
|
|
60
|
-
"@uiw/reset.css": "1.0.
|
|
61
|
-
"babel-plugin-transform-remove-imports": "1.5.5",
|
|
61
|
+
"@uiw/reset.css": "1.0.5",
|
|
62
62
|
"code-example": "3.0.6",
|
|
63
63
|
"kkt": "6.11.0",
|
|
64
64
|
"react": "17.0.2",
|
|
65
65
|
"react-dom": "17.0.2",
|
|
66
|
-
"tsbb": "
|
|
66
|
+
"tsbb": "3.3.7"
|
|
67
67
|
},
|
|
68
68
|
"browserslist": {
|
|
69
69
|
"production": [
|