Add reusable image editor modal (#503)

* Install cropperjs

* Add cropper js styles

* Add editing image string

* Track inner active state

* Add temp edit button

* Start on image editor modal

* Add custom icons for image manipulation

* Add image manipulation strings

* Tweak cropper styles

* Remove unused import

* Save as blob

* Expose getItem method for manual refreshes

* Add cache-busting to file preview

* Use new API post endpoint, emit refresh event on success

* Add a cache buster to the image editor

src/modules/files/routes/detail/detail.vue

@@ -65,13 +65,23 @@
 		<div class="file-detail">
 			<file-preview
 				v-if="isBatch === false && item && item.data"
-				:src="item.data.full_url"
+				:src="`${item.data.full_url}?cache-buster=${cacheBuster}`"
 				:mime="item.type"
 				:width="item.width"
 				:height="item.height"
 				:title="item.title"
 			/>
 
+			<image-editor
+				v-if="item && item.type.startsWith('image')"
+				:id="item.id"
+				@refresh="changeCacheBuster"
+			>
+				<template #activator="{ on }">
+					<v-button @click="on">Edit</v-button>
+				</template>
+			</image-editor>
+
 			<v-form
 				:loading="loading"
 				:initial-values="item"
@@ -101,6 +111,8 @@ import ActivityDrawerDetail from '@/views/private/components/activity-drawer-det
 import useItem from '@/compositions/use-item';
 import SaveOptions from '@/views/private/components/save-options';
 import FilePreview from './components/file-preview.vue';
+import ImageEditor from '@/views/private/components/image-editor';
+import { nanoid } from 'nanoid';
 
 type Values = {
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -109,7 +121,7 @@ type Values = {
 
 export default defineComponent({
 	name: 'files-detail',
-	components: { FilesNavigation, ActivityDrawerDetail, SaveOptions, FilePreview },
+	components: { FilesNavigation, ActivityDrawerDetail, SaveOptions, FilePreview, ImageEditor },
 	props: {
 		primaryKey: {
 			type: String,
@@ -140,6 +152,8 @@ export default defineComponent({
 
 		const confirmDelete = ref(false);
 
+		const cacheBuster = ref(nanoid());
+
 		return {
 			item,
 			loading,
@@ -157,8 +171,14 @@ export default defineComponent({
 			saveAndAddNew,
 			saveAsCopyAndNavigate,
 			isBatch,
+			changeCacheBuster,
+			cacheBuster,
 		};
 
+		function changeCacheBuster() {
+			cacheBuster.value = nanoid();
+		}
+
 		function useBreadcrumb() {
 			const breadcrumb = computed(() => [
 				{