@uiw/react-md-editor 4.0.5 → 4.0.7

package/src/Types.ts

@@ -37,6 +37,10 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
    * or it has an `autofocus` attribute and no other element is focused.
    */
   autoFocus?: ITextAreaProps['autoFocus'];
+  /**
+   * Can be used to make `Markdown Editor` focus on the end of text on initialization.
+   */
+  autoFocusEnd?: boolean;
   /**
    * The height of the editor.
    * ⚠️ `Dragbar` is invalid when **`height`** parameter percentage.
@@ -55,7 +59,7 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
    */
   visibleDragbar?: boolean;
   /**
-   * @deprecated use `visibleDragbar`
+   * @deprecated use {@link MDEditorProps.visibleDragbar}
    */
   visiableDragbar?: boolean;
   /**
@@ -88,7 +92,7 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
   textareaProps?: ITextAreaProps;
   /**
    * Use div to replace TextArea or re-render TextArea
-   * @deprecated Please use ~~`renderTextarea`~~ -> `components`
+   * @deprecated Please use {@link components}
    */
   renderTextarea?: ITextAreaProps['renderTextarea'];
   /**

package/src/commands/bold.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ICommand, ExecuteState, TextAreaTextApi } from './';
+import { type ICommand, type ExecuteState, TextAreaTextApi } from './';
 import { selectWord, executeCommand } from '../utils/markdownUtils';
 
 export const bold: ICommand = {

package/src/commands/code.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ICommand, ExecuteState, TextAreaTextApi } from './';
+import { type ICommand, type ExecuteState, TextAreaTextApi } from './';
 import { selectWord, executeCommand } from '../utils/markdownUtils';
 
 export const codeBlock: ICommand = {

package/src/commands/comment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ICommand, ExecuteState, TextAreaTextApi } from './';
+import { type ICommand, type ExecuteState, TextAreaTextApi } from './';
 import { selectWord, executeCommand } from '../utils/markdownUtils';
 
 export const comment: ICommand = {

package/src/commands/divider.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ICommand } from './';
+import { type ICommand } from './';
 
 export const divider: ICommand = {
   keyCommand: 'divider',

package/src/commands/fullscreen.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { ICommand, TextState, TextAreaTextApi } from './';
-import { ContextStore, ExecuteCommandState } from '../Context';
+import { type ICommand, TextState, type TextAreaTextApi } from './';
+import { type ContextStore, type ExecuteCommandState } from '../Context';
 
 export const fullscreen: ICommand = {
   name: 'fullscreen',

package/src/commands/group.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ICommand, ICommandChildCommands, ICommandChildHandle } from './';
+import { type ICommand, type ICommandChildCommands, type ICommandChildHandle } from './';
 
 export type GroupOptions = Omit<ICommand<string>, 'children'> & {
   children?: ICommandChildHandle['children'];

package/src/commands/help.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ICommand, ExecuteState, TextAreaTextApi } from './';
+import { type ICommand } from './';
 
 export const help: ICommand = {
   name: 'help',

package/src/commands/hr.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ICommand, ExecuteState, TextAreaTextApi } from './';
+import { type ICommand, type ExecuteState, TextAreaTextApi } from './';
 import { selectWord, executeCommand } from '../utils/markdownUtils';
 
 export const hr: ICommand = {

package/src/commands/image.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ICommand, ExecuteState, TextAreaTextApi } from './';
+import { type ICommand, type ExecuteState, TextAreaTextApi } from './';
 import { selectWord, executeCommand } from '../utils/markdownUtils';
 
 export const image: ICommand = {

package/src/commands/index.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ContextStore, ExecuteCommandState } from '../Context';
+import { type ContextStore, ExecuteCommandState } from '../Context';
 import { insertTextAtPosition } from '../utils/InsertTextAtPosition';
 import { bold } from './bold';
 import { code, codeBlock } from './code';

package/src/commands/issue.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ICommand, ExecuteState, TextAreaTextApi } from './';
+import { type ICommand, type ExecuteState, TextAreaTextApi } from './';
 import { selectWord, executeCommand } from '../utils/markdownUtils';
 
 export const issue: ICommand = {

package/src/commands/italic.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ICommand, ExecuteState, TextAreaTextApi } from './';
+import { type ICommand, type ExecuteState, TextAreaTextApi } from './';
 import { selectWord, executeCommand } from '../utils/markdownUtils';
 
 export const italic: ICommand = {

package/src/commands/link.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ICommand, ExecuteState, TextAreaTextApi } from './';
+import { type ICommand, type ExecuteState, TextAreaTextApi } from './';
 import { selectWord, executeCommand } from '../utils/markdownUtils';
 
 export const link: ICommand = {

package/src/commands/list.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ICommand, ExecuteState, TextAreaTextApi } from './';
+import { type ICommand, type ExecuteState, TextAreaTextApi } from './';
 import {
   selectWord,
   getBreaksNeededForEmptyLineBefore,

package/src/commands/preview.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { ICommand, TextState, TextAreaTextApi } from './';
-import { ContextStore, ExecuteCommandState } from '../Context';
+import { type ICommand, type TextState, TextAreaTextApi } from './';
+import { type ContextStore, type ExecuteCommandState } from '../Context';
 
 export const codePreview: ICommand = {
   name: 'preview',

package/src/commands/quote.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ICommand, ExecuteState, TextAreaTextApi } from './';
+import { type ICommand, type ExecuteState, TextAreaTextApi } from './';
 import {
   getBreaksNeededForEmptyLineBefore,
   getBreaksNeededForEmptyLineAfter,

package/src/components/TextArea/Textarea.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect } from 'react';
 import { IProps } from '../../Types';
 import { EditorContext, ExecuteCommandState } from '../../Context';
-import { TextAreaCommandOrchestrator } from '../../commands';
+import { TextAreaCommandOrchestrator } from '../../commands/';
 import handleKeyDown from './handleKeyDown';
 import shortcuts from './shortcuts';
 import './index.less';
@@ -19,6 +19,8 @@ export default function Textarea(props: TextAreaProps) {
     extraCommands,
     tabSize,
     defaultTabEnable,
+    autoFocusEnd,
+    textareaWarp,
     dispatch,
     ...otherStore
   } = useContext(EditorContext);
@@ -39,6 +41,22 @@ export default function Textarea(props: TextAreaProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    if (autoFocusEnd && textRef.current && textareaWarp) {
+      textRef.current.focus();
+      const length = textRef.current.value.length;
+      textRef.current.setSelectionRange(length, length);
+      setTimeout(() => {
+        if (textareaWarp) {
+          textareaWarp.scrollTop = textareaWarp.scrollHeight;
+        }
+        if (textRef.current) {
+          textRef.current.scrollTop = textRef.current.scrollHeight;
+        }
+      }, 0);
+    }
+  }, [textareaWarp]);
+
   const onKeyDown = (e: KeyboardEvent | React.KeyboardEvent<HTMLTextAreaElement>) => {
     handleKeyDown(e, tabSize, defaultTabEnable);
     shortcuts(e, [...(commands || []), ...(extraCommands || [])], executeRef.current, dispatch, statesRef.current);

package/src/components/TextArea/handleKeyDown.tsx

@@ -1,6 +1,6 @@
 import { insertTextAtPosition } from '../../utils/InsertTextAtPosition';
 import { insertBeforeEachLine, selectLine } from '../../utils/markdownUtils';
-import { TextAreaTextApi } from '../../commands';
+import { TextAreaTextApi } from '../../commands/';
 
 /**
  * - `13` - `Enter`

package/src/components/TextArea/index.nohighlight.tsx

@@ -3,7 +3,7 @@ import { EditorContext, ContextStore, ExecuteCommandState } from '../../Context'
 import shortcuts from './shortcuts';
 import Textarea, { TextAreaProps } from './Textarea';
 import { IProps } from '../../Types';
-import { TextAreaCommandOrchestrator, ICommand } from '../../commands';
+import { TextAreaCommandOrchestrator, ICommand } from '../../commands/';
 import './index.less';
 
 type RenderTextareaHandle = {

package/src/components/TextArea/index.tsx

@@ -4,7 +4,7 @@ import shortcuts from './shortcuts';
 import Markdown from './Markdown';
 import Textarea, { TextAreaProps } from './Textarea';
 import { IProps } from '../../Types';
-import { TextAreaCommandOrchestrator, ICommand } from '../../commands';
+import { TextAreaCommandOrchestrator, ICommand } from '../../commands/';
 import './index.less';
 
 type RenderTextareaHandle = {

package/src/components/TextArea/shortcuts.ts

@@ -1,4 +1,4 @@
-import { ICommand, TextAreaCommandOrchestrator } from '../../commands';
+import { ICommand, TextAreaCommandOrchestrator } from '../../commands/';
 import { ContextStore, ExecuteCommandState } from '../../Context';
 
 function getCommands(data: ICommand[] = [], resulte: Record<string, ICommand> = {}): Record<string, ICommand> {

package/src/components/Toolbar/index.tsx

@@ -1,7 +1,7 @@
 import React, { Fragment, useContext, useEffect, useRef } from 'react';
 import { IProps } from '../../Types';
 import { EditorContext, PreviewType, ContextStore } from '../../Context';
-import { ICommand } from '../../commands';
+import { ICommand } from '../../commands/';
 import Child from './Child';
 import './index.less';
 

package/src/index.nohighlight.tsx

@@ -1,9 +1,9 @@
 import MDEditor from './Editor.nohighlight';
-import * as commands from './commands';
+import * as commands from './commands/';
 import * as MarkdownUtil from './utils/markdownUtils';
 import './index.less';
 
-export * from './commands';
+export * from './commands/';
 export * from './commands/group';
 export * from './utils/markdownUtils';
 export * from './utils/InsertTextAtPosition';

package/src/index.tsx

@@ -1,9 +1,9 @@
 import MDEditor from './Editor';
-import * as commands from './commands';
+import * as commands from './commands/';
 import * as MarkdownUtil from './utils/markdownUtils';
 import './index.less';
 
-export * from './commands';
+export * from './commands/';
 export * from './commands/group';
 export * from './utils/markdownUtils';
 export * from './utils/InsertTextAtPosition';

package/src/utils/markdownUtils.ts

@@ -1,5 +1,4 @@
-import { TextRange } from '../commands';
-import { TextAreaTextApi, ExecuteState } from '../commands';
+import { TextAreaTextApi, type TextRange } from '../commands';
 
 export interface TextSection {
   text: string;