Merge pull request #5390 from habibayman/fix/accepted-imagextensions

fix(texteditor): compute accepted images extensions from mimes

Author: rtibbles

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditorStrings.js

@@ -224,7 +224,7 @@ const MESSAGES = {
     context: 'Accessibility label for the button that opens the file picker.',
   },
   supportedFileTypes: {
-    message: 'Supported file types: png, jpg, jpeg, svg, webp',
+    message: 'Supported file types: { extensions }',
     context: 'A list of supported image file formats.',
   },
   removeImage: {

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/image/ImageUploadModal.vue

@@ -105,7 +105,7 @@
           >
             {{ selectFile$() }}
           </button>
-          <p class="drop-zone-text">{{ supportedFileTypes$() }}</p>
+          <p class="drop-zone-text">{{ supportedFileTypesText }}</p>
         </ImageDropZone>
       </div>
     </div>
@@ -212,6 +212,13 @@
       const imageProcessor = inject('imageProcessor', {});
       const { processFile, ACCEPTED_MIME_TYPES } = imageProcessor;
 
+      const supportedFileTypesText = computed(() => {
+        const extensions = ACCEPTED_MIME_TYPES.map(type =>
+          type.replace('image/', '').replace('svg+xml', 'svg'),
+        );
+        return supportedFileTypes$({ extensions: extensions.join(', ') });
+      });
+
       const instance = getCurrentInstance();
       const store = instance.proxy.$store;
 
@@ -285,6 +292,7 @@
         isEditMode,
         canInsert,
         ACCEPTED_MIME_TYPES,
+        supportedFileTypesText,
         triggerFileInput,
         onFileSelect,
         onInsert,
@@ -311,7 +319,6 @@
         altTextDescription$,
         imageDropZoneText$,
         selectFileToUpload$,
-        supportedFileTypes$,
         removeImage$,
         remove$,
         saveChanges$,