@uiw/react-md-editor 3.24.0 → 3.25.0
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 +50 -5
- package/dist/mdeditor.js +1835 -1807
- package/dist/mdeditor.min.js +1 -1
- package/esm/Context.d.ts +1 -1
- package/esm/Editor.d.ts +4 -149
- package/esm/Editor.js +0 -1
- package/esm/Editor.nohighlight.d.ts +12 -0
- package/esm/Editor.nohighlight.js +255 -0
- package/esm/Types.d.ts +148 -0
- package/esm/Types.js +1 -0
- package/esm/commands/index.d.ts +4 -1
- package/esm/commands/index.js +2 -1
- package/esm/components/DragBar/index.d.ts +1 -1
- package/esm/components/TextArea/Markdown.d.ts +1 -1
- package/esm/components/TextArea/Textarea.d.ts +1 -1
- package/esm/components/TextArea/handleKeyDown.js +1 -3
- package/esm/components/TextArea/index.d.ts +1 -1
- package/esm/components/TextArea/index.nohighlight.d.ts +27 -0
- package/esm/components/TextArea/index.nohighlight.js +93 -0
- package/esm/components/Toolbar/Child.d.ts +1 -1
- package/esm/components/Toolbar/index.d.ts +1 -1
- package/esm/index.d.ts +2 -0
- package/esm/index.js +2 -0
- package/esm/index.nohighlight.d.ts +13 -0
- package/esm/index.nohighlight.js +13 -0
- package/lib/Context.d.ts +1 -1
- package/lib/Editor.d.ts +4 -149
- package/lib/Editor.nohighlight.d.ts +12 -0
- package/lib/Editor.nohighlight.js +317 -0
- package/lib/Types.d.ts +148 -0
- package/lib/Types.js +1 -0
- package/lib/commands/index.d.ts +4 -1
- package/lib/commands/index.js +19 -0
- package/lib/components/DragBar/index.d.ts +1 -1
- package/lib/components/TextArea/Markdown.d.ts +1 -1
- package/lib/components/TextArea/Textarea.d.ts +1 -1
- package/lib/components/TextArea/handleKeyDown.js +1 -3
- package/lib/components/TextArea/index.d.ts +1 -1
- package/lib/components/TextArea/index.nohighlight.d.ts +27 -0
- package/lib/components/TextArea/index.nohighlight.js +98 -0
- package/lib/components/Toolbar/Child.d.ts +1 -1
- package/lib/components/Toolbar/index.d.ts +1 -1
- package/lib/index.d.ts +2 -0
- package/lib/index.js +12 -0
- package/lib/index.nohighlight.d.ts +13 -0
- package/lib/index.nohighlight.js +98 -0
- package/package.json +16 -2
- package/src/Context.tsx +1 -1
- package/src/Editor.nohighlight.tsx +264 -0
- package/src/Editor.tsx +5 -151
- package/src/Types.ts +151 -0
- package/src/commands/index.ts +4 -0
- package/src/components/DragBar/index.tsx +1 -1
- package/src/components/TextArea/Markdown.tsx +2 -2
- package/src/components/TextArea/Textarea.tsx +1 -1
- package/src/components/TextArea/handleKeyDown.tsx +5 -3
- package/src/components/TextArea/index.nohighlight.tsx +109 -0
- package/src/components/TextArea/index.tsx +1 -1
- package/src/components/Toolbar/Child.tsx +1 -1
- package/src/components/Toolbar/index.tsx +1 -1
- package/src/index.nohighlight.tsx +16 -0
- package/src/index.tsx +2 -0
|
@@ -0,0 +1,317 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
|
|
4
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports["default"] = void 0;
|
|
9
|
+
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
10
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
11
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
12
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
13
|
+
var _nohighlight = _interopRequireDefault(require("@uiw/react-markdown-preview/nohighlight"));
|
|
14
|
+
var _index = _interopRequireDefault(require("./components/TextArea/index.nohighlight"));
|
|
15
|
+
var _Toolbar = _interopRequireDefault(require("./components/Toolbar"));
|
|
16
|
+
var _DragBar = _interopRequireDefault(require("./components/DragBar"));
|
|
17
|
+
var _commands = require("./commands");
|
|
18
|
+
var _Context = require("./Context");
|
|
19
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
20
|
+
var _excluded = ["prefixCls", "className", "value", "commands", "commandsFilter", "direction", "extraCommands", "height", "enableScroll", "visibleDragbar", "highlightEnable", "preview", "fullscreen", "overflow", "previewOptions", "textareaProps", "maxHeight", "minHeight", "autoFocus", "tabSize", "defaultTabEnable", "onChange", "onStatistics", "onHeightChange", "hideToolbar", "toolbarBottom", "components", "renderTextarea"];
|
|
21
|
+
function setGroupPopFalse() {
|
|
22
|
+
var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
23
|
+
Object.keys(data).forEach(function (keyname) {
|
|
24
|
+
data[keyname] = false;
|
|
25
|
+
});
|
|
26
|
+
return data;
|
|
27
|
+
}
|
|
28
|
+
var InternalMDEditor = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
|
|
29
|
+
var _ref = props || {},
|
|
30
|
+
_ref$prefixCls = _ref.prefixCls,
|
|
31
|
+
prefixCls = _ref$prefixCls === void 0 ? 'w-md-editor' : _ref$prefixCls,
|
|
32
|
+
className = _ref.className,
|
|
33
|
+
propsValue = _ref.value,
|
|
34
|
+
_ref$commands = _ref.commands,
|
|
35
|
+
commands = _ref$commands === void 0 ? (0, _commands.getCommands)() : _ref$commands,
|
|
36
|
+
commandsFilter = _ref.commandsFilter,
|
|
37
|
+
direction = _ref.direction,
|
|
38
|
+
_ref$extraCommands = _ref.extraCommands,
|
|
39
|
+
extraCommands = _ref$extraCommands === void 0 ? (0, _commands.getExtraCommands)() : _ref$extraCommands,
|
|
40
|
+
_ref$height = _ref.height,
|
|
41
|
+
height = _ref$height === void 0 ? 200 : _ref$height,
|
|
42
|
+
_ref$enableScroll = _ref.enableScroll,
|
|
43
|
+
enableScroll = _ref$enableScroll === void 0 ? true : _ref$enableScroll,
|
|
44
|
+
_ref$visibleDragbar = _ref.visibleDragbar,
|
|
45
|
+
visibleDragbar = _ref$visibleDragbar === void 0 ? typeof props.visiableDragbar === 'boolean' ? props.visiableDragbar : true : _ref$visibleDragbar,
|
|
46
|
+
_ref$highlightEnable = _ref.highlightEnable,
|
|
47
|
+
highlightEnable = _ref$highlightEnable === void 0 ? true : _ref$highlightEnable,
|
|
48
|
+
_ref$preview = _ref.preview,
|
|
49
|
+
previewType = _ref$preview === void 0 ? 'live' : _ref$preview,
|
|
50
|
+
_ref$fullscreen = _ref.fullscreen,
|
|
51
|
+
fullscreen = _ref$fullscreen === void 0 ? false : _ref$fullscreen,
|
|
52
|
+
_ref$overflow = _ref.overflow,
|
|
53
|
+
overflow = _ref$overflow === void 0 ? true : _ref$overflow,
|
|
54
|
+
_ref$previewOptions = _ref.previewOptions,
|
|
55
|
+
previewOptions = _ref$previewOptions === void 0 ? {} : _ref$previewOptions,
|
|
56
|
+
textareaProps = _ref.textareaProps,
|
|
57
|
+
_ref$maxHeight = _ref.maxHeight,
|
|
58
|
+
maxHeight = _ref$maxHeight === void 0 ? 1200 : _ref$maxHeight,
|
|
59
|
+
_ref$minHeight = _ref.minHeight,
|
|
60
|
+
minHeight = _ref$minHeight === void 0 ? 100 : _ref$minHeight,
|
|
61
|
+
autoFocus = _ref.autoFocus,
|
|
62
|
+
_ref$tabSize = _ref.tabSize,
|
|
63
|
+
tabSize = _ref$tabSize === void 0 ? 2 : _ref$tabSize,
|
|
64
|
+
_ref$defaultTabEnable = _ref.defaultTabEnable,
|
|
65
|
+
defaultTabEnable = _ref$defaultTabEnable === void 0 ? false : _ref$defaultTabEnable,
|
|
66
|
+
onChange = _ref.onChange,
|
|
67
|
+
onStatistics = _ref.onStatistics,
|
|
68
|
+
onHeightChange = _ref.onHeightChange,
|
|
69
|
+
hideToolbar = _ref.hideToolbar,
|
|
70
|
+
_ref$toolbarBottom = _ref.toolbarBottom,
|
|
71
|
+
toolbarBottom = _ref$toolbarBottom === void 0 ? false : _ref$toolbarBottom,
|
|
72
|
+
components = _ref.components,
|
|
73
|
+
renderTextarea = _ref.renderTextarea,
|
|
74
|
+
other = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
|
|
75
|
+
var cmds = commands.map(function (item) {
|
|
76
|
+
return commandsFilter ? commandsFilter(item, false) : item;
|
|
77
|
+
}).filter(Boolean);
|
|
78
|
+
var extraCmds = extraCommands.map(function (item) {
|
|
79
|
+
return commandsFilter ? commandsFilter(item, true) : item;
|
|
80
|
+
}).filter(Boolean);
|
|
81
|
+
var _useReducer = (0, _react.useReducer)(_Context.reducer, {
|
|
82
|
+
markdown: propsValue,
|
|
83
|
+
preview: previewType,
|
|
84
|
+
components: components,
|
|
85
|
+
height: height,
|
|
86
|
+
highlightEnable: highlightEnable,
|
|
87
|
+
tabSize: tabSize,
|
|
88
|
+
defaultTabEnable: defaultTabEnable,
|
|
89
|
+
scrollTop: 0,
|
|
90
|
+
scrollTopPreview: 0,
|
|
91
|
+
commands: cmds,
|
|
92
|
+
extraCommands: extraCmds,
|
|
93
|
+
fullscreen: fullscreen,
|
|
94
|
+
barPopup: {}
|
|
95
|
+
}),
|
|
96
|
+
_useReducer2 = (0, _slicedToArray2["default"])(_useReducer, 2),
|
|
97
|
+
state = _useReducer2[0],
|
|
98
|
+
dispatch = _useReducer2[1];
|
|
99
|
+
var container = (0, _react.useRef)(null);
|
|
100
|
+
var previewRef = (0, _react.useRef)(null);
|
|
101
|
+
var enableScrollRef = (0, _react.useRef)(enableScroll);
|
|
102
|
+
(0, _react.useImperativeHandle)(ref, function () {
|
|
103
|
+
return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, state), {}, {
|
|
104
|
+
container: container.current,
|
|
105
|
+
dispatch: dispatch
|
|
106
|
+
});
|
|
107
|
+
});
|
|
108
|
+
(0, _react.useMemo)(function () {
|
|
109
|
+
return enableScrollRef.current = enableScroll;
|
|
110
|
+
}, [enableScroll]);
|
|
111
|
+
(0, _react.useEffect)(function () {
|
|
112
|
+
var stateInit = {};
|
|
113
|
+
if (container.current) {
|
|
114
|
+
stateInit.container = container.current || undefined;
|
|
115
|
+
}
|
|
116
|
+
stateInit.markdown = propsValue || '';
|
|
117
|
+
stateInit.barPopup = {};
|
|
118
|
+
if (dispatch) {
|
|
119
|
+
dispatch((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, state), stateInit));
|
|
120
|
+
}
|
|
121
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
122
|
+
}, []);
|
|
123
|
+
var cls = [className, 'wmde-markdown-var', direction ? "".concat(prefixCls, "-").concat(direction) : null, prefixCls, state.preview ? "".concat(prefixCls, "-show-").concat(state.preview) : null, state.fullscreen ? "".concat(prefixCls, "-fullscreen") : null].filter(Boolean).join(' ').trim();
|
|
124
|
+
(0, _react.useMemo)(function () {
|
|
125
|
+
return propsValue !== state.markdown && dispatch({
|
|
126
|
+
markdown: propsValue || ''
|
|
127
|
+
});
|
|
128
|
+
}, [propsValue, state.markdown]);
|
|
129
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
130
|
+
(0, _react.useMemo)(function () {
|
|
131
|
+
return previewType !== state.preview && dispatch({
|
|
132
|
+
preview: previewType
|
|
133
|
+
});
|
|
134
|
+
}, [previewType]);
|
|
135
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
136
|
+
(0, _react.useMemo)(function () {
|
|
137
|
+
return tabSize !== state.tabSize && dispatch({
|
|
138
|
+
tabSize: tabSize
|
|
139
|
+
});
|
|
140
|
+
}, [tabSize]);
|
|
141
|
+
(0, _react.useMemo)(function () {
|
|
142
|
+
return highlightEnable !== state.highlightEnable && dispatch({
|
|
143
|
+
highlightEnable: highlightEnable
|
|
144
|
+
});
|
|
145
|
+
},
|
|
146
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
147
|
+
[highlightEnable]);
|
|
148
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
149
|
+
(0, _react.useMemo)(function () {
|
|
150
|
+
return autoFocus !== state.autoFocus && dispatch({
|
|
151
|
+
autoFocus: autoFocus
|
|
152
|
+
});
|
|
153
|
+
}, [autoFocus]);
|
|
154
|
+
(0, _react.useMemo)(function () {
|
|
155
|
+
return fullscreen !== state.fullscreen && dispatch({
|
|
156
|
+
fullscreen: fullscreen
|
|
157
|
+
});
|
|
158
|
+
},
|
|
159
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
160
|
+
[fullscreen]);
|
|
161
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
162
|
+
(0, _react.useMemo)(function () {
|
|
163
|
+
return height !== state.height && dispatch({
|
|
164
|
+
height: height
|
|
165
|
+
});
|
|
166
|
+
}, [height]);
|
|
167
|
+
(0, _react.useMemo)(function () {
|
|
168
|
+
return height !== state.height && onHeightChange && onHeightChange(state.height, height, state);
|
|
169
|
+
}, [height, onHeightChange, state]);
|
|
170
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
171
|
+
(0, _react.useMemo)(function () {
|
|
172
|
+
return commands !== state.commands && dispatch({
|
|
173
|
+
commands: cmds
|
|
174
|
+
});
|
|
175
|
+
}, [props.commands]);
|
|
176
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
177
|
+
(0, _react.useMemo)(function () {
|
|
178
|
+
return extraCommands !== state.extraCommands && dispatch({
|
|
179
|
+
extraCommands: extraCmds
|
|
180
|
+
});
|
|
181
|
+
}, [props.extraCommands]);
|
|
182
|
+
var textareaDomRef = (0, _react.useRef)();
|
|
183
|
+
var active = (0, _react.useRef)('preview');
|
|
184
|
+
var initScroll = (0, _react.useRef)(false);
|
|
185
|
+
(0, _react.useMemo)(function () {
|
|
186
|
+
textareaDomRef.current = state.textareaWarp;
|
|
187
|
+
if (state.textareaWarp) {
|
|
188
|
+
state.textareaWarp.addEventListener('mouseover', function () {
|
|
189
|
+
active.current = 'text';
|
|
190
|
+
});
|
|
191
|
+
state.textareaWarp.addEventListener('mouseleave', function () {
|
|
192
|
+
active.current = 'preview';
|
|
193
|
+
});
|
|
194
|
+
}
|
|
195
|
+
}, [state.textareaWarp]);
|
|
196
|
+
var handleScroll = function handleScroll(e, type) {
|
|
197
|
+
if (!enableScrollRef.current) return;
|
|
198
|
+
var textareaDom = textareaDomRef.current;
|
|
199
|
+
var previewDom = previewRef.current ? previewRef.current : undefined;
|
|
200
|
+
if (!initScroll.current) {
|
|
201
|
+
active.current = type;
|
|
202
|
+
initScroll.current = true;
|
|
203
|
+
}
|
|
204
|
+
if (textareaDom && previewDom) {
|
|
205
|
+
var scale = (textareaDom.scrollHeight - textareaDom.offsetHeight) / (previewDom.scrollHeight - previewDom.offsetHeight);
|
|
206
|
+
if (e.target === textareaDom && active.current === 'text') {
|
|
207
|
+
previewDom.scrollTop = textareaDom.scrollTop / scale;
|
|
208
|
+
}
|
|
209
|
+
if (e.target === previewDom && active.current === 'preview') {
|
|
210
|
+
textareaDom.scrollTop = previewDom.scrollTop * scale;
|
|
211
|
+
}
|
|
212
|
+
var scrollTop = 0;
|
|
213
|
+
if (active.current === 'text') {
|
|
214
|
+
scrollTop = textareaDom.scrollTop || 0;
|
|
215
|
+
} else if (active.current === 'preview') {
|
|
216
|
+
scrollTop = previewDom.scrollTop || 0;
|
|
217
|
+
}
|
|
218
|
+
dispatch({
|
|
219
|
+
scrollTop: scrollTop
|
|
220
|
+
});
|
|
221
|
+
}
|
|
222
|
+
};
|
|
223
|
+
var previewClassName = "".concat(prefixCls, "-preview ").concat(previewOptions.className || '');
|
|
224
|
+
var handlePreviewScroll = function handlePreviewScroll(e) {
|
|
225
|
+
return handleScroll(e, 'preview');
|
|
226
|
+
};
|
|
227
|
+
var mdPreview = (0, _react.useMemo)(function () {
|
|
228
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
229
|
+
ref: previewRef,
|
|
230
|
+
className: previewClassName,
|
|
231
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_nohighlight["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, previewOptions), {}, {
|
|
232
|
+
onScroll: handlePreviewScroll,
|
|
233
|
+
source: state.markdown || ''
|
|
234
|
+
}))
|
|
235
|
+
});
|
|
236
|
+
}, [previewClassName, previewOptions, state.markdown]);
|
|
237
|
+
var preview = (components === null || components === void 0 ? void 0 : components.preview) && (components === null || components === void 0 ? void 0 : components.preview(state.markdown || '', state, dispatch));
|
|
238
|
+
if (preview && /*#__PURE__*/_react["default"].isValidElement(preview)) {
|
|
239
|
+
mdPreview = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
240
|
+
className: previewClassName,
|
|
241
|
+
ref: previewRef,
|
|
242
|
+
onScroll: handlePreviewScroll,
|
|
243
|
+
children: preview
|
|
244
|
+
});
|
|
245
|
+
}
|
|
246
|
+
var containerStyle = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, other.style), {}, {
|
|
247
|
+
height: state.height || '100%'
|
|
248
|
+
});
|
|
249
|
+
var containerClick = function containerClick() {
|
|
250
|
+
return dispatch({
|
|
251
|
+
barPopup: (0, _objectSpread2["default"])({}, setGroupPopFalse(state.barPopup))
|
|
252
|
+
});
|
|
253
|
+
};
|
|
254
|
+
var dragBarChange = function dragBarChange(newHeight) {
|
|
255
|
+
return dispatch({
|
|
256
|
+
height: newHeight
|
|
257
|
+
});
|
|
258
|
+
};
|
|
259
|
+
var changeHandle = function changeHandle(evn) {
|
|
260
|
+
onChange && onChange(evn.target.value, evn, state);
|
|
261
|
+
if (textareaProps && textareaProps.onChange) {
|
|
262
|
+
textareaProps.onChange(evn);
|
|
263
|
+
}
|
|
264
|
+
if (state.textarea && state.textarea instanceof HTMLTextAreaElement && onStatistics) {
|
|
265
|
+
var obj = new _commands.TextAreaCommandOrchestrator(state.textarea);
|
|
266
|
+
var objState = obj.getState() || {};
|
|
267
|
+
onStatistics((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, objState), {}, {
|
|
268
|
+
lineCount: evn.target.value.split('\n').length,
|
|
269
|
+
length: evn.target.value.length
|
|
270
|
+
}));
|
|
271
|
+
}
|
|
272
|
+
};
|
|
273
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Context.EditorContext.Provider, {
|
|
274
|
+
value: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, state), {}, {
|
|
275
|
+
dispatch: dispatch
|
|
276
|
+
}),
|
|
277
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
|
|
278
|
+
ref: container,
|
|
279
|
+
className: cls
|
|
280
|
+
}, other), {}, {
|
|
281
|
+
onClick: containerClick,
|
|
282
|
+
style: containerStyle,
|
|
283
|
+
children: [!hideToolbar && !toolbarBottom && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar["default"], {
|
|
284
|
+
prefixCls: prefixCls,
|
|
285
|
+
overflow: overflow,
|
|
286
|
+
toolbarBottom: toolbarBottom
|
|
287
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
288
|
+
className: "".concat(prefixCls, "-content"),
|
|
289
|
+
children: [/(edit|live)/.test(state.preview || '') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
|
|
290
|
+
className: "".concat(prefixCls, "-input"),
|
|
291
|
+
prefixCls: prefixCls,
|
|
292
|
+
autoFocus: autoFocus
|
|
293
|
+
}, textareaProps), {}, {
|
|
294
|
+
onChange: changeHandle,
|
|
295
|
+
renderTextarea: (components === null || components === void 0 ? void 0 : components.textarea) || renderTextarea,
|
|
296
|
+
onScroll: function onScroll(e) {
|
|
297
|
+
return handleScroll(e, 'text');
|
|
298
|
+
}
|
|
299
|
+
})), /(live|preview)/.test(state.preview || '') && mdPreview]
|
|
300
|
+
}), visibleDragbar && !state.fullscreen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DragBar["default"], {
|
|
301
|
+
prefixCls: prefixCls,
|
|
302
|
+
height: state.height,
|
|
303
|
+
maxHeight: maxHeight,
|
|
304
|
+
minHeight: minHeight,
|
|
305
|
+
onChange: dragBarChange
|
|
306
|
+
}), !hideToolbar && toolbarBottom && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar["default"], {
|
|
307
|
+
prefixCls: prefixCls,
|
|
308
|
+
overflow: overflow,
|
|
309
|
+
toolbarBottom: toolbarBottom
|
|
310
|
+
})]
|
|
311
|
+
}))
|
|
312
|
+
});
|
|
313
|
+
});
|
|
314
|
+
var Editor = InternalMDEditor;
|
|
315
|
+
Editor.Markdown = _nohighlight["default"];
|
|
316
|
+
var _default = exports["default"] = Editor;
|
|
317
|
+
module.exports = exports.default;
|
package/lib/Types.d.ts
ADDED
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
import type { CSSProperties } from 'react';
|
|
2
|
+
import type { MarkdownPreviewProps } from '@uiw/react-markdown-preview/nohighlight';
|
|
3
|
+
import type { ITextAreaProps } from './components/TextArea/index.nohighlight';
|
|
4
|
+
import type { ICommand, TextState } from './commands';
|
|
5
|
+
import type { ContextStore, PreviewType } from './Context';
|
|
6
|
+
export interface IProps {
|
|
7
|
+
prefixCls?: string;
|
|
8
|
+
className?: string;
|
|
9
|
+
}
|
|
10
|
+
export interface Statistics extends TextState {
|
|
11
|
+
/** total length of the document */
|
|
12
|
+
length: number;
|
|
13
|
+
/** Get the number of lines in the editor. */
|
|
14
|
+
lineCount: number;
|
|
15
|
+
}
|
|
16
|
+
export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, IProps {
|
|
17
|
+
/**
|
|
18
|
+
* The Markdown value.
|
|
19
|
+
*/
|
|
20
|
+
value?: string;
|
|
21
|
+
/**
|
|
22
|
+
* Event handler for the `onChange` event.
|
|
23
|
+
*/
|
|
24
|
+
onChange?: (value?: string, event?: React.ChangeEvent<HTMLTextAreaElement>, state?: ContextStore) => void;
|
|
25
|
+
/**
|
|
26
|
+
* editor height change listener
|
|
27
|
+
*/
|
|
28
|
+
onHeightChange?: (value?: CSSProperties['height'], oldValue?: CSSProperties['height'], state?: ContextStore) => void;
|
|
29
|
+
/** Some data on the statistics editor. */
|
|
30
|
+
onStatistics?: (data: Statistics) => void;
|
|
31
|
+
/**
|
|
32
|
+
* Can be used to make `Markdown Editor` focus itself on initialization. Defaults to on.
|
|
33
|
+
* it will be set to true when either the source `textarea` is focused,
|
|
34
|
+
* or it has an `autofocus` attribute and no other element is focused.
|
|
35
|
+
*/
|
|
36
|
+
autoFocus?: ITextAreaProps['autoFocus'];
|
|
37
|
+
/**
|
|
38
|
+
* The height of the editor.
|
|
39
|
+
* ⚠️ `Dragbar` is invalid when **`height`** parameter percentage.
|
|
40
|
+
*/
|
|
41
|
+
height?: CSSProperties['height'];
|
|
42
|
+
/**
|
|
43
|
+
* Custom toolbar heigth
|
|
44
|
+
* @default 29px
|
|
45
|
+
*
|
|
46
|
+
* @deprecated toolbar height adaptive: https://github.com/uiwjs/react-md-editor/issues/427
|
|
47
|
+
*
|
|
48
|
+
*/
|
|
49
|
+
toolbarHeight?: number;
|
|
50
|
+
/**
|
|
51
|
+
* Show drag and drop tool. Set the height of the editor.
|
|
52
|
+
*/
|
|
53
|
+
visibleDragbar?: boolean;
|
|
54
|
+
/**
|
|
55
|
+
* @deprecated use `visibleDragbar`
|
|
56
|
+
*/
|
|
57
|
+
visiableDragbar?: boolean;
|
|
58
|
+
/**
|
|
59
|
+
* Show markdown preview.
|
|
60
|
+
*/
|
|
61
|
+
preview?: PreviewType;
|
|
62
|
+
/**
|
|
63
|
+
* Full screen display editor.
|
|
64
|
+
*/
|
|
65
|
+
fullscreen?: boolean;
|
|
66
|
+
/**
|
|
67
|
+
* Disable `fullscreen` setting body styles
|
|
68
|
+
*/
|
|
69
|
+
overflow?: boolean;
|
|
70
|
+
/**
|
|
71
|
+
* Maximum drag height. `visibleDragbar=true`
|
|
72
|
+
*/
|
|
73
|
+
maxHeight?: number;
|
|
74
|
+
/**
|
|
75
|
+
* Minimum drag height. `visibleDragbar=true`
|
|
76
|
+
*/
|
|
77
|
+
minHeight?: number;
|
|
78
|
+
/**
|
|
79
|
+
* This is reset [react-markdown](https://github.com/rexxars/react-markdown) settings.
|
|
80
|
+
*/
|
|
81
|
+
previewOptions?: Omit<MarkdownPreviewProps, 'source'>;
|
|
82
|
+
/**
|
|
83
|
+
* Set the `textarea` related props.
|
|
84
|
+
*/
|
|
85
|
+
textareaProps?: ITextAreaProps;
|
|
86
|
+
/**
|
|
87
|
+
* Use div to replace TextArea or re-render TextArea
|
|
88
|
+
* @deprecated Please use ~~`renderTextarea`~~ -> `components`
|
|
89
|
+
*/
|
|
90
|
+
renderTextarea?: ITextAreaProps['renderTextarea'];
|
|
91
|
+
/**
|
|
92
|
+
* re-render element
|
|
93
|
+
*/
|
|
94
|
+
components?: {
|
|
95
|
+
/** Use div to replace TextArea or re-render TextArea */
|
|
96
|
+
textarea?: ITextAreaProps['renderTextarea'];
|
|
97
|
+
/**
|
|
98
|
+
* Override the default command element
|
|
99
|
+
* _`toolbar`_ < _`command[].render`_
|
|
100
|
+
*/
|
|
101
|
+
toolbar?: ICommand['render'];
|
|
102
|
+
/** Custom markdown preview */
|
|
103
|
+
preview?: (source: string, state: ContextStore, dispath: React.Dispatch<ContextStore>) => JSX.Element;
|
|
104
|
+
};
|
|
105
|
+
/** Theme configuration */
|
|
106
|
+
'data-color-mode'?: 'light' | 'dark';
|
|
107
|
+
/**
|
|
108
|
+
* Disable editing area code highlighting. The value is `false`, which increases the editing speed.
|
|
109
|
+
* @default true
|
|
110
|
+
*/
|
|
111
|
+
highlightEnable?: boolean;
|
|
112
|
+
/**
|
|
113
|
+
* The number of characters to insert when pressing tab key.
|
|
114
|
+
* Default `2` spaces.
|
|
115
|
+
*/
|
|
116
|
+
tabSize?: number;
|
|
117
|
+
/**
|
|
118
|
+
* If `false`, the `tab` key inserts a tab character into the textarea. If `true`, the `tab` key executes default behavior e.g. focus shifts to next element.
|
|
119
|
+
*/
|
|
120
|
+
defaultTabEnable?: boolean;
|
|
121
|
+
/**
|
|
122
|
+
* You can create your own commands or reuse existing commands.
|
|
123
|
+
*/
|
|
124
|
+
commands?: ICommand[];
|
|
125
|
+
/**
|
|
126
|
+
* Filter or modify your commands.
|
|
127
|
+
* https://github.com/uiwjs/react-md-editor/issues/296
|
|
128
|
+
*/
|
|
129
|
+
commandsFilter?: (command: ICommand, isExtra: boolean) => false | ICommand;
|
|
130
|
+
/**
|
|
131
|
+
* You can create your own commands or reuse existing commands.
|
|
132
|
+
*/
|
|
133
|
+
extraCommands?: ICommand[];
|
|
134
|
+
/**
|
|
135
|
+
* Hide the tool bar
|
|
136
|
+
*/
|
|
137
|
+
hideToolbar?: boolean;
|
|
138
|
+
/** Whether to enable scrolling */
|
|
139
|
+
enableScroll?: boolean;
|
|
140
|
+
/** Toolbar on bottom */
|
|
141
|
+
toolbarBottom?: boolean;
|
|
142
|
+
/**
|
|
143
|
+
* The **`direction`** property sets the direction of text, table columns, and horizontal overflow. Use `rtl` for languages written from right to left (like Hebrew or Arabic), and `ltr` for those written from left to right (like English and most other languages).
|
|
144
|
+
*
|
|
145
|
+
* https://github.com/uiwjs/react-md-editor/issues/462
|
|
146
|
+
*/
|
|
147
|
+
direction?: CSSProperties['direction'];
|
|
148
|
+
}
|
package/lib/Types.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";
|
package/lib/commands/index.d.ts
CHANGED
|
@@ -21,6 +21,9 @@ import { title3 } from './title3';
|
|
|
21
21
|
import { title4 } from './title4';
|
|
22
22
|
import { title5 } from './title5';
|
|
23
23
|
import { title6 } from './title6';
|
|
24
|
+
import { table } from './table';
|
|
25
|
+
import { issue } from './issue';
|
|
26
|
+
import { help } from './help';
|
|
24
27
|
export interface CommandOrchestrator {
|
|
25
28
|
executeCommand(command: ICommand): void;
|
|
26
29
|
}
|
|
@@ -90,4 +93,4 @@ declare class TextAreaCommandOrchestrator implements CommandOrchestrator {
|
|
|
90
93
|
getState(): false | TextState;
|
|
91
94
|
executeCommand(command: ICommand<string>, dispatch?: React.Dispatch<ContextStore>, state?: ExecuteCommandState, shortcuts?: string[]): void;
|
|
92
95
|
}
|
|
93
|
-
export { title, title1, title2, title3, title4, title5, title6, bold, codeBlock, comment, italic, strikethrough, hr, group, divider, link, quote, code, image, unorderedListCommand, orderedListCommand, checkedListCommand, codeEdit, codeLive, codePreview, fullscreen, getCommands, getExtraCommands, getStateFromTextArea, TextAreaCommandOrchestrator, TextAreaTextApi, };
|
|
96
|
+
export { title, title1, title2, title3, title4, title5, title6, bold, codeBlock, comment, italic, strikethrough, hr, group, divider, link, quote, code, image, unorderedListCommand, orderedListCommand, checkedListCommand, table, issue, help, codeEdit, codeLive, codePreview, fullscreen, getCommands, getExtraCommands, getStateFromTextArea, TextAreaCommandOrchestrator, TextAreaTextApi, };
|
package/lib/commands/index.js
CHANGED
|
@@ -73,6 +73,12 @@ Object.defineProperty(exports, "group", {
|
|
|
73
73
|
return _group.group;
|
|
74
74
|
}
|
|
75
75
|
});
|
|
76
|
+
Object.defineProperty(exports, "help", {
|
|
77
|
+
enumerable: true,
|
|
78
|
+
get: function get() {
|
|
79
|
+
return _help.help;
|
|
80
|
+
}
|
|
81
|
+
});
|
|
76
82
|
Object.defineProperty(exports, "hr", {
|
|
77
83
|
enumerable: true,
|
|
78
84
|
get: function get() {
|
|
@@ -85,6 +91,12 @@ Object.defineProperty(exports, "image", {
|
|
|
85
91
|
return _image.image;
|
|
86
92
|
}
|
|
87
93
|
});
|
|
94
|
+
Object.defineProperty(exports, "issue", {
|
|
95
|
+
enumerable: true,
|
|
96
|
+
get: function get() {
|
|
97
|
+
return _issue.issue;
|
|
98
|
+
}
|
|
99
|
+
});
|
|
88
100
|
Object.defineProperty(exports, "italic", {
|
|
89
101
|
enumerable: true,
|
|
90
102
|
get: function get() {
|
|
@@ -115,6 +127,12 @@ Object.defineProperty(exports, "strikethrough", {
|
|
|
115
127
|
return _strikeThrough.strikethrough;
|
|
116
128
|
}
|
|
117
129
|
});
|
|
130
|
+
Object.defineProperty(exports, "table", {
|
|
131
|
+
enumerable: true,
|
|
132
|
+
get: function get() {
|
|
133
|
+
return _table.table;
|
|
134
|
+
}
|
|
135
|
+
});
|
|
118
136
|
Object.defineProperty(exports, "title", {
|
|
119
137
|
enumerable: true,
|
|
120
138
|
get: function get() {
|
|
@@ -190,6 +208,7 @@ var _title5 = require("./title4");
|
|
|
190
208
|
var _title6 = require("./title5");
|
|
191
209
|
var _title7 = require("./title6");
|
|
192
210
|
var _table = require("./table");
|
|
211
|
+
var _issue = require("./issue");
|
|
193
212
|
var _help = require("./help");
|
|
194
213
|
var getCommands = exports.getCommands = function getCommands() {
|
|
195
214
|
return [_bold.bold, _italic.italic, _strikeThrough.strikethrough, _hr.hr, (0, _group.group)([_title2.title1, _title3.title2, _title4.title3, _title5.title4, _title6.title5, _title7.title6], {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { IProps } from '../../
|
|
2
|
+
import { IProps } from '../../Types';
|
|
3
3
|
export interface MarkdownProps extends IProps, React.HTMLAttributes<HTMLPreElement> {
|
|
4
4
|
}
|
|
5
5
|
export default function Markdown(props: MarkdownProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -126,10 +126,8 @@ function handleKeyDown(e) {
|
|
|
126
126
|
if (currentLineStr.startsWith('*')) {
|
|
127
127
|
startStr = '\n* ';
|
|
128
128
|
}
|
|
129
|
-
if (currentLineStr.startsWith('- [ ]')) {
|
|
129
|
+
if (currentLineStr.startsWith('- [ ]') || currentLineStr.startsWith('- [X]') || currentLineStr.startsWith('- [x]')) {
|
|
130
130
|
startStr = '\n- [ ] ';
|
|
131
|
-
} else if (currentLineStr.startsWith('- [X]') || currentLineStr.startsWith('- [x]')) {
|
|
132
|
-
startStr = '\n- [X] ';
|
|
133
131
|
}
|
|
134
132
|
if (/^\d+.\s/.test(currentLineStr)) {
|
|
135
133
|
startStr = "\n".concat(parseInt(currentLineStr) + 1, ". ");
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ContextStore, ExecuteCommandState } from '../../Context';
|
|
3
3
|
import { TextAreaProps } from './Textarea';
|
|
4
|
-
import { IProps } from '../../
|
|
4
|
+
import { IProps } from '../../Types';
|
|
5
5
|
import { TextAreaCommandOrchestrator, ICommand } from '../../commands';
|
|
6
6
|
import './index.less';
|
|
7
7
|
type RenderTextareaHandle = {
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ContextStore, ExecuteCommandState } from '../../Context';
|
|
3
|
+
import { TextAreaProps } from './Textarea';
|
|
4
|
+
import { IProps } from '../../Types';
|
|
5
|
+
import { TextAreaCommandOrchestrator, ICommand } from '../../commands';
|
|
6
|
+
import './index.less';
|
|
7
|
+
type RenderTextareaHandle = {
|
|
8
|
+
dispatch: ContextStore['dispatch'];
|
|
9
|
+
onChange?: TextAreaProps['onChange'];
|
|
10
|
+
useContext?: {
|
|
11
|
+
commands: ContextStore['commands'];
|
|
12
|
+
extraCommands: ContextStore['extraCommands'];
|
|
13
|
+
commandOrchestrator?: TextAreaCommandOrchestrator;
|
|
14
|
+
};
|
|
15
|
+
shortcuts?: (e: KeyboardEvent | React.KeyboardEvent<HTMLTextAreaElement>, commands: ICommand[], commandOrchestrator?: TextAreaCommandOrchestrator, dispatch?: React.Dispatch<ContextStore>, state?: ExecuteCommandState) => void;
|
|
16
|
+
};
|
|
17
|
+
export interface ITextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onScroll'>, IProps {
|
|
18
|
+
value?: string;
|
|
19
|
+
onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
|
|
20
|
+
renderTextarea?: (props: React.TextareaHTMLAttributes<HTMLTextAreaElement> | React.HTMLAttributes<HTMLDivElement>, opts: RenderTextareaHandle) => JSX.Element;
|
|
21
|
+
}
|
|
22
|
+
export type TextAreaRef = {
|
|
23
|
+
text?: HTMLTextAreaElement;
|
|
24
|
+
warp?: HTMLDivElement;
|
|
25
|
+
};
|
|
26
|
+
export default function TextArea(props: ITextAreaProps): import("react/jsx-runtime").JSX.Element;
|
|
27
|
+
export {};
|