Avoid Hashtags in Comments in the Editor

Co-Authored-By: mattwr18 <mattwr18@gmail.com>

webapp/components/ContributionForm/ContributionForm.spec.js

@@ -26,7 +26,10 @@ describe('ContributionForm.vue', () => {
   const postTitle = 'this is a title for a post'
   const postContent = 'this is a post'
   const imageUpload = {
-    file: { filename: 'avataar.svg', previewElement: '' },
+    file: {
+      filename: 'avataar.svg',
+      previewElement: '',
+    },
     url: 'someUrlToImage',
   }
   const image = '/uploads/1562010976466-avataaars'
@@ -217,7 +220,12 @@ describe('ContributionForm.vue', () => {
             content: 'auf Deutsch geschrieben',
             language: 'de',
             image,
-            categories: [{ id: 'cat12', name: 'Democracy & Politics' }],
+            categories: [
+              {
+                id: 'cat12',
+                name: 'Democracy & Politics',
+              },
+            ],
           },
         }
         wrapper = Wrapper()

webapp/components/Editor/Editor.vue

@@ -224,31 +224,11 @@ export default {
     doc: { type: Object, default: () => {} },
   },
   data() {
-    return {
+    let mentionExtension
-      lastValueHash: null,
+    if (!this.users) {
-      editor: new Editor({
+      mentionExtension = []
-        content: this.value || '',
+    } else {
-        doc: this.doc,
+      mentionExtension = [
-        extensions: [
-          new EventHandler(),
-          new Heading(),
-          new HardBreak(),
-          new Blockquote(),
-          new BulletList(),
-          new OrderedList(),
-          new HorizontalRule(),
-          new Bold(),
-          new Italic(),
-          new Strike(),
-          new Underline(),
-          new Link(),
-          new Heading({ levels: [3, 4] }),
-          new ListItem(),
-          new Placeholder({
-            emptyNodeClass: 'is-empty',
-            emptyNodeText: this.placeholder || this.$t('editor.placeholder'),
-          }),
-          new History(),
         new Mention({
           // a list of all suggested items
           items: () => {
@@ -320,6 +300,14 @@ export default {
             return fuse.search(query)
           },
         }),
+      ]
+    }
+
+    let hashtagExtension
+    if (!this.hashtags) {
+      hashtagExtension = []
+    } else {
+      hashtagExtension = [
         new Hashtag({
           // a list of all suggested items
           items: () => {
@@ -397,6 +385,36 @@ export default {
             )
           },
         }),
+      ]
+    }
+
+    return {
+      lastValueHash: null,
+      editor: new Editor({
+        content: this.value || '',
+        doc: this.doc,
+        extensions: [
+          new EventHandler(),
+          new Heading(),
+          new HardBreak(),
+          new Blockquote(),
+          new BulletList(),
+          new OrderedList(),
+          new HorizontalRule(),
+          new Bold(),
+          new Italic(),
+          new Strike(),
+          new Underline(),
+          new Link(),
+          new Heading({ levels: [3, 4] }),
+          new ListItem(),
+          new Placeholder({
+            emptyNodeClass: 'is-empty',
+            emptyNodeText: this.placeholder || this.$t('editor.placeholder'),
+          }),
+          new History(),
+          ...mentionExtension,
+          ...hashtagExtension,
         ],
         onUpdate: e => {
           clearTimeout(throttleInputEvent)

webapp/components/comments/CommentForm/CommentForm.spec.js

@@ -1,5 +1,5 @@
 import { mount, createLocalVue } from '@vue/test-utils'
-import CommentForm from './index.vue'
+import CommentForm from './CommentForm.vue'
 import Styleguide from '@human-connection/styleguide'
 import Vuex from 'vuex'
 
@@ -21,9 +21,15 @@ describe('CommentForm.vue', () => {
         mutate: jest
           .fn()
           .mockResolvedValueOnce({
-            data: { CreateComment: { contentExcerpt: 'this is a comment' } },
+            data: {
+              CreateComment: {
+                contentExcerpt: 'this is a comment',
+              },
+            },
           })
-          .mockRejectedValue({ message: 'Ouch!' }),
+          .mockRejectedValue({
+            message: 'Ouch!',
+          }),
       },
       $toast: {
         error: jest.fn(),
@@ -31,7 +37,9 @@ describe('CommentForm.vue', () => {
       },
     }
     propsData = {
-      post: { id: 1 },
+      post: {
+        id: 1,
+      },
     }
   })
 
@@ -45,7 +53,12 @@ describe('CommentForm.vue', () => {
       getters,
     })
     const Wrapper = () => {
-      return mount(CommentForm, { mocks, localVue, propsData, store })
+      return mount(CommentForm, {
+        mocks,
+        localVue,
+        propsData,
+        store,
+      })
     }
 
     beforeEach(() => {

webapp/components/comments/CommentForm/CommentForm.vue

@@ -2,7 +2,13 @@
   <ds-form v-model="form" @submit="handleSubmit">
     <template slot-scope="{ errors }">
       <ds-card>
-        <hc-editor ref="editor" :users="users" :value="form.content" @input="updateEditorContent" />
+        <hc-editor
+          ref="editor"
+          :users="users"
+          :hashtags="null"
+          :value="form.content"
+          @input="updateEditorContent"
+        />
         <ds-space />
         <ds-flex :gutter="{ base: 'small', md: 'small', sm: 'x-large', xs: 'x-large' }">
           <ds-flex-item :width="{ base: '0%', md: '50%', sm: '0%', xs: '0%' }" />

webapp/locales/de.json

@@ -229,7 +229,7 @@
     },
     "comment": {
       "submit": "Kommentiere",
-      "submitted": "Kommentar Gesendet"
+      "submitted": "Kommentar gesendet"
     }
   },
   "comment": {

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

@@ -67,7 +67,7 @@ import HcTag from '~/components/Tag'
 import ContentMenu from '~/components/ContentMenu'
 import HcUser from '~/components/User'
 import HcShoutButton from '~/components/ShoutButton.vue'
-import HcCommentForm from '~/components/comments/CommentForm'
+import HcCommentForm from '~/components/comments/CommentForm/CommentForm'
 import HcCommentList from '~/components/comments/CommentList'
 import { postMenuModalsData, deletePostMutation } from '~/components/utils/PostHelpers'
 import PostQuery from '~/graphql/PostQuery.js'