fix: only show delete image button when editing

Also test for it being shown and triggering the deleteNode
when editing.

Signed-off-by: Max <max@nextcloud.com>

Author: max-nextcloud

src/nodes/ImageView.vue

@@ -41,7 +41,7 @@
 							type="text"
 							:value="alt"
 							@keyup.enter="updateAlt()">
-						<div v-if="showIcons"
+						<div v-if="editor.isEditable && showIcons"
 							class="trash-icon"
 							title="Delete this image"
 							@click="deleteNode">

src/tests/nodes/ImageView.spec.js

@@ -10,42 +10,60 @@ global.OC = {
 
 describe('Image View src attribute based on markdown', () => {
 
-	const factory = attrs => {
+	const factory = (attrs, options = {}) => {
 		const propsData = {
-			extension: { options: {currentDirectory: '/current'} },
-			node: {attrs}
+			extension: { options: { currentDirectory: '/current' } },
+			editor: { isEditable: options.isEditable ?? true },
+			node: { attrs },
+			deleteNode: options.deleteNode ?? function() {},
 		}
 		const data = () => ({
 			imageLoaded: true,
 			loaded: true,
 			failed: false,
+			showIcons: true,
 		})
 		return shallowMount(ImageView, {propsData, data})
 	}
 
 	test('old style is used as is', () => {
 		const src = '/core/preview?fileId=123#mimetype=image%2Fjpeg'
-		const wrapper = factory({src})
+		const wrapper = factory({ src })
 		expect(wrapper.find('.image__main').attributes('src')).toBe(src)
 	})
 
+	test('has button to remove image', () => {
+		const deleteNode = jest.fn()
+		const src = '/core/preview?fileId=123#mimetype=image%2Fjpeg'
+		const wrapper = factory({ src }, { deleteNode })
+		wrapper.find('.image .trash-icon').trigger('click')
+		expect(deleteNode).toHaveBeenCalled()
+	})
+
+	test('no button to remove image when not editable', () => {
+		const src = '/core/preview?fileId=123#mimetype=image%2Fjpeg'
+		const wrapper = factory({ src }, { isEditable: false })
+		expect(wrapper.find('.image__main').attributes('src')).toBe(src)
+		expect(wrapper.find('.image .trash-icon').exists()).toBeFalsy()
+	})
+
 	test('old style with index.php is used as is', () => {
 		const src = '/index.php/core/preview?fileId=9&x=1024&y=1024&a=true#mimetype=image%2Fjpeg&hasPreview=true&fileId=9'
-		const wrapper = factory({src})
+		const wrapper = factory({ src })
 		expect(wrapper.find('.image__main').attributes('src')).toBe(src)
 	})
 
 	test('fileId is used for preview url', () => {
 		const src = '/Media/photo.jpeg?fileId=7#mimetype=image%2Fjpeg&hasPreview=true'
-		const wrapper = factory({src})
+		const wrapper = factory({ src })
 		expect(wrapper.vm.fileId).toBe('7')
 		expect(wrapper.find('.image__main').attributes('src'))
 			.toContain('/core/preview?fileId=7')
 	})
 
 	test('use dav paths for gifs so they are animated', () => {
 		const src = '/Media/giffy.gif?fileId=7#mimetype=image%2Fgif&hasPreview=true'
-		const wrapper = factory({src})
+		const wrapper = factory({ src })
 		expect(wrapper.vm.extension.options.currentDirectory).toBe('/current')
 		expect(wrapper.find('.image__main').attributes('src'))
 			.toContain("remote.php/dav/files/user1/current/Media/giffy.gif")
@@ -67,7 +85,7 @@ describe('Image View src attribute based on markdown', () => {
 
 	test('data urls are used as is', () => {
 		const src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII='
-		const wrapper = factory({src})
+		const wrapper = factory({ src })
 		expect(wrapper.find('.image__main').attributes('src')).toBe(src)
 	})