fix: allow svg and webp images in the editor cloud image picker

packages/web-pkg/src/editor/composables/useEditorActions.ts

@@ -13,6 +13,7 @@ import EmojiPickerModal from '../../components/Modals/EmojiPickerModal.vue'
 import { arrayBufferToDataUrl, withoutExtension } from '../../helpers'
 import { TextEditorState } from '../types'
 import { requestLinkPanel, printEditorContent } from '../helpers'
+import { supportedImageMimeTypes } from '../extensions/imageFileHandler'
 import TextEditorSearchAndReplacePanel from '../components/TextEditorSearchAndReplacePanel.vue'
 import TextEditorTableSizeSelector from '../components/TextEditorTableSizeSelector.vue'
 
@@ -690,7 +691,7 @@ export function useEditorActions(state: TextEditorState) {
       customComponent: markRaw(FilePickerModal),
       hideActions: true,
       customComponentAttrs: () => ({
-        allowedFileTypes: ['image/png', 'image/gif', 'image/jpeg', 'image/svg'],
+        allowedFileTypes: supportedImageMimeTypes,
         parentFolderLink: getParentFolderLink(resource),
         callbackFn: async ({ resource }: { resource: Resource }) => {
           if (!resource.mimeType?.startsWith('image/')) {

packages/web-pkg/src/editor/extensions/imageFileHandler.ts

@@ -2,7 +2,7 @@ import FileHandler from '@tiptap/extension-file-handler'
 import type { Editor, Extension } from '@tiptap/core'
 
 // Explicit list instead of `image/*`, because the file handler matches mime types exactly
-const supportedImageMimeTypes = [
+export const supportedImageMimeTypes = [
   'image/apng',
   'image/avif',
   'image/bmp',

packages/web-pkg/tests/unit/editor/composables/useEditorActions.spec.ts

@@ -829,6 +829,18 @@ describe('useEditorActions', () => {
     })
   })
 
+  describe('imageCloud', () => {
+    it('allows picking all image types the editor supports', () => {
+      actions.imageCloud().toolbarAction!(createMockEditor(), 'image-cloud')
+      const { dispatchModal } = useModals()
+      const { customComponentAttrs } = vi.mocked(dispatchModal).mock.calls[0][0]
+
+      expect(customComponentAttrs().allowedFileTypes).toEqual(
+        expect.arrayContaining(['image/svg+xml', 'image/webp'])
+      )
+    })
+  })
+
   describe('imageUrl', () => {
     it('toolbarAction dispatches a modal with input', () => {
       const editor = createMockEditor()