summaryrefslogtreecommitdiffstats
path: root/web/react/components/textbox.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'web/react/components/textbox.jsx')
-rw-r--r--web/react/components/textbox.jsx42
1 files changed, 38 insertions, 4 deletions
diff --git a/web/react/components/textbox.jsx b/web/react/components/textbox.jsx
index 707033d8f..82f830038 100644
--- a/web/react/components/textbox.jsx
+++ b/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);
- $(w).css({height: 'auto'}).height(167);
+ $(e).css({height: 'auto', 'overflow-y': 'scroll'}).height(167 - mod);
+ $(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>
);
}