client - block quote - adjusted markdown editor styling

client/app/components/editor/editor.scss

@@ -1,4 +1,4 @@
-.editor-container {
+.editor-background {
   z-index: 1;
   top: 0;
   left: 0;
@@ -6,43 +6,48 @@
   width: 100%;
   position: fixed;
   background-color: rgba(0, 0, 0, .9);
-  padding-top: 50px;
+  display: flex;
+  align-items: center;
+}
+
+.editor-container {
+  height: 100%;
+  width: 100%;
+  max-height: 800px;
+  max-width: 1000px;
+  padding: 20px 40px 40px;
+  margin-bottom: 0;
 }
 
 .editor {
-  height: 80%;
-  display: flex;
-  flex-direction: column;
-  padding-bottom: 40px;
-
-  &__character-count {
-    align-self: flex-end;
-  }
+  overflow-y: auto;
+  height: 100%;
+  margin-bottom: 0;
 
   &__title {
     height: 25px;
+    margin-bottom: 10px;
   }
 
   &__text-area {
     min-height: 100px;
-    resize: none;
+    max-height: 300px;
+    max-width: 100%;
     overflow-wrap: break-word;
   }
 
   &__preview {
-    min-height: 100px;
-    border-radius: 2px;
-    padding: 5px 10px;
-    overflow-y: auto;
-    overflow-wrap: break-word;
+    padding: 10px;
   }
 
   &__submit {
-    padding: 20px 0;
+    padding: 10px 0;
+    display: flex;
+    justify-content: space-between;
   }
 
   &__error-message {
-    margin-left: 10px;
+    margin-bottom: 10px;
     color: red;
   }
 }

client/app/components/editor/editor.tsx

@@ -1,12 +1,15 @@
 import React from 'react';
 import marked from 'marked';
+import { get } from 'lodash';
 import axios from '../../axios/axios';
 import { ContentContainer } from '../content-container/content-container';
+import { ReplyModel } from '../../model';
 import './editor.scss';
 
 interface Props {
   categoryId?: string;
   onClose: (cancel: boolean) => any;
+  quotedReply?: ReplyModel;
   threadId?: string;
 }
 
@@ -15,11 +18,14 @@ interface State {
   content: string;
   contentPreview: string;
   contentCharacterCount: number;
-  titleCharacterCount: number;
   errorMessage?: string;
 }
 
 export class Editor extends React.Component<Props, State> {
+
+  private titleRef: any;
+  private contentRef: any;
+
   constructor(props: any) {
     super(props);
     this.state = {
@@ -27,10 +33,24 @@ export class Editor extends React.Component<Props, State> {
       content: '',
       contentPreview: '',
       contentCharacterCount: 0,
-      titleCharacterCount: 0,
     };
   }
 
+  // disable scrolling in the background
+  componentDidMount() {
+    document.body.style.overflow = 'hidden';
+
+    if (this.titleRef) {
+      this.titleRef.focus();
+    } else {
+      this.contentRef.focus();
+    }
+  }
+
+  componentWillUnmount() {
+    document.body.style.removeProperty('overflow');
+  }
+
   onContentChange(event: any) {
     this.setState({ 
       content: event.target.value,
@@ -42,7 +62,6 @@ export class Editor extends React.Component<Props, State> {
   onTitleChange(event: any) {
     this.setState({
       title: event.target.value,
-      titleCharacterCount: event.target.value.length,
     });
   }
 
@@ -66,6 +85,7 @@ export class Editor extends React.Component<Props, State> {
     const data = {
       content,
       thread_id: this.props.threadId,
+      quote_id: get(this.props, 'quotedReply.id') || undefined,
     };
 
     try {
@@ -98,46 +118,61 @@ export class Editor extends React.Component<Props, State> {
     }
   }
 
-  renderThreadPortion() {
+  private renderTopicInput(): any {
     return (
-      <div className="flex flex--column">
-        <h2 style={{ color: 'white' }}>New Topic</h2>
-        <label>Title</label>
+      <div>
+        <div><label>Title</label></div>
         <input type="text"
+          ref={ref => this.titleRef = ref}
           className="input editor__title"
           onChange={event => this.onTitleChange(event)}
           maxLength={300}/>
-        <div className="editor__character-count">{this.state.contentCharacterCount}/2000</div>
       </div>
     );
   }
 
-  // TODO: quote
-  renderReplyPortion() {
-    return (
-      <h2 style={{ color: 'white' }}>New Reply</h2>
+  renderQuotedReply() {
+    return (this.props.quotedReply &&
+      <blockquote className="blockquote">
+        <small>Q u o t e:</small>
+        <small dangerouslySetInnerHTML={{ __html: marked(this.props.quotedReply!.content, { sanitize: true }) }}/>
+      </blockquote>
     );
   }
 
   render() {
-
     return (
-      <div className="editor-container">
-        <form onSubmit={event => this.onSubmit(event)} onReset={() => this.props.onClose(true)}>
-          <ContentContainer className="editor">
-            {this.props.threadId ? this.renderReplyPortion() : this.renderThreadPortion()}
-            <label>Content</label>
-            <textarea className="input editor__text-area flex-1" onChange={event => this.onContentChange(event)} maxLength={2000}/>
-            <div className="editor__character-count">{this.state.contentCharacterCount}/2000</div>
-            <label>Preview</label>
-            <div className="editor__preview flex-1" dangerouslySetInnerHTML={{ __html: this.state.contentPreview }}></div>
+      <div className="editor-background">
+        <ContentContainer className="editor-container">
+          <form className="editor" onSubmit={event => this.onSubmit(event)} onReset={() => this.props.onClose(true)}>
+
+            <h2 style={{ color: 'white' }}>New {this.props.threadId ? 'Reply' : 'Topic'}</h2>
+            {!this.props.threadId && this.renderTopicInput()}
+
+            <div><label>Content</label></div>
+            <textarea className="input editor__text-area flex-1"
+              onChange={event => this.onContentChange(event)} maxLength={2000}
+              ref={ref => this.contentRef = ref}
+            />
+
             <div className="editor__submit">
-              <input type="submit" value="Submit" className="input__button"/>
-              <input type="reset" value="Cancel" className="input__button" style={{ marginLeft: '10px' }}/>
-              <span className="editor__error-message">{this.state.errorMessage}</span>
+              <div>
+                <input type="submit" value="Submit" className="input__button"/>
+                <input type="reset" value="Cancel" className="input__button" style={{ marginLeft: '10px' }}/>
+              </div>
+              <div>{this.state.contentCharacterCount}/2000</div>
             </div>
-          </ContentContainer>
-        </form>
+
+            <div className="editor__error-message">{this.state.errorMessage}</div>
+
+            <div><label>Preview</label></div>
+            <div className="markdown-container">
+              {this.renderQuotedReply()}
+              <div className="editor__preview" dangerouslySetInnerHTML={{ __html: this.state.contentPreview }}></div>
+            </div>
+
+          </form>
+        </ContentContainer>
       </div>
     );
   }