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') + }) +})