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>