add image removing feature

Signed-off-by: Luka Trovic <luka@nextcloud.com>

package-lock.json

@@ -41,6 +41,7 @@
 				"tiptap-utils": "^1.13.1",
 				"vue": "^2.6.14",
 				"vue-click-outside": "^1.0.7",
+				"vue-material-design-icons": "^4.13.0",
 				"vuex": "^3.6.2"
 			},
 			"devDependencies": {
@@ -19858,9 +19859,9 @@
 			}
 		},
 		"node_modules/vue-material-design-icons": {
-			"version": "4.12.1",
-			"resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-4.12.1.tgz",
-			"integrity": "sha512-IDGGV5fC2VPN3zPRNEpm47MjJL1CIPfK34wx3+SRTkUL8dt5/hONmQ2WguBivE1uZVExMVFHekNDnEJamkJ8hA=="
+			"version": "4.13.0",
+			"resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-4.13.0.tgz",
+			"integrity": "sha512-TwaWrvh4J49VdkV9Uzcbr/p3FBRiBthRkIrg6SUh7ogFUljdA2ySNoAYD9dTU+mJkANIn1A6MoD/PnyLONnkWg=="
 		},
 		"node_modules/vue-multiselect": {
 			"version": "2.1.6",
@@ -36295,9 +36296,9 @@
 			}
 		},
 		"vue-material-design-icons": {
-			"version": "4.12.1",
-			"resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-4.12.1.tgz",
-			"integrity": "sha512-IDGGV5fC2VPN3zPRNEpm47MjJL1CIPfK34wx3+SRTkUL8dt5/hONmQ2WguBivE1uZVExMVFHekNDnEJamkJ8hA=="
+			"version": "4.13.0",
+			"resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-4.13.0.tgz",
+			"integrity": "sha512-TwaWrvh4J49VdkV9Uzcbr/p3FBRiBthRkIrg6SUh7ogFUljdA2ySNoAYD9dTU+mJkANIn1A6MoD/PnyLONnkWg=="
 		},
 		"vue-multiselect": {
 			"version": "2.1.6",

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": "^4.13.0",
 		"vuex": "^3.6.2"
 	},
 	"engines": {

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,6 +109,12 @@ const getQueryVariable = (src, variable) => {
 
 export default {
 	name: 'ImageView',
+	components: {
+		TrashCanIcon,
+	},
+	directives: {
+		ClickOutside,
+	},
 	mixins: [
 		store,
 	],
@@ -103,6 +124,7 @@ export default {
 			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>