@uiw/react-md-editor 4.0.11 → 4.1.1

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 (69) hide show
  1. package/README.md +91 -35
  2. package/common.d.ts +17 -0
  3. package/dist/mdeditor.css +105 -110
  4. package/dist/mdeditor.js +3280 -4534
  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 +285 -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/commands/list.js +3 -4
  17. package/esm/commands/title.js +5 -6
  18. package/esm/components/DragBar/index.js +3 -4
  19. package/esm/components/TextArea/Markdown.common.d.ts +5 -0
  20. package/esm/components/TextArea/Markdown.common.js +57 -0
  21. package/esm/components/TextArea/Markdown.js +6 -8
  22. package/esm/components/TextArea/Textarea.js +13 -17
  23. package/esm/components/TextArea/factory.d.ts +33 -0
  24. package/esm/components/TextArea/factory.js +102 -0
  25. package/esm/components/TextArea/index.common.d.ts +3 -0
  26. package/esm/components/TextArea/index.common.js +6 -0
  27. package/esm/components/TextArea/index.d.ts +3 -27
  28. package/esm/components/TextArea/index.js +5 -100
  29. package/esm/components/TextArea/index.nohighlight.d.ts +3 -27
  30. package/esm/components/TextArea/index.nohighlight.js +2 -93
  31. package/esm/components/Toolbar/Child.js +8 -9
  32. package/esm/components/Toolbar/index.js +22 -28
  33. package/esm/index.common.d.ts +16 -0
  34. package/esm/index.common.js +16 -0
  35. package/esm/react-markdown-preview.common.d.ts +4 -0
  36. package/esm/utils/markdownUtils.js +13 -17
  37. package/lib/Editor.common.d.ts +5 -0
  38. package/lib/Editor.common.js +15 -0
  39. package/lib/Editor.d.ts +4 -11
  40. package/lib/Editor.factory.d.ts +14 -0
  41. package/lib/Editor.factory.js +333 -0
  42. package/lib/Editor.js +4 -318
  43. package/lib/Editor.nohighlight.d.ts +4 -11
  44. package/lib/Editor.nohighlight.js +4 -318
  45. package/lib/components/TextArea/Markdown.common.d.ts +5 -0
  46. package/lib/components/TextArea/Markdown.common.js +68 -0
  47. package/lib/components/TextArea/factory.d.ts +33 -0
  48. package/lib/components/TextArea/factory.js +109 -0
  49. package/lib/components/TextArea/index.common.d.ts +3 -0
  50. package/lib/components/TextArea/index.common.js +14 -0
  51. package/lib/components/TextArea/index.d.ts +3 -27
  52. package/lib/components/TextArea/index.js +6 -98
  53. package/lib/components/TextArea/index.nohighlight.d.ts +3 -27
  54. package/lib/components/TextArea/index.nohighlight.js +3 -92
  55. package/lib/index.common.d.ts +16 -0
  56. package/lib/index.common.js +123 -0
  57. package/lib/react-markdown-preview.common.d.ts +4 -0
  58. package/package.json +8 -2
  59. package/src/Editor.common.tsx +7 -0
  60. package/src/Editor.factory.tsx +286 -0
  61. package/src/Editor.nohighlight.tsx +3 -271
  62. package/src/Editor.tsx +3 -271
  63. package/src/components/TextArea/Markdown.common.tsx +49 -0
  64. package/src/components/TextArea/factory.tsx +120 -0
  65. package/src/components/TextArea/index.common.tsx +6 -0
  66. package/src/components/TextArea/index.nohighlight.tsx +3 -108
  67. package/src/components/TextArea/index.tsx +3 -110
  68. package/src/index.common.tsx +19 -0
  69. package/src/react-markdown-preview.common.d.ts +4 -0
@@ -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/nohighlight';
6
2
  import TextArea from './components/TextArea/index.nohighlight';
7
- import { ToolbarVisibility } from "./components/Toolbar/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
+ });
@@ -12,10 +12,9 @@ export var makeList = (state, api, insertBefore) => {
12
12
  var breaksBefore = Array(breaksBeforeCount + 1).join('\n');
13
13
  var breaksAfterCount = getBreaksNeededForEmptyLineAfter(state1.text, state1.selection.end);
14
14
  var breaksAfter = Array(breaksAfterCount + 1).join('\n');
15
- var {
16
- modifiedText,
17
- insertionLength
18
- } = insertBeforeEachLine(state1.selectedText, insertBefore);
15
+ var _insertBeforeEachLine = insertBeforeEachLine(state1.selectedText, insertBefore),
16
+ modifiedText = _insertBeforeEachLine.modifiedText,
17
+ insertionLength = _insertBeforeEachLine.insertionLength;
19
18
  if (insertionLength < 0) {
20
19
  // Remove
21
20
  var selectionStart = state1.selection.start;
@@ -4,12 +4,11 @@ import { heading1 } from "./title1.js";
4
4
  import { selectLine, executeCommand } from "../utils/markdownUtils.js";
5
5
  import { jsx as _jsx } from "react/jsx-runtime";
6
6
  export function headingExecute(_ref) {
7
- var {
8
- state,
9
- api,
10
- prefix,
11
- suffix = prefix
12
- } = _ref;
7
+ var state = _ref.state,
8
+ api = _ref.api,
9
+ prefix = _ref.prefix,
10
+ _ref$suffix = _ref.suffix,
11
+ suffix = _ref$suffix === void 0 ? prefix : _ref$suffix;
13
12
  var newSelectionRange = selectLine({
14
13
  text: state.text,
15
14
  selection: state.selection
@@ -2,10 +2,9 @@ import React, { useEffect, useMemo, useRef } from 'react';
2
2
  import "./index.css";
3
3
  import { jsx as _jsx } from "react/jsx-runtime";
4
4
  var DragBar = props => {
5
- var {
6
- prefixCls,
7
- onChange
8
- } = props || {};
5
+ var _ref = props || {},
6
+ prefixCls = _ref.prefixCls,
7
+ onChange = _ref.onChange;
9
8
  var $dom = useRef(null);
10
9
  var dragRef = useRef();
11
10
  var heightRef = useRef(props.height);
@@ -0,0 +1,5 @@
1
+ import React from 'react';
2
+ import { type IProps } from '../../Types';
3
+ export interface MarkdownProps extends IProps, React.HTMLAttributes<HTMLPreElement> {
4
+ }
5
+ export default function Markdown(props: MarkdownProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,57 @@
1
+ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";
2
+ var _templateObject;
3
+ import React, { useContext, useEffect } from 'react';
4
+ import { rehype } from 'rehype';
5
+ import rehypePrism from 'rehype-prism-plus/common';
6
+ import { EditorContext } from "../../Context.js";
7
+ import { jsx as _jsx } from "react/jsx-runtime";
8
+ function html2Escape(sHtml) {
9
+ return sHtml.replace(/[<&"]/g, c => ({
10
+ '<': '&lt;',
11
+ '>': '&gt;',
12
+ '&': '&amp;',
13
+ '"': '&quot;'
14
+ })[c]);
15
+ }
16
+ export default function Markdown(props) {
17
+ var prefixCls = props.prefixCls;
18
+ var _useContext = useContext(EditorContext),
19
+ _useContext$markdown = _useContext.markdown,
20
+ markdown = _useContext$markdown === void 0 ? '' : _useContext$markdown,
21
+ highlightEnable = _useContext.highlightEnable,
22
+ dispatch = _useContext.dispatch;
23
+ var preRef = /*#__PURE__*/React.createRef();
24
+ useEffect(() => {
25
+ if (preRef.current && dispatch) {
26
+ dispatch({
27
+ textareaPre: preRef.current
28
+ });
29
+ }
30
+ // eslint-disable-next-line react-hooks/exhaustive-deps
31
+ }, []);
32
+ if (!markdown) {
33
+ return /*#__PURE__*/_jsx("pre", {
34
+ ref: preRef,
35
+ className: prefixCls + "-text-pre wmde-markdown-color"
36
+ });
37
+ }
38
+ var mdStr = "<pre class=\"language-markdown " + prefixCls + "-text-pre wmde-markdown-color\"><code class=\"language-markdown\">" + html2Escape(String.raw(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["", ""])), markdown)) + "\n</code></pre>";
39
+ if (highlightEnable) {
40
+ try {
41
+ mdStr = rehype().data('settings', {
42
+ fragment: true
43
+ })
44
+ // https://github.com/uiwjs/react-md-editor/issues/593
45
+ // @ts-ignore
46
+ .use(rehypePrism, {
47
+ ignoreMissing: true
48
+ }).processSync(mdStr).toString();
49
+ } catch (error) {}
50
+ }
51
+ return /*#__PURE__*/React.createElement('div', {
52
+ className: 'wmde-markdown-color',
53
+ dangerouslySetInnerHTML: {
54
+ __html: mdStr || ''
55
+ }
56
+ });
57
+ }
@@ -21,14 +21,12 @@ function html2Escape(sHtml) {
21
21
  })[c]);
22
22
  }
23
23
  export default function Markdown(props) {
24
- var {
25
- prefixCls
26
- } = props;
27
- var {
28
- markdown = '',
29
- highlightEnable,
30
- dispatch
31
- } = useContext(EditorContext);
24
+ var prefixCls = props.prefixCls;
25
+ var _useContext = useContext(EditorContext),
26
+ _useContext$markdown = _useContext.markdown,
27
+ markdown = _useContext$markdown === void 0 ? '' : _useContext$markdown,
28
+ highlightEnable = _useContext.highlightEnable,
29
+ dispatch = _useContext.dispatch;
32
30
  var preRef = /*#__PURE__*/React.createRef();
33
31
  useEffect(() => {
34
32
  if (preRef.current && dispatch) {
@@ -10,25 +10,21 @@ import shortcuts from "./shortcuts.js";
10
10
  import "./index.css";
11
11
  import { jsx as _jsx } from "react/jsx-runtime";
12
12
  export default function Textarea(props) {
13
- var {
14
- prefixCls,
15
- onChange: _onChange
16
- } = props,
13
+ var prefixCls = props.prefixCls,
14
+ _onChange = props.onChange,
17
15
  other = _objectWithoutPropertiesLoose(props, _excluded);
18
16
  var _useContext = useContext(EditorContext),
19
- {
20
- markdown,
21
- commands,
22
- fullscreen,
23
- preview,
24
- highlightEnable,
25
- extraCommands,
26
- tabSize,
27
- defaultTabEnable,
28
- autoFocusEnd,
29
- textareaWarp,
30
- dispatch
31
- } = _useContext,
17
+ markdown = _useContext.markdown,
18
+ commands = _useContext.commands,
19
+ fullscreen = _useContext.fullscreen,
20
+ preview = _useContext.preview,
21
+ highlightEnable = _useContext.highlightEnable,
22
+ extraCommands = _useContext.extraCommands,
23
+ tabSize = _useContext.tabSize,
24
+ defaultTabEnable = _useContext.defaultTabEnable,
25
+ autoFocusEnd = _useContext.autoFocusEnd,
26
+ textareaWarp = _useContext.textareaWarp,
27
+ dispatch = _useContext.dispatch,
32
28
  otherStore = _objectWithoutPropertiesLoose(_useContext, _excluded2);
33
29
  var textRef = React.useRef(null);
34
30
  var executeRef = React.useRef();
@@ -0,0 +1,33 @@
1
+ import React, { JSX } from 'react';
2
+ import { type ContextStore, type ExecuteCommandState } from '../../Context';
3
+ import { type TextAreaProps } from './Textarea';
4
+ import { type IProps } from '../../Types';
5
+ import { TextAreaCommandOrchestrator, type ICommand } from '../../commands/';
6
+ import './index.less';
7
+ export 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
+ type MarkdownComponent = React.ComponentType<{
27
+ prefixCls?: string;
28
+ }>;
29
+ export declare function createTextArea(options?: {
30
+ Markdown?: MarkdownComponent;
31
+ useMinHeight?: boolean;
32
+ }): (props: ITextAreaProps) => import("react/jsx-runtime").JSX.Element;
33
+ export {};
@@ -0,0 +1,102 @@
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, jsxs as _jsxs } from "react/jsx-runtime";
11
+ export function createTextArea(options) {
12
+ var _options$useMinHeight;
13
+ var MarkdownComponent = options == null ? void 0 : options.Markdown;
14
+ var useMinHeight = (_options$useMinHeight = options == null ? void 0 : options.useMinHeight) != null ? _options$useMinHeight : false;
15
+ return function TextArea(props) {
16
+ var _ref = props || {},
17
+ prefixCls = _ref.prefixCls,
18
+ className = _ref.className,
19
+ onScroll = _ref.onScroll,
20
+ renderTextarea = _ref.renderTextarea,
21
+ otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
22
+ var _useContext = useContext(EditorContext),
23
+ markdown = _useContext.markdown,
24
+ scrollTop = _useContext.scrollTop,
25
+ commands = _useContext.commands,
26
+ minHeight = _useContext.minHeight,
27
+ highlightEnable = _useContext.highlightEnable,
28
+ extraCommands = _useContext.extraCommands,
29
+ dispatch = _useContext.dispatch;
30
+ var textRef = React.useRef(null);
31
+ var executeRef = React.useRef();
32
+ var warp = /*#__PURE__*/React.createRef();
33
+ useEffect(() => {
34
+ var state = {};
35
+ if (warp.current) {
36
+ state.textareaWarp = warp.current || undefined;
37
+ warp.current.scrollTop = scrollTop || 0;
38
+ }
39
+ if (dispatch) {
40
+ dispatch(_extends({}, state));
41
+ }
42
+ // eslint-disable-next-line react-hooks/exhaustive-deps
43
+ }, []);
44
+ useEffect(() => {
45
+ if (textRef.current && dispatch) {
46
+ var commandOrchestrator = new TextAreaCommandOrchestrator(textRef.current);
47
+ executeRef.current = commandOrchestrator;
48
+ dispatch({
49
+ textarea: textRef.current,
50
+ commandOrchestrator
51
+ });
52
+ }
53
+ // eslint-disable-next-line react-hooks/exhaustive-deps
54
+ }, []);
55
+ var textStyle = MarkdownComponent && highlightEnable ? {} : {
56
+ WebkitTextFillColor: 'initial',
57
+ overflow: 'auto'
58
+ };
59
+ return /*#__PURE__*/_jsx("div", {
60
+ ref: warp,
61
+ className: prefixCls + "-area " + (className || ''),
62
+ onScroll: onScroll,
63
+ children: /*#__PURE__*/_jsx("div", {
64
+ className: prefixCls + "-text",
65
+ style: useMinHeight ? {
66
+ minHeight
67
+ } : undefined,
68
+ children: renderTextarea ? (/*#__PURE__*/React.cloneElement(renderTextarea(_extends({}, otherProps, {
69
+ value: markdown,
70
+ autoComplete: 'off',
71
+ autoCorrect: 'off',
72
+ spellCheck: 'false',
73
+ autoCapitalize: 'off',
74
+ className: prefixCls + "-text-input",
75
+ style: {
76
+ WebkitTextFillColor: 'inherit',
77
+ overflow: 'auto'
78
+ }
79
+ }), {
80
+ dispatch,
81
+ onChange: otherProps.onChange,
82
+ shortcuts,
83
+ useContext: {
84
+ commands,
85
+ extraCommands,
86
+ commandOrchestrator: executeRef.current
87
+ }
88
+ }), {
89
+ ref: textRef
90
+ })) : /*#__PURE__*/_jsxs(Fragment, {
91
+ children: [MarkdownComponent && highlightEnable && /*#__PURE__*/_jsx(MarkdownComponent, {
92
+ prefixCls: prefixCls
93
+ }), /*#__PURE__*/_jsx(Textarea, _extends({
94
+ prefixCls: prefixCls
95
+ }, otherProps, {
96
+ style: textStyle
97
+ }))]
98
+ })
99
+ })
100
+ });
101
+ };
102
+ }
@@ -0,0 +1,3 @@
1
+ export type { ITextAreaProps, RenderTextareaHandle, TextAreaRef } from './factory';
2
+ declare const _default: (props: import("./factory").ITextAreaProps) => import("react/jsx-runtime").JSX.Element;
3
+ export default _default;
@@ -0,0 +1,6 @@
1
+ import Markdown from './Markdown.common';
2
+ import { createTextArea } from "./factory.js";
3
+ export default createTextArea({
4
+ Markdown,
5
+ useMinHeight: true
6
+ });
@@ -1,27 +1,3 @@
1
- import React, { JSX } from 'react';
2
- import { type ContextStore, type ExecuteCommandState } from '../../Context';
3
- import { type TextAreaProps } from './Textarea';
4
- import { type IProps } from '../../Types';
5
- import { TextAreaCommandOrchestrator, type 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 {};
1
+ export type { ITextAreaProps, RenderTextareaHandle, TextAreaRef } from './factory';
2
+ declare const _default: (props: import("./factory").ITextAreaProps) => import("react/jsx-runtime").JSX.Element;
3
+ export default _default;