fix: fix height props issue (#173).

Author: jaywcjlove

src/index.tsx

@@ -9,15 +9,15 @@ export * from './commands';
 
 export interface IMarkdownEditor extends ICodeMirror {
   className?: string;
-  prefixCls?: string,
-  value?: string,
-  height?: number,
-  visible?: boolean,
-  visibleEditor?: boolean,
-  toolbars?: IToolBarProps['toolbars'],
-  toolbarsMode?: IToolBarProps['toolbars'],
+  prefixCls?: string;
+  value?: string;
+  height?: number;
+  visible?: boolean;
+  visibleEditor?: boolean;
+  toolbars?: IToolBarProps['toolbars'];
+  toolbarsMode?: IToolBarProps['toolbars'];
   previewProps?: MarkdownPreviewProps;
-  options?: CodeMirror.EditorConfiguration,
+  options?: CodeMirror.EditorConfiguration;
 }
 
 export interface MarkdownEditorRef {
@@ -29,25 +29,25 @@ export default React.forwardRef<MarkdownEditorRef, IMarkdownEditor>(MarkdownEdit
 
 function MarkdownEditor(
   props: IMarkdownEditor,
-  ref?:
-    | ((instance: MarkdownEditorRef) => void)
-    | React.RefObject<MarkdownEditorRef>
-    | null
+  ref?: ((instance: MarkdownEditorRef) => void) | React.RefObject<MarkdownEditorRef> | null,
 ) {
   const {
-    prefixCls = 'md-editor', className,
+    prefixCls = 'md-editor',
+    className,
     onChange,
     toolbars = getCommands(),
     toolbarsMode = getModeCommands(),
     visible = true,
     visibleEditor = true,
-    previewProps = {}, ...codemirrorProps } = props;
+    previewProps = {},
+    ...codemirrorProps
+  } = props;
   const [value, setValue] = useState(props.value || '');
   const codeMirror = createRef<CodeMirror>();
-  const previewContainer = useRef<HTMLDivElement | null>()
+  const previewContainer = useRef<HTMLDivElement | null>();
   const [editor, setEditor] = useState<CodeMirror.Editor>();
-	const container = useRef<HTMLDivElement>(null);
-	const containerEditor = useRef<HTMLDivElement>(null);
+  const container = useRef<HTMLDivElement>(null);
+  const containerEditor = useRef<HTMLDivElement>(null);
 
   useImperativeHandle(ref, () => ({
     editor: editor,
@@ -58,47 +58,44 @@ function MarkdownEditor(
     if (codeMirror.current) {
       setEditor(codeMirror.current.editor);
     }
-  }, [codeMirror.current]);
+  }, [codeMirror]);
 
   const toolBarProps = {
     editor,
     preview: previewContainer.current,
     container: container.current,
     containerEditor: containerEditor.current,
-    editorProps: props
-  }
-  const codeEditor = useMemo(() => (
-    <CodeMirror
-      visibleEditor={visibleEditor}
-      {...codemirrorProps}
-      ref={codeMirror}
-      onChange={(editor, data) => {
-        setValue(editor.getValue());
-        onChange && onChange(editor, data, editor.getValue())
-      }}
-    />
-  ), [visibleEditor, codemirrorProps])
+    editorProps: props,
+  };
   return (
-    <div ref={container}>
-      <div className={`${prefixCls || ''} ${className || ''}`}>
-        <ToolBar {...toolBarProps} toolbars={toolbarsMode} mode />
-        <ToolBar {...toolBarProps} toolbars={toolbars} />
-        <div className={`${prefixCls}-content`}>
-          <div className={`${prefixCls}-content-editor`} ref={containerEditor}>
-            {visibleEditor && codeEditor}
-          </div>
-          <MarkdownPreview
-            {...previewProps}
-            data-visible={!!visible}
-            className={`${prefixCls}-preview`}
-            ref={(instance) => {
-              if(instance && instance.mdp) {
-                previewContainer.current = instance.mdp.current
-              }
-            }}
-            source={value}
-          />
+    <div className={`${prefixCls || ''} ${className || ''}`} ref={container}>
+      <ToolBar {...toolBarProps} toolbars={toolbarsMode} mode />
+      <ToolBar {...toolBarProps} toolbars={toolbars} />
+      <div className={`${prefixCls}-content`} style={{ height: codemirrorProps.height }}>
+        <div className={`${prefixCls}-content-editor`} ref={containerEditor}>
+          {visibleEditor && (
+            <CodeMirror
+              visibleEditor={visibleEditor}
+              {...codemirrorProps}
+              ref={codeMirror}
+              onChange={(editor, data) => {
+                setValue(editor.getValue());
+                onChange && onChange(editor, data, editor.getValue());
+              }}
+            />
+          )}
         </div>
+        <MarkdownPreview
+          {...previewProps}
+          data-visible={!!visible}
+          className={`${prefixCls}-preview`}
+          ref={(instance) => {
+            if (instance && instance.mdp) {
+              previewContainer.current = instance.mdp.current;
+            }
+          }}
+          source={value}
+        />
       </div>
     </div>
   );