adding horizontal layout

Author: Nes-si

src/LayoutMap.tsx

@@ -1,9 +1,10 @@
 import * as React from "react";
-import {VerticalLayout, NoPreviewLayout} from "./components-layout";
+import {VerticalLayout, NoPreviewLayout, HorizontalLayout} from "./components-layout";
 
 class LayoutMap {
     vertical: typeof VerticalLayout = VerticalLayout;
     noPreview: typeof NoPreviewLayout = NoPreviewLayout;
+    horizontal: typeof HorizontalLayout = HorizontalLayout;
 }
 
 const layoutMap = new LayoutMap();

src/components-layout/HorizontalLayout.tsx

@@ -0,0 +1,55 @@
+import * as React from "react";
+import {Command} from "../types";
+import {ReactMde} from "../ReactMde";
+import {MdePreview, MdeEditor, MdeToolbar} from "../components";
+import {LayoutProps} from "../types/LayoutProps";
+
+export class HorizontalLayout extends React.Component<LayoutProps, {}> {
+
+    editorRef: MdeEditor;
+    previewRef: MdePreview;
+
+    /**
+     * Handler for the textArea value change
+     * @memberOf ReactMde
+     */
+    handleMdeStateChange = (value) => {
+        const {onChange} = this.props;
+        onChange(value);
+    }
+
+    handleCommand = (command: Command) => {
+        const { onCommand } = this.props;
+        onCommand(command);
+    }
+
+    /**
+     * Renders react-mde
+     * @returns
+     * @memberOf ReactMde
+     */
+    render() {
+
+        const { commands, mdeEditorState } = this.props;
+
+        return (
+            <div className="react-mde-horizontal-layout">
+                <MdeToolbar
+                    commands={commands}
+                    onCommand={this.handleCommand}
+                />
+                <div className="react-mde-content">
+                    <MdeEditor
+                        editorRef={(c) => this.editorRef = c}
+                        onChange={this.handleMdeStateChange}
+                        editorState={mdeEditorState}
+                    />
+                    <MdePreview
+                        previewRef={(c) => this.previewRef = c}
+                        html={mdeEditorState ? mdeEditorState.html : ""}
+                    />
+                </div>
+            </div>
+        );
+    }
+}

src/components-layout/index.tsx

@@ -1,2 +1,3 @@
 export * from "./VerticalLayout";
 export * from "./NoPreviewLayout";
+export * from "./HorizontalLayout";

src/styles/react-mde-all.scss

@@ -5,3 +5,4 @@
 @import "react-mde";
 @import "react-mde-vertical-layout";
 @import "react-mde-no-preview-layout";
+@import "react-mde-horizontal-layout";

src/styles/react-mde-horizontal-layout.scss

@@ -0,0 +1,29 @@
+@import "variables";
+
+.react-mde-horizontal-layout {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .mde-header {
+        border-bottom: 1px solid $mde-border-color;
+    }
+
+    .react-mde-content {
+        display: flex;
+        height: 100%;
+
+        .mde-text {
+            width: 50%;
+            overflow-y: auto;
+            border-radius: 0px;
+        }
+
+        .mde-preview {
+            width: 50%;
+            padding: 10px;
+            border-left: 1px solid $mde-border-color;
+            overflow-y: auto;
+        }
+    }
+}