Use input-editor-core and input-editor-preview to create new editor design for thread new page

src/components/routes/ThreadNew.vue

@@ -7,13 +7,32 @@
 			<span class='select_button_text'>Name of thread:</span>
 			<fancy-input placeholder='Thread name' v-model='name' style='display: inline-block;'></fancy-input>
 		</div>
-		<input-editor v-model='editor' :show='true' :hide-close='true' :error='errors.content' style='margin-top: 1rem'></input-editor>
+		<div class='editor' :class='{"editor--focus": focusInput}'>
+			<div class='editor__input'>
+				<div class='editor__format_bar'>
+					editor
+				</div>
+				<input-editor-core
+					v-model='editor'
+					:error='errors.content'
+					@focus='setFocusInput(true)'
+					@blur='setFocusInput(false)'
+				></input-editor-core>
+			</div>
+			<div class='editor__preview'>
+				<div class='editor__format_bar editor__format_bar--preview'>
+					preview
+				</div>
+				<input-editor-preview :value='editor'></input-editor-preview>
+			</div>
+		</div>
 		<loading-button class='button--green submit' :loading='loading' @click='postThread'>Post thread</loading-button>
 	</div>
 </template>
 
 <script>
-	import InputEditor from '../InputEditor'
+	import InputEditorCore from '../InputEditorCore'
+	import InputEditorPreview from '../InputEditorPreview'
 	import FancyInput from '../FancyInput'
 	import SelectButton from '../SelectButton'
 	import LoadingButton from '../LoadingButton'
@@ -23,7 +42,8 @@
 	export default {
 		name: 'ThreadNew',
 		components: {
-			InputEditor,
+			InputEditorCore,
+			InputEditorPreview,
 			SelectButton,
 			FancyInput,
 			LoadingButton
@@ -34,6 +54,7 @@
 				editor: '',
 				name: '',
 				loading: false,
+				focusInput: false,
 
 				errors: {
 					content: '',
@@ -82,6 +103,9 @@
 						}
 					})
 				})
+			},
+			setFocusInput (val) {
+				this.focusInput = val
 			}
 		},
 		watch: {
@@ -102,7 +126,7 @@
 	}
 </script>
 
-<style lang='scss' scoped>
+<style lang='scss'>
 	@import '../../assets/scss/variables.scss';
 
 	.select_button_text {
@@ -114,4 +138,41 @@
 	.submit {
 		margin-top: 1rem;
 	}
+
+	.editor {
+		display: flex;
+		background-color: #fff;
+		border-radius: 0.25rem;
+		border: 0.125rem solid $color__gray--darker;
+		transition: color 0.2s;
+
+		@at-root #{&}--focus {
+			border-color: $color__gray--darkest;
+		}
+
+		@at-root #{&}__format_bar {
+			height: 2.5rem;
+			background-color: $color__gray--primary;
+			display: flex;
+			padding-right: 1rem;
+			padding-bottom: 0.25rem;
+			justify-content: flex-end;
+			align-items: center;
+			font-variant: small-caps;
+		}
+
+		@at-root #{&}__input {
+			width: 50%;
+			position: relative;
+
+			.input_editor_core__format_bar {
+				left: 0rem;
+			}
+		}
+
+		@at-root #{&}__preview {
+			border-left: 0.125rem solid $color__gray--darker;
+			width: 50%;
+		}
+	}
 </style>