@uiw/react-md-editor 4.0.6 → 4.0.7

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 (21) hide show
  1. package/README.md +47 -1
  2. package/dist/mdeditor.js +8 -6
  3. package/dist/mdeditor.min.js +1 -1
  4. package/esm/Context.d.ts +2 -0
  5. package/esm/Editor.js +5 -1
  6. package/esm/Editor.nohighlight.js +5 -1
  7. package/esm/Types.d.ts +6 -2
  8. package/esm/components/TextArea/Textarea.js +18 -1
  9. package/esm/index.css +1 -0
  10. package/lib/Context.d.ts +2 -0
  11. package/lib/Editor.js +8 -1
  12. package/lib/Editor.nohighlight.js +8 -1
  13. package/lib/Types.d.ts +6 -2
  14. package/lib/components/TextArea/Textarea.js +18 -1
  15. package/markdown-editor.css +1 -0
  16. package/package.json +1 -1
  17. package/src/Context.tsx +1 -0
  18. package/src/Editor.nohighlight.tsx +2 -0
  19. package/src/Editor.tsx +2 -0
  20. package/src/Types.ts +6 -2
  21. package/src/components/TextArea/Textarea.tsx +18 -0
package/esm/Context.d.ts CHANGED
@@ -12,6 +12,7 @@ export interface ContextStore {
12
12
  fullscreen?: boolean;
13
13
  highlightEnable?: boolean;
14
14
  autoFocus?: boolean;
15
+ autoFocusEnd?: boolean;
15
16
  textarea?: HTMLTextAreaElement;
16
17
  commandOrchestrator?: TextAreaCommandOrchestrator;
17
18
  textareaWarp?: HTMLDivElement;
@@ -37,6 +38,7 @@ export declare function reducer(state: ContextStore, action: ContextStore): {
37
38
  fullscreen?: boolean;
38
39
  highlightEnable?: boolean;
39
40
  autoFocus?: boolean;
41
+ autoFocusEnd?: boolean;
40
42
  textarea?: HTMLTextAreaElement;
41
43
  commandOrchestrator?: TextAreaCommandOrchestrator;
42
44
  textareaWarp?: HTMLDivElement;
package/esm/Editor.js CHANGED
@@ -1,6 +1,6 @@
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", "onStatistics", "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", "autoFocusEnd", "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 { ToolbarVisibility } from "./components/Toolbar/index.js";
@@ -40,6 +40,7 @@ var InternalMDEditor = /*#__PURE__*/React.forwardRef((props, ref) => {
40
40
  maxHeight = 1200,
41
41
  minHeight = 100,
42
42
  autoFocus,
43
+ autoFocusEnd = false,
43
44
  tabSize = 2,
44
45
  defaultTabEnable = false,
45
46
  onChange,
@@ -110,6 +111,9 @@ var InternalMDEditor = /*#__PURE__*/React.forwardRef((props, ref) => {
110
111
  useMemo(() => autoFocus !== state.autoFocus && dispatch({
111
112
  autoFocus: autoFocus
112
113
  }), [autoFocus]);
114
+ useMemo(() => autoFocusEnd !== state.autoFocusEnd && dispatch({
115
+ autoFocusEnd: autoFocusEnd
116
+ }), [autoFocusEnd]);
113
117
  useMemo(() => fullscreen !== state.fullscreen && dispatch({
114
118
  fullscreen: fullscreen
115
119
  }),
package/esm/Editor.nohighlight.js CHANGED
@@ -1,6 +1,6 @@
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", "onStatistics", "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", "autoFocusEnd", "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/nohighlight';
6
6
  import TextArea from './components/TextArea/index.nohighlight';
@@ -40,6 +40,7 @@ var InternalMDEditor = /*#__PURE__*/React.forwardRef((props, ref) => {
40
40
  maxHeight = 1200,
41
41
  minHeight = 100,
42
42
  autoFocus,
43
+ autoFocusEnd = false,
43
44
  tabSize = 2,
44
45
  defaultTabEnable = false,
45
46
  onChange,
@@ -110,6 +111,9 @@ var InternalMDEditor = /*#__PURE__*/React.forwardRef((props, ref) => {
110
111
  useMemo(() => autoFocus !== state.autoFocus && dispatch({
111
112
  autoFocus: autoFocus
112
113
  }), [autoFocus]);
114
+ useMemo(() => autoFocusEnd !== state.autoFocusEnd && dispatch({
115
+ autoFocusEnd: autoFocusEnd
116
+ }), [autoFocusEnd]);
113
117
  useMemo(() => fullscreen !== state.fullscreen && dispatch({
114
118
  fullscreen: fullscreen
115
119
  }),
package/esm/Types.d.ts CHANGED
@@ -34,6 +34,10 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
34
34
  * or it has an `autofocus` attribute and no other element is focused.
35
35
  */
36
36
  autoFocus?: ITextAreaProps['autoFocus'];
37
+ /**
38
+ * Can be used to make `Markdown Editor` focus on the end of text on initialization.
39
+ */
40
+ autoFocusEnd?: boolean;
37
41
  /**
38
42
  * The height of the editor.
39
43
  * ⚠️ `Dragbar` is invalid when **`height`** parameter percentage.
@@ -52,7 +56,7 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
52
56
  */
53
57
  visibleDragbar?: boolean;
54
58
  /**
55
- * @deprecated use `visibleDragbar`
59
+ * @deprecated use {@link MDEditorProps.visibleDragbar}
56
60
  */
57
61
  visiableDragbar?: boolean;
58
62
  /**
@@ -85,7 +89,7 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
85
89
  textareaProps?: ITextAreaProps;
86
90
  /**
87
91
  * Use div to replace TextArea or re-render TextArea
88
- * @deprecated Please use ~~`renderTextarea`~~ -> `components`
92
+ * @deprecated Please use {@link components}
89
93
  */
90
94
  renderTextarea?: ITextAreaProps['renderTextarea'];
91
95
  /**
package/esm/components/TextArea/Textarea.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
3
3
  var _excluded = ["prefixCls", "onChange"],
4
- _excluded2 = ["markdown", "commands", "fullscreen", "preview", "highlightEnable", "extraCommands", "tabSize", "defaultTabEnable", "dispatch"];
4
+ _excluded2 = ["markdown", "commands", "fullscreen", "preview", "highlightEnable", "extraCommands", "tabSize", "defaultTabEnable", "autoFocusEnd", "textareaWarp", "dispatch"];
5
5
  import React, { useContext, useEffect } from 'react';
6
6
  import { EditorContext } from "../../Context.js";
7
7
  import { TextAreaCommandOrchestrator } from "../../commands/index.js";
@@ -25,6 +25,8 @@ export default function Textarea(props) {
25
25
  extraCommands,
26
26
  tabSize,
27
27
  defaultTabEnable,
28
+ autoFocusEnd,
29
+ textareaWarp,
28
30
  dispatch
29
31
  } = _useContext,
30
32
  otherStore = _objectWithoutPropertiesLoose(_useContext, _excluded2);
@@ -52,6 +54,21 @@ export default function Textarea(props) {
52
54
  }
53
55
  // eslint-disable-next-line react-hooks/exhaustive-deps
54
56
  }, []);
57
+ useEffect(() => {
58
+ if (autoFocusEnd && textRef.current && textareaWarp) {
59
+ textRef.current.focus();
60
+ var length = textRef.current.value.length;
61
+ textRef.current.setSelectionRange(length, length);
62
+ setTimeout(() => {
63
+ if (textareaWarp) {
64
+ textareaWarp.scrollTop = textareaWarp.scrollHeight;
65
+ }
66
+ if (textRef.current) {
67
+ textRef.current.scrollTop = textRef.current.scrollHeight;
68
+ }
69
+ }, 0);
70
+ }
71
+ }, [textareaWarp]);
55
72
  var onKeyDown = e => {
56
73
  handleKeyDown(e, tabSize, defaultTabEnable);
57
74
  shortcuts(e, [...(commands || []), ...(extraCommands || [])], executeRef.current, dispatch, statesRef.current);
package/esm/index.css CHANGED
@@ -27,6 +27,7 @@
27
27
  text-align: right !important;
28
28
  }
29
29
  .w-md-editor-toolbar {
30
+ height: -webkit-fit-content;
30
31
  height: fit-content;
31
32
  }
32
33
  .w-md-editor-content {
package/lib/Context.d.ts CHANGED
@@ -12,6 +12,7 @@ export interface ContextStore {
12
12
  fullscreen?: boolean;
13
13
  highlightEnable?: boolean;
14
14
  autoFocus?: boolean;
15
+ autoFocusEnd?: boolean;
15
16
  textarea?: HTMLTextAreaElement;
16
17
  commandOrchestrator?: TextAreaCommandOrchestrator;
17
18
  textareaWarp?: HTMLDivElement;
@@ -37,6 +38,7 @@ export declare function reducer(state: ContextStore, action: ContextStore): {
37
38
  fullscreen?: boolean;
38
39
  highlightEnable?: boolean;
39
40
  autoFocus?: boolean;
41
+ autoFocusEnd?: boolean;
40
42
  textarea?: HTMLTextAreaElement;
41
43
  commandOrchestrator?: TextAreaCommandOrchestrator;
42
44
  textareaWarp?: HTMLDivElement;
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", "onStatistics", "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", "autoFocusEnd", "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) {
@@ -59,6 +59,8 @@ var InternalMDEditor = /*#__PURE__*/_react["default"].forwardRef(function (props
59
59
  _ref$minHeight = _ref.minHeight,
60
60
  minHeight = _ref$minHeight === void 0 ? 100 : _ref$minHeight,
61
61
  autoFocus = _ref.autoFocus,
62
+ _ref$autoFocusEnd = _ref.autoFocusEnd,
63
+ autoFocusEnd = _ref$autoFocusEnd === void 0 ? false : _ref$autoFocusEnd,
62
64
  _ref$tabSize = _ref.tabSize,
63
65
  tabSize = _ref$tabSize === void 0 ? 2 : _ref$tabSize,
64
66
  _ref$defaultTabEnable = _ref.defaultTabEnable,
@@ -152,6 +154,11 @@ var InternalMDEditor = /*#__PURE__*/_react["default"].forwardRef(function (props
152
154
  autoFocus: autoFocus
153
155
  });
154
156
  }, [autoFocus]);
157
+ (0, _react.useMemo)(function () {
158
+ return autoFocusEnd !== state.autoFocusEnd && dispatch({
159
+ autoFocusEnd: autoFocusEnd
160
+ });
161
+ }, [autoFocusEnd]);
155
162
  (0, _react.useMemo)(function () {
156
163
  return fullscreen !== state.fullscreen && dispatch({
157
164
  fullscreen: fullscreen
package/lib/Editor.nohighlight.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", "onStatistics", "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", "autoFocusEnd", "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) {
@@ -59,6 +59,8 @@ var InternalMDEditor = /*#__PURE__*/_react["default"].forwardRef(function (props
59
59
  _ref$minHeight = _ref.minHeight,
60
60
  minHeight = _ref$minHeight === void 0 ? 100 : _ref$minHeight,
61
61
  autoFocus = _ref.autoFocus,
62
+ _ref$autoFocusEnd = _ref.autoFocusEnd,
63
+ autoFocusEnd = _ref$autoFocusEnd === void 0 ? false : _ref$autoFocusEnd,
62
64
  _ref$tabSize = _ref.tabSize,
63
65
  tabSize = _ref$tabSize === void 0 ? 2 : _ref$tabSize,
64
66
  _ref$defaultTabEnable = _ref.defaultTabEnable,
@@ -152,6 +154,11 @@ var InternalMDEditor = /*#__PURE__*/_react["default"].forwardRef(function (props
152
154
  autoFocus: autoFocus
153
155
  });
154
156
  }, [autoFocus]);
157
+ (0, _react.useMemo)(function () {
158
+ return autoFocusEnd !== state.autoFocusEnd && dispatch({
159
+ autoFocusEnd: autoFocusEnd
160
+ });
161
+ }, [autoFocusEnd]);
155
162
  (0, _react.useMemo)(function () {
156
163
  return fullscreen !== state.fullscreen && dispatch({
157
164
  fullscreen: fullscreen
package/lib/Types.d.ts CHANGED
@@ -34,6 +34,10 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
34
34
  * or it has an `autofocus` attribute and no other element is focused.
35
35
  */
36
36
  autoFocus?: ITextAreaProps['autoFocus'];
37
+ /**
38
+ * Can be used to make `Markdown Editor` focus on the end of text on initialization.
39
+ */
40
+ autoFocusEnd?: boolean;
37
41
  /**
38
42
  * The height of the editor.
39
43
  * ⚠️ `Dragbar` is invalid when **`height`** parameter percentage.
@@ -52,7 +56,7 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
52
56
  */
53
57
  visibleDragbar?: boolean;
54
58
  /**
55
- * @deprecated use `visibleDragbar`
59
+ * @deprecated use {@link MDEditorProps.visibleDragbar}
56
60
  */
57
61
  visiableDragbar?: boolean;
58
62
  /**
@@ -85,7 +89,7 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
85
89
  textareaProps?: ITextAreaProps;
86
90
  /**
87
91
  * Use div to replace TextArea or re-render TextArea
88
- * @deprecated Please use ~~`renderTextarea`~~ -> `components`
92
+ * @deprecated Please use {@link components}
89
93
  */
90
94
  renderTextarea?: ITextAreaProps['renderTextarea'];
91
95
  /**
package/lib/components/TextArea/Textarea.js CHANGED
@@ -16,7 +16,7 @@ var _handleKeyDown = _interopRequireDefault(require("./handleKeyDown"));
16
16
  var _shortcuts = _interopRequireDefault(require("./shortcuts"));
17
17
  var _jsxRuntime = require("react/jsx-runtime");
18
18
  var _excluded = ["prefixCls", "onChange"],
19
- _excluded2 = ["markdown", "commands", "fullscreen", "preview", "highlightEnable", "extraCommands", "tabSize", "defaultTabEnable", "dispatch"];
19
+ _excluded2 = ["markdown", "commands", "fullscreen", "preview", "highlightEnable", "extraCommands", "tabSize", "defaultTabEnable", "autoFocusEnd", "textareaWarp", "dispatch"];
20
20
  function Textarea(props) {
21
21
  var prefixCls = props.prefixCls,
22
22
  _onChange = props.onChange,
@@ -30,6 +30,8 @@ function Textarea(props) {
30
30
  extraCommands = _useContext.extraCommands,
31
31
  tabSize = _useContext.tabSize,
32
32
  defaultTabEnable = _useContext.defaultTabEnable,
33
+ autoFocusEnd = _useContext.autoFocusEnd,
34
+ textareaWarp = _useContext.textareaWarp,
33
35
  dispatch = _useContext.dispatch,
34
36
  otherStore = (0, _objectWithoutProperties2["default"])(_useContext, _excluded2);
35
37
  var textRef = _react["default"].useRef(null);
@@ -56,6 +58,21 @@ function Textarea(props) {
56
58
  }
57
59
  // eslint-disable-next-line react-hooks/exhaustive-deps
58
60
  }, []);
61
+ (0, _react.useEffect)(function () {
62
+ if (autoFocusEnd && textRef.current && textareaWarp) {
63
+ textRef.current.focus();
64
+ var length = textRef.current.value.length;
65
+ textRef.current.setSelectionRange(length, length);
66
+ setTimeout(function () {
67
+ if (textareaWarp) {
68
+ textareaWarp.scrollTop = textareaWarp.scrollHeight;
69
+ }
70
+ if (textRef.current) {
71
+ textRef.current.scrollTop = textRef.current.scrollHeight;
72
+ }
73
+ }, 0);
74
+ }
75
+ }, [textareaWarp]);
59
76
  var onKeyDown = function onKeyDown(e) {
60
77
  (0, _handleKeyDown["default"])(e, tabSize, defaultTabEnable);
61
78
  (0, _shortcuts["default"])(e, [].concat((0, _toConsumableArray2["default"])(commands || []), (0, _toConsumableArray2["default"])(extraCommands || [])), executeRef.current, dispatch, statesRef.current);
package/markdown-editor.css CHANGED
@@ -271,6 +271,7 @@
271
271
  text-align: right !important;
272
272
  }
273
273
  .w-md-editor-toolbar {
274
+ height: -webkit-fit-content;
274
275
  height: fit-content;
275
276
  }
276
277
  .w-md-editor-content {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uiw/react-md-editor",
3
- "version": "4.0.6",
3
+ "version": "4.0.7",
4
4
  "description": "A markdown editor with preview, implemented with React.js and TypeScript.",
5
5
  "homepage": "https://uiwjs.github.io/react-md-editor/",
6
6
  "funding": "https://jaywcjlove.github.io/#/sponsor",
package/src/Context.tsx CHANGED
@@ -14,6 +14,7 @@ export interface ContextStore {
14
14
  fullscreen?: boolean;
15
15
  highlightEnable?: boolean;
16
16
  autoFocus?: boolean;
17
+ autoFocusEnd?: boolean;
17
18
  textarea?: HTMLTextAreaElement;
18
19
  commandOrchestrator?: TextAreaCommandOrchestrator;
19
20
  textareaWarp?: HTMLDivElement;
package/src/Editor.nohighlight.tsx CHANGED
@@ -38,6 +38,7 @@ const InternalMDEditor = React.forwardRef<RefMDEditor, MDEditorProps>(
38
38
  maxHeight = 1200,
39
39
  minHeight = 100,
40
40
  autoFocus,
41
+ autoFocusEnd = false,
41
42
  tabSize = 2,
42
43
  defaultTabEnable = false,
43
44
  onChange,
@@ -117,6 +118,7 @@ const InternalMDEditor = React.forwardRef<RefMDEditor, MDEditorProps>(
117
118
  );
118
119
  // eslint-disable-next-line react-hooks/exhaustive-deps
119
120
  useMemo(() => autoFocus !== state.autoFocus && dispatch({ autoFocus: autoFocus }), [autoFocus]);
121
+ useMemo(() => autoFocusEnd !== state.autoFocusEnd && dispatch({ autoFocusEnd: autoFocusEnd }), [autoFocusEnd]);
120
122
  useMemo(
121
123
  () => fullscreen !== state.fullscreen && dispatch({ fullscreen: fullscreen }),
122
124
  // eslint-disable-next-line react-hooks/exhaustive-deps
package/src/Editor.tsx CHANGED
@@ -38,6 +38,7 @@ const InternalMDEditor = React.forwardRef<RefMDEditor, MDEditorProps>(
38
38
  maxHeight = 1200,
39
39
  minHeight = 100,
40
40
  autoFocus,
41
+ autoFocusEnd = false,
41
42
  tabSize = 2,
42
43
  defaultTabEnable = false,
43
44
  onChange,
@@ -117,6 +118,7 @@ const InternalMDEditor = React.forwardRef<RefMDEditor, MDEditorProps>(
117
118
  );
118
119
  // eslint-disable-next-line react-hooks/exhaustive-deps
119
120
  useMemo(() => autoFocus !== state.autoFocus && dispatch({ autoFocus: autoFocus }), [autoFocus]);
121
+ useMemo(() => autoFocusEnd !== state.autoFocusEnd && dispatch({ autoFocusEnd: autoFocusEnd }), [autoFocusEnd]);
120
122
  useMemo(
121
123
  () => fullscreen !== state.fullscreen && dispatch({ fullscreen: fullscreen }),
122
124
  // eslint-disable-next-line react-hooks/exhaustive-deps
package/src/Types.ts CHANGED
@@ -37,6 +37,10 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
37
37
  * or it has an `autofocus` attribute and no other element is focused.
38
38
  */
39
39
  autoFocus?: ITextAreaProps['autoFocus'];
40
+ /**
41
+ * Can be used to make `Markdown Editor` focus on the end of text on initialization.
42
+ */
43
+ autoFocusEnd?: boolean;
40
44
  /**
41
45
  * The height of the editor.
42
46
  * ⚠️ `Dragbar` is invalid when **`height`** parameter percentage.
@@ -55,7 +59,7 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
55
59
  */
56
60
  visibleDragbar?: boolean;
57
61
  /**
58
- * @deprecated use `visibleDragbar`
62
+ * @deprecated use {@link MDEditorProps.visibleDragbar}
59
63
  */
60
64
  visiableDragbar?: boolean;
61
65
  /**
@@ -88,7 +92,7 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
88
92
  textareaProps?: ITextAreaProps;
89
93
  /**
90
94
  * Use div to replace TextArea or re-render TextArea
91
- * @deprecated Please use ~~`renderTextarea`~~ -> `components`
95
+ * @deprecated Please use {@link components}
92
96
  */
93
97
  renderTextarea?: ITextAreaProps['renderTextarea'];
94
98
  /**
package/src/components/TextArea/Textarea.tsx CHANGED
@@ -19,6 +19,8 @@ export default function Textarea(props: TextAreaProps) {
19
19
  extraCommands,
20
20
  tabSize,
21
21
  defaultTabEnable,
22
+ autoFocusEnd,
23
+ textareaWarp,
22
24
  dispatch,
23
25
  ...otherStore
24
26
  } = useContext(EditorContext);
@@ -39,6 +41,22 @@ export default function Textarea(props: TextAreaProps) {
39
41
  // eslint-disable-next-line react-hooks/exhaustive-deps
40
42
  }, []);
41
43
 
44
+ useEffect(() => {
45
+ if (autoFocusEnd && textRef.current && textareaWarp) {
46
+ textRef.current.focus();
47
+ const length = textRef.current.value.length;
48
+ textRef.current.setSelectionRange(length, length);
49
+ setTimeout(() => {
50
+ if (textareaWarp) {
51
+ textareaWarp.scrollTop = textareaWarp.scrollHeight;
52
+ }
53
+ if (textRef.current) {
54
+ textRef.current.scrollTop = textRef.current.scrollHeight;
55
+ }
56
+ }, 0);
57
+ }
58
+ }, [textareaWarp]);
59
+
42
60
  const onKeyDown = (e: KeyboardEvent | React.KeyboardEvent<HTMLTextAreaElement>) => {
43
61
  handleKeyDown(e, tabSize, defaultTabEnable);
44
62
  shortcuts(e, [...(commands || []), ...(extraCommands || [])], executeRef.current, dispatch, statesRef.current);