fix: image edition #16

gbicou · Apr 24, 2023 · 5c8d608 · 5c8d608
1 parent e30eb01
commit 5c8d608
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 35 deletions.
diff --git a/src/composables/image.ts b/src/composables/image.ts
@@ -4,20 +4,23 @@ import { getPublicURL } from "../utils/get-root-path";
 
 type ImageSelection = {
   imageUrl: string;
-  alt?: string;
-  width?: number;
-  height?: number;
-  transformationKey?: string | null;
-  previewUrl?: string;
+  alt: string;
 };
 
 export function useImage(editor: Editor) {
   const imageDrawerOpen = ref(false);
   const imageSelection = ref<ImageSelection | null>(null);
 
   function imageOpen() {
-    const attrs = editor.getAttributes("image");
-    imageSelection.value = attrs.href;
+    if (editor.isActive("image")) {
+      const attrs = editor.getAttributes("image");
+      imageSelection.value = {
+        imageUrl: attrs.src,
+        alt: attrs.alt,
+      };
+    } else {
+      imageSelection.value = null;
+    }
     imageDrawerOpen.value = true;
   }
 
@@ -27,15 +30,23 @@ export function useImage(editor: Editor) {
   }
 
   function imageSave() {
-    editor.chain().focus().setImage({ src: imageSelection.value.imageUrl }).run();
+    editor
+      .chain()
+      .focus()
+      .setImage({
+        src: imageSelection.value.imageUrl,
+        alt: imageSelection.value.alt,
+      })
+      .run();
     imageClose();
   }
 
-  function imageSelect(image: Record<string, any>) {
+  function imageSelect(image: Record<string, never>) {
     const assetUrl = getPublicURL() + "assets/" + image.id;
 
     imageSelection.value = {
       imageUrl: assetUrl,
+      alt: image.title,
     };
   }
 

diff --git a/src/tiptap-editor.vue b/src/tiptap-editor.vue
@@ -566,34 +566,14 @@
         <template v-if="imageSelection">
           <img class="image-preview" :src="imageSelection.imageUrl" />
           <div class="grid">
-            <!--
-            <div class="field half">
-              <div class="type-label">{{ t('image_url') }}</div>
+            <div class="field">
+              <div class="type-label">{{ t("image_url") }}</div>
               <v-input v-model="imageSelection.imageUrl" />
             </div>
-            <div class="field half-right">
-              <div class="type-label">{{ t('alt_text') }}</div>
+            <div class="field">
+              <div class="type-label">{{ t("alt_text") }}</div>
               <v-input v-model="imageSelection.alt" :nullable="false" />
             </div>
-            <template v-if="storageAssetTransform === 'all'">
-              <div class="field half">
-                <div class="type-label">{{ t('width') }}</div>
-                <v-input v-model="imageSelection.width" :disabled="!!imageSelection.transformationKey" />
-              </div>
-              <div class="field half-right">
-                <div class="type-label">{{ t('height') }}</div>
-                <v-input v-model="imageSelection.height" :disabled="!!imageSelection.transformationKey" />
-              </div>
-            </template>
-            <div v-if="storageAssetTransform !== 'none' && storageAssetPresets.length > 0" class="field half">
-              <div class="type-label">{{ t('transformation_preset_key') }}</div>
-              <v-select
-                v-model="imageSelection.transformationKey"
-                :items="storageAssetPresets.map((preset) => ({ text: preset.key, value: preset.key }))"
-                :show-deselect="true"
-              />
-            </div>
-            -->
           </div>
         </template>
         <v-upload v-else :multiple="false" from-library from-url @input="imageSelect" />
@@ -605,7 +585,6 @@
         </v-button>
       </template>
     </v-drawer>
-
   </div>
 </template>
 
@@ -895,7 +874,7 @@
       height: auto;
 
       &.ProseMirror-selectednode {
-        outline: 3px solid #68CEF8;
+        outline: 2px solid var(--v-input-border-color-focus);
       }
     }
   }