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 ( +
+ +
+ ); +} +``` + ### 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( 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( 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(null); const executeRef = React.useRef(); const warp = React.createRef(); @@ -71,7 +72,7 @@ export default function TextArea(props: ITextAreaProps) { return (
-
+
{renderTextarea ? ( React.cloneElement( renderTextarea(