Merge pull request nubasedev#295 from mmomtchev/height-units

support other height units than 'px'

Author: andrerpena

readme.md

@@ -102,6 +102,7 @@ while the documentation is not complete.
 - **minEditorHeight?: number**: The minimum height of the editor.
 - **maxEditorHeight?: number**: The max height of the editor (after that, it will scroll).
 - **minPreviewHeight?: number**: The minimum height of the preview.
+- **heightUnits?: string**: The height units, defaults to `px`.
 - **loadSuggestions?: (text: string, triggeredBy: string) => Promise<Suggestion[]>**: Function to load mention suggestions based on the
 given `text` and `triggeredBy` (character that triggered the suggestions). The result should be an array of `{preview: React.ReactNode, value: string}`.
 The `preview` is what is going to be displayed in the suggestions box. The `value` is what is going to be inserted in the `textarea` on click or enter.

src/components/Preview.tsx

@@ -7,6 +7,7 @@ export interface PreviewProps {
   refObject?: React.RefObject<HTMLDivElement>;
   loadingPreview?: React.ReactNode;
   minHeight: number;
+  heightUnits: string;
   generateMarkdownPreview: GenerateMarkdownPreview;
   markdown: string;
 }
@@ -48,7 +49,7 @@ export class Preview extends React.Component<
   }
 
   render() {
-    const { classes, minHeight, loadingPreview, refObject } = this.props;
+    const { classes, minHeight, loadingPreview, refObject, heightUnits } = this.props;
     const { preview, loading } = this.state;
     const finalHtml = loading ? loadingPreview : preview;
 
@@ -66,10 +67,12 @@ export class Preview extends React.Component<
       content = <div className="mde-preview-content">{finalHtml}</div>;
     }
 
+    const minHeightVal = (minHeight && heightUnits) ? (minHeight + 10) + heightUnits : minHeight + 10;
+
     return (
       <div
         className={classNames("mde-preview", classes, { loading })}
-        style={{ minHeight: minHeight + 10 }}
+        style={{ minHeight: minHeightVal }}
         data-testid="mde-preview"
       >
         {content}

src/components/ReactMde.tsx

@@ -33,6 +33,7 @@ export interface ReactMdeProps {
   maxEditorHeight?: number;
   initialEditorHeight?: number;
   minPreviewHeight?: number;
+  heightUnits?: string;
   classes?: Classes;
   refs?: Refs;
   toolbarCommands?: ToolbarCommands;
@@ -87,6 +88,7 @@ export class ReactMde extends React.Component<ReactMdeProps, ReactMdeState> {
     minEditorHeight: 200,
     maxEditorHeight: 500,
     minPreviewHeight: 200,
+    heightUnits: "px",
     selectedTab: "write",
     disablePreview: false,
     suggestionTriggerCharacters: ["@"]
@@ -167,6 +169,7 @@ export class ReactMde extends React.Component<ReactMdeProps, ReactMdeState> {
       value,
       l18n,
       minPreviewHeight,
+      heightUnits,
       childProps,
       selectedTab,
       generateMarkdownPreview,
@@ -224,6 +227,7 @@ export class ReactMde extends React.Component<ReactMdeProps, ReactMdeState> {
             textAreaComponent={textAreaComponent}
             textAreaProps={childProps && childProps.textArea}
             height={this.state.editorHeight}
+            heightUnits={this.props.heightUnits}
             value={value}
             suggestionTriggerCharacters={suggestionTriggerCharacters}
             loadSuggestions={loadSuggestions}
@@ -250,6 +254,7 @@ export class ReactMde extends React.Component<ReactMdeProps, ReactMdeState> {
             refObject={this.finalRefs.preview}
             loadingPreview={loadingPreview}
             minHeight={minPreviewHeight}
+            heightUnits={heightUnits}
             generateMarkdownPreview={generateMarkdownPreview}
             markdown={value}
           />

src/components/TextArea.tsx

@@ -42,6 +42,7 @@ export interface TextAreaProps {
   refObject?: React.RefObject<HTMLTextAreaElement>;
   readOnly?: boolean;
   height?: number;
+  heightUnits?: string;
   suggestionTriggerCharacters?: string[];
   loadSuggestions?: (
     text: string,
@@ -363,6 +364,7 @@ export class TextArea extends React.Component<TextAreaProps, TextAreaState> {
       readOnly,
       textAreaProps,
       height,
+      heightUnits,
       value,
       suggestionTriggerCharacters,
       loadSuggestions,
@@ -383,13 +385,15 @@ export class TextArea extends React.Component<TextAreaProps, TextAreaState> {
       "textarea") as DetailedHTMLFactory<
       TextareaHTMLAttributes<HTMLTextAreaElement>,
       HTMLTextAreaElement
-    >;
+      >;
+    
+    const heightVal = (height && heightUnits) ? height + heightUnits : height;
 
     return (
       <div className="mde-textarea-wrapper">
         <TextAreaComponent
           className={classNames("mde-text", classes)}
-          style={{ height }}
+          style={{ height: heightVal }}
           ref={this.props.refObject}
           readOnly={readOnly}
           value={value}