From 69ef90d5d8d85c6f5c38e551ad174d0700b1bf4e Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Mon, 12 Oct 2026 16:02:33 +0200
Subject: [PATCH] fix: allow svg and webp images in the editor cloud image
 picker

---
 .../src/editor/composables/useEditorActions.ts       |  3 ++-
 .../src/editor/extensions/imageFileHandler.ts        |  2 +-
 .../unit/editor/composables/useEditorActions.spec.ts | 12 ++++++++++++
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/packages/web-pkg/src/editor/composables/useEditorActions.ts b/packages/web-pkg/src/editor/composables/useEditorActions.ts
index 1d8158af1a1..b7e714d65a9 100644
--- a/packages/web-pkg/src/editor/composables/useEditorActions.ts
+++ b/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/')) {
diff --git a/packages/web-pkg/src/editor/extensions/imageFileHandler.ts b/packages/web-pkg/src/editor/extensions/imageFileHandler.ts
index c4aded93dc2..3abd8a41dd3 100644
--- a/packages/web-pkg/src/editor/extensions/imageFileHandler.ts
+++ b/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',
diff --git a/packages/web-pkg/tests/unit/editor/composables/useEditorActions.spec.ts b/packages/web-pkg/tests/unit/editor/composables/useEditorActions.spec.ts
index c74bc969365..d1d94613b92 100644
--- a/packages/web-pkg/tests/unit/editor/composables/useEditorActions.spec.ts
+++ b/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()