diff --git a/webapp/components/Editor/index.vue b/webapp/components/Editor/index.vue
index 0690b15bd..84649f436 100644
--- a/webapp/components/Editor/index.vue
+++ b/webapp/components/Editor/index.vue
@@ -12,9 +12,7 @@
@{{ user.slug }}
-
- No users found
-
+ No users found
@@ -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() {
diff --git a/webapp/components/Editor/spec.js b/webapp/components/Editor/spec.js
index 249192b57..b982d941d 100644
--- a/webapp/components/Editor/spec.js
+++ b/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',
+ )
+ })
+ })
})
})
diff --git a/webapp/components/LocaleSwitch.vue b/webapp/components/LocaleSwitch.vue
index f6f1a9727..aeee580b5 100644
--- a/webapp/components/LocaleSwitch.vue
+++ b/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()
diff --git a/webapp/store/editor.js b/webapp/store/editor.js
new file mode 100644
index 000000000..9c5f665a0
--- /dev/null
+++ b/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
+ },
+}
diff --git a/webapp/store/editor.spec.js b/webapp/store/editor.spec.js
new file mode 100644
index 000000000..90477ea20
--- /dev/null
+++ b/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')
+ })
+})