fix: Fix issue where autoFocusEnd did not scroll to the bottom. #688

Author: jaywcjlove

core/README.md

@@ -613,6 +613,51 @@ export default function App() {
 }
 ```
 
+### Place the cursor at the end of the text
+
+```jsx mdx:preview
+import React from "react";
+import MDEditor from '@uiw/react-md-editor';
+
+const textSample = `# Welcome to the Markdown Editor!
+
+This is a sample of the **React Markdown Editor**.
+
+## ✨ Features
+- Real-time preview
+- Custom styling support
+- Code highlighting
+- Auto focus at the end of the text
+
+## 📦 Sample Code
+
+\`\`\`javascript
+function hello() {
+  console.log("Hello, world!");
+}
+\`\`\`
+
+## 🔗 Links
+
+Visit [uiwjs/react-md-editor](https://github.com/uiwjs/react-md-editor) for more information.
+`;
+
+export default function App() {
+  const [value, setValue] = React.useState(textSample);
+  return (
+    <div className="container">
+      <MDEditor
+        autoFocus={true}
+        value={value}
+        autoFocusEnd={true}
+        visibleDragbar={false}
+        onChange={setValue}
+      />
+    </div>
+  );
+}
+```
+
 ### Preview Markdown
 
 [![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/react-md-editor-preview-markdown-vrucl?fontsize=14&hidenavigation=1&theme=dark)
@@ -924,6 +969,7 @@ Inherit custom color variables by adding [`.wmde-markdown-var`](https://github.c
 - `commandsFilter?: (command: ICommand, isExtra: boolean) => false | ICommand`: Filter or modify your commands.
 - `extraCommands?: ICommand[]`: Displayed on the right side of the toolbar.
 - `autoFocus?: true`: Can be used to make `Markdown Editor` focus itself on initialization.
+- `autoFocusEnd?: false`: Can be used to make `Markdown Editor` focus on the end of text on initialization.
 - `previewOptions?: ReactMarkdown.ReactMarkdownProps`: This is reset [@uiw/react-markdown-preview](https://github.com/uiwjs/react-markdown-preview/tree/0036dd51a25c00d5be6dc83aa978905c64750038?tab=readme-ov-file#options-props) settings.
 - `textareaProps?: TextareaHTMLAttributes`: Set the `textarea` related props.
 - ~~`renderTextarea?: (props, opts) => JSX.Element;`~~: `@deprecated` Please use ~~`renderTextarea`~~ -> `components`. Use div to replace TextArea or re-render TextArea. [#193](https://github.com/uiwjs/react-md-editor/issues/193)

core/src/Types.ts

@@ -59,7 +59,7 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
    */
   visibleDragbar?: boolean;
   /**
-   * @deprecated use `visibleDragbar`
+   * @deprecated use {@link MDEditorProps.visibleDragbar}
    */
   visiableDragbar?: boolean;
   /**
@@ -92,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'];
   /**

core/src/components/TextArea/Textarea.tsx

@@ -20,6 +20,7 @@ export default function Textarea(props: TextAreaProps) {
     tabSize,
     defaultTabEnable,
     autoFocusEnd,
+    textareaWarp,
     dispatch,
     ...otherStore
   } = useContext(EditorContext);
@@ -41,17 +42,20 @@ export default function Textarea(props: TextAreaProps) {
   }, []);
 
   useEffect(() => {
-    if (autoFocusEnd && textRef.current) {
+    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);