add preview support

web/app/components/input/__preview/input__preview.scss

@@ -0,0 +1,10 @@
+.input__preview {
+  margin-top: 8px;
+  padding: 7px 11px;
+  font-size: 16px;
+  line-height: 1.2;
+  border: 1px dashed #eee;
+  border-radius: 2px;
+  background: #fff;
+  color: #333;
+}

web/app/components/input/index.js

@@ -1,3 +1,5 @@
+import 'components/raw-content';
+
 export { default } from './input';
 
 require('./input.scss');
@@ -8,3 +10,4 @@ require('./__button/_type/_send/input__button_type_send.scss');
 
 require('./__buttons/input__buttons.scss');
 require('./__field/input__field.scss');
+require('./__preview/input__preview.scss');

web/app/components/input/input.jsx

@@ -6,8 +6,13 @@ export default class Input extends Component {
   constructor(props) {
     super(props);
 
+    this.state = {
+      preview: null,
+    };
+
     this.autoResize = this.autoResize.bind(this);
     this.send = this.send.bind(this);
+    this.getPreview = this.getPreview.bind(this);
     this.onKeyDown = this.onKeyDown.bind(this);
   }
 
@@ -46,7 +51,7 @@ export default class Input extends Component {
         }
 
         this.fieldNode.value = '';
-        this.setState({ height: null });
+        this.setState({ height: null, preview: null });
       })
       .catch(() => {
         // TODO: do smth?
@@ -54,7 +59,19 @@ export default class Input extends Component {
       .finally(() => this.setState({ isFieldDisabled: false }));
   }
 
-  render(props, { height, isFieldDisabled }) {
+  getPreview() {
+    const text = this.fieldNode.value;
+
+    if (!text || !text.trim()) return;
+
+    api.getPreview({ text })
+      .then(preview => this.setState({ preview }))
+      .catch(() => {
+        // TODO: do smth?
+      });
+  }
+
+  render(props, { height, isFieldDisabled, preview }) {
     return (
       <form className={b('input', props)} onSubmit={this.send}>
         <textarea
@@ -71,9 +88,28 @@ export default class Input extends Component {
         </textarea>
 
         <div className="input__buttons">
-          <button className={b('input__button', {}, { type: 'preview' })} type="button">Preview</button>
-          <button className={b('input__button', {}, { type: 'send' })} type="submit">Send</button>
+          <button
+            className={b('input__button', {}, { type: 'preview' })}
+            type="button"
+            onClick={this.getPreview}
+          >Preview</button>
+
+          <button
+            className={b('input__button', {}, { type: 'send' })}
+            type="submit"
+          >Send</button>
         </div>
+
+        {
+          // TODO: it can be more elegant;
+          // for example it can render full comment component here (or above textarea on mobile)
+          !!preview && (
+            <div
+              className={b('input__preview', { mix: 'raw-content' })}
+              dangerouslySetInnerHTML={{ __html: preview }}
+            />
+          )
+        }
       </form>
     );
   }