fix: image width and height

gbicou · Apr 26, 2023 · d5591ba · d5591ba
1 parent cbd6223
commit d5591ba
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 34 deletions.
diff --git a/src/composables/image.ts b/src/composables/image.ts
@@ -1,33 +1,14 @@
 import type { Editor } from "@tiptap/vue-3";
 import { ref } from "vue";
-import { getPublicURL } from "../utils/get-root-path";
-
-type ImageSelection = {
-  id: string;
-  alt: string;
-  filename?: string;
-  previewSrc: string;
-};
-
-const publicURL = getPublicURL();
-
-function getPreviewSrc(id: string): string {
-  return publicURL + "assets/" + id;
-}
+import type { ImageAttributes } from "../extensions/image";
 
 export function useImage(editor: Editor) {
   const imageDrawerOpen = ref(false);
-  const imageSelection = ref<ImageSelection | null>(null);
+  const imageSelection = ref<ImageAttributes | null>(null);
 
   function imageOpen() {
     if (editor.isActive("image")) {
-      const attrs = editor.getAttributes("image");
-      imageSelection.value = {
-        id: attrs.id,
-        alt: attrs.alt,
-        filename: attrs.filename,
-        previewSrc: getPreviewSrc(attrs.id),
-      };
+      imageSelection.value = editor.getAttributes("image") as ImageAttributes;
     } else {
       imageSelection.value = null;
     }
@@ -41,15 +22,7 @@ export function useImage(editor: Editor) {
 
   function imageSave() {
     if (imageSelection.value) {
-      editor
-        .chain()
-        .focus()
-        .setImage({
-          id: imageSelection.value.id,
-          alt: imageSelection.value.alt,
-          filename: imageSelection.value.filename,
-        })
-        .run();
+      editor.chain().focus().setImage(imageSelection.value).run();
     }
     imageClose();
   }
@@ -59,7 +32,8 @@ export function useImage(editor: Editor) {
       id: image.id,
       alt: image.title,
       filename: image.filename_download,
-      previewSrc: getPreviewSrc(image.id),
+      width: image.width,
+      height: image.height,
     };
   }
 

diff --git a/src/extensions/image.ts b/src/extensions/image.ts
@@ -2,13 +2,22 @@ import type { IExtension } from "../extensions";
 import { mergeAttributes, Node } from "@tiptap/core";
 import { getPublicURL } from "../utils/get-root-path";
 
+export interface ImageAttributes {
+  id: string;
+  alt?: string;
+  filename?: string;
+  width?: string;
+  height?: string;
+  title?: string;
+}
+
 declare module "@tiptap/core" {
   interface Commands<ReturnType> {
     image: {
       /**
        * Add an image
        */
-      setImage: (options: { id: string; alt?: string; filename?: string; title?: string }) => ReturnType;
+      setImage: (options: ImageAttributes) => ReturnType;
     };
   }
 }
@@ -56,6 +65,12 @@ export const Image = Node.create<ImageOptions>({
           };
         },
       },
+      width: {
+        default: null,
+      },
+      height: {
+        default: null,
+      },
       title: {
         default: null,
       },

diff --git a/src/tiptap-editor.vue b/src/tiptap-editor.vue
@@ -564,7 +564,7 @@
     <v-drawer v-model="imageDrawerOpen" :title="t('wysiwyg_options.image')" icon="image" @cancel="imageClose">
       <div class="content">
         <template v-if="imageSelection">
-          <img class="image-preview" :src="imageSelection.previewSrc" />
+          <img class="image-preview" :src="`/assets/${imageSelection.id}`" />
           <div class="grid">
             <div class="field">
               <div class="type-label">{{ t("fields.directus_files.filename_download") }}</div>
@@ -574,6 +574,14 @@
               <div class="type-label">{{ t("alt_text") }}</div>
               <v-input v-model="imageSelection.alt" :nullable="false" />
             </div>
+            <div class="field half">
+              <div class="type-label">{{ t("width") }}</div>
+              <v-input v-model="imageSelection.width" />
+            </div>
+            <div class="field half-right">
+              <div class="type-label">{{ t("height") }}</div>
+              <v-input v-model="imageSelection.height" />
+            </div>
           </div>
         </template>
         <v-upload v-else :multiple="false" from-library from-url @input="imageSelect" />