Emit events from editor when image nodes get added or deleted

src/components/Editor.vue

@@ -84,7 +84,7 @@ import { mapActions, mapState } from 'vuex'
 import escapeHtml from 'escape-html'
 import { getCurrentUser } from '@nextcloud/auth'
 import { loadState } from '@nextcloud/initial-state'
-import { emit } from '@nextcloud/event-bus'
+import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { Collaboration } from '@tiptap/extension-collaboration'
 import { CollaborationCursor } from '@tiptap/extension-collaboration-cursor'
 import { Doc } from 'yjs'
@@ -318,6 +318,8 @@ export default {
 			window.addEventListener('beforeprint', this.preparePrinting)
 			window.addEventListener('afterprint', this.preparePrinting)
 		}
+		subscribe('text:image-node:add', this.onAddImageNode)
+		subscribe('text:image-node:delete', this.onDeleteImageNode)
 		this.$parent?.$emit('update:loaded', true)
 	},
 	created() {
@@ -332,6 +334,8 @@ export default {
 			window.removeEventListener('beforeprint', this.preparePrinting)
 			window.removeEventListener('afterprint', this.preparePrinting)
 		}
+		unsubscribe('text:image-node:add', this.onAddImageNode)
+		unsubscribe('text:image-node:delete', this.onDeleteImageNode)
 		this.$providers.forEach(p => p.destroy())
 	},
 	methods: {
@@ -581,7 +585,6 @@ export default {
 		},
 
 		onError({ type, data }) {
-
 			this.$nextTick(() => {
 				this.$editor?.setEditable(false)
 				this.$emit('sync-service:error')
@@ -658,15 +661,23 @@ export default {
 				this.$emit('sync-service:save')
 			})
 		},
+
 		onFocus() {
 			this.$emit('focus')
 		},
 		onBlur() {
 			this.$emit('blur')
 		},
 
-		async close() {
+		onAddImageNode() {
+			this.$parent.$emit('add-image-node')
+		},
 
+		onDeleteImageNode(imageUrl) {
+			this.$parent.$emit('delete-image-node', imageUrl)
+		},
+
+		async close() {
 			if (this.currentSession && this.$syncService) {
 				try {
 					await this.$syncService.close()

src/components/Editor/MediaHandler.vue

@@ -43,6 +43,7 @@
 <script>
 import { getCurrentUser } from '@nextcloud/auth'
 import { showError } from '@nextcloud/dialogs'
+import { emit } from '@nextcloud/event-bus'
 import { logger } from '../../helpers/logger.js'
 
 import {
@@ -212,6 +213,8 @@ export default {
 
 			// Scroll image into view
 			this.$editor.commands.scrollIntoView()
+
+			emit('text:image-node:add', null)
 		},
 	},
 }

src/nodes/ImageView.vue

@@ -50,7 +50,7 @@
 								class="buttons">
 								<NcButton :aria-label="t('text', 'Delete this attachment')"
 									:title="t('text', 'Delete this attachment')"
-									@click="deleteNode">
+									@click="onDelete">
 									<template #icon>
 										<DeleteIcon />
 									</template>
@@ -86,7 +86,7 @@
 								class="image__caption__delete">
 								<NcButton :aria-label="t('text', 'Delete this image')"
 									:title="t('text', 'Delete this image')"
-									@click="deleteNode">
+									@click="onDelete">
 									<template #icon>
 										<DeleteIcon />
 									</template>
@@ -133,9 +133,10 @@ import axios from '@nextcloud/axios'
 import ClickOutside from 'vue-click-outside'
 import { NcButton } from '@nextcloud/vue'
 import ShowImageModal from '../components/ImageView/ShowImageModal.vue'
-import store from './../mixins/store.js'
-import { useAttachmentResolver } from './../components/Editor.provider.js'
+import store from '../mixins/store.js'
+import { useAttachmentResolver } from '../components/Editor.provider.js'
 import { mimetypesImages as IMAGE_MIMES } from '../helpers/mime.js'
+import { emit } from '@nextcloud/event-bus'
 import { generateUrl } from '@nextcloud/router'
 import { NodeViewWrapper } from '@tiptap/vue-2'
 import { logger } from '../helpers/logger.js'
@@ -359,6 +360,10 @@ export default {
 			this.imageIndex = this.embeddedImagesList.findIndex(image => image.relativePath === src)
 			this.showImageModal = true
 		},
+		onDelete() {
+			emit('text:image-node:delete', this.imageUrl)
+			this.deleteNode()
+		},
 	},
 }
 </script>