feat: collabora insert images from opencloud

docker-compose.yml

@@ -182,8 +182,9 @@ services:
     entrypoint: ['/bin/bash', '-c']
     command: ['coolconfig generate-proof-key && /start-collabora-online.sh']
     environment:
+      aliasgroup1: https://${WOPISERVER_DOMAIN:-host.docker.internal}:443
       DONT_GEN_SSL_CERT: YES
-      extra_params: --o:ssl.enable=false --o:ssl.ssl_verification=false --o:home_mode.enable=true --o:ssl.termination=true --o:net.frame_ancestors=${OC_URL:-https://host.docker.internal:9200}
+      extra_params: --o:ssl.enable=false --o:ssl.ssl_verification=false --o:home_mode.enable=true --o:ssl.termination=true --o:net.frame_ancestors=${OC_URL:-https://host.docker.internal:9200} --o:net.lok_allow.host[14]=${OC_URL:-https://host.docker.internal:9200}
       username: ${COLLABORA_ADMIN_USER:-admin}
       password: ${COLLABORA_ADMIN_PASSWORD:-admin}
     cap_add:

packages/web-app-external/src/App.vue

@@ -74,7 +74,9 @@ import {
   useSharesStore,
   useModals,
   useRouter,
-  useThemeStore
+  useThemeStore,
+  useFolderLink,
+  FilePickerModal
 } from '@opencloud-eu/web-pkg'
 import FileNameModal from './components/FileNameModal.vue'
 
@@ -101,6 +103,7 @@ const { graphAuthenticated: graphClient } = useClientService()
 const { dispatchModal } = useModals()
 const { webdav } = useClientService()
 const { currentTheme } = useThemeStore()
+const { getParentFolderLink } = useFolderLink()
 
 const viewModeQuery = useRouteQuery('view_mode')
 const viewModeQueryValue = computed(() => {
@@ -322,6 +325,25 @@ const handlePostMessagesCollabora = async (event: MessageEvent) => {
       })
       return
     }
+
+    if (message.MessageId === 'UI_InsertGraphic') {
+      dispatchModal({
+        elementClass: 'file-picker-modal',
+        title: $gettext('Insert graphic'),
+        customComponent: FilePickerModal,
+        hideActions: true,
+        customComponentAttrs: () => ({
+          parentFolderLink: getParentFolderLink(resource),
+          allowedFileTypes: ['image/png', 'image/gif', 'image/jpeg', 'image/svg'],
+          callbackFn: ({ resource }: { resource: Resource }) => {
+            postMessageToCollabora('Action_InsertGraphic', {
+              url: resource.downloadURL
+            })
+          }
+        }),
+        focusTrapInitial: false
+      })
+    }
   } catch (e) {
     console.debug('Error parsing Collabora PostMessage', e)
   }
@@ -351,6 +373,7 @@ const postMessageToCollabora = (messageId: string, values?: { [key: string]: unk
     console.error('Collabora iframe not found')
     return
   }
+
   return unref(appIframeRef).contentWindow.postMessage(
     JSON.stringify({
       MessageId: messageId,

packages/web-pkg/src/components/Modals/FilePickerModal.vue

@@ -14,51 +14,44 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onBeforeUnmount, onMounted, PropType, ref } from 'vue'
+import { defineComponent, onBeforeUnmount, onMounted, PropType, ref, unref } from 'vue'
 import {
   Modal,
-  useGetMatchingSpace,
   useModals,
   useRouter,
   useThemeStore,
-  useFileActions,
   embedModeFilePickMessageData
 } from '../../composables'
-import { ApplicationInformation } from '../../apps'
 import { RouteLocationRaw } from 'vue-router'
 import AppLoadingSpinner from '../AppLoadingSpinner.vue'
-import { isShareSpaceResource } from '@opencloud-eu/web-client'
-import { unref } from 'vue'
 
 export default defineComponent({
   name: 'FilePickerModal',
   components: { AppLoadingSpinner },
   props: {
     modal: { type: Object as PropType<Modal>, required: true },
-    app: { type: Object as PropType<ApplicationInformation>, required: true },
-    parentFolderLink: { type: Object as PropType<RouteLocationRaw>, required: true }
+    allowedFileTypes: { type: Array as PropType<string[]>, required: true },
+    parentFolderLink: { type: Object as PropType<RouteLocationRaw>, required: true },
+    callbackFn: {
+      type: Function as PropType<(resource: any, locationQuery?: Record<string, string>) => void>,
+      required: true
+    }
   },
   setup(props) {
     const iframeRef = ref<HTMLIFrameElement>()
     const isLoading = ref(true)
     const router = useRouter()
     const { removeModal } = useModals()
-    const { getMatchingSpace } = useGetMatchingSpace()
     const themeStore = useThemeStore()
-    const { getEditorRouteOpts } = useFileActions()
     const parentFolderRoute = router.resolve(props.parentFolderLink)
 
-    const availableFileTypes = (props.app as ApplicationInformation).extensions.map((e) =>
-      e.extension ? e.extension : e.mimeType
-    )
-
     const iframeTitle = themeStore.currentTheme.name
     const iframeUrl = new URL(parentFolderRoute.href, window.location.origin)
     iframeUrl.searchParams.append('hide-logo', 'true')
     iframeUrl.searchParams.append('embed', 'true')
     iframeUrl.searchParams.append('embed-target', 'file')
     iframeUrl.searchParams.append('embed-delegate-authentication', 'false')
-    iframeUrl.searchParams.append('embed-file-types', availableFileTypes.join(','))
+    iframeUrl.searchParams.append('embed-file-types', props.allowedFileTypes.join(','))
 
     const onLoad = () => {
       isLoading.value = false
@@ -71,23 +64,9 @@ export default defineComponent({
       }
 
       const { resource, locationQuery }: embedModeFilePickMessageData = data.data
-
-      const space = getMatchingSpace(resource)
-      const remoteItemId = isShareSpaceResource(space) ? space.id : undefined
-
-      const routeOpts = getEditorRouteOpts(
-        unref(router.currentRoute).name,
-        space,
-        resource,
-        remoteItemId
-      )
-      routeOpts.query = { ...routeOpts.query, ...locationQuery }
-
-      const editorRoute = router.resolve(routeOpts)
-      const editorRouteUrl = new URL(editorRoute.href, window.location.origin)
+      props.callbackFn({ resource, locationQuery })
 
       removeModal(props.modal.id)
-      window.open(editorRouteUrl.href, '_blank')
     }
 
     const onCancel = ({ data }: MessageEvent) => {
@@ -123,17 +102,17 @@ export default defineComponent({
 @reference '@opencloud-eu/design-system/tailwind';
 
 @layer utilities {
-  .oc-modal.open-with-app-modal {
+  .file-picker-modal {
     @apply overflow-hidden;
     max-width: 80vw;
   }
-  .oc-modal.open-with-app-modal .oc-modal-title {
+  .file-picker-modal .oc-modal-title {
     @apply hidden;
   }
-  .oc-modal.open-with-app-modal .oc-modal-body {
+  .file-picker-modal .oc-modal-body {
     @apply p-0;
   }
-  .oc-modal.open-with-app-modal .oc-modal-body-message {
+  .file-picker-modal .oc-modal-body-message {
     @apply m-0 h-[60vh];
   }
 }

packages/web-pkg/src/composables/actions/files/useFileActionsOpenWithApp.ts

@@ -6,27 +6,37 @@ import { storeToRefs } from 'pinia'
 import FilePickerModal from '../../../components/Modals/FilePickerModal.vue'
 import { useFolderLink } from '../../folderLink'
 import { useIsFilesAppActive } from '../helpers'
+import { isShareSpaceResource, Resource } from '@opencloud-eu/web-client'
+import { useGetMatchingSpace } from '../../spaces'
+import { useFileActions } from './useFileActions'
+import { useRouter } from '../../router'
+import { LocationQuery } from 'vue-router'
 
 export const useFileActionsOpenWithApp = ({ appId }: { appId: string }) => {
   const { $gettext } = useGettext()
   const isFilesAppActive = useIsFilesAppActive()
   const { dispatchModal } = useModals()
   const appsStore = useAppsStore()
   const { apps } = storeToRefs(appsStore)
+  const router = useRouter()
   const { getParentFolderLink } = useFolderLink()
+  const { getMatchingSpace } = useGetMatchingSpace()
+  const { getEditorRouteOpts } = useFileActions()
 
   const handler = ({ resources }: FileActionOptions) => {
     const app = unref(apps)[appId]
     const parentFolderLink = getParentFolderLink(resources[0])
+    const allowedFileTypes = app.extensions.map((e) => (e.extension ? e.extension : e.mimeType))
 
     dispatchModal({
-      elementClass: 'open-with-app-modal',
+      elementClass: 'file-picker-modal',
       title: $gettext('Open file in %{app}', { app: app.name }),
       customComponent: FilePickerModal,
       hideActions: true,
       customComponentAttrs: () => ({
-        app,
-        parentFolderLink
+        allowedFileTypes,
+        parentFolderLink,
+        callbackFn: onFilePicked
       }),
       focusTrapInitial: false
     })
@@ -47,7 +57,32 @@ export const useFileActionsOpenWithApp = ({ appId }: { appId: string }) => {
     }
   ])
 
+  const onFilePicked = ({
+    resource,
+    locationQuery
+  }: {
+    resource: Resource
+    locationQuery: LocationQuery
+  }) => {
+    const space = getMatchingSpace(resource)
+    const remoteItemId = isShareSpaceResource(space) ? space.id : undefined
+
+    const routeOpts = getEditorRouteOpts(
+      unref(router.currentRoute).name,
+      space,
+      resource,
+      remoteItemId
+    )
+    routeOpts.query = { ...routeOpts.query, ...locationQuery }
+
+    const editorRoute = router.resolve(routeOpts)
+    const editorRouteUrl = new URL(editorRoute.href, window.location.origin)
+
+    window.open(editorRouteUrl.href, '_blank')
+  }
+
   return {
-    actions
+    actions,
+    onFilePicked
   }
 }

packages/web-pkg/tests/unit/components/Modals/FilePickerModal.spec.ts

@@ -5,14 +5,12 @@ import { Resource, SpaceResource } from '@opencloud-eu/web-client'
 import { Modal, useModals, WebThemeType } from '../../../../src/composables/piniaStores'
 import { RouteLocation } from 'vue-router'
 
-window.open = vi.fn()
-
 describe('FilePickerModal', () => {
   describe('iframe', () => {
     it('sets the iframe src correctly', () => {
       const { wrapper } = getWrapper()
       expect(wrapper.vm.iframeSrc).toEqual(
-        'http://localhost:3000/files-spaces-generic?hide-logo=true&embed=true&embed-target=file&embed-delegate-authentication=false&embed-file-types=text%2Cmd%2Ctext%2Frtf'
+        'http://localhost:3000/files-spaces-generic?hide-logo=true&embed=true&embed-target=file&embed-delegate-authentication=false&embed-file-types=text%2Frtf'
       )
     })
     it('sets the iframe title correctly', () => {
@@ -24,9 +22,9 @@ describe('FilePickerModal', () => {
     it('does nothing if the event message does not equal "opencloud-embed:file-pick"', () => {
       const { wrapper } = getWrapper()
       wrapper.vm.onFilePick(mock<MessageEvent>({ data: { name: 'some-other-event' } }))
-      expect(window.open).not.toHaveBeenCalled()
+      expect(wrapper.vm.callbackFn).not.toHaveBeenCalled()
     })
-    it('opens resource in new window when message does equal "opencloud-embed:file-pick"', () => {
+    it('calls callback function when message does equal "opencloud-embed:file-pick"', () => {
       const { wrapper } = getWrapper()
       const modalStore = useModals()
       wrapper.vm.onFilePick(
@@ -40,8 +38,8 @@ describe('FilePickerModal', () => {
           }
         })
       )
+      expect(wrapper.vm.callbackFn).toHaveBeenCalled()
       expect(modalStore.removeModal).toHaveBeenCalled()
-      expect(window.open).toHaveBeenCalled()
     })
   })
 })
@@ -55,10 +53,8 @@ function getWrapper() {
       props: {
         modal: mock<Modal>(),
         resource: mock<Resource>(),
-        app: {
-          name: 'text-editor',
-          extensions: [{ extension: 'text' }, { extension: 'md' }, { mimeType: 'text/rtf' }]
-        },
+        allowedFileTypes: ['text/rtf'],
+        callbackFn: vi.fn(),
         parentFolderLink: {
           name: 'files-spaces-generic',
           params: {

packages/web-pkg/tests/unit/composables/actions/files/useFileActionsOpenWithApp.spec.ts

@@ -2,17 +2,19 @@ import { mock } from 'vitest-mock-extended'
 import { computed, unref } from 'vue'
 import {
   defaultComponentMocks,
-  RouteLocation,
-  getComposableWrapper
+  getComposableWrapper,
+  RouteLocation
 } from '@opencloud-eu/web-test-helpers'
 import {
   useFileActionsOpenWithApp,
   useIsFilesAppActive,
   useModals
 } from '../../../../../src/composables'
 import { Resource, SpaceResource } from '@opencloud-eu/web-client'
-import { ApplicationInformation } from '../../../../../src'
+import { ApplicationFileExtension, ApplicationInformation } from '../../../../../src'
+import { LocationQuery } from 'vue-router'
 
+window.open = vi.fn()
 vi.mock('../../../../../src/composables/actions/helpers/useIsFilesAppActive')
 
 const spaceMock = mock<SpaceResource>({
@@ -53,6 +55,19 @@ describe('openWithApp', () => {
         })
       })
     })
+    describe('method "onFilePicked"', () => {
+      it('opens resource in new window', () => {
+        getWrapper({
+          setup: ({ onFilePicked }) => {
+            onFilePicked({
+              resource: mock<Resource>({ storageId: spaceMock.id, path: '/' }),
+              locationQuery: mock<LocationQuery>()
+            })
+            expect(window.open).toHaveBeenCalled()
+          }
+        })
+      })
+    })
   })
 })
 
@@ -84,7 +99,12 @@ function getWrapper({
           piniaOptions: {
             spacesState: { spaces: [spaceMock] },
             appsState: {
-              apps: { 'text-editor': mock<ApplicationInformation>({ name: 'text-editor' }) }
+              apps: {
+                'text-editor': mock<ApplicationInformation>({
+                  name: 'text-editor',
+                  extensions: [mock<ApplicationFileExtension>({ extension: 'txt' })]
+                })
+              }
             }
           }
         }