55 lines
1.4 KiB
Vue
55 lines
1.4 KiB
Vue
<script>
|
|
import { debounce } from 'lodash';
|
|
import { ALERT_EVENT, KEYDOWN_EVENT } from '../constants';
|
|
|
|
export const tiptapToComponentMap = {
|
|
update: 'docUpdate',
|
|
selectionUpdate: 'selectionUpdate',
|
|
transaction: 'transaction',
|
|
focus: 'focus',
|
|
blur: 'blur',
|
|
};
|
|
|
|
export const eventHubEvents = [ALERT_EVENT, KEYDOWN_EVENT];
|
|
|
|
const getComponentEventName = (tiptapEventName) => tiptapToComponentMap[tiptapEventName];
|
|
|
|
export default {
|
|
inject: ['tiptapEditor', 'eventHub'],
|
|
created() {
|
|
this.disposables = [];
|
|
|
|
Object.keys(tiptapToComponentMap).forEach((tiptapEvent) => {
|
|
const eventHandler = debounce(
|
|
(params) => this.bubbleEvent(getComponentEventName(tiptapEvent), params),
|
|
100,
|
|
);
|
|
|
|
this.tiptapEditor?.on(tiptapEvent, eventHandler);
|
|
|
|
this.disposables.push(() => this.tiptapEditor?.off(tiptapEvent, eventHandler));
|
|
});
|
|
|
|
eventHubEvents.forEach((event) => {
|
|
const handler = (...params) => {
|
|
this.bubbleEvent(event, ...params);
|
|
};
|
|
|
|
this.eventHub.$on(event, handler);
|
|
this.disposables.push(() => this.eventHub?.$off(event, handler));
|
|
});
|
|
},
|
|
beforeDestroy() {
|
|
this.disposables.forEach((dispose) => dispose());
|
|
},
|
|
methods: {
|
|
bubbleEvent(eventHubEvent, params) {
|
|
this.$emit(eventHubEvent, params);
|
|
},
|
|
},
|
|
render() {
|
|
return this.$scopedSlots.default?.();
|
|
},
|
|
};
|
|
</script>
|