@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.
Files changed (62) hide show
  1. package/README.md +50 -5
  2. package/dist/mdeditor.js +1835 -1807
  3. package/dist/mdeditor.min.js +1 -1
  4. package/esm/Context.d.ts +1 -1
  5. package/esm/Editor.d.ts +4 -149
  6. package/esm/Editor.js +0 -1
  7. package/esm/Editor.nohighlight.d.ts +12 -0
  8. package/esm/Editor.nohighlight.js +255 -0
  9. package/esm/Types.d.ts +148 -0
  10. package/esm/Types.js +1 -0
  11. package/esm/commands/index.d.ts +4 -1
  12. package/esm/commands/index.js +2 -1
  13. package/esm/components/DragBar/index.d.ts +1 -1
  14. package/esm/components/TextArea/Markdown.d.ts +1 -1
  15. package/esm/components/TextArea/Textarea.d.ts +1 -1
  16. package/esm/components/TextArea/handleKeyDown.js +1 -3
  17. package/esm/components/TextArea/index.d.ts +1 -1
  18. package/esm/components/TextArea/index.nohighlight.d.ts +27 -0
  19. package/esm/components/TextArea/index.nohighlight.js +93 -0
  20. package/esm/components/Toolbar/Child.d.ts +1 -1
  21. package/esm/components/Toolbar/index.d.ts +1 -1
  22. package/esm/index.d.ts +2 -0
  23. package/esm/index.js +2 -0
  24. package/esm/index.nohighlight.d.ts +13 -0
  25. package/esm/index.nohighlight.js +13 -0
  26. package/lib/Context.d.ts +1 -1
  27. package/lib/Editor.d.ts +4 -149
  28. package/lib/Editor.nohighlight.d.ts +12 -0
  29. package/lib/Editor.nohighlight.js +317 -0
  30. package/lib/Types.d.ts +148 -0
  31. package/lib/Types.js +1 -0
  32. package/lib/commands/index.d.ts +4 -1
  33. package/lib/commands/index.js +19 -0
  34. package/lib/components/DragBar/index.d.ts +1 -1
  35. package/lib/components/TextArea/Markdown.d.ts +1 -1
  36. package/lib/components/TextArea/Textarea.d.ts +1 -1
  37. package/lib/components/TextArea/handleKeyDown.js +1 -3
  38. package/lib/components/TextArea/index.d.ts +1 -1
  39. package/lib/components/TextArea/index.nohighlight.d.ts +27 -0
  40. package/lib/components/TextArea/index.nohighlight.js +98 -0
  41. package/lib/components/Toolbar/Child.d.ts +1 -1
  42. package/lib/components/Toolbar/index.d.ts +1 -1
  43. package/lib/index.d.ts +2 -0
  44. package/lib/index.js +12 -0
  45. package/lib/index.nohighlight.d.ts +13 -0
  46. package/lib/index.nohighlight.js +98 -0
  47. package/package.json +16 -2
  48. package/src/Context.tsx +1 -1
  49. package/src/Editor.nohighlight.tsx +264 -0
  50. package/src/Editor.tsx +5 -151
  51. package/src/Types.ts +151 -0
  52. package/src/commands/index.ts +4 -0
  53. package/src/components/DragBar/index.tsx +1 -1
  54. package/src/components/TextArea/Markdown.tsx +2 -2
  55. package/src/components/TextArea/Textarea.tsx +1 -1
  56. package/src/components/TextArea/handleKeyDown.tsx +5 -3
  57. package/src/components/TextArea/index.nohighlight.tsx +109 -0
  58. package/src/components/TextArea/index.tsx +1 -1
  59. package/src/components/Toolbar/Child.tsx +1 -1
  60. package/src/components/Toolbar/index.tsx +1 -1
  61. package/src/index.nohighlight.tsx +16 -0
  62. 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";
@@ -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, };
@@ -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 '../../Editor';
2
+ import { IProps } from '../../Types';
3
3
  import './index.less';
4
4
  export interface IDragBarProps extends IProps {
5
5
  height: number;
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { IProps } from '../../Editor';
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;
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { IProps } from '../../Editor';
2
+ import { IProps } from '../../Types';
3
3
  import './index.less';
4
4
  export interface TextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value'>, IProps {
5
5
  }
@@ -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 '../../Editor';
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 {};