@uiw/react-md-editor 3.21.1 → 3.23.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 (28) hide show
  1. package/README.md +1 -0
  2. package/dist/mdeditor.css +30 -25
  3. package/dist/mdeditor.js +2 -2
  4. package/dist/mdeditor.min.css +1 -1
  5. package/dist/mdeditor.min.js +1 -1
  6. package/esm/Editor.d.ts +9 -1
  7. package/esm/Editor.js +19 -9
  8. package/esm/components/TextArea/index.css +8 -12
  9. package/esm/components/TextArea/index.less +8 -10
  10. package/esm/components/Toolbar/Child.css +2 -2
  11. package/esm/components/Toolbar/Child.less +3 -3
  12. package/esm/components/Toolbar/index.css +6 -6
  13. package/esm/components/Toolbar/index.less +6 -6
  14. package/esm/index.css +8 -5
  15. package/esm/index.less +9 -6
  16. package/lib/Editor.d.ts +9 -1
  17. package/lib/Editor.js +18 -8
  18. package/lib/components/TextArea/index.less +8 -10
  19. package/lib/components/Toolbar/Child.less +3 -3
  20. package/lib/components/Toolbar/index.less +6 -6
  21. package/lib/index.less +9 -6
  22. package/markdown-editor.css +24 -25
  23. package/package.json +1 -1
  24. package/src/Editor.tsx +27 -7
  25. package/src/components/TextArea/index.less +8 -10
  26. package/src/components/Toolbar/Child.less +3 -3
  27. package/src/components/Toolbar/index.less +6 -6
  28. package/src/index.less +9 -6
package/esm/Editor.d.ts CHANGED
@@ -1,13 +1,19 @@
1
1
  import React, { CSSProperties, PropsWithRef } from 'react';
2
2
  import MarkdownPreview, { MarkdownPreviewProps } from '@uiw/react-markdown-preview';
3
3
  import { ITextAreaProps } from './components/TextArea';
4
- import { ICommand } from './commands';
4
+ import { ICommand, TextState } from './commands';
5
5
  import { ContextStore, PreviewType } from './Context';
6
6
  import './index.less';
7
7
  export interface IProps {
8
8
  prefixCls?: string;
9
9
  className?: string;
10
10
  }
11
+ export interface Statistics extends TextState {
12
+ /** total length of the document */
13
+ length: number;
14
+ /** Get the number of lines in the editor. */
15
+ lineCount: number;
16
+ }
11
17
  export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, IProps {
12
18
  /**
13
19
  * The Markdown value.
@@ -21,6 +27,8 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
21
27
  * editor height change listener
22
28
  */
23
29
  onHeightChange?: (value?: CSSProperties['height'], oldValue?: CSSProperties['height'], state?: ContextStore) => void;
30
+ /** Some data on the statistics editor. */
31
+ onStatistics?: (data: Statistics) => void;
24
32
  /**
25
33
  * Can be used to make `Markdown Editor` focus itself on initialization. Defaults to on.
26
34
  * it will be set to true when either the source `textarea` is focused,
package/esm/Editor.js CHANGED
@@ -1,12 +1,12 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
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", "tabSize", "defaultTabEnable", "onChange", "onHeightChange", "hideToolbar", "toolbarBottom", "components", "renderTextarea"];
3
+ 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"];
4
4
  import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle } from 'react';
5
5
  import MarkdownPreview from '@uiw/react-markdown-preview';
6
6
  import TextArea from './components/TextArea';
7
7
  import Toolbar from './components/Toolbar';
8
8
  import DragBar from './components/DragBar';
9
- import { getCommands, getExtraCommands } from './commands';
9
+ import { getCommands, getExtraCommands, TextAreaCommandOrchestrator } from './commands';
10
10
  import { reducer, EditorContext } from './Context';
11
11
  import "./index.css";
12
12
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -44,7 +44,8 @@ var InternalMDEditor = (props, ref) => {
44
44
  autoFocus,
45
45
  tabSize = 2,
46
46
  defaultTabEnable = false,
47
- onChange: _onChange,
47
+ onChange,
48
+ onStatistics,
48
49
  onHeightChange,
49
50
  hideToolbar,
50
51
  toolbarBottom = false,
@@ -197,6 +198,20 @@ var InternalMDEditor = (props, ref) => {
197
198
  var dragBarChange = newHeight => dispatch({
198
199
  height: newHeight
199
200
  });
201
+ var changeHandle = evn => {
202
+ onChange && onChange(evn.target.value, evn, state);
203
+ if (textareaProps && textareaProps.onChange) {
204
+ textareaProps.onChange(evn);
205
+ }
206
+ if (state.textarea && state.textarea instanceof HTMLTextAreaElement && onStatistics) {
207
+ var obj = new TextAreaCommandOrchestrator(state.textarea);
208
+ var objState = obj.getState() || {};
209
+ onStatistics(_extends({}, objState, {
210
+ lineCount: evn.target.value.split('\n').length,
211
+ length: evn.target.value.length
212
+ }));
213
+ }
214
+ };
200
215
  return /*#__PURE__*/_jsx(EditorContext.Provider, {
201
216
  value: _extends({}, state, {
202
217
  dispatch
@@ -218,12 +233,7 @@ var InternalMDEditor = (props, ref) => {
218
233
  prefixCls: prefixCls,
219
234
  autoFocus: autoFocus
220
235
  }, textareaProps, {
221
- onChange: evn => {
222
- _onChange && _onChange(evn.target.value, evn, state);
223
- if (textareaProps && textareaProps.onChange) {
224
- textareaProps.onChange(evn);
225
- }
226
- },
236
+ onChange: changeHandle,
227
237
  renderTextarea: (components == null ? void 0 : components.textarea) || renderTextarea,
228
238
  onScroll: e => handleScroll(e, 'text')
229
239
  })), /(live|preview)/.test(state.preview || '') && mdPreview]
package/esm/components/TextArea/index.css CHANGED
@@ -26,6 +26,7 @@
26
26
  box-sizing: inherit;
27
27
  display: inherit;
28
28
  font-family: inherit;
29
+ font-family: var(--md-editor-font-family) !important;
29
30
  font-size: inherit;
30
31
  font-style: inherit;
31
32
  -webkit-font-variant-ligatures: inherit;
@@ -43,11 +44,6 @@
43
44
  word-break: normal;
44
45
  padding: 0;
45
46
  }
46
- .w-md-editor-text-pre > code,
47
- .w-md-editor-text-input > code,
48
- .w-md-editor-text > .w-md-editor-text-pre > code {
49
- font-family: inherit;
50
- }
51
47
  .w-md-editor-text-pre {
52
48
  position: relative;
53
49
  margin: 0px !important;
@@ -56,7 +52,7 @@
56
52
  }
57
53
  .w-md-editor-text-pre > code {
58
54
  padding: 0 !important;
59
- font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
55
+ font-family: var(--md-editor-font-family) !important;
60
56
  font-size: 14px !important;
61
57
  line-height: 18px !important;
62
58
  }
@@ -101,17 +97,17 @@
101
97
  }
102
98
  }
103
99
  .w-md-editor-text-pre .punctuation {
104
- color: var(--color-prettylights-syntax-comment) !important;
100
+ color: var(--color-prettylights-syntax-comment, #8b949e) !important;
105
101
  }
106
102
  .w-md-editor-text-pre .token.url,
107
103
  .w-md-editor-text-pre .token.content {
108
- color: var(--color-prettylights-syntax-constant) !important;
104
+ color: var(--color-prettylights-syntax-constant, #0550ae) !important;
109
105
  }
110
106
  .w-md-editor-text-pre .token.title.important {
111
- color: var(--color-prettylights-syntax-markup-bold);
107
+ color: var(--color-prettylights-syntax-markup-bold, #24292f);
112
108
  }
113
109
  .w-md-editor-text-pre .token.code-block .function {
114
- color: var(--color-prettylights-syntax-entity);
110
+ color: var(--color-prettylights-syntax-entity, #8250df);
115
111
  }
116
112
  .w-md-editor-text-pre .token.bold {
117
113
  font-weight: unset !important;
@@ -122,9 +118,9 @@
122
118
  font-weight: unset !important;
123
119
  }
124
120
  .w-md-editor-text-pre .token.code.keyword {
125
- color: var(--color-prettylights-syntax-constant) !important;
121
+ color: var(--color-prettylights-syntax-constant, #0550ae) !important;
126
122
  }
127
123
  .w-md-editor-text-pre .token.strike,
128
124
  .w-md-editor-text-pre .token.strike .content {
129
- color: var(--color-prettylights-syntax-markup-deleted-text) !important;
125
+ color: var(--color-prettylights-syntax-markup-deleted-text, #82071e) !important;
130
126
  }
package/esm/components/TextArea/index.less CHANGED
@@ -27,6 +27,7 @@
27
27
  box-sizing: inherit;
28
28
  display: inherit;
29
29
  font-family: inherit;
30
+ font-family: var(--md-editor-font-family) !important;
30
31
  font-size: inherit;
31
32
  font-style: inherit;
32
33
  font-variant-ligatures: inherit;
@@ -42,9 +43,6 @@
42
43
  word-break: inherit;
43
44
  word-break: normal;
44
45
  padding: 0;
45
- > code {
46
- font-family: inherit;
47
- }
48
46
  }
49
47
  &-pre {
50
48
  position: relative;
@@ -53,7 +51,7 @@
53
51
  background-color: transparent !important;
54
52
  > code {
55
53
  padding: 0 !important;
56
- font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
54
+ font-family: var(--md-editor-font-family) !important;
57
55
  font-size: 14px !important;
58
56
  line-height: 18px !important;
59
57
  }
@@ -103,17 +101,17 @@
103
101
 
104
102
  .@{md-editor}-text-pre {
105
103
  .punctuation {
106
- color: var(--color-prettylights-syntax-comment) !important;
104
+ color: var(--color-prettylights-syntax-comment, #8b949e) !important;
107
105
  }
108
106
  .token.url,
109
107
  .token.content {
110
- color: var(--color-prettylights-syntax-constant) !important;
108
+ color: var(--color-prettylights-syntax-constant, #0550ae) !important;
111
109
  }
112
110
  .token.title.important {
113
- color: var(--color-prettylights-syntax-markup-bold);
111
+ color: var(--color-prettylights-syntax-markup-bold, #24292f);
114
112
  }
115
113
  .token.code-block .function {
116
- color: var(--color-prettylights-syntax-entity);
114
+ color: var(--color-prettylights-syntax-entity, #8250df);
117
115
  }
118
116
  .token.bold {
119
117
  font-weight: unset !important;
@@ -124,10 +122,10 @@
124
122
  font-weight: unset !important;
125
123
  }
126
124
  .token.code.keyword {
127
- color: var(--color-prettylights-syntax-constant) !important;
125
+ color: var(--color-prettylights-syntax-constant, #0550ae) !important;
128
126
  }
129
127
  .token.strike,
130
128
  .token.strike .content {
131
- color: var(--color-prettylights-syntax-markup-deleted-text) !important;
129
+ color: var(--color-prettylights-syntax-markup-deleted-text, #82071e) !important;
132
130
  }
133
131
  }
package/esm/components/Toolbar/Child.css CHANGED
@@ -1,8 +1,8 @@
1
1
  .w-md-editor-toolbar-child {
2
2
  position: absolute;
3
3
  border-radius: 3px;
4
- box-shadow: 0 0 0 1px var(--color-border-default), 0 0 0 var(--color-border-default), 0 1px 1px var(--color-border-default);
5
- background-color: var(--color-canvas-default);
4
+ box-shadow: 0 0 0 1px var(--md-editor-box-shadow-color), 0 0 0 var(--md-editor-box-shadow-color), 0 1px 1px var(--md-editor-box-shadow-color);
5
+ background-color: var(--md-editor-background-color);
6
6
  z-index: 1;
7
7
  display: none;
8
8
  }
package/esm/components/Toolbar/Child.less CHANGED
@@ -4,9 +4,9 @@
4
4
  &-toolbar-child {
5
5
  position: absolute;
6
6
  border-radius: 3px;
7
- box-shadow: 0 0 0 1px var(--color-border-default), 0 0 0 var(--color-border-default),
8
- 0 1px 1px var(--color-border-default);
9
- background-color: var(--color-canvas-default);
7
+ box-shadow: 0 0 0 1px var(--md-editor-box-shadow-color), 0 0 0 var(--md-editor-box-shadow-color),
8
+ 0 1px 1px var(--md-editor-box-shadow-color);
9
+ background-color: var(--md-editor-background-color);
10
10
  z-index: 1;
11
11
  display: none;
12
12
  &.active {
package/esm/components/Toolbar/index.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .w-md-editor-toolbar {
2
- border-bottom: 1px solid var(--color-border-default);
3
- background-color: var(--color-canvas-default);
2
+ border-bottom: 1px solid var(--md-editor-box-shadow-color);
3
+ background-color: var(--md-editor-background-color);
4
4
  padding: 5px 5px;
5
5
  display: flex;
6
6
  justify-content: space-between;
@@ -12,7 +12,7 @@
12
12
  }
13
13
  .w-md-editor-toolbar.bottom {
14
14
  border-bottom: 0px;
15
- border-top: 1px solid var(--color-border-default);
15
+ border-top: 1px solid var(--md-editor-box-shadow-color);
16
16
  border-radius: 0 0 3px 3px;
17
17
  }
18
18
  .w-md-editor-toolbar ul,
@@ -56,12 +56,12 @@
56
56
  color: var(--color-danger-fg);
57
57
  }
58
58
  .w-md-editor-toolbar li > button:disabled {
59
- color: var(--color-border-default);
59
+ color: var(--md-editor-box-shadow-color);
60
60
  cursor: not-allowed;
61
61
  }
62
62
  .w-md-editor-toolbar li > button:disabled:hover {
63
63
  background-color: transparent;
64
- color: var(--color-border-default);
64
+ color: var(--md-editor-box-shadow-color);
65
65
  }
66
66
  .w-md-editor-toolbar li.active > button {
67
67
  color: var(--color-accent-fg);
@@ -72,5 +72,5 @@
72
72
  width: 1px;
73
73
  margin: -3px 3px 0 3px !important;
74
74
  vertical-align: middle;
75
- background-color: var(--color-border-default);
75
+ background-color: var(--md-editor-box-shadow-color);
76
76
  }
package/esm/components/Toolbar/index.less CHANGED
@@ -2,8 +2,8 @@
2
2
 
3
3
  .@{md-editor} {
4
4
  &-toolbar {
5
- border-bottom: 1px solid var(--color-border-default);
6
- background-color: var(--color-canvas-default);
5
+ border-bottom: 1px solid var(--md-editor-box-shadow-color);
6
+ background-color: var(--md-editor-background-color);
7
7
  padding: 5px 5px;
8
8
  display: flex;
9
9
  justify-content: space-between;
@@ -13,7 +13,7 @@
13
13
  flex-wrap: wrap;
14
14
  &.bottom {
15
15
  border-bottom: 0px;
16
- border-top: 1px solid var(--color-border-default);
16
+ border-top: 1px solid var(--md-editor-box-shadow-color);
17
17
  border-radius: 0 0 3px 3px;
18
18
  }
19
19
  ul,
@@ -55,11 +55,11 @@
55
55
  color: var(--color-danger-fg);
56
56
  }
57
57
  &:disabled {
58
- color: var(--color-border-default);
58
+ color: var(--md-editor-box-shadow-color);
59
59
  cursor: not-allowed;
60
60
  &:hover {
61
61
  background-color: transparent;
62
- color: var(--color-border-default);
62
+ color: var(--md-editor-box-shadow-color);
63
63
  }
64
64
  }
65
65
  }
@@ -73,7 +73,7 @@
73
73
  width: 1px;
74
74
  margin: -3px 3px 0 3px !important;
75
75
  vertical-align: middle;
76
- background-color: var(--color-border-default);
76
+ background-color: var(--md-editor-box-shadow-color);
77
77
  }
78
78
  }
79
79
  }
package/esm/index.css CHANGED
@@ -4,8 +4,11 @@
4
4
  padding-bottom: 1px;
5
5
  position: relative;
6
6
  color: var(--color-fg-default);
7
- box-shadow: 0 0 0 1px var(--color-border-default), 0 0 0 var(--color-border-default), 0 1px 1px var(--color-border-default);
8
- background-color: var(--color-canvas-default);
7
+ --md-editor-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
8
+ --md-editor-background-color: var(--color-canvas-default, #ffffff);
9
+ --md-editor-box-shadow-color: var(--color-border-default, #d0d7de);
10
+ box-shadow: 0 0 0 1px var(--md-editor-box-shadow-color), 0 0 0 var(--md-editor-box-shadow-color), 0 1px 1px var(--md-editor-box-shadow-color);
11
+ background-color: var(--md-editor-background-color);
9
12
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
10
13
  display: flex;
11
14
  flex-direction: column;
@@ -18,7 +21,7 @@
18
21
  right: unset !important;
19
22
  left: 0;
20
23
  text-align: right !important;
21
- box-shadow: inset -1px 0 0 0 var(--color-border-default);
24
+ box-shadow: inset -1px 0 0 0 var(--md-editor-box-shadow-color);
22
25
  }
23
26
  .w-md-editor.w-md-editor-rtl .w-md-editor-text {
24
27
  text-align: right !important;
@@ -47,7 +50,7 @@
47
50
  .w-md-editor-preview {
48
51
  width: 50%;
49
52
  box-sizing: border-box;
50
- box-shadow: inset 1px 0 0 0 var(--color-border-default);
53
+ box-shadow: inset 1px 0 0 0 var(--md-editor-box-shadow-color);
51
54
  position: absolute;
52
55
  padding: 10px 20px;
53
56
  overflow: auto;
@@ -67,7 +70,7 @@
67
70
  .w-md-editor-show-preview .w-md-editor-input {
68
71
  width: 0%;
69
72
  overflow: hidden;
70
- background-color: var(--color-canvas-default);
73
+ background-color: var(--md-editor-background-color);
71
74
  }
72
75
  .w-md-editor-show-preview .w-md-editor-preview {
73
76
  width: 100%;
package/esm/index.less CHANGED
@@ -6,9 +6,12 @@
6
6
  padding-bottom: 1px;
7
7
  position: relative;
8
8
  color: var(--color-fg-default);
9
- box-shadow: 0 0 0 1px var(--color-border-default), 0 0 0 var(--color-border-default),
10
- 0 1px 1px var(--color-border-default);
11
- background-color: var(--color-canvas-default);
9
+ --md-editor-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
10
+ --md-editor-background-color: var(--color-canvas-default, #ffffff);
11
+ --md-editor-box-shadow-color: var(--color-border-default, #d0d7de);
12
+ box-shadow: 0 0 0 1px var(--md-editor-box-shadow-color), 0 0 0 var(--md-editor-box-shadow-color),
13
+ 0 1px 1px var(--md-editor-box-shadow-color);
14
+ background-color: var(--md-editor-background-color);
12
15
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
13
16
  display: flex;
14
17
  flex-direction: column;
@@ -20,7 +23,7 @@
20
23
  right: unset !important;
21
24
  left: 0;
22
25
  text-align: right !important;
23
- box-shadow: inset -1px 0 0 0 var(--color-border-default);
26
+ box-shadow: inset -1px 0 0 0 var(--md-editor-box-shadow-color);
24
27
  }
25
28
  &&-rtl &-text {
26
29
  text-align: right !important;
@@ -48,7 +51,7 @@
48
51
  &-preview {
49
52
  width: 50%;
50
53
  box-sizing: border-box;
51
- box-shadow: inset 1px 0 0 0 var(--color-border-default);
54
+ box-shadow: inset 1px 0 0 0 var(--md-editor-box-shadow-color);
52
55
  position: absolute;
53
56
  padding: 10px 20px;
54
57
  overflow: auto;
@@ -70,7 +73,7 @@
70
73
  &-show-preview &-input {
71
74
  width: 0%;
72
75
  overflow: hidden;
73
- background-color: var(--color-canvas-default);
76
+ background-color: var(--md-editor-background-color);
74
77
  }
75
78
  &-show-preview &-preview {
76
79
  width: 100%;
package/lib/Editor.d.ts CHANGED
@@ -1,13 +1,19 @@
1
1
  import React, { CSSProperties, PropsWithRef } from 'react';
2
2
  import MarkdownPreview, { MarkdownPreviewProps } from '@uiw/react-markdown-preview';
3
3
  import { ITextAreaProps } from './components/TextArea';
4
- import { ICommand } from './commands';
4
+ import { ICommand, TextState } from './commands';
5
5
  import { ContextStore, PreviewType } from './Context';
6
6
  import './index.less';
7
7
  export interface IProps {
8
8
  prefixCls?: string;
9
9
  className?: string;
10
10
  }
11
+ export interface Statistics extends TextState {
12
+ /** total length of the document */
13
+ length: number;
14
+ /** Get the number of lines in the editor. */
15
+ lineCount: number;
16
+ }
11
17
  export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, IProps {
12
18
  /**
13
19
  * The Markdown value.
@@ -21,6 +27,8 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
21
27
  * editor height change listener
22
28
  */
23
29
  onHeightChange?: (value?: CSSProperties['height'], oldValue?: CSSProperties['height'], state?: ContextStore) => void;
30
+ /** Some data on the statistics editor. */
31
+ onStatistics?: (data: Statistics) => void;
24
32
  /**
25
33
  * Can be used to make `Markdown Editor` focus itself on initialization. Defaults to on.
26
34
  * it will be set to true when either the source `textarea` is focused,
package/lib/Editor.js CHANGED
@@ -17,7 +17,7 @@ var _DragBar = _interopRequireDefault(require("./components/DragBar"));
17
17
  var _commands = require("./commands");
18
18
  var _Context = require("./Context");
19
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", "onHeightChange", "hideToolbar", "toolbarBottom", "components", "renderTextarea"];
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
21
  function setGroupPopFalse() {
22
22
  var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
23
23
  Object.keys(data).forEach(function (keyname) {
@@ -63,7 +63,8 @@ var InternalMDEditor = function InternalMDEditor(props, ref) {
63
63
  tabSize = _ref$tabSize === void 0 ? 2 : _ref$tabSize,
64
64
  _ref$defaultTabEnable = _ref.defaultTabEnable,
65
65
  defaultTabEnable = _ref$defaultTabEnable === void 0 ? false : _ref$defaultTabEnable,
66
- _onChange = _ref.onChange,
66
+ onChange = _ref.onChange,
67
+ onStatistics = _ref.onStatistics,
67
68
  onHeightChange = _ref.onHeightChange,
68
69
  hideToolbar = _ref.hideToolbar,
69
70
  _ref$toolbarBottom = _ref.toolbarBottom,
@@ -255,6 +256,20 @@ var InternalMDEditor = function InternalMDEditor(props, ref) {
255
256
  height: newHeight
256
257
  });
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
+ };
258
273
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Context.EditorContext.Provider, {
259
274
  value: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, state), {}, {
260
275
  dispatch: dispatch
@@ -276,12 +291,7 @@ var InternalMDEditor = function InternalMDEditor(props, ref) {
276
291
  prefixCls: prefixCls,
277
292
  autoFocus: autoFocus
278
293
  }, textareaProps), {}, {
279
- onChange: function onChange(evn) {
280
- _onChange && _onChange(evn.target.value, evn, state);
281
- if (textareaProps && textareaProps.onChange) {
282
- textareaProps.onChange(evn);
283
- }
284
- },
294
+ onChange: changeHandle,
285
295
  renderTextarea: (components === null || components === void 0 ? void 0 : components.textarea) || renderTextarea,
286
296
  onScroll: function onScroll(e) {
287
297
  return handleScroll(e, 'text');
package/lib/components/TextArea/index.less CHANGED
@@ -27,6 +27,7 @@
27
27
  box-sizing: inherit;
28
28
  display: inherit;
29
29
  font-family: inherit;
30
+ font-family: var(--md-editor-font-family) !important;
30
31
  font-size: inherit;
31
32
  font-style: inherit;
32
33
  font-variant-ligatures: inherit;
@@ -42,9 +43,6 @@
42
43
  word-break: inherit;
43
44
  word-break: normal;
44
45
  padding: 0;
45
- > code {
46
- font-family: inherit;
47
- }
48
46
  }
49
47
  &-pre {
50
48
  position: relative;
@@ -53,7 +51,7 @@
53
51
  background-color: transparent !important;
54
52
  > code {
55
53
  padding: 0 !important;
56
- font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
54
+ font-family: var(--md-editor-font-family) !important;
57
55
  font-size: 14px !important;
58
56
  line-height: 18px !important;
59
57
  }
@@ -103,17 +101,17 @@
103
101
 
104
102
  .@{md-editor}-text-pre {
105
103
  .punctuation {
106
- color: var(--color-prettylights-syntax-comment) !important;
104
+ color: var(--color-prettylights-syntax-comment, #8b949e) !important;
107
105
  }
108
106
  .token.url,
109
107
  .token.content {
110
- color: var(--color-prettylights-syntax-constant) !important;
108
+ color: var(--color-prettylights-syntax-constant, #0550ae) !important;
111
109
  }
112
110
  .token.title.important {
113
- color: var(--color-prettylights-syntax-markup-bold);
111
+ color: var(--color-prettylights-syntax-markup-bold, #24292f);
114
112
  }
115
113
  .token.code-block .function {
116
- color: var(--color-prettylights-syntax-entity);
114
+ color: var(--color-prettylights-syntax-entity, #8250df);
117
115
  }
118
116
  .token.bold {
119
117
  font-weight: unset !important;
@@ -124,10 +122,10 @@
124
122
  font-weight: unset !important;
125
123
  }
126
124
  .token.code.keyword {
127
- color: var(--color-prettylights-syntax-constant) !important;
125
+ color: var(--color-prettylights-syntax-constant, #0550ae) !important;
128
126
  }
129
127
  .token.strike,
130
128
  .token.strike .content {
131
- color: var(--color-prettylights-syntax-markup-deleted-text) !important;
129
+ color: var(--color-prettylights-syntax-markup-deleted-text, #82071e) !important;
132
130
  }
133
131
  }
package/lib/components/Toolbar/Child.less CHANGED
@@ -4,9 +4,9 @@
4
4
  &-toolbar-child {
5
5
  position: absolute;
6
6
  border-radius: 3px;
7
- box-shadow: 0 0 0 1px var(--color-border-default), 0 0 0 var(--color-border-default),
8
- 0 1px 1px var(--color-border-default);
9
- background-color: var(--color-canvas-default);
7
+ box-shadow: 0 0 0 1px var(--md-editor-box-shadow-color), 0 0 0 var(--md-editor-box-shadow-color),
8
+ 0 1px 1px var(--md-editor-box-shadow-color);
9
+ background-color: var(--md-editor-background-color);
10
10
  z-index: 1;
11
11
  display: none;
12
12
  &.active {
package/lib/components/Toolbar/index.less CHANGED
@@ -2,8 +2,8 @@
2
2
 
3
3
  .@{md-editor} {
4
4
  &-toolbar {
5
- border-bottom: 1px solid var(--color-border-default);
6
- background-color: var(--color-canvas-default);
5
+ border-bottom: 1px solid var(--md-editor-box-shadow-color);
6
+ background-color: var(--md-editor-background-color);
7
7
  padding: 5px 5px;
8
8
  display: flex;
9
9
  justify-content: space-between;
@@ -13,7 +13,7 @@
13
13
  flex-wrap: wrap;
14
14
  &.bottom {
15
15
  border-bottom: 0px;
16
- border-top: 1px solid var(--color-border-default);
16
+ border-top: 1px solid var(--md-editor-box-shadow-color);
17
17
  border-radius: 0 0 3px 3px;
18
18
  }
19
19
  ul,
@@ -55,11 +55,11 @@
55
55
  color: var(--color-danger-fg);
56
56
  }
57
57
  &:disabled {
58
- color: var(--color-border-default);
58
+ color: var(--md-editor-box-shadow-color);
59
59
  cursor: not-allowed;
60
60
  &:hover {
61
61
  background-color: transparent;
62
- color: var(--color-border-default);
62
+ color: var(--md-editor-box-shadow-color);
63
63
  }
64
64
  }
65
65
  }
@@ -73,7 +73,7 @@
73
73
  width: 1px;
74
74
  margin: -3px 3px 0 3px !important;
75
75
  vertical-align: middle;
76
- background-color: var(--color-border-default);
76
+ background-color: var(--md-editor-box-shadow-color);
77
77
  }
78
78
  }
79
79
  }
package/lib/index.less CHANGED
@@ -6,9 +6,12 @@
6
6
  padding-bottom: 1px;
7
7
  position: relative;
8
8
  color: var(--color-fg-default);
9
- box-shadow: 0 0 0 1px var(--color-border-default), 0 0 0 var(--color-border-default),
10
- 0 1px 1px var(--color-border-default);
11
- background-color: var(--color-canvas-default);
9
+ --md-editor-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
10
+ --md-editor-background-color: var(--color-canvas-default, #ffffff);
11
+ --md-editor-box-shadow-color: var(--color-border-default, #d0d7de);
12
+ box-shadow: 0 0 0 1px var(--md-editor-box-shadow-color), 0 0 0 var(--md-editor-box-shadow-color),
13
+ 0 1px 1px var(--md-editor-box-shadow-color);
14
+ background-color: var(--md-editor-background-color);
12
15
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
13
16
  display: flex;
14
17
  flex-direction: column;
@@ -20,7 +23,7 @@
20
23
  right: unset !important;
21
24
  left: 0;
22
25
  text-align: right !important;
23
- box-shadow: inset -1px 0 0 0 var(--color-border-default);
26
+ box-shadow: inset -1px 0 0 0 var(--md-editor-box-shadow-color);
24
27
  }
25
28
  &&-rtl &-text {
26
29
  text-align: right !important;
@@ -48,7 +51,7 @@
48
51
  &-preview {
49
52
  width: 50%;
50
53
  box-sizing: border-box;
51
- box-shadow: inset 1px 0 0 0 var(--color-border-default);
54
+ box-shadow: inset 1px 0 0 0 var(--md-editor-box-shadow-color);
52
55
  position: absolute;
53
56
  padding: 10px 20px;
54
57
  overflow: auto;
@@ -70,7 +73,7 @@
70
73
  &-show-preview &-input {
71
74
  width: 0%;
72
75
  overflow: hidden;
73
- background-color: var(--color-canvas-default);
76
+ background-color: var(--md-editor-background-color);
74
77
  }
75
78
  &-show-preview &-preview {
76
79
  width: 100%;