Merge pull request #1872 from nextcloud/image-removing-on-hover

add image removing on hover

package.json

@@ -58,6 +58,7 @@
 		"tiptap-utils": "^1.13.1",
 		"vue": "^2.6.14",
 		"vue-click-outside": "^1.0.7",
+		"vue-material-design-icons": "^5.0.0",
 		"vuex": "^3.6.2"
 	},
 	"engines": {
@@ -72,14 +73,14 @@
 		"@nextcloud/stylelint-config": "^2.1.2",
 		"@nextcloud/webpack-vue-config": "^4.2.0",
 		"@vue/test-utils": "^1.3.0",
+		"@vue/vue2-jest": "^27.0.0-alpha.4",
 		"babel-core": "^7.0.0-bridge.0",
 		"cypress": "^9.2.0",
 		"cypress-file-upload": "^5.0.8",
 		"jest": "^27.4.7",
 		"jest-environment-jsdom": "^27.4.6",
 		"jest-serializer-vue": "^2.0.2",
-		"regenerator-runtime": "^0.13.9",
-		"vue-jest": "^3.0.7"
+		"regenerator-runtime": "^0.13.9"
 	},
 	"jest": {
 		"verbose": true,
@@ -97,13 +98,16 @@
 		],
 		"transform": {
 			"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
-			".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
+			".*\\.(vue)$": "<rootDir>/node_modules/@vue/vue2-jest"
 		},
 		"snapshotSerializers": [
 			"<rootDir>/node_modules/jest-serializer-vue"
 		],
 		"setupFilesAfterEnv": [
 			"<rootDir>/src/tests/setup.js"
+		],
+		"transformIgnorePatterns": [
+			  "/node_modules/(?!vue-material-design-icons)"
 		]
 	}
 }

src/nodes/ImageView.vue

@@ -22,7 +22,12 @@
 
 <template>
 	<div class="image" :class="{'icon-loading': !loaded}" :data-src="src">
-		<div v-if="imageLoaded && isSupportedImage" class="image__view">
+		<div v-if="imageLoaded && isSupportedImage"
+			v-click-outside="() => showIcons = false"
+			class="image__view"
+			@click="showIcons = true"
+			@mouseover="showIcons = true"
+			@mouseleave="showIcons = false">
 			<transition name="fade">
 				<img v-show="loaded"
 					:src="imageUrl"
@@ -35,6 +40,13 @@
 						type="text"
 						:value="alt"
 						@keyup.enter="updateAlt()">
+					<div
+						v-if="showIcons"
+						class="trash-icon"
+						title="Delete this image"
+						@click="deleteImage">
+						<TrashCanIcon />
+					</div>
 				</div>
 			</transition>
 		</div>
@@ -45,7 +57,8 @@
 						<span v-if="!isSupportedImage">{{ alt }}</span>
 					</a>
 				</div>
-			</transition><transition v-if="isSupportedImage" name="fade">
+			</transition>
+			<transition v-if="isSupportedImage" name="fade">
 				<div v-show="loaded" class="image__caption">
 					<input ref="altInput"
 						type="text"
@@ -61,6 +74,8 @@
 import path from 'path'
 import { generateUrl, generateRemoteUrl } from '@nextcloud/router'
 import { getCurrentUser } from '@nextcloud/auth'
+import ClickOutside from 'vue-click-outside'
+import TrashCanIcon from 'vue-material-design-icons/TrashCan.vue'
 import store from './../mixins/store'
 
 const imageMimes = [
@@ -94,15 +109,22 @@ const getQueryVariable = (src, variable) => {
 
 export default {
 	name: 'ImageView',
+	components: {
+		TrashCanIcon,
+	},
+	directives: {
+		ClickOutside,
+	},
 	mixins: [
 		store,
 	],
-	props: ['node', 'options', 'updateAttrs', 'view'], // eslint-disable-line
+	props: ['node', 'options', 'updateAttrs', 'view', 'getPos'], // eslint-disable-line
 	data() {
 		return {
 			imageLoaded: false,
 			loaded: false,
 			failed: false,
+			showIcons: false,
 		}
 	},
 	computed: {
@@ -267,6 +289,12 @@ export default {
 		onLoaded() {
 			this.loaded = true
 		},
+		deleteImage() {
+			const tr = this.view.state.tr
+			const pos = this.getPos()
+			tr.delete(pos, pos + this.node.nodeSize)
+			this.view.dispatch(tr)
+		},
 	},
 }
 </script>
@@ -280,8 +308,11 @@ export default {
 	.image__caption {
 		text-align: center;
 		color: var(--color-text-lighter);
+		display: flex;
+		align-items: center;
+		justify-content: center;
 		input[type='text'] {
-			width: 100%;
+			max-width: 80%;
 			border: none;
 			text-align: center;
 		}
@@ -293,6 +324,8 @@ export default {
 
 	.image__view {
 		text-align: center;
+		position: relative;
+
 		img {
 			max-width: 100%;
 		}
@@ -313,4 +346,15 @@ export default {
 	.fade-enter {
 		opacity: 0;
 	}
+
+	.trash-icon {
+		position: absolute;
+		right: 0;
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+		svg {
+			cursor: pointer;
+		}
+	}
 </style>