@uiw/react-md-editor 4.0.10 → 4.1.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 (64) hide show
  1. package/README.md +39 -4
  2. package/common.d.ts +17 -0
  3. package/dist/mdeditor.css +105 -110
  4. package/dist/mdeditor.js +7122 -9557
  5. package/dist/mdeditor.min.css +1 -1
  6. package/dist/mdeditor.min.js +1 -1
  7. package/dist/mdeditor.min.js.LICENSE.txt +2 -2
  8. package/esm/Editor.common.d.ts +5 -0
  9. package/esm/Editor.common.js +7 -0
  10. package/esm/Editor.d.ts +4 -11
  11. package/esm/Editor.factory.d.ts +14 -0
  12. package/esm/Editor.factory.js +270 -0
  13. package/esm/Editor.js +5 -261
  14. package/esm/Editor.nohighlight.d.ts +4 -11
  15. package/esm/Editor.nohighlight.js +5 -261
  16. package/esm/components/TextArea/Markdown.common.d.ts +5 -0
  17. package/esm/components/TextArea/Markdown.common.js +59 -0
  18. package/esm/components/TextArea/factory.d.ts +33 -0
  19. package/esm/components/TextArea/factory.js +105 -0
  20. package/esm/components/TextArea/index.common.d.ts +3 -0
  21. package/esm/components/TextArea/index.common.js +6 -0
  22. package/esm/components/TextArea/index.d.ts +3 -27
  23. package/esm/components/TextArea/index.js +5 -100
  24. package/esm/components/TextArea/index.nohighlight.d.ts +3 -27
  25. package/esm/components/TextArea/index.nohighlight.js +2 -93
  26. package/esm/index.common.d.ts +16 -0
  27. package/esm/index.common.js +16 -0
  28. package/esm/index.css +0 -1
  29. package/esm/react-markdown-preview.common.d.ts +4 -0
  30. package/lib/Editor.common.d.ts +5 -0
  31. package/lib/Editor.common.js +15 -0
  32. package/lib/Editor.d.ts +4 -11
  33. package/lib/Editor.factory.d.ts +14 -0
  34. package/lib/Editor.factory.js +333 -0
  35. package/lib/Editor.js +4 -318
  36. package/lib/Editor.nohighlight.d.ts +4 -11
  37. package/lib/Editor.nohighlight.js +4 -318
  38. package/lib/components/TextArea/Markdown.common.d.ts +5 -0
  39. package/lib/components/TextArea/Markdown.common.js +68 -0
  40. package/lib/components/TextArea/factory.d.ts +33 -0
  41. package/lib/components/TextArea/factory.js +109 -0
  42. package/lib/components/TextArea/index.common.d.ts +3 -0
  43. package/lib/components/TextArea/index.common.js +14 -0
  44. package/lib/components/TextArea/index.d.ts +3 -27
  45. package/lib/components/TextArea/index.js +6 -98
  46. package/lib/components/TextArea/index.nohighlight.d.ts +3 -27
  47. package/lib/components/TextArea/index.nohighlight.js +3 -92
  48. package/lib/index.common.d.ts +16 -0
  49. package/lib/index.common.js +123 -0
  50. package/lib/react-markdown-preview.common.d.ts +4 -0
  51. package/markdown-editor.css +0 -1
  52. package/nohighlight.d.ts +2 -0
  53. package/package.json +8 -2
  54. package/src/Editor.common.tsx +7 -0
  55. package/src/Editor.factory.tsx +286 -0
  56. package/src/Editor.nohighlight.tsx +3 -271
  57. package/src/Editor.tsx +3 -271
  58. package/src/components/TextArea/Markdown.common.tsx +49 -0
  59. package/src/components/TextArea/factory.tsx +120 -0
  60. package/src/components/TextArea/index.common.tsx +6 -0
  61. package/src/components/TextArea/index.nohighlight.tsx +3 -108
  62. package/src/components/TextArea/index.tsx +3 -110
  63. package/src/index.common.tsx +19 -0
  64. package/src/react-markdown-preview.common.d.ts +4 -0
@@ -9,10 +9,10 @@
9
9
  */
10
10
 
11
11
  /**!
12
- * @uiw/copy-to-clipboard v1.0.17
12
+ * @uiw/copy-to-clipboard v1.0.20
13
13
  * Copy to clipboard.
14
14
  *
15
- * Copyright (c) 2024 Kenny Wang
15
+ * Copyright (c) 2026 Kenny Wang
16
16
  * https://github.com/uiwjs/copy-to-clipboard.git
17
17
  *
18
18
  * @website: https://uiwjs.github.io/copy-to-clipboard
@@ -0,0 +1,5 @@
1
+ export type { RefMDEditor } from './Editor.factory';
2
+ declare const _default: import("react").ForwardRefExoticComponent<import("./Types").MDEditorProps & import("react").RefAttributes<import("./Editor.factory").RefMDEditor>> & {
3
+ Markdown: import("react").ForwardRefExoticComponent<import("@uiw/react-markdown-preview/common").MarkdownPreviewProps & import("react").RefAttributes<import("@uiw/react-markdown-preview/common").MarkdownPreviewRef>>;
4
+ };
5
+ export default _default;
@@ -0,0 +1,7 @@
1
+ import MarkdownPreview from '@uiw/react-markdown-preview/common';
2
+ import TextArea from './components/TextArea/index.common';
3
+ import { createMDEditor } from './Editor.factory';
4
+ export default createMDEditor({
5
+ MarkdownPreview,
6
+ TextArea
7
+ });
package/esm/Editor.d.ts CHANGED
@@ -1,12 +1,5 @@
1
- import React from 'react';
2
- import MarkdownPreview from '@uiw/react-markdown-preview';
3
- import { type ContextStore } from './Context';
4
- import type { MDEditorProps } from './Types';
5
- export interface RefMDEditor extends ContextStore {
6
- }
7
- declare const InternalMDEditor: React.ForwardRefExoticComponent<MDEditorProps & React.RefAttributes<RefMDEditor>>;
8
- type EditorComponent = typeof InternalMDEditor & {
9
- Markdown: typeof MarkdownPreview;
1
+ export type { RefMDEditor } from './Editor.factory';
2
+ declare const _default: import("react").ForwardRefExoticComponent<import("./Types").MDEditorProps & import("react").RefAttributes<import("./Editor.factory").RefMDEditor>> & {
3
+ Markdown: import("react").ForwardRefExoticComponent<import("@uiw/react-markdown-preview").MarkdownPreviewProps & import("react").RefAttributes<import("@uiw/react-markdown-preview").MarkdownPreviewRef>>;
10
4
  };
11
- declare const Editor: EditorComponent;
12
- export default Editor;
5
+ export default _default;
@@ -0,0 +1,14 @@
1
+ import React from 'react';
2
+ import { type ContextStore } from './Context';
3
+ import type { MDEditorProps } from './Types';
4
+ export interface RefMDEditor extends ContextStore {
5
+ }
6
+ type PreviewComponent = React.ComponentType<any>;
7
+ type TextAreaComponent = React.ComponentType<any>;
8
+ export declare function createMDEditor<TMarkdownPreview extends PreviewComponent, TTextArea extends TextAreaComponent>(options: {
9
+ MarkdownPreview: TMarkdownPreview;
10
+ TextArea: TTextArea;
11
+ }): React.ForwardRefExoticComponent<MDEditorProps & React.RefAttributes<RefMDEditor>> & {
12
+ Markdown: TMarkdownPreview;
13
+ };
14
+ export {};
@@ -0,0 +1,270 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
3
+ var _excluded = ["prefixCls", "className", "value", "commands", "commandsFilter", "direction", "extraCommands", "height", "enableScroll", "visibleDragbar", "highlightEnable", "preview", "fullscreen", "overflow", "previewOptions", "textareaProps", "maxHeight", "minHeight", "autoFocus", "autoFocusEnd", "tabSize", "defaultTabEnable", "onChange", "onStatistics", "onHeightChange", "hideToolbar", "toolbarBottom", "components", "renderTextarea"];
4
+ import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle } from 'react';
5
+ import { ToolbarVisibility } from "./components/Toolbar/index.js";
6
+ import DragBar from "./components/DragBar/index.js";
7
+ import { getCommands, getExtraCommands, TextAreaCommandOrchestrator } from "./commands/index.js";
8
+ import { reducer, EditorContext } from "./Context.js";
9
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
10
+ function setGroupPopFalse(data) {
11
+ if (data === void 0) {
12
+ data = {};
13
+ }
14
+ Object.keys(data).forEach(keyname => {
15
+ data[keyname] = false;
16
+ });
17
+ return data;
18
+ }
19
+ export function createMDEditor(options) {
20
+ var {
21
+ MarkdownPreview,
22
+ TextArea
23
+ } = options;
24
+ var PreviewComponent = MarkdownPreview;
25
+ var TextAreaComponent = TextArea;
26
+ var InternalMDEditor = /*#__PURE__*/React.forwardRef((props, ref) => {
27
+ var _ref = props || {},
28
+ {
29
+ prefixCls = 'w-md-editor',
30
+ className,
31
+ value: propsValue,
32
+ commands = getCommands(),
33
+ commandsFilter,
34
+ direction,
35
+ extraCommands = getExtraCommands(),
36
+ height = 200,
37
+ enableScroll = true,
38
+ visibleDragbar = typeof props.visiableDragbar === 'boolean' ? props.visiableDragbar : true,
39
+ highlightEnable = true,
40
+ preview: previewType = 'live',
41
+ fullscreen = false,
42
+ overflow = true,
43
+ previewOptions = {},
44
+ textareaProps,
45
+ maxHeight = 1200,
46
+ minHeight = 100,
47
+ autoFocus,
48
+ autoFocusEnd = false,
49
+ tabSize = 2,
50
+ defaultTabEnable = false,
51
+ onChange,
52
+ onStatistics,
53
+ onHeightChange,
54
+ hideToolbar,
55
+ toolbarBottom = false,
56
+ components,
57
+ renderTextarea
58
+ } = _ref,
59
+ other = _objectWithoutPropertiesLoose(_ref, _excluded);
60
+ var cmds = commands.map(item => commandsFilter ? commandsFilter(item, false) : item).filter(Boolean);
61
+ var extraCmds = extraCommands.map(item => commandsFilter ? commandsFilter(item, true) : item).filter(Boolean);
62
+ var [state, dispatch] = useReducer(reducer, {
63
+ markdown: propsValue,
64
+ preview: previewType,
65
+ components,
66
+ height,
67
+ minHeight,
68
+ highlightEnable,
69
+ tabSize,
70
+ defaultTabEnable,
71
+ scrollTop: 0,
72
+ scrollTopPreview: 0,
73
+ commands: cmds,
74
+ extraCommands: extraCmds,
75
+ fullscreen,
76
+ barPopup: {}
77
+ });
78
+ var container = useRef(null);
79
+ var previewRef = useRef(null);
80
+ var enableScrollRef = useRef(enableScroll);
81
+ useImperativeHandle(ref, () => _extends({}, state, {
82
+ container: container.current,
83
+ dispatch
84
+ }));
85
+ useMemo(() => enableScrollRef.current = enableScroll, [enableScroll]);
86
+ useEffect(() => {
87
+ var stateInit = {};
88
+ if (container.current) {
89
+ stateInit.container = container.current || undefined;
90
+ }
91
+ stateInit.markdown = propsValue || '';
92
+ stateInit.barPopup = {};
93
+ if (dispatch) {
94
+ dispatch(_extends({}, state, stateInit));
95
+ }
96
+ // eslint-disable-next-line react-hooks/exhaustive-deps
97
+ }, []);
98
+ var cls = [className, 'wmde-markdown-var', direction ? prefixCls + "-" + direction : null, prefixCls, state.preview ? prefixCls + "-show-" + state.preview : null, state.fullscreen ? prefixCls + "-fullscreen" : null].filter(Boolean).join(' ').trim();
99
+ useMemo(() => propsValue !== state.markdown && dispatch({
100
+ markdown: propsValue || ''
101
+ }), [propsValue, state.markdown]);
102
+ // eslint-disable-next-line react-hooks/exhaustive-deps
103
+ useMemo(() => previewType !== state.preview && dispatch({
104
+ preview: previewType
105
+ }), [previewType]);
106
+ // eslint-disable-next-line react-hooks/exhaustive-deps
107
+ useMemo(() => tabSize !== state.tabSize && dispatch({
108
+ tabSize
109
+ }), [tabSize]);
110
+ useMemo(() => highlightEnable !== state.highlightEnable && dispatch({
111
+ highlightEnable
112
+ }),
113
+ // eslint-disable-next-line react-hooks/exhaustive-deps
114
+ [highlightEnable]);
115
+ // eslint-disable-next-line react-hooks/exhaustive-deps
116
+ useMemo(() => autoFocus !== state.autoFocus && dispatch({
117
+ autoFocus: autoFocus
118
+ }), [autoFocus]);
119
+ useMemo(() => autoFocusEnd !== state.autoFocusEnd && dispatch({
120
+ autoFocusEnd: autoFocusEnd
121
+ }), [autoFocusEnd]);
122
+ useMemo(() => fullscreen !== state.fullscreen && dispatch({
123
+ fullscreen: fullscreen
124
+ }),
125
+ // eslint-disable-next-line react-hooks/exhaustive-deps
126
+ [fullscreen]);
127
+ // eslint-disable-next-line react-hooks/exhaustive-deps
128
+ useMemo(() => height !== state.height && dispatch({
129
+ height: height
130
+ }), [height]);
131
+ useMemo(() => height !== state.height && onHeightChange && onHeightChange(state.height, height, state), [height, onHeightChange, state]);
132
+ // eslint-disable-next-line react-hooks/exhaustive-deps
133
+ useMemo(() => commands !== state.commands && dispatch({
134
+ commands: cmds
135
+ }), [props.commands]);
136
+ // eslint-disable-next-line react-hooks/exhaustive-deps
137
+ useMemo(() => extraCommands !== state.extraCommands && dispatch({
138
+ extraCommands: extraCmds
139
+ }), [props.extraCommands]);
140
+ var textareaDomRef = useRef();
141
+ var active = useRef('preview');
142
+ var initScroll = useRef(false);
143
+ useMemo(() => {
144
+ textareaDomRef.current = state.textareaWarp;
145
+ if (state.textareaWarp) {
146
+ state.textareaWarp.addEventListener('mouseover', () => {
147
+ active.current = 'text';
148
+ });
149
+ state.textareaWarp.addEventListener('mouseleave', () => {
150
+ active.current = 'preview';
151
+ });
152
+ }
153
+ }, [state.textareaWarp]);
154
+ var handleScroll = (e, type) => {
155
+ if (!enableScrollRef.current) return;
156
+ var textareaDom = textareaDomRef.current;
157
+ var previewDom = previewRef.current ? previewRef.current : undefined;
158
+ if (!initScroll.current) {
159
+ active.current = type;
160
+ initScroll.current = true;
161
+ }
162
+ if (textareaDom && previewDom) {
163
+ var scale = (textareaDom.scrollHeight - textareaDom.offsetHeight) / (previewDom.scrollHeight - previewDom.offsetHeight);
164
+ if (e.target === textareaDom && active.current === 'text') {
165
+ previewDom.scrollTop = textareaDom.scrollTop / scale;
166
+ }
167
+ if (e.target === previewDom && active.current === 'preview') {
168
+ textareaDom.scrollTop = previewDom.scrollTop * scale;
169
+ }
170
+ var scrollTop = 0;
171
+ if (active.current === 'text') {
172
+ scrollTop = textareaDom.scrollTop || 0;
173
+ } else if (active.current === 'preview') {
174
+ scrollTop = previewDom.scrollTop || 0;
175
+ }
176
+ dispatch({
177
+ scrollTop
178
+ });
179
+ }
180
+ };
181
+ var previewClassName = prefixCls + "-preview " + (previewOptions.className || '');
182
+ var handlePreviewScroll = e => handleScroll(e, 'preview');
183
+ var mdPreview = useMemo(() => /*#__PURE__*/_jsx("div", {
184
+ ref: previewRef,
185
+ className: previewClassName,
186
+ children: /*#__PURE__*/_jsx(PreviewComponent, _extends({}, previewOptions, {
187
+ onScroll: handlePreviewScroll,
188
+ source: state.markdown || ''
189
+ }))
190
+ }), [previewClassName, previewOptions, state.markdown]);
191
+ var preview = (components == null ? void 0 : components.preview) && (components == null ? void 0 : components.preview(state.markdown || '', state, dispatch));
192
+ if (preview && /*#__PURE__*/React.isValidElement(preview)) {
193
+ mdPreview = /*#__PURE__*/_jsx("div", {
194
+ className: previewClassName,
195
+ ref: previewRef,
196
+ onScroll: handlePreviewScroll,
197
+ children: preview
198
+ });
199
+ }
200
+ var containerStyle = _extends({}, other.style, {
201
+ height: state.height || '100%'
202
+ });
203
+ var containerClick = () => dispatch({
204
+ barPopup: _extends({}, setGroupPopFalse(state.barPopup))
205
+ });
206
+ var dragBarChange = newHeight => dispatch({
207
+ height: newHeight
208
+ });
209
+ var changeHandle = evn => {
210
+ onChange && onChange(evn.target.value, evn, state);
211
+ if (textareaProps && textareaProps.onChange) {
212
+ textareaProps.onChange(evn);
213
+ }
214
+ if (state.textarea && state.textarea instanceof HTMLTextAreaElement && onStatistics) {
215
+ var obj = new TextAreaCommandOrchestrator(state.textarea);
216
+ var objState = obj.getState() || {};
217
+ onStatistics(_extends({}, objState, {
218
+ lineCount: evn.target.value.split('\n').length,
219
+ length: evn.target.value.length
220
+ }));
221
+ }
222
+ };
223
+ return /*#__PURE__*/_jsx(EditorContext.Provider, {
224
+ value: _extends({}, state, {
225
+ dispatch
226
+ }),
227
+ children: /*#__PURE__*/_jsxs("div", _extends({
228
+ ref: container,
229
+ className: cls
230
+ }, other, {
231
+ onClick: containerClick,
232
+ style: containerStyle,
233
+ children: [/*#__PURE__*/_jsx(ToolbarVisibility, {
234
+ hideToolbar: hideToolbar,
235
+ toolbarBottom: toolbarBottom,
236
+ prefixCls: prefixCls,
237
+ overflow: overflow,
238
+ placement: "top"
239
+ }), /*#__PURE__*/_jsxs("div", {
240
+ className: prefixCls + "-content",
241
+ children: [/(edit|live)/.test(state.preview || '') && /*#__PURE__*/_jsx(TextAreaComponent, _extends({
242
+ className: prefixCls + "-input",
243
+ prefixCls: prefixCls,
244
+ autoFocus: autoFocus
245
+ }, textareaProps, {
246
+ onChange: changeHandle,
247
+ renderTextarea: (components == null ? void 0 : components.textarea) || renderTextarea,
248
+ onScroll: e => handleScroll(e, 'text')
249
+ })), /(live|preview)/.test(state.preview || '') && mdPreview]
250
+ }), visibleDragbar && !state.fullscreen && /*#__PURE__*/_jsx(DragBar, {
251
+ prefixCls: prefixCls,
252
+ height: state.height,
253
+ maxHeight: maxHeight,
254
+ minHeight: minHeight,
255
+ onChange: dragBarChange
256
+ }), /*#__PURE__*/_jsx(ToolbarVisibility, {
257
+ hideToolbar: hideToolbar,
258
+ toolbarBottom: toolbarBottom,
259
+ prefixCls: prefixCls,
260
+ overflow: overflow,
261
+ placement: "bottom"
262
+ })]
263
+ }))
264
+ });
265
+ });
266
+ var Editor = InternalMDEditor;
267
+ Editor.Markdown = MarkdownPreview;
268
+ Editor.displayName = 'MDEditor';
269
+ return Editor;
270
+ }
package/esm/Editor.js CHANGED
@@ -1,263 +1,7 @@
1
- import _extends from "@babel/runtime/helpers/extends";
2
- import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
3
- var _excluded = ["prefixCls", "className", "value", "commands", "commandsFilter", "direction", "extraCommands", "height", "enableScroll", "visibleDragbar", "highlightEnable", "preview", "fullscreen", "overflow", "previewOptions", "textareaProps", "maxHeight", "minHeight", "autoFocus", "autoFocusEnd", "tabSize", "defaultTabEnable", "onChange", "onStatistics", "onHeightChange", "hideToolbar", "toolbarBottom", "components", "renderTextarea"];
4
- import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle } from 'react';
5
1
  import MarkdownPreview from '@uiw/react-markdown-preview';
6
- import { ToolbarVisibility } from "./components/Toolbar/index.js";
7
2
  import TextArea from "./components/TextArea/index.js";
8
- import DragBar from "./components/DragBar/index.js";
9
- import { getCommands, getExtraCommands, TextAreaCommandOrchestrator } from "./commands/index.js";
10
- import { reducer, EditorContext } from "./Context.js";
11
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
12
- function setGroupPopFalse(data) {
13
- if (data === void 0) {
14
- data = {};
15
- }
16
- Object.keys(data).forEach(keyname => {
17
- data[keyname] = false;
18
- });
19
- return data;
20
- }
21
- var InternalMDEditor = /*#__PURE__*/React.forwardRef((props, ref) => {
22
- var _ref = props || {},
23
- {
24
- prefixCls = 'w-md-editor',
25
- className,
26
- value: propsValue,
27
- commands = getCommands(),
28
- commandsFilter,
29
- direction,
30
- extraCommands = getExtraCommands(),
31
- height = 200,
32
- enableScroll = true,
33
- visibleDragbar = typeof props.visiableDragbar === 'boolean' ? props.visiableDragbar : true,
34
- highlightEnable = true,
35
- preview: previewType = 'live',
36
- fullscreen = false,
37
- overflow = true,
38
- previewOptions = {},
39
- textareaProps,
40
- maxHeight = 1200,
41
- minHeight = 100,
42
- autoFocus,
43
- autoFocusEnd = false,
44
- tabSize = 2,
45
- defaultTabEnable = false,
46
- onChange,
47
- onStatistics,
48
- onHeightChange,
49
- hideToolbar,
50
- toolbarBottom = false,
51
- components,
52
- renderTextarea
53
- } = _ref,
54
- other = _objectWithoutPropertiesLoose(_ref, _excluded);
55
- var cmds = commands.map(item => commandsFilter ? commandsFilter(item, false) : item).filter(Boolean);
56
- var extraCmds = extraCommands.map(item => commandsFilter ? commandsFilter(item, true) : item).filter(Boolean);
57
- var [state, dispatch] = useReducer(reducer, {
58
- markdown: propsValue,
59
- preview: previewType,
60
- components,
61
- height,
62
- minHeight,
63
- highlightEnable,
64
- tabSize,
65
- defaultTabEnable,
66
- scrollTop: 0,
67
- scrollTopPreview: 0,
68
- commands: cmds,
69
- extraCommands: extraCmds,
70
- fullscreen,
71
- barPopup: {}
72
- });
73
- var container = useRef(null);
74
- var previewRef = useRef(null);
75
- var enableScrollRef = useRef(enableScroll);
76
- useImperativeHandle(ref, () => _extends({}, state, {
77
- container: container.current,
78
- dispatch
79
- }));
80
- useMemo(() => enableScrollRef.current = enableScroll, [enableScroll]);
81
- useEffect(() => {
82
- var stateInit = {};
83
- if (container.current) {
84
- stateInit.container = container.current || undefined;
85
- }
86
- stateInit.markdown = propsValue || '';
87
- stateInit.barPopup = {};
88
- if (dispatch) {
89
- dispatch(_extends({}, state, stateInit));
90
- }
91
- // eslint-disable-next-line react-hooks/exhaustive-deps
92
- }, []);
93
- var cls = [className, 'wmde-markdown-var', direction ? prefixCls + "-" + direction : null, prefixCls, state.preview ? prefixCls + "-show-" + state.preview : null, state.fullscreen ? prefixCls + "-fullscreen" : null].filter(Boolean).join(' ').trim();
94
- useMemo(() => propsValue !== state.markdown && dispatch({
95
- markdown: propsValue || ''
96
- }), [propsValue, state.markdown]);
97
- // eslint-disable-next-line react-hooks/exhaustive-deps
98
- useMemo(() => previewType !== state.preview && dispatch({
99
- preview: previewType
100
- }), [previewType]);
101
- // eslint-disable-next-line react-hooks/exhaustive-deps
102
- useMemo(() => tabSize !== state.tabSize && dispatch({
103
- tabSize
104
- }), [tabSize]);
105
- useMemo(() => highlightEnable !== state.highlightEnable && dispatch({
106
- highlightEnable
107
- }),
108
- // eslint-disable-next-line react-hooks/exhaustive-deps
109
- [highlightEnable]);
110
- // eslint-disable-next-line react-hooks/exhaustive-deps
111
- useMemo(() => autoFocus !== state.autoFocus && dispatch({
112
- autoFocus: autoFocus
113
- }), [autoFocus]);
114
- useMemo(() => autoFocusEnd !== state.autoFocusEnd && dispatch({
115
- autoFocusEnd: autoFocusEnd
116
- }), [autoFocusEnd]);
117
- useMemo(() => fullscreen !== state.fullscreen && dispatch({
118
- fullscreen: fullscreen
119
- }),
120
- // eslint-disable-next-line react-hooks/exhaustive-deps
121
- [fullscreen]);
122
- // eslint-disable-next-line react-hooks/exhaustive-deps
123
- useMemo(() => height !== state.height && dispatch({
124
- height: height
125
- }), [height]);
126
- useMemo(() => height !== state.height && onHeightChange && onHeightChange(state.height, height, state), [height, onHeightChange, state]);
127
- // eslint-disable-next-line react-hooks/exhaustive-deps
128
- useMemo(() => commands !== state.commands && dispatch({
129
- commands: cmds
130
- }), [props.commands]);
131
- // eslint-disable-next-line react-hooks/exhaustive-deps
132
- useMemo(() => extraCommands !== state.extraCommands && dispatch({
133
- extraCommands: extraCmds
134
- }), [props.extraCommands]);
135
- var textareaDomRef = useRef();
136
- var active = useRef('preview');
137
- var initScroll = useRef(false);
138
- useMemo(() => {
139
- textareaDomRef.current = state.textareaWarp;
140
- if (state.textareaWarp) {
141
- state.textareaWarp.addEventListener('mouseover', () => {
142
- active.current = 'text';
143
- });
144
- state.textareaWarp.addEventListener('mouseleave', () => {
145
- active.current = 'preview';
146
- });
147
- }
148
- }, [state.textareaWarp]);
149
- var handleScroll = (e, type) => {
150
- if (!enableScrollRef.current) return;
151
- var textareaDom = textareaDomRef.current;
152
- var previewDom = previewRef.current ? previewRef.current : undefined;
153
- if (!initScroll.current) {
154
- active.current = type;
155
- initScroll.current = true;
156
- }
157
- if (textareaDom && previewDom) {
158
- var scale = (textareaDom.scrollHeight - textareaDom.offsetHeight) / (previewDom.scrollHeight - previewDom.offsetHeight);
159
- if (e.target === textareaDom && active.current === 'text') {
160
- previewDom.scrollTop = textareaDom.scrollTop / scale;
161
- }
162
- if (e.target === previewDom && active.current === 'preview') {
163
- textareaDom.scrollTop = previewDom.scrollTop * scale;
164
- }
165
- var scrollTop = 0;
166
- if (active.current === 'text') {
167
- scrollTop = textareaDom.scrollTop || 0;
168
- } else if (active.current === 'preview') {
169
- scrollTop = previewDom.scrollTop || 0;
170
- }
171
- dispatch({
172
- scrollTop
173
- });
174
- }
175
- };
176
- var previewClassName = prefixCls + "-preview " + (previewOptions.className || '');
177
- var handlePreviewScroll = e => handleScroll(e, 'preview');
178
- var mdPreview = useMemo(() => /*#__PURE__*/_jsx("div", {
179
- ref: previewRef,
180
- className: previewClassName,
181
- children: /*#__PURE__*/_jsx(MarkdownPreview, _extends({}, previewOptions, {
182
- onScroll: handlePreviewScroll,
183
- source: state.markdown || ''
184
- }))
185
- }), [previewClassName, previewOptions, state.markdown]);
186
- var preview = (components == null ? void 0 : components.preview) && (components == null ? void 0 : components.preview(state.markdown || '', state, dispatch));
187
- if (preview && /*#__PURE__*/React.isValidElement(preview)) {
188
- mdPreview = /*#__PURE__*/_jsx("div", {
189
- className: previewClassName,
190
- ref: previewRef,
191
- onScroll: handlePreviewScroll,
192
- children: preview
193
- });
194
- }
195
- var containerStyle = _extends({}, other.style, {
196
- height: state.height || '100%'
197
- });
198
- var containerClick = () => dispatch({
199
- barPopup: _extends({}, setGroupPopFalse(state.barPopup))
200
- });
201
- var dragBarChange = newHeight => dispatch({
202
- height: newHeight
203
- });
204
- var changeHandle = evn => {
205
- onChange && onChange(evn.target.value, evn, state);
206
- if (textareaProps && textareaProps.onChange) {
207
- textareaProps.onChange(evn);
208
- }
209
- if (state.textarea && state.textarea instanceof HTMLTextAreaElement && onStatistics) {
210
- var obj = new TextAreaCommandOrchestrator(state.textarea);
211
- var objState = obj.getState() || {};
212
- onStatistics(_extends({}, objState, {
213
- lineCount: evn.target.value.split('\n').length,
214
- length: evn.target.value.length
215
- }));
216
- }
217
- };
218
- return /*#__PURE__*/_jsx(EditorContext.Provider, {
219
- value: _extends({}, state, {
220
- dispatch
221
- }),
222
- children: /*#__PURE__*/_jsxs("div", _extends({
223
- ref: container,
224
- className: cls
225
- }, other, {
226
- onClick: containerClick,
227
- style: containerStyle,
228
- children: [/*#__PURE__*/_jsx(ToolbarVisibility, {
229
- hideToolbar: hideToolbar,
230
- toolbarBottom: toolbarBottom,
231
- prefixCls: prefixCls,
232
- overflow: overflow,
233
- placement: "top"
234
- }), /*#__PURE__*/_jsxs("div", {
235
- className: prefixCls + "-content",
236
- children: [/(edit|live)/.test(state.preview || '') && /*#__PURE__*/_jsx(TextArea, _extends({
237
- className: prefixCls + "-input",
238
- prefixCls: prefixCls,
239
- autoFocus: autoFocus
240
- }, textareaProps, {
241
- onChange: changeHandle,
242
- renderTextarea: (components == null ? void 0 : components.textarea) || renderTextarea,
243
- onScroll: e => handleScroll(e, 'text')
244
- })), /(live|preview)/.test(state.preview || '') && mdPreview]
245
- }), visibleDragbar && !state.fullscreen && /*#__PURE__*/_jsx(DragBar, {
246
- prefixCls: prefixCls,
247
- height: state.height,
248
- maxHeight: maxHeight,
249
- minHeight: minHeight,
250
- onChange: dragBarChange
251
- }), /*#__PURE__*/_jsx(ToolbarVisibility, {
252
- hideToolbar: hideToolbar,
253
- toolbarBottom: toolbarBottom,
254
- prefixCls: prefixCls,
255
- overflow: overflow,
256
- placement: "bottom"
257
- })]
258
- }))
259
- });
260
- });
261
- var Editor = InternalMDEditor;
262
- Editor.Markdown = MarkdownPreview;
263
- export default Editor;
3
+ import { createMDEditor } from './Editor.factory';
4
+ export default createMDEditor({
5
+ MarkdownPreview,
6
+ TextArea
7
+ });
@@ -1,12 +1,5 @@
1
- import React from 'react';
2
- import MarkdownPreview from '@uiw/react-markdown-preview/nohighlight';
3
- import { type ContextStore } from './Context';
4
- import type { MDEditorProps } from './Types';
5
- export interface RefMDEditor extends ContextStore {
6
- }
7
- declare const InternalMDEditor: React.ForwardRefExoticComponent<MDEditorProps & React.RefAttributes<RefMDEditor>>;
8
- type EditorComponent = typeof InternalMDEditor & {
9
- Markdown: typeof MarkdownPreview;
1
+ export type { RefMDEditor } from './Editor.factory';
2
+ declare const _default: import("react").ForwardRefExoticComponent<import("./Types").MDEditorProps & import("react").RefAttributes<import("./Editor.factory").RefMDEditor>> & {
3
+ Markdown: import("react").ForwardRefExoticComponent<import("@uiw/react-markdown-preview/nohighlight").MarkdownPreviewProps & import("react").RefAttributes<import("@uiw/react-markdown-preview/nohighlight").MarkdownPreviewRef>>;
10
4
  };
11
- declare const Editor: EditorComponent;
12
- export default Editor;
5
+ export default _default;