add edit text

package.json

@@ -42,6 +42,7 @@
   },
   "peerDependencies": {
     "dragselect": "^2.3.1",
+    "cropperjs": "^1.5.12",
     "vue": "^3.2.0"
   }
 }

src/components/modals/ModalPreview.vue

@@ -1,16 +1,8 @@
 <template>
   <v-f-modal-layout>
     <div class="sm:flex sm:items-start">
-      <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 dark:bg-gray-500 sm:mx-0 sm:h-10 sm:w-10">
-        <svg class="h-6 w-6 stroke-red-600 dark:stroke-red-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-             stroke-width="2" stroke="currentColor" aria-hidden="true">
-          <path stroke-linecap="round" stroke-linejoin="round"
-                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
-        </svg>
-      </div>
       <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
-        <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-400" id="modal-title">{{ selection.item.basename }}</h3>
-        <div class="mt-2">
+        <div>
           <Text v-if="loadPreview('text')" :selection="selection" @load="loaded = true"/>
           <Image v-else-if="loadPreview('image')" :selection="selection" @load="loaded = true"/>
           <Video v-else-if="loadPreview('video')" :selection="selection" @load="loaded = true"/>
@@ -23,11 +15,8 @@
           <p>{{ selection.item.path }}</p>
           <p>mime_type: {{ selection.item.mime_type }}</p>
           <div class="flex leading-5" v-if="loaded == false">
-            <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none"
-                 viewBox="0 0 24 24">
-              <circle class="opacity-25 stroke-blue-900 dark:stroke-blue-100" cx="12" cy="12" r="10"
-                      stroke="currentColor"
-                      stroke-width="4"></circle>
+            <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25 stroke-blue-900 dark:stroke-blue-100" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
               <path class="opacity-75" fill="currentColor"
                     d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
             </svg>

src/components/previews/Audio.vue

@@ -1,4 +1,5 @@
 <template>
+  <h3 class="mb-2 text-lg leading-6 font-medium text-gray-900 dark:text-gray-400" id="modal-title">{{ selection.item.basename }}</h3>
   <div>
       <audio class="w-full" controls>
           <source :src="getAudioUrl()" type="audio/mpeg">

src/components/previews/Default.vue

@@ -1,4 +1,5 @@
 <template>
+  <h3 class="mb-2 text-lg leading-6 font-medium text-gray-900 dark:text-gray-400" id="modal-title">{{ selection.item.basename }}</h3>
   <div>
     Default view..
   </div>

src/components/previews/Image.vue

@@ -1,4 +1,5 @@
 <template>
+  <h3 class="mb-2 text-lg leading-6 font-medium text-gray-900 dark:text-gray-400" id="modal-title">{{ selection.item.basename }}</h3>
   <div class="w-full flex justify-center">
     <img class="max-w-[350px] max-h-[350px]" :src="getImageUrl()" alt="">
   </div>

src/components/previews/Pdf.vue

@@ -1,4 +1,5 @@
 <template>
+  <h3 class="mb-2 text-lg leading-6 font-medium text-gray-900 dark:text-gray-400" id="modal-title">{{ selection.item.basename }}</h3>
   <div>
     <object :data="getPDFUrl()" type="application/pdf" width="100%" height="100%">
       <iframe

src/components/previews/Text.vue

@@ -1,18 +1,35 @@
 <template>
+  <div class="flex">
+    <div class="mb-2 text-lg leading-6 font-medium text-gray-900 dark:text-gray-400" id="modal-title">
+      {{ selection.item.basename }}
+    </div>
+    <div class="ml-auto mb-2">
+      <button @click="save" class="ml-1 px-2 py-1 rounded border border-transparent shadow-sm bg-blue-700/75 hover:bg-blue-700 dark:bg-gray-700 dark:hover:bg-gray-700/50  text-base font-medium text-white sm:ml-3 sm:w-auto sm:text-sm" v-if="showEdit">Save</button>
+      <button class="ml-1 px-2 py-1  text-blue-500" @click="editMode()">{{ showEdit ? 'Cancel': 'Edit' }}</button>
+    </div>
+  </div>
   <div>
-    <pre class="border font-normal border-gray-200 dark:border-gray-700/50 p-2 rounded min-h-[100px] text-sm">{{ content }}</pre>
-      <!--              <textarea class="w-full p-2 rounded dark:bg-gray-700 dark:text-gray-200 dark:focus:ring-gray-600 dark:focus:border-gray-600 dark:selection:bg-gray-500" name="text" id="" cols="30" rows="10">{{ content }}</textarea>-->
+    <pre v-if="!showEdit" class="p-2 border font-normal border-gray-200 dark:border-gray-700/50 dark:text-gray-200 rounded min-h-[100px] text-xs ">{{ content }}</pre>
+    <div v-else>
+      <textarea
+          :ref="el => editInput = el"
+          v-model="contentTemp"
+          class="w-full p-2 rounded dark:bg-gray-700 dark:text-gray-200 dark:focus:ring-gray-600 dark:focus:border-gray-600 dark:selection:bg-gray-500 text-xs" name="text" id="" cols="30" rows="10"></textarea>
+    </div>
   </div>
 </template>
 
 <script setup>
 
-import {onMounted, ref} from 'vue';
+import {nextTick, onMounted, ref} from 'vue';
 import ajax from '../../utils/ajax.js';
 import {useApiUrl} from '../../composables/useApiUrl.js';
 
 const emit = defineEmits(['load'])
 const content = ref('');
+const contentTemp = ref('');
+const editInput = ref(null);
+const showEdit = ref(false);
 const {apiUrl} = useApiUrl();
 const props = defineProps({
   selection: Object
@@ -23,12 +40,34 @@ onMounted(() => {
     params: {q: 'preview', adapter: props.selection.adapter, path: props.selection.item.path},
     json: false
   })
-      .then(response => response.text())
       .then(data => {
         content.value = data;
         emit('load');
       });
 });
 
+const editMode = () => {
+  showEdit.value = !showEdit.value;
+  contentTemp.value = content.value;
+  if (showEdit.value == true) {
+    nextTick(() => {
+      editInput.value.focus();
+    });
+  }
+};
+
+const save = () => {
+  ajax(apiUrl.value, {
+    method: 'POST',
+    params: {q: 'save', adapter: props.selection.adapter, path: props.selection.item.path, content: contentTemp.value},
+    json: false
+  })
+      .then(data => {
+        content.value = data;
+        emit('load');
+        showEdit.value = !showEdit.value
+      })
+      .catch((e) => console.log(e.statusText));
+}
 
 </script>

src/components/previews/Video.vue

@@ -1,9 +1,10 @@
 <template>
+  <h3 class="mb-2 text-lg leading-6 font-medium text-gray-900 dark:text-gray-400" id="modal-title">{{ selection.item.basename }}</h3>
   <div>
-      <video class="w-full" preload controls>
-        <source :src="getVideoUrl()" type="video/mp4">
-        Your browser does not support the video tag.
-      </video>
+    <video class="w-full" preload controls>
+      <source :src="getVideoUrl()" type="video/mp4">
+      Your browser does not support the video tag.
+    </video>
   </div>
 </template>
 

src/utils/ajax.js

@@ -1,15 +1,23 @@
-export default (url, {method = 'get', params = {},json = true}) => {
+export default (url, {method = 'get', params = {}, json = true}) => {
     const init = {method: method};
 
     if (method == 'get') {
         url += '?' + new URLSearchParams(params);
     } else {
-        init.body = params;
-    }
+        init.headers = {};
+        let formData = new FormData();
+
+        for (const [key, value] of Object.entries(params)) {
+            formData.append(key, value);
+        }
 
-    if (!json) {
-        return fetch(url, init);
+        init.body = formData;
     }
 
-    return fetch(url, init).then(response => response.json());
+    return fetch(url, init).then((response) => {
+        if (response.ok) {
+            return json ? response.json() : response.text();
+        }
+        return Promise.reject(response);
+    });
 }

vite.config.ts

@@ -15,7 +15,7 @@ export default defineConfig({
     rollupOptions: {
       // make sure to externalize deps that shouldn't be bundled
       // into your library
-      external: ['vue', 'DragSelect'],
+      external: ['vue', 'DragSelect', 'Cropper'],
       output: {
         // Provide global variables to use in the UMD build
         // for externalized deps