From 873d91d7c39c05f2f2d34c9a8098e3f9e74b79d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Wed, 21 Nov 2018 18:27:15 +0100
Subject: [PATCH] Fix contenteditable handling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/Composer.vue | 52 ++++++++++++++++++++-----------------
 src/main.js                 |  2 ++
 2 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/src/components/Composer.vue b/src/components/Composer.vue
index 4b897e3a..4fc87134 100644
--- a/src/components/Composer.vue
+++ b/src/components/Composer.vue
@@ -28,13 +28,13 @@
 		<form class="new-post-form" @submit.prevent="createPost">
 			<div class="author currentUser">
 				{{ currentUser.displayName }}
+
 				<span class="social-id">{{ socialId }}</span>
 			</div>
 			<vue-tribute :options="tributeOptions">
 				<!-- eslint-disable-next-line vue/valid-v-model -->
-				<div v-contenteditable ref="composerInput" v-model="post"
-					contenteditable="true" class="message" placeholder="Share a thought…"
-					@input="updateInput" />
+				<div v-contenteditable:post.dangerousHTML="canType" ref="composerInput" class="message"
+					placeholder="Share a thought…" @keyup.enter="keyup" />
 			</vue-tribute>
 			<emoji-picker :search="search" class="emoji-picker-wrapper" @emoji="insert">
 				<div v-tooltip="'Insert emoji'" slot="emoji-invoker" slot-scope="{ events }"
@@ -269,7 +269,6 @@ import { Avatar, PopoverMenu } from 'nextcloud-vue'
 import EmojiPicker from 'vue-emoji-picker'
 import VueTribute from 'vue-tribute'
 import { VTooltip } from 'v-tooltip'
-import contenteditableDirective from 'vue-contenteditable-directive'
 import CurrentUserMixin from './../mixins/currentUserMixin'
 import axios from 'nextcloud-axios'
 
@@ -282,8 +281,7 @@ export default {
 		VueTribute
 	},
 	directives: {
-		tooltip: VTooltip,
-		contenteditable: contenteditableDirective
+		tooltip: VTooltip
 	},
 	mixins: [CurrentUserMixin],
 	props: {
@@ -293,6 +291,7 @@ export default {
 		return {
 			type: 'public',
 			post: '',
+			canType: true,
 			search: '',
 			tributeOptions: {
 				lookup: function(item) {
@@ -385,6 +384,19 @@ export default {
 					longtext: t('social', 'Do not post to public timelines')
 				}
 			]
+		}
+	},
+	methods: {
+		insert(emoji) {
+			this.post += this.$twemoji.parse(emoji)
+			this.$refs.composerInput.innerHTML = this.post
+		},
+		togglePopoverMenu() {
+			this.menuOpened = !this.menuOpened
+		},
+		switchType(type) {
+			this.type = type
+			this.menuOpened = false
 		},
 		getPostData() {
 			let element = this.$refs.composerInput.cloneNode(true)
@@ -401,33 +413,25 @@ export default {
 					to.push(match[1])
 				}
 			} while (match)
-
+			let content = element.innerText.trim()
 			return {
-				content: element.innerText,
+				content: content,
 				to: to,
 				type: this.type
 			}
-		}
-	},
-	methods: {
-		insert(emoji) {
-			this.post += this.$twemoji.parse(emoji)
-			this.$refs.composerInput.innerHTML = this.post
 		},
-		updateInput(event) {
-			this.post = this.$refs.composerInput.innerHTML
-		},
-		togglePopoverMenu() {
-			this.menuOpened = !this.menuOpened
-		},
-		switchType(type) {
-			this.type = type
-			this.menuOpened = false
+		keyup(event) {
+			if (event.shiftKey) {
+				this.createPost(event)
+			}
 		},
 		createPost(event) {
-			this.$store.dispatch('post', this.getPostData).then((response) => {
+			this.$store.dispatch('post', this.getPostData()).then((response) => {
 				this.post = ''
 				this.$refs.composerInput.innerText = this.post
+				this.$store.dispatch('refreshTimeline', {
+					account: this.currentUser.uid
+				})
 			})
 		},
 		remoteSearch(text) {
diff --git a/src/main.js b/src/main.js
index 1c914b5c..0d930898 100644
--- a/src/main.js
+++ b/src/main.js
@@ -28,6 +28,7 @@ import App from './App'
 import store from './store'
 import router from './router'
 import vuetwemoji from 'vue-twemoji'
+import contenteditableDirective from 'vue-contenteditable-directive'
 
 sync(store, router)
 
@@ -45,6 +46,7 @@ Vue.prototype.n = n
 Vue.prototype.OC = OC
 Vue.prototype.OCA = OCA
 
+Vue.use(contenteditableDirective)
 Vue.use(vuetwemoji, {
 	baseUrl: OC.linkTo('social', 'img/'), // can set to local folder of emojis. default: https://twemoji.maxcdn.com/
 	extension: '.svg', // .svg, .png