Merge pull request #1389 from florianorben/preview-markdown

Preview markdown post

web/react/components/textbox.jsx

@@ -6,6 +6,7 @@ const SearchStore = require('../stores/search_store.jsx');
 const CommandList = require('./command_list.jsx');
 const ErrorStore = require('../stores/error_store.jsx');
 
+const TextFormatting = require('../utils/text_formatting.jsx');
 const Utils = require('../utils/utils.jsx');
 const Constants = require('../utils/constants.jsx');
 const ActionTypes = Constants.ActionTypes;
@@ -30,6 +31,7 @@ export default class Textbox extends React.Component {
         this.handleFocus = this.handleFocus.bind(this);
         this.handleBlur = this.handleBlur.bind(this);
         this.handlePaste = this.handlePaste.bind(this);
+        this.showPreview = this.showPreview.bind(this);
 
         this.state = {
             mentionText: '-1',
@@ -118,7 +120,8 @@ export default class Textbox extends React.Component {
     }
 
     handleChange() {
-        this.props.onUserInput(ReactDOM.findDOMNode(this.refs.message).value);
+        const text = ReactDOM.findDOMNode(this.refs.message).value;
+        this.props.onUserInput(text);
     }
 
     handleKeyPress(e) {
@@ -240,6 +243,7 @@ export default class Textbox extends React.Component {
 
         const lht = parseInt($(e).css('lineHeight'), 10);
         const lines = e.scrollHeight / lht;
+        const previewLinkHeightMod = 20;
         let mod = 15;
 
         if (lines < 2.5 || this.props.messageText === '') {
@@ -248,12 +252,18 @@ export default class Textbox extends React.Component {
 
         if (e.scrollHeight - mod < 167) {
             $(e).css({height: 'auto', 'overflow-y': 'hidden'}).height(e.scrollHeight - mod);
-            $(w).css({height: 'auto'}).height(e.scrollHeight + 2);
+            $(w).css({height: 'auto'}).height(e.scrollHeight + 2 + previewLinkHeightMod);
             $(w).closest('.post-body__cell').removeClass('scroll');
+            if (this.state.preview) {
+                $(ReactDOM.findDOMNode(this.refs.preview)).css({height: 'auto', 'overflow-y': 'auto'}).height(e.scrollHeight - mod);
+            }
         } else {
-            $(e).css({height: 'auto', 'overflow-y': 'scroll'}).height(167);
+            $(e).css({height: 'auto', 'overflow-y': 'scroll'}).height(167 - mod);
-            $(w).css({height: 'auto'}).height(167);
+            $(w).css({height: 'auto'}).height(167 + previewLinkHeightMod);
             $(w).closest('.post-body__cell').addClass('scroll');
+            if (this.state.preview) {
+                $(ReactDOM.findDOMNode(this.refs.preview)).css({height: 'auto', 'overflow-y': 'scroll'}).height(167 - mod);
+            }
         }
 
         if (prevHeight !== $(e).height() && this.props.onHeightChange) {
@@ -279,7 +289,16 @@ export default class Textbox extends React.Component {
         this.doProcessMentions = true;
     }
 
+    showPreview(e) {
+        e.preventDefault();
+        e.target.blur();
+        this.setState({preview: !this.state.preview});
+        this.resize();
+    }
+
     render() {
+        const previewLinkVisible = this.props.messageText.length > 0;
+
         return (
             <div
                 ref='wrapper'
@@ -308,7 +327,22 @@ export default class Textbox extends React.Component {
                     onFocus={this.handleFocus}
                     onBlur={this.handleBlur}
                     onPaste={this.handlePaste}
+                    style={{visibility: this.state.preview ? 'hidden' : 'visible'}}
                 />
+                <div
+                    ref='preview'
+                    className='form-control custom-textarea textbox-preview-area'
+                    style={{display: this.state.preview ? 'block' : 'none'}}
+                    dangerouslySetInnerHTML={{__html: this.state.preview ? TextFormatting.formatText(this.props.messageText) : ''}}
+                >
+                </div>
+                <a
+                    style={{visibility: previewLinkVisible ? 'visible' : 'hidden'}}
+                    onClick={this.showPreview}
+                    className='textbox-preview-link'
+                >
+                    {this.state.preview ? 'Edit message' : 'Preview'}
+                </a>
             </div>
         );
     }

web/sass-files/sass/partials/_post.scss

@@ -46,7 +46,21 @@ body.ios {
 
 .textarea-wrapper {
 	position:relative;
-	min-height:37px;
+	min-height:57px;
+    .textbox-preview-area {
+        position: absolute;
+        z-index: 2;
+        top: 0;
+        left: 0;
+        box-shadow: none;
+    }
+    .textbox-preview-link {
+        position: absolute;
+        z-index: 3;
+        bottom: 0;
+        right: 10px;
+        cursor: pointer;
+    }
 }
 
 .date-separator, .new-separator {

web/sass-files/sass/partials/_post_right.scss

@@ -23,7 +23,7 @@
 	.post-create__container {
 		margin-top: 10px;
 		.textarea-wrapper {
-			min-height: 100px;
+			min-height: 120px;
 		}
 		.custom-textarea {
 			min-height: 100px;