slug from editor comands set

webapp/components/Comment/Comment.vue

@@ -54,13 +54,14 @@
         </button>
       </div>
       <ds-space margin-bottom="small" />
+      <ds-button
+        :title="this.$t('post.comment.answer')"
+        icon="level-down"
+        @click.prevent="reply"
+        v-scroll-to="'.editor'"
+        class="answerbutton"
+      ></ds-button>
     </ds-card>
-    <ds-button
-      v-bind:title="answered"
-      icon="level-down"
-      style="float:right; top: -22px;"
-      @click.prevent="answerComment"
-    ></ds-button>
     <div style="clear:both"></div>
   </div>
 </template>
@@ -86,7 +87,6 @@ export default {
       isTarget,
       isCollapsed: !isTarget,
       openEditCommentMenu: false,
-      answered: this.$t('post.comment.answered'),
     }
   },
   components: {
@@ -113,7 +113,6 @@ export default {
       if (this.isLongComment && this.isCollapsed) {
         return this.$filters.truncate(this.comment.content, COMMENT_TRUNCATE_TO_LENGTH)
       }
-      // console.log(this.comment.content.replace(/\?/gi, '?++'))
       return this.comment.content
     },
     displaysComment() {
@@ -149,6 +148,10 @@ export default {
     },
   },
   methods: {
+    reply(comment) {
+      const message = { slug: this.comment.author.slug, id: this.comment.author.id }
+      this.$emit('reply', message)
+    },
     checkAnchor(anchor) {
       return `#${this.anchor}` === anchor
     },
@@ -176,23 +179,6 @@ export default {
         this.$toast.error(err.message)
       }
     },
-    answerComment() {
-      const slug =
-        '<a class="mention" href="/profile/' +
-        this.comment.author.id +
-        '" data-mention-id="' +
-        this.comment.author.slug +
-        '" target="_blank" contenteditable="false">@d' +
-        this.comment.author.slug +
-        '</a>'
-      document.querySelector('.editor-content div').focus()
-      if (document.querySelector('.is-empty')) {
-        document.querySelector('.is-empty').innerHTML = slug + ' '
-      } else {
-        const html = document.querySelector('.editor-content').innerHTML
-        document.querySelector('.editor-content div').innerHTML = html + ' ' + slug + ' '
-      }
-    },
   },
 }
 </script>
@@ -218,6 +204,11 @@ export default {
   float: right;
 }
 
+.answerbutton {
+  float: right;
+  top: 0px;
+}
+
 @keyframes highlight {
   0% {
     border: 1px solid $color-primary;

webapp/components/CommentForm/CommentForm.vue

@@ -57,6 +57,9 @@ export default {
     }
   },
   methods: {
+    reply(message) {
+      this.$refs.editor.insertReply(message)
+    },
     updateEditorContent(value) {
       const sanitizedContent = this.$filters.removeHtml(value, false)
       if (!this.update) {

webapp/components/CommentList/CommentList.vue

@@ -8,6 +8,7 @@
     <ds-space margin-bottom="large" />
     <div v-if="post.comments && post.comments.length" id="comments" class="comments">
       <comment
+        @reply="reply"
         v-for="comment in post.comments"
         :key="comment.id"
         :comment="comment"
@@ -36,6 +37,9 @@ export default {
     post: { type: Object, default: () => {} },
   },
   methods: {
+    reply(message) {
+      this.$emit('reply', message)
+    },
     checkAnchor(anchor) {
       return anchor === '#comments'
     },

webapp/components/Editor/Editor.vue

@@ -141,7 +141,6 @@ export default {
   methods: {
     openSuggestionList({ items, query, range, command, virtualNode }, suggestionType) {
       this.suggestionType = suggestionType
-
       this.query = this.sanitizeQuery(query)
       this.filteredItems = items
       this.suggestionRange = range
@@ -237,6 +236,9 @@ export default {
       const content = e.getHTML()
       this.$emit('input', content)
     },
+    insertReply(message) {
+      this.editor.commands.mention({ id: message.id, label: message.slug })
+    },
     toggleLinkInput(attrs, element) {
       if (!this.isLinkInputActive && attrs && element) {
         this.$refs.linkInput.linkUrl = attrs.href

webapp/locales/de.json

@@ -270,7 +270,7 @@
             "submit": "Kommentiere",
             "submitted": "Kommentar Gesendet",
             "updated": "Änderungen gespeichert",
-            "answered": "answered"
+            "answer": "Antworten"
         },
         "edited": "bearbeitet"
     },

webapp/locales/en.json

@@ -424,7 +424,7 @@
       "submit": "Comment",
       "submitted": "Comment Submitted",
       "updated": "Changes Saved",
-      "answered": "answered"
+      "answer": "Answer"
     },
     "edited": "edited"
   },

webapp/pages/post/_id/_slug/index.vue

@@ -72,12 +72,18 @@
       <!-- Comments -->
       <ds-section slot="footer">
         <hc-comment-list
+          @reply="reply"
           :post="post"
           :routeHash="$route.hash"
           @toggleNewCommentForm="toggleNewCommentForm"
         />
         <ds-space margin-bottom="large" />
-        <hc-comment-form v-if="showNewCommentForm" :post="post" @createComment="createComment" />
+        <hc-comment-form
+          ref="commentForm"
+          v-if="showNewCommentForm"
+          :post="post"
+          @createComment="createComment"
+        />
       </ds-section>
     </ds-card>
   </transition>
@@ -150,6 +156,9 @@ export default {
     },
   },
   methods: {
+    reply(message) {
+      this.$refs.commentForm && this.$refs.commentForm.reply(message)
+    },
     isAuthor(id) {
       return this.$store.getters['auth/user'].id === id
     },