feat(attachments): allow to listen for changes via editorApi

Required for Collectives to track attachments.

Signed-off-by: Jonas <jonas@freesources.org>

Author: mejo-

src/editor.js

@@ -74,6 +74,11 @@ class TextEditorEmbed {
 		return this
 	}
 
+	onAttachmentsUpdated(onAttachmentsUpdatedCallback = () => {}) {
+		subscribe('text:editor:attachments:updated', onAttachmentsUpdatedCallback)
+		return this
+	}
+
 	render(el) {
 		el.innerHTML = ''
 		const element = document.createElement('div')
@@ -256,6 +261,7 @@ window.OCA.Text.createEditor = async function ({
 	onMentionInsert = undefined,
 	openLinkHandler = undefined,
 	onSearch = undefined,
+	onAttachmentsUpdated = ({ attachmentSrcs }) => {},
 }) {
 	const { default: MarkdownContentEditor } = await import(
 		'./components/Editor/MarkdownContentEditor.vue'
@@ -339,6 +345,7 @@ window.OCA.Text.createEditor = async function ({
 		.onTocToggle(onOutlineToggle)
 		.onTocToggle(onTocToggle)
 		.onTocPin(onTocPin)
+		.onAttachmentsUpdated(onAttachmentsUpdated)
 		.render(el)
 }
 

src/nodes/Image.js

@@ -3,12 +3,17 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import { emit } from '@nextcloud/event-bus'
 import TiptapImage from '@tiptap/extension-image'
 import { defaultMarkdownSerializer } from '@tiptap/pm/markdown'
-import { Plugin } from '@tiptap/pm/state'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
 import { VueNodeViewRenderer } from '@tiptap/vue-2'
+import extractAttachmentSrcs from '../plugins/extractAttachmentSrcs.ts'
 import ImageView from './ImageView.vue'
 
+const imageFileDropPluginKey = new PluginKey('imageFileDrop')
+const imageExtractAttachmentsKey = new PluginKey('imageExtractAttachments')
+
 const Image = TiptapImage.extend({
 	selectable: false,
 
@@ -41,6 +46,7 @@ const Image = TiptapImage.extend({
 	addProseMirrorPlugins() {
 		return [
 			new Plugin({
+				key: imageFileDropPluginKey,
 				props: {
 					handleDrop: (view, event, slice) => {
 						// only catch the drop if it contains files
@@ -82,6 +88,31 @@ const Image = TiptapImage.extend({
 					},
 				},
 			}),
+			new Plugin({
+				key: imageExtractAttachmentsKey,
+				state: {
+					init(_, { doc }) {
+						const attachmentSrcs = extractAttachmentSrcs(doc)
+						emit('text:editor:attachments:updated', { attachmentSrcs })
+						return { attachmentSrcs }
+					},
+					apply(tr, value, _oldState, newState) {
+						if (!tr.docChanged) {
+							return value
+						}
+						const attachmentSrcs = extractAttachmentSrcs(newState.doc)
+						if (
+							JSON.stringify(attachmentSrcs)
+							=== JSON.stringify(value?.attachmentSrcs)
+						) {
+							return value
+						}
+
+						emit('text:editor:attachments:updated', { attachmentSrcs })
+						return { attachmentSrcs }
+					},
+				},
+			}),
 		]
 	},
 

src/plugins/extractAttachmentSrcs.ts

@@ -0,0 +1,31 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { Node } from '@tiptap/pm/model'
+
+/**
+ * Extract attachment src attributes from doc
+ *
+ * @param doc - the prosemirror doc
+ * @return src attributes of attachments found in the doc
+ */
+export default function extractAttachmentSrcs(doc: Node) {
+	const attachmentSrcs: string[] = []
+
+	doc.descendants((node) => {
+		if (node.type.name !== 'image' && node.type.name !== 'imageInline') {
+			return
+		}
+
+		// ignore empty src
+		if (!node.attrs.src) {
+			return
+		}
+
+		attachmentSrcs.push(node.attrs.src)
+	})
+
+	return attachmentSrcs
+}

src/tests/plugins/extractAttachmentSrcs.spec.js

@@ -0,0 +1,41 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import Image from '../../nodes/Image.js'
+import extractAttachmentSrcs from '../../plugins/extractAttachmentSrcs.ts'
+import createCustomEditor from '../testHelpers/createCustomEditor.ts'
+
+describe('extractAttachmentSrcs', () => {
+	it('returns an empty array for an empty doc', () => {
+		const doc = prepareDoc('')
+		const attachmentSrcs = extractAttachmentSrcs(doc)
+		expect(attachmentSrcs).toEqual([])
+	})
+
+	it('returns headings', () => {
+		const content =
+			'<figure><img src=".attachments.123/test.pdf"></figure><br><figure><img src=".attachments.456/test2.png"></figure>'
+		const doc = prepareDoc(content)
+		const attachmentSrcs = extractAttachmentSrcs(doc)
+		expect(attachmentSrcs).toEqual([
+			'.attachments.123/test.pdf',
+			'.attachments.456/test2.png',
+		])
+	})
+
+	it('ignores an empty src', () => {
+		const content = '<img>'
+		const doc = prepareDoc(content)
+		const attachmentSrcs = extractAttachmentSrcs(doc)
+		expect(attachmentSrcs).toEqual([])
+	})
+})
+
+const prepareDoc = (content) => {
+	const editor = createCustomEditor(content, [Image])
+	const doc = editor.state.doc
+	editor.destroy()
+	return doc
+}