Switch editor to use v-model

src/components/InputEditor.vue

@@ -21,18 +21,18 @@
 				<textarea
 					class='input_editor__input'
 					ref='textarea'
-					:value='editor'
+					:value='value'
 					@input='setEditor($event.target.value)'
 					@focus='focusEditor(true)'
 					@blur='focusEditor(false)'
-					placeuholder='Type here - you can format using Markdown'
+					placeholder='Type here - you can format using Markdown'
 				>
 				</textarea>
 			</template>
 
 			<div slot='Preview' class='input_editor__markdownHTML'>
 				<div v-html='markdownHTML' style='margin-top: -0.5rem;'></div>
-				<div v-if='!editor.trim().length' class='input_editor__markdownHTML--empty'>
+				<div v-if='!value.trim().length' class='input_editor__markdownHTML--empty'>
 					Nothing to preview
 				</div>
 			</div>
@@ -72,7 +72,7 @@
 
 	export default {
 		name: 'InputEditor',
-		props: ['name', 'float', 'replyUsername', 'hideClose'],
+		props: ['value', 'float', 'replyUsername', 'hideClose', 'visible'],
 		components: {
 			ModalWindow,
 			FancyInput,
@@ -89,19 +89,13 @@
 			}
 		},
 		computed: {
-			editor () {
-				return this.$store.state.editors[this.name].value;
-			},
-			visible () {
-				return this.$store.state.editors[this.name].visible;
-			},
 			markdownHTML () {
-				return Marked(this.editor);
+				return Marked(this.value);
 			}
 		},
 		methods: {
 			submit () {
-				if(this.editor.trim().length) {
+				if(this.value.trim().length) {
 					this.$emit('submit');
 				}
 			},
@@ -123,24 +117,11 @@
 				}
 			},
 			closeEditor () {
-				this.$store.commit({
-					type: 'showEditor',
-					name: this.name,
-					value: false
-				});
-				this.$store.commit({
-					type: 'setEditor',
-					name: this.name,
-					value: ''
-				});
+				this.setEditor('')
 				this.$emit('close')
 			},
 			setEditor (value) {
-				this.$store.commit({
-					type: 'setEditor',
-					name: this.name,
-					value: value
-				});
+				this.$emit('input', value)
 			},
 			getSelectionData () {
 				var el = this.$refs.textarea,
@@ -159,9 +140,9 @@
 				var el = this.$refs.textarea;
 
 				this.setEditor(
-					this.editor.slice(0, selectionData.start) +
+					this.value.slice(0, selectionData.start) +
 					before + selectionData.val + after +
-					this.editor.slice(selectionData.end)
+					this.value.slice(selectionData.end)
 				);
 				el.focus();
 
@@ -176,9 +157,9 @@
 				var el = this.$refs.textarea;
 
 				this.setEditor(
-					this.editor.slice(0, selectionData.start) +
+					this.value.slice(0, selectionData.start) +
 					'[' + this.linkText + '](' + this.linkURL + ')' +
-					this.editor.slice(selectionData.end)
+					this.value.slice(selectionData.end)
 				);
 				el.focus();
 
@@ -192,7 +173,7 @@
 			formatCode () {
 				var selectionData = this.getSelectionData();
 
-				if(this.editor[selectionData.start-1] === '\n' || selectionData.start === 0) {
+				if(this.value[selectionData.start-1] === '\n' || selectionData.start === 0) {
 					this.replaceSelectedText('    ', '');
 				} else {
 					this.replaceSelectedText('`', '`');

src/components/routes/Thread.vue

@@ -14,7 +14,15 @@
 			</div>
 			<button class='button thread_header__reply_button' @click='replyThread'>Reply to thread</button>
 		</header>
-		<input-editor name='thread' float='true' :replyUsername='replyUsername' v-on:close='clearReply' v-on:submit='addPost'></input-editor>
+		<input-editor
+			v-model='editor'
+			:float='true'
+			:visible='editorVisible'
+			:replyUsername='replyUsername'
+			v-on:close='hideEditor'
+			v-on:submit='addPost'
+		>
+		</input-editor>
 		<div class='posts'>
 			<div class='post' v-for='post in posts'>
 				<div class='post__meta_data'>
@@ -55,7 +63,18 @@
 			},
 			replyUsername () {
 				return this.$store.state.thread.reply.username
-			}
+			},
+			editor: {
+				get () { return this.$store.state.editors.thread.value },
+				set (val) {
+					this.$store.commit({
+						type: 'setEditor',
+						name: 'thread',
+						value: val
+					})
+				}
+			},
+			editorVisible () { return this.$store.state.editors.thread.visible }
 		},
 		methods: {
 			showEditor () {
@@ -65,6 +84,14 @@
 					value: true
 				});
 			},
+			hideEditor () {
+				this.$store.commit({
+					type: 'showEditor',
+					name: 'thread',
+					value: false
+				});
+				this.clearReply()
+			},
 			clearReply () {
 				this.$store.commit({
 					type: 'setReply',

src/components/routes/ThreadNew.vue

@@ -3,7 +3,7 @@
 		<div class='h1'>Post new thread</div>
 		<span class='select_button_text'>Post in category:</span>
 		<select-button v-model='selectedCategory' :options='categories'></select-button>
-		<input-editor name='new-thread' :hide-close='true' style='margin-top: 1rem'></input-editor>
+		<input-editor v-model='editor' :visible='true' :hide-close='true' style='margin-top: 1rem'></input-editor>
 		<button class='button button--green submit'>Post thread</button>
 	</div>
 </template>
@@ -27,6 +27,16 @@
 		computed: {
 			categories () {
 				return this.$store.getters.categoriesWithoutAll
+			},
+			editor: {
+				get () { return this.$store.state.editors['new-thread'].value },
+				set (val) {
+					this.$store.commit({
+						type: 'setEditor',
+						name: 'new-thread',
+						value: val
+					})
+				}
 			}
 		},
 		methods: {}