@uiw/react-md-editor 4.0.11 → 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 (63) 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 +3256 -4363
  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/package.json +8 -2
  53. package/src/Editor.common.tsx +7 -0
  54. package/src/Editor.factory.tsx +286 -0
  55. package/src/Editor.nohighlight.tsx +3 -271
  56. package/src/Editor.tsx +3 -271
  57. package/src/components/TextArea/Markdown.common.tsx +49 -0
  58. package/src/components/TextArea/factory.tsx +120 -0
  59. package/src/components/TextArea/index.common.tsx +6 -0
  60. package/src/components/TextArea/index.nohighlight.tsx +3 -108
  61. package/src/components/TextArea/index.tsx +3 -110
  62. package/src/index.common.tsx +19 -0
  63. package/src/react-markdown-preview.common.d.ts +4 -0
@@ -1,93 +1,2 @@
1
- import _extends from "@babel/runtime/helpers/extends";
2
- import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
3
- var _excluded = ["prefixCls", "className", "onScroll", "renderTextarea"];
4
- import React, { useEffect, Fragment, useContext } from 'react';
5
- import { EditorContext } from "../../Context.js";
6
- import shortcuts from "./shortcuts.js";
7
- import Textarea from "./Textarea.js";
8
- import { TextAreaCommandOrchestrator } from "../../commands/index.js";
9
- import "./index.css";
10
- import { jsx as _jsx } from "react/jsx-runtime";
11
- export default function TextArea(props) {
12
- var _ref = props || {},
13
- {
14
- prefixCls,
15
- className,
16
- onScroll,
17
- renderTextarea
18
- } = _ref,
19
- otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
20
- var {
21
- markdown,
22
- scrollTop,
23
- commands,
24
- extraCommands,
25
- dispatch
26
- } = useContext(EditorContext);
27
- var textRef = React.useRef(null);
28
- var executeRef = React.useRef();
29
- var warp = /*#__PURE__*/React.createRef();
30
- useEffect(() => {
31
- var state = {};
32
- if (warp.current) {
33
- state.textareaWarp = warp.current || undefined;
34
- warp.current.scrollTop = scrollTop || 0;
35
- }
36
- if (dispatch) {
37
- dispatch(_extends({}, state));
38
- }
39
- // eslint-disable-next-line react-hooks/exhaustive-deps
40
- }, []);
41
- useEffect(() => {
42
- if (textRef.current && dispatch) {
43
- var commandOrchestrator = new TextAreaCommandOrchestrator(textRef.current);
44
- executeRef.current = commandOrchestrator;
45
- dispatch({
46
- textarea: textRef.current,
47
- commandOrchestrator
48
- });
49
- }
50
- // eslint-disable-next-line react-hooks/exhaustive-deps
51
- }, []);
52
- var textStyle = {
53
- WebkitTextFillColor: 'initial',
54
- overflow: 'auto'
55
- };
56
- return /*#__PURE__*/_jsx("div", {
57
- ref: warp,
58
- className: prefixCls + "-area " + (className || ''),
59
- onScroll: onScroll,
60
- children: /*#__PURE__*/_jsx("div", {
61
- className: prefixCls + "-text",
62
- children: renderTextarea ? (/*#__PURE__*/React.cloneElement(renderTextarea(_extends({}, otherProps, {
63
- value: markdown,
64
- autoComplete: 'off',
65
- autoCorrect: 'off',
66
- spellCheck: 'false',
67
- autoCapitalize: 'off',
68
- className: prefixCls + "-text-input",
69
- style: {
70
- WebkitTextFillColor: 'inherit',
71
- overflow: 'auto'
72
- }
73
- }), {
74
- dispatch,
75
- onChange: otherProps.onChange,
76
- shortcuts,
77
- useContext: {
78
- commands,
79
- extraCommands,
80
- commandOrchestrator: executeRef.current
81
- }
82
- }), {
83
- ref: textRef
84
- })) : /*#__PURE__*/_jsx(Fragment, {
85
- children: /*#__PURE__*/_jsx(Textarea, _extends({
86
- prefixCls: prefixCls
87
- }, otherProps, {
88
- style: textStyle
89
- }))
90
- })
91
- })
92
- });
93
- }
1
+ import { createTextArea } from "./factory.js";
2
+ export default createTextArea();
@@ -0,0 +1,16 @@
1
+ import MDEditor from './Editor.common';
2
+ import * as commands from './commands/';
3
+ import * as MarkdownUtil from './utils/markdownUtils';
4
+ import './index.less';
5
+ export { headingExecute } from './commands/title';
6
+ export * from './commands/';
7
+ export * from './commands/group';
8
+ export * from './utils/markdownUtils';
9
+ export * from './utils/InsertTextAtPosition';
10
+ export * from './Editor.common';
11
+ export * from './Context';
12
+ export * from './Types';
13
+ export { default as handleKeyDown } from './components/TextArea/handleKeyDown';
14
+ export { default as shortcuts } from './components/TextArea/shortcuts';
15
+ export { MarkdownUtil, commands };
16
+ export default MDEditor;
@@ -0,0 +1,16 @@
1
+ import MDEditor from './Editor.common';
2
+ import * as commands from "./commands/index.js";
3
+ import * as MarkdownUtil from "./utils/markdownUtils.js";
4
+ import "./index.css";
5
+ export { headingExecute } from "./commands/title.js";
6
+ export * from "./commands/index.js";
7
+ export * from "./commands/group.js";
8
+ export * from "./utils/markdownUtils.js";
9
+ export * from "./utils/InsertTextAtPosition.js";
10
+ export * from './Editor.common';
11
+ export * from "./Context.js";
12
+ export * from "./Types.js";
13
+ export { default as handleKeyDown } from "./components/TextArea/handleKeyDown.js";
14
+ export { default as shortcuts } from "./components/TextArea/shortcuts.js";
15
+ export { MarkdownUtil, commands };
16
+ export default MDEditor;
package/esm/index.css CHANGED
@@ -27,7 +27,6 @@
27
27
  text-align: right !important;
28
28
  }
29
29
  .w-md-editor-toolbar {
30
- height: -webkit-fit-content;
31
30
  height: fit-content;
32
31
  }
33
32
  .w-md-editor-content {
@@ -0,0 +1,4 @@
1
+ declare module '@uiw/react-markdown-preview/common' {
2
+ export { default } from '@uiw/react-markdown-preview/nohighlight';
3
+ export * from '@uiw/react-markdown-preview/nohighlight';
4
+ }
@@ -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,15 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports["default"] = void 0;
8
+ var _common = _interopRequireDefault(require("@uiw/react-markdown-preview/common"));
9
+ var _index = _interopRequireDefault(require("./components/TextArea/index.common"));
10
+ var _Editor = require("./Editor.factory");
11
+ var _default = exports["default"] = (0, _Editor.createMDEditor)({
12
+ MarkdownPreview: _common["default"],
13
+ TextArea: _index["default"]
14
+ });
15
+ module.exports = exports.default;
package/lib/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,333 @@
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.createMDEditor = createMDEditor;
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 _Toolbar = require("./components/Toolbar/");
14
+ var _DragBar = _interopRequireDefault(require("./components/DragBar/"));
15
+ var _commands = require("./commands/");
16
+ var _Context = require("./Context");
17
+ var _jsxRuntime = require("react/jsx-runtime");
18
+ 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"];
19
+ function setGroupPopFalse() {
20
+ var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
21
+ Object.keys(data).forEach(function (keyname) {
22
+ data[keyname] = false;
23
+ });
24
+ return data;
25
+ }
26
+ function createMDEditor(options) {
27
+ var MarkdownPreview = options.MarkdownPreview,
28
+ TextArea = options.TextArea;
29
+ var PreviewComponent = MarkdownPreview;
30
+ var TextAreaComponent = TextArea;
31
+ var InternalMDEditor = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
32
+ var _ref = props || {},
33
+ _ref$prefixCls = _ref.prefixCls,
34
+ prefixCls = _ref$prefixCls === void 0 ? 'w-md-editor' : _ref$prefixCls,
35
+ className = _ref.className,
36
+ propsValue = _ref.value,
37
+ _ref$commands = _ref.commands,
38
+ commands = _ref$commands === void 0 ? (0, _commands.getCommands)() : _ref$commands,
39
+ commandsFilter = _ref.commandsFilter,
40
+ direction = _ref.direction,
41
+ _ref$extraCommands = _ref.extraCommands,
42
+ extraCommands = _ref$extraCommands === void 0 ? (0, _commands.getExtraCommands)() : _ref$extraCommands,
43
+ _ref$height = _ref.height,
44
+ height = _ref$height === void 0 ? 200 : _ref$height,
45
+ _ref$enableScroll = _ref.enableScroll,
46
+ enableScroll = _ref$enableScroll === void 0 ? true : _ref$enableScroll,
47
+ _ref$visibleDragbar = _ref.visibleDragbar,
48
+ visibleDragbar = _ref$visibleDragbar === void 0 ? typeof props.visiableDragbar === 'boolean' ? props.visiableDragbar : true : _ref$visibleDragbar,
49
+ _ref$highlightEnable = _ref.highlightEnable,
50
+ highlightEnable = _ref$highlightEnable === void 0 ? true : _ref$highlightEnable,
51
+ _ref$preview = _ref.preview,
52
+ previewType = _ref$preview === void 0 ? 'live' : _ref$preview,
53
+ _ref$fullscreen = _ref.fullscreen,
54
+ fullscreen = _ref$fullscreen === void 0 ? false : _ref$fullscreen,
55
+ _ref$overflow = _ref.overflow,
56
+ overflow = _ref$overflow === void 0 ? true : _ref$overflow,
57
+ _ref$previewOptions = _ref.previewOptions,
58
+ previewOptions = _ref$previewOptions === void 0 ? {} : _ref$previewOptions,
59
+ textareaProps = _ref.textareaProps,
60
+ _ref$maxHeight = _ref.maxHeight,
61
+ maxHeight = _ref$maxHeight === void 0 ? 1200 : _ref$maxHeight,
62
+ _ref$minHeight = _ref.minHeight,
63
+ minHeight = _ref$minHeight === void 0 ? 100 : _ref$minHeight,
64
+ autoFocus = _ref.autoFocus,
65
+ _ref$autoFocusEnd = _ref.autoFocusEnd,
66
+ autoFocusEnd = _ref$autoFocusEnd === void 0 ? false : _ref$autoFocusEnd,
67
+ _ref$tabSize = _ref.tabSize,
68
+ tabSize = _ref$tabSize === void 0 ? 2 : _ref$tabSize,
69
+ _ref$defaultTabEnable = _ref.defaultTabEnable,
70
+ defaultTabEnable = _ref$defaultTabEnable === void 0 ? false : _ref$defaultTabEnable,
71
+ onChange = _ref.onChange,
72
+ onStatistics = _ref.onStatistics,
73
+ onHeightChange = _ref.onHeightChange,
74
+ hideToolbar = _ref.hideToolbar,
75
+ _ref$toolbarBottom = _ref.toolbarBottom,
76
+ toolbarBottom = _ref$toolbarBottom === void 0 ? false : _ref$toolbarBottom,
77
+ components = _ref.components,
78
+ renderTextarea = _ref.renderTextarea,
79
+ other = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
80
+ var cmds = commands.map(function (item) {
81
+ return commandsFilter ? commandsFilter(item, false) : item;
82
+ }).filter(Boolean);
83
+ var extraCmds = extraCommands.map(function (item) {
84
+ return commandsFilter ? commandsFilter(item, true) : item;
85
+ }).filter(Boolean);
86
+ var _useReducer = (0, _react.useReducer)(_Context.reducer, {
87
+ markdown: propsValue,
88
+ preview: previewType,
89
+ components: components,
90
+ height: height,
91
+ minHeight: minHeight,
92
+ highlightEnable: highlightEnable,
93
+ tabSize: tabSize,
94
+ defaultTabEnable: defaultTabEnable,
95
+ scrollTop: 0,
96
+ scrollTopPreview: 0,
97
+ commands: cmds,
98
+ extraCommands: extraCmds,
99
+ fullscreen: fullscreen,
100
+ barPopup: {}
101
+ }),
102
+ _useReducer2 = (0, _slicedToArray2["default"])(_useReducer, 2),
103
+ state = _useReducer2[0],
104
+ dispatch = _useReducer2[1];
105
+ var container = (0, _react.useRef)(null);
106
+ var previewRef = (0, _react.useRef)(null);
107
+ var enableScrollRef = (0, _react.useRef)(enableScroll);
108
+ (0, _react.useImperativeHandle)(ref, function () {
109
+ return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, state), {}, {
110
+ container: container.current,
111
+ dispatch: dispatch
112
+ });
113
+ });
114
+ (0, _react.useMemo)(function () {
115
+ return enableScrollRef.current = enableScroll;
116
+ }, [enableScroll]);
117
+ (0, _react.useEffect)(function () {
118
+ var stateInit = {};
119
+ if (container.current) {
120
+ stateInit.container = container.current || undefined;
121
+ }
122
+ stateInit.markdown = propsValue || '';
123
+ stateInit.barPopup = {};
124
+ if (dispatch) {
125
+ dispatch((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, state), stateInit));
126
+ }
127
+ // eslint-disable-next-line react-hooks/exhaustive-deps
128
+ }, []);
129
+ 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();
130
+ (0, _react.useMemo)(function () {
131
+ return propsValue !== state.markdown && dispatch({
132
+ markdown: propsValue || ''
133
+ });
134
+ }, [propsValue, state.markdown]);
135
+ // eslint-disable-next-line react-hooks/exhaustive-deps
136
+ (0, _react.useMemo)(function () {
137
+ return previewType !== state.preview && dispatch({
138
+ preview: previewType
139
+ });
140
+ }, [previewType]);
141
+ // eslint-disable-next-line react-hooks/exhaustive-deps
142
+ (0, _react.useMemo)(function () {
143
+ return tabSize !== state.tabSize && dispatch({
144
+ tabSize: tabSize
145
+ });
146
+ }, [tabSize]);
147
+ (0, _react.useMemo)(function () {
148
+ return highlightEnable !== state.highlightEnable && dispatch({
149
+ highlightEnable: highlightEnable
150
+ });
151
+ },
152
+ // eslint-disable-next-line react-hooks/exhaustive-deps
153
+ [highlightEnable]);
154
+ // eslint-disable-next-line react-hooks/exhaustive-deps
155
+ (0, _react.useMemo)(function () {
156
+ return autoFocus !== state.autoFocus && dispatch({
157
+ autoFocus: autoFocus
158
+ });
159
+ }, [autoFocus]);
160
+ (0, _react.useMemo)(function () {
161
+ return autoFocusEnd !== state.autoFocusEnd && dispatch({
162
+ autoFocusEnd: autoFocusEnd
163
+ });
164
+ }, [autoFocusEnd]);
165
+ (0, _react.useMemo)(function () {
166
+ return fullscreen !== state.fullscreen && dispatch({
167
+ fullscreen: fullscreen
168
+ });
169
+ },
170
+ // eslint-disable-next-line react-hooks/exhaustive-deps
171
+ [fullscreen]);
172
+ // eslint-disable-next-line react-hooks/exhaustive-deps
173
+ (0, _react.useMemo)(function () {
174
+ return height !== state.height && dispatch({
175
+ height: height
176
+ });
177
+ }, [height]);
178
+ (0, _react.useMemo)(function () {
179
+ return height !== state.height && onHeightChange && onHeightChange(state.height, height, state);
180
+ }, [height, onHeightChange, state]);
181
+ // eslint-disable-next-line react-hooks/exhaustive-deps
182
+ (0, _react.useMemo)(function () {
183
+ return commands !== state.commands && dispatch({
184
+ commands: cmds
185
+ });
186
+ }, [props.commands]);
187
+ // eslint-disable-next-line react-hooks/exhaustive-deps
188
+ (0, _react.useMemo)(function () {
189
+ return extraCommands !== state.extraCommands && dispatch({
190
+ extraCommands: extraCmds
191
+ });
192
+ }, [props.extraCommands]);
193
+ var textareaDomRef = (0, _react.useRef)();
194
+ var active = (0, _react.useRef)('preview');
195
+ var initScroll = (0, _react.useRef)(false);
196
+ (0, _react.useMemo)(function () {
197
+ textareaDomRef.current = state.textareaWarp;
198
+ if (state.textareaWarp) {
199
+ state.textareaWarp.addEventListener('mouseover', function () {
200
+ active.current = 'text';
201
+ });
202
+ state.textareaWarp.addEventListener('mouseleave', function () {
203
+ active.current = 'preview';
204
+ });
205
+ }
206
+ }, [state.textareaWarp]);
207
+ var handleScroll = function handleScroll(e, type) {
208
+ if (!enableScrollRef.current) return;
209
+ var textareaDom = textareaDomRef.current;
210
+ var previewDom = previewRef.current ? previewRef.current : undefined;
211
+ if (!initScroll.current) {
212
+ active.current = type;
213
+ initScroll.current = true;
214
+ }
215
+ if (textareaDom && previewDom) {
216
+ var scale = (textareaDom.scrollHeight - textareaDom.offsetHeight) / (previewDom.scrollHeight - previewDom.offsetHeight);
217
+ if (e.target === textareaDom && active.current === 'text') {
218
+ previewDom.scrollTop = textareaDom.scrollTop / scale;
219
+ }
220
+ if (e.target === previewDom && active.current === 'preview') {
221
+ textareaDom.scrollTop = previewDom.scrollTop * scale;
222
+ }
223
+ var scrollTop = 0;
224
+ if (active.current === 'text') {
225
+ scrollTop = textareaDom.scrollTop || 0;
226
+ } else if (active.current === 'preview') {
227
+ scrollTop = previewDom.scrollTop || 0;
228
+ }
229
+ dispatch({
230
+ scrollTop: scrollTop
231
+ });
232
+ }
233
+ };
234
+ var previewClassName = "".concat(prefixCls, "-preview ").concat(previewOptions.className || '');
235
+ var handlePreviewScroll = function handlePreviewScroll(e) {
236
+ return handleScroll(e, 'preview');
237
+ };
238
+ var mdPreview = (0, _react.useMemo)(function () {
239
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
240
+ ref: previewRef,
241
+ className: previewClassName,
242
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PreviewComponent, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, previewOptions), {}, {
243
+ onScroll: handlePreviewScroll,
244
+ source: state.markdown || ''
245
+ }))
246
+ });
247
+ }, [previewClassName, previewOptions, state.markdown]);
248
+ var preview = (components === null || components === void 0 ? void 0 : components.preview) && (components === null || components === void 0 ? void 0 : components.preview(state.markdown || '', state, dispatch));
249
+ if (preview && /*#__PURE__*/_react["default"].isValidElement(preview)) {
250
+ mdPreview = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
251
+ className: previewClassName,
252
+ ref: previewRef,
253
+ onScroll: handlePreviewScroll,
254
+ children: preview
255
+ });
256
+ }
257
+ var containerStyle = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, other.style), {}, {
258
+ height: state.height || '100%'
259
+ });
260
+ var containerClick = function containerClick() {
261
+ return dispatch({
262
+ barPopup: (0, _objectSpread2["default"])({}, setGroupPopFalse(state.barPopup))
263
+ });
264
+ };
265
+ var dragBarChange = function dragBarChange(newHeight) {
266
+ return dispatch({
267
+ height: newHeight
268
+ });
269
+ };
270
+ var changeHandle = function changeHandle(evn) {
271
+ onChange && onChange(evn.target.value, evn, state);
272
+ if (textareaProps && textareaProps.onChange) {
273
+ textareaProps.onChange(evn);
274
+ }
275
+ if (state.textarea && state.textarea instanceof HTMLTextAreaElement && onStatistics) {
276
+ var obj = new _commands.TextAreaCommandOrchestrator(state.textarea);
277
+ var objState = obj.getState() || {};
278
+ onStatistics((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, objState), {}, {
279
+ lineCount: evn.target.value.split('\n').length,
280
+ length: evn.target.value.length
281
+ }));
282
+ }
283
+ };
284
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Context.EditorContext.Provider, {
285
+ value: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, state), {}, {
286
+ dispatch: dispatch
287
+ }),
288
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
289
+ ref: container,
290
+ className: cls
291
+ }, other), {}, {
292
+ onClick: containerClick,
293
+ style: containerStyle,
294
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.ToolbarVisibility, {
295
+ hideToolbar: hideToolbar,
296
+ toolbarBottom: toolbarBottom,
297
+ prefixCls: prefixCls,
298
+ overflow: overflow,
299
+ placement: "top"
300
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
301
+ className: "".concat(prefixCls, "-content"),
302
+ children: [/(edit|live)/.test(state.preview || '') && /*#__PURE__*/(0, _jsxRuntime.jsx)(TextAreaComponent, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
303
+ className: "".concat(prefixCls, "-input"),
304
+ prefixCls: prefixCls,
305
+ autoFocus: autoFocus
306
+ }, textareaProps), {}, {
307
+ onChange: changeHandle,
308
+ renderTextarea: (components === null || components === void 0 ? void 0 : components.textarea) || renderTextarea,
309
+ onScroll: function onScroll(e) {
310
+ return handleScroll(e, 'text');
311
+ }
312
+ })), /(live|preview)/.test(state.preview || '') && mdPreview]
313
+ }), visibleDragbar && !state.fullscreen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DragBar["default"], {
314
+ prefixCls: prefixCls,
315
+ height: state.height,
316
+ maxHeight: maxHeight,
317
+ minHeight: minHeight,
318
+ onChange: dragBarChange
319
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.ToolbarVisibility, {
320
+ hideToolbar: hideToolbar,
321
+ toolbarBottom: toolbarBottom,
322
+ prefixCls: prefixCls,
323
+ overflow: overflow,
324
+ placement: "bottom"
325
+ })]
326
+ }))
327
+ });
328
+ });
329
+ var Editor = InternalMDEditor;
330
+ Editor.Markdown = MarkdownPreview;
331
+ Editor.displayName = 'MDEditor';
332
+ return Editor;
333
+ }