fix: fix minHeight props issue. (#589)

uiwjs · Nov 10, 2023 · a7d9a2c · a7d9a2c · vercel · Nov 10, 2023
1 parent 64319c2
commit a7d9a2c
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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(