diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-08-19 09:08:42 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-08-19 09:08:42 +0000 |
commit | b76ae638462ab0f673e5915986070518dd3f9ad3 (patch) | |
tree | bdab0533383b52873be0ec0eb4d3c66598ff8b91 /app/assets/javascripts/content_editor/components/editor_state_observer.vue | |
parent | 434373eabe7b4be9593d18a585fb763f1e5f1a6f (diff) | |
download | gitlab-ce-8c890596f5d0792c467fe12805ab1b39f93bf140.tar.gz |
Add latest changes from gitlab-org/gitlab@14-2-stable-eev14.2.0-rc42
Diffstat (limited to 'app/assets/javascripts/content_editor/components/editor_state_observer.vue')
-rw-r--r-- | app/assets/javascripts/content_editor/components/editor_state_observer.vue | 40 |
1 files changed, 40 insertions, 0 deletions
diff --git a/app/assets/javascripts/content_editor/components/editor_state_observer.vue b/app/assets/javascripts/content_editor/components/editor_state_observer.vue new file mode 100644 index 00000000000..2eeb0719096 --- /dev/null +++ b/app/assets/javascripts/content_editor/components/editor_state_observer.vue @@ -0,0 +1,40 @@ +<script> +import { debounce } from 'lodash'; + +export const tiptapToComponentMap = { + update: 'docUpdate', + selectionUpdate: 'selectionUpdate', + transaction: 'transaction', + focus: 'focus', + blur: 'blur', + error: 'error', +}; + +const getComponentEventName = (tiptapEventName) => tiptapToComponentMap[tiptapEventName]; + +export default { + inject: ['tiptapEditor'], + created() { + this.disposables = []; + + Object.keys(tiptapToComponentMap).forEach((tiptapEvent) => { + const eventHandler = debounce((params) => this.handleTipTapEvent(tiptapEvent, params), 100); + + this.tiptapEditor?.on(tiptapEvent, eventHandler); + + this.disposables.push(() => this.tiptapEditor?.off(tiptapEvent, eventHandler)); + }); + }, + beforeDestroy() { + this.disposables.forEach((dispose) => dispose()); + }, + methods: { + handleTipTapEvent(tiptapEvent, params) { + this.$emit(getComponentEventName(tiptapEvent), params); + }, + }, + render() { + return this.$slots.default; + }, +}; +</script> |