Set up editor placeholder to use Vuex

- to make reactive
- safer than using global event buses ($root.$emit)

Co-authored-by: Wolfgang Huß <wolle.huss@pjannto.com>
Co-authored-by: Mike Aono <aonomike@gmail.com>

webapp/components/Editor/index.vue

@@ -12,9 +12,7 @@
           @{{ user.slug }}
         </div>
       </template>
-      <div v-else class="suggestion-list__item is-empty">
-        No users found
-      </div>
+      <div v-else class="suggestion-list__item is-empty">No users found</div>
     </div>
 
     <editor-menu-bubble :editor="editor">
@@ -175,6 +173,7 @@ import {
   History,
 } from 'tiptap-extensions'
 import Mention from './nodes/Mention.js'
+import { mapGetters } from 'vuex'
 
 let throttleInputEvent
 
@@ -212,7 +211,7 @@ export default {
           new ListItem(),
           new Placeholder({
             emptyNodeClass: 'is-empty',
-            emptyNodeText: this.$t('editor.placeholder'),
+            emptyNodeText: this.placeholder || this.$t('editor.placeholder'),
           }),
           new History(),
           new Mention({
@@ -297,6 +296,7 @@ export default {
     }
   },
   computed: {
+    ...mapGetters({ placeholder: 'editor/placeholder' }),
     hasResults() {
       return this.filteredUsers.length
     },
@@ -316,20 +316,20 @@ export default {
         this.editor.setContent(content)
       },
     },
-  },
-  mounted() {
-    this.$root.$on('changeLanguage', () => {
-      this.changePlaceHolderText()
-    })
+    placeholder: {
+      immediate: true,
+      handler: function(val) {
+        if (!val) {
+          return
+        }
+        this.editor.extensions.options.placeholder.emptyNodeText = val
+      },
+    },
   },
   beforeDestroy() {
-    this.$root.$off('changeLanguage')
     this.editor.destroy()
   },
   methods: {
-    changePlaceHolderText() {
-      this.editor.extensions.options.placeholder.emptyNodeText = this.$t('editor.placeholder')
-    },
     // navigate to the previous item
     // if it's the first item, navigate to the last one
     upHandler() {

webapp/components/Editor/spec.js

@@ -1,31 +1,43 @@
 import { mount, createLocalVue } from '@vue/test-utils'
 import Editor from './'
+import Vuex from 'vuex'
 
 import Styleguide from '@human-connection/styleguide'
 
 const localVue = createLocalVue()
+localVue.use(Vuex)
 localVue.use(Styleguide)
 
 describe('Editor.vue', () => {
   let wrapper
   let propsData
   let mocks
+  let getters
 
   beforeEach(() => {
     propsData = {}
     mocks = {
       $t: () => {},
     }
+    getters = {
+      'editor/placeholder': () => {
+        return 'some cool placeholder'
+      },
+    }
   })
 
   describe('mount', () => {
     let Wrapper = () => {
+      const store = new Vuex.Store({
+        getters,
+      })
       return (wrapper = mount(Editor, {
         mocks,
         propsData,
         localVue,
         sync: false,
         stubs: { transition: false },
+        store,
       }))
     }
 
@@ -43,5 +55,13 @@ describe('Editor.vue', () => {
         expect(wrapper.find('.ProseMirror').text()).toContain('I am a piece of text')
       })
     })
+
+    describe('uses the placeholder', () => {
+      it('from the store', () => {
+        expect(wrapper.vm.editor.extensions.options.placeholder.emptyNodeText).toEqual(
+          'some cool placeholder',
+        )
+      })
+    })
   })
 })

webapp/components/LocaleSwitch.vue

@@ -36,6 +36,7 @@
 import Dropdown from '~/components/Dropdown'
 import find from 'lodash/find'
 import orderBy from 'lodash/orderBy'
+import { mapMutations } from 'vuex'
 
 export default {
   components: {
@@ -65,10 +66,11 @@ export default {
     },
   },
   methods: {
+    ...mapMutations({ setPlaceholderText: 'editor/SET_PLACEHOLDER_TEXT' }),
     changeLanguage(locale, toggleMenu) {
       this.$i18n.set(locale)
       toggleMenu()
-      this.$root.$emit('changeLanguage')
+      this.setPlaceholderText(this.$t('editor.placeholder'))
     },
     matcher(locale) {
       return locale === this.$i18n.locale()

webapp/store/editor.js

@@ -0,0 +1,17 @@
+export const state = () => {
+  return {
+    placeholder: null,
+  }
+}
+
+export const getters = {
+  placeholder(state) {
+    return state.placeholder
+  },
+}
+
+export const mutations = {
+  SET_PLACEHOLDER_TEXT(state, text) {
+    state.placeholder = text
+  },
+}

webapp/store/editor.spec.js

@@ -0,0 +1,20 @@
+import { getters, mutations } from './editor.js'
+
+let state
+
+describe('getters', () => {
+  describe('placeholder', () => {
+    it('return the value in state', () => {
+      state = { placeholder: null }
+      expect(getters.placeholder(state)).toBe(null)
+    })
+  })
+})
+
+describe('mutations', () => {
+  it('SET_PLACEHOLDER_TEXT', () => {
+    state = { placeholder: null }
+    mutations.SET_PLACEHOLDER_TEXT(state, 'new placeholder')
+    expect(getters.placeholder(state)).toBe('new placeholder')
+  })
+})