From a7d9a2c266200579e083f70b63effafd08c328d3 Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Fri, 10 Nov 2023 11:36:23 +0800
Subject: [PATCH] fix: fix `minHeight` props issue. (#589)

---
 core/README.md                         | 24 ++++++++++++++++++++++++
 core/src/Editor.nohighlight.tsx        |  1 +
 core/src/Editor.tsx                    |  1 +
 core/src/components/TextArea/index.tsx |  5 +++--
 4 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/core/README.md b/core/README.md
index 95f3ef3ad..8f744df08 100644
--- a/core/README.md
+++ b/core/README.md
@@ -515,6 +515,30 @@ export default function App() {
 }
 ```
 
+### Editor height adapts to text
+
+The initial height can be adjusted through `minHeight={100}`. Dragbar will automatically expire. You can hide the drag button through `visibleDragbar={true}`
+
+```jsx mdx:preview
+import React from "react";
+import MDEditor from '@uiw/react-md-editor';
+
+export default function App() {
+  const [value, setValue] = React.useState("**Hello world!!!**");
+  return (
+    <div className="container">
+      <MDEditor
+        value={value}
+        height="100%"
+        // minHeight={50}
+        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)
diff --git a/core/src/Editor.nohighlight.tsx b/core/src/Editor.nohighlight.tsx
index 6841e8987..3086d3726 100644
--- a/core/src/Editor.nohighlight.tsx
+++ b/core/src/Editor.nohighlight.tsx
@@ -60,6 +60,7 @@ const InternalMDEditor = React.forwardRef<RefMDEditor, MDEditorProps>(
       preview: previewType,
       components,
       height,
+      minHeight,
       highlightEnable,
       tabSize,
       defaultTabEnable,
diff --git a/core/src/Editor.tsx b/core/src/Editor.tsx
index 82d990349..7ce96caf0 100644
--- a/core/src/Editor.tsx
+++ b/core/src/Editor.tsx
@@ -60,6 +60,7 @@ const InternalMDEditor = React.forwardRef<RefMDEditor, MDEditorProps>(
       preview: previewType,
       components,
       height,
+      minHeight,
       highlightEnable,
       tabSize,
       defaultTabEnable,
diff --git a/core/src/components/TextArea/index.tsx b/core/src/components/TextArea/index.tsx
index 6a3700952..d320101b6 100644
--- a/core/src/components/TextArea/index.tsx
+++ b/core/src/components/TextArea/index.tsx
@@ -42,7 +42,8 @@ export type TextAreaRef = {
 
 export default function TextArea(props: ITextAreaProps) {
   const { prefixCls, className, onScroll, renderTextarea, ...otherProps } = props || {};
-  const { markdown, scrollTop, commands, highlightEnable, extraCommands, dispatch } = useContext(EditorContext);
+  const { markdown, scrollTop, commands, minHeight, highlightEnable, extraCommands, dispatch } =
+    useContext(EditorContext);
   const textRef = React.useRef<HTMLTextAreaElement>(null);
   const executeRef = React.useRef<TextAreaCommandOrchestrator>();
   const warp = React.createRef<HTMLDivElement>();
@@ -71,7 +72,7 @@ export default function TextArea(props: ITextAreaProps) {
 
   return (
     <div ref={warp} className={`${prefixCls}-area ${className || ''}`} onScroll={onScroll}>
-      <div className={`${prefixCls}-text`}>
+      <div className={`${prefixCls}-text`} style={{ minHeight }}>
         {renderTextarea ? (
           React.cloneElement(
             renderTextarea(