feat(web-app-external): handle Collabora UI_InsertGraphic and UI_InsertFile postMessages

Add frontend handling for Collabora's remote file insertion and document
comparison features. When oCIS sets EnableInsertRemoteFile and
EnableInsertRemoteImage in the WOPI CheckFileInfo response, Collabora
shows new menu items that send UI_InsertGraphic and UI_InsertFile
postMessages to the parent window.

- Add Host_PostmessageReady handshake: reply to App_LoadingStatus with
  Host_PostmessageReady so Collabora accepts Action postMessages.

- Handle UI_InsertGraphic: open a file picker modal filtered to image
  MIME types, resolve the selected file to a signed WebDAV download URL,
  and send Action_InsertGraphic back to the Collabora iframe.

- Handle UI_InsertFile: read callback and mimeTypeFilter from the
  Collabora message, open the file picker accordingly, and send back
  the appropriate Action (Action_InsertMultimedia or
  Action_CompareDocuments).

- Create InsertRemoteFileModal.vue: new modal component that embeds the
  oCIS file browser in embed mode, resolves the picked file to a
  download URL via clientService.webdav.getFileUrl(), and calls back
  with { filename, url }.

- Replace catchClickMicrosoftEdit with a unified handleAppMessage
  listener that handles all app iframe postMessages (UI_Edit,
  App_LoadingStatus, UI_InsertGraphic, UI_InsertFile).

Companion server-side PR: owncloud/ocis#12192

Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com>

Author: pedropintosilva

changelog/unreleased/enhancement-collabora-insert-remote-file.md

@@ -0,0 +1,12 @@
+Enhancement: Handle Collabora insert remote file and image postMessages
+
+Handle UI_InsertGraphic and UI_InsertFile postMessages from Collabora Online,
+enabling remote image insertion, multimedia insertion, and document comparison
+features. Opens a file picker modal, resolves the selected file to a download
+URL, and sends the result back to Collabora. Also adds the Host_PostmessageReady
+handshake required by Collabora before it accepts Action postMessages.
+
+Requires Collabora Online >= 24.04.10 for multimedia insertion, >= 25.04.9.1
+for document comparison. Companion server-side PR: owncloud/ocis#12192.
+
+https://github.com/owncloud/web/pull/13658

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

@@ -1,6 +1,7 @@
 <template>
   <iframe
     v-if="appUrl && method === 'GET'"
+    ref="appIframeRef"
     :src="appUrl"
     class="oc-width-1-1 oc-height-1-1"
     :title="iFrameTitle"
@@ -15,6 +16,7 @@
       </div>
     </form>
     <iframe
+      ref="appIframeRef"
       name="app-iframe"
       :src="appUrl"
       class="oc-width-1-1 oc-height-1-1"
@@ -27,7 +29,18 @@
 
 <script lang="ts" setup>
 import { stringify } from 'qs'
-import { computed, inject, unref, nextTick, ref, watch, VNodeRef, onMounted, type Ref } from 'vue'
+import {
+  computed,
+  inject,
+  unref,
+  nextTick,
+  ref,
+  watch,
+  VNodeRef,
+  onMounted,
+  onBeforeUnmount,
+  type Ref
+} from 'vue'
 import { useTask } from 'vue-concurrency'
 import { useGettext } from 'vue3-gettext'
 
@@ -38,12 +51,15 @@ import {
   useCapabilityStore,
   useConfigStore,
   useMessages,
+  useModals,
   useRequest,
   useAppProviderService,
   useRoute,
+  useFolderLink,
   queryItemAsString,
   useRouteQuery
 } from '@ownclouders/web-pkg'
+import InsertRemoteFileModal from './components/InsertRemoteFileModal.vue'
 import {
   isProjectSpaceResource,
   isPublicSpaceResource,
@@ -72,6 +88,8 @@ const configStore = useConfigStore()
 const route = useRoute()
 const appProviderService = useAppProviderService()
 const { makeRequest } = useRequest()
+const { dispatchModal } = useModals()
+const { getParentFolderLink } = useFolderLink()
 
 const viewModeQuery = useRouteQuery('view_mode')
 const isMobileWidth =
@@ -97,6 +115,7 @@ const appUrl = ref()
 const formParameters = ref({})
 const method = ref()
 const subm: VNodeRef = ref()
+const appIframeRef = ref<HTMLIFrameElement>()
 
 const iFrameTitle = computed(() => {
   return $gettext('"%{appName}" app content area', {
@@ -179,20 +198,101 @@ const determineOpenAsPreview = (appName: string) => {
   return openAsPreview === true || (Array.isArray(openAsPreview) && openAsPreview.includes(appName))
 }
 
-// switch to write mode when edit is clicked
-const catchClickMicrosoftEdit = (event: MessageEvent) => {
+const IMAGE_MIME_TYPES = [
+  'image/png',
+  'image/jpeg',
+  'image/gif',
+  'image/svg+xml',
+  'image/bmp',
+  'image/webp'
+]
+
+const postMessageToApp = (messageId: string, values?: Record<string, unknown>) => {
+  const iframe = unref(appIframeRef)
+  if (!iframe?.contentWindow) {
+    return
+  }
+  iframe.contentWindow.postMessage(JSON.stringify({ MessageId: messageId, Values: values }), '*')
+}
+
+const openInsertFileModal = ({
+  title,
+  fileTypes,
+  responseMessageId
+}: {
+  title: string
+  fileTypes?: string[]
+  responseMessageId: string
+}) => {
+  const parentFolderLink = getParentFolderLink(props.resource)
+  dispatchModal({
+    elementClass: 'insert-remote-file-modal',
+    title,
+    customComponent: InsertRemoteFileModal,
+    hideActions: true,
+    customComponentAttrs: () => ({
+      parentFolderLink,
+      fileTypes,
+      onSelect: ({ filename, url }: { filename: string; url: string }) => {
+        postMessageToApp(responseMessageId, { filename, url })
+      }
+    }),
+    focusTrapInitial: false
+  })
+}
+
+const handleAppMessage = (event: MessageEvent) => {
   try {
-    if (JSON.parse(event.data)?.MessageId === 'UI_Edit') {
-      loadAppUrl.perform('write')
+    const msg = JSON.parse(event.data)
+    if (!msg?.MessageId) {
+      return
+    }
+
+    switch (msg.MessageId) {
+      // Collabora requires this handshake before it accepts any Action_* messages.
+      // Without it, all postMessages are rejected with "PostMessage ignored: not ready."
+      case 'App_LoadingStatus':
+        if (msg.Values?.Status === 'Document_Loaded') {
+          postMessageToApp('Host_PostmessageReady')
+        }
+        break
+
+      case 'UI_Edit':
+        if (determineOpenAsPreview(unref(appName))) {
+          loadAppUrl.perform('write')
+        }
+        break
+
+      case 'UI_InsertGraphic':
+        openInsertFileModal({
+          title: $gettext('Insert image'),
+          fileTypes: IMAGE_MIME_TYPES,
+          responseMessageId: 'Action_InsertGraphic'
+        })
+        break
+
+      case 'UI_InsertFile': {
+        const callback = msg.Values?.callback
+        const mimeTypeFilter = msg.Values?.mimeTypeFilter
+        openInsertFileModal({
+          title:
+            callback === 'Action_CompareDocuments'
+              ? $gettext('Compare document')
+              : $gettext('Insert multimedia'),
+          fileTypes: mimeTypeFilter,
+          responseMessageId: callback
+        })
+        break
+      }
     }
   } catch {}
 }
+
 onMounted(() => {
-  if (determineOpenAsPreview(unref(appName))) {
-    window.addEventListener('message', catchClickMicrosoftEdit)
-  } else {
-    window.removeEventListener('message', catchClickMicrosoftEdit)
-  }
+  window.addEventListener('message', handleAppMessage)
+})
+onBeforeUnmount(() => {
+  window.removeEventListener('message', handleAppMessage)
 })
 
 watch(

packages/web-app-external/src/components/InsertRemoteFileModal.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="oc-height-1-1" tabindex="0">
+    <app-loading-spinner v-if="isLoading" />
+    <iframe
+      v-show="!isLoading"
+      ref="iframeRef"
+      class="oc-width-1-1 oc-height-1-1"
+      :title="iframeTitle"
+      :src="iframeSrc"
+      tabindex="0"
+      @load="onLoad"
+    ></iframe>
+  </div>
+</template>
+
+<!--
+  File picker modal for Collabora's remote insert features (UI_InsertGraphic / UI_InsertFile).
+  Opens the oCIS file browser in embed mode, resolves the picked file to a download URL
+  (with URL signing if available), and calls onSelect with { filename, url }.
+  The caller sends the result back to the Collabora iframe as an Action_* postMessage.
+-->
+<script lang="ts" setup>
+import { onBeforeUnmount, onMounted, ref, unref } from 'vue'
+import {
+  Modal,
+  useClientService,
+  useGetMatchingSpace,
+  useMessages,
+  useModals,
+  useRouter,
+  useThemeStore,
+  useCapabilityStore,
+  useUserStore,
+  embedModeFilePickMessageData
+} from '@ownclouders/web-pkg'
+import { RouteLocationRaw } from 'vue-router'
+import { AppLoadingSpinner } from '@ownclouders/web-pkg'
+import { useGettext } from 'vue3-gettext'
+
+interface Props {
+  modal: Modal
+  parentFolderLink: RouteLocationRaw
+  fileTypes?: string[]
+  onSelect: (result: { filename: string; url: string }) => void
+}
+const { modal, parentFolderLink, fileTypes, onSelect } = defineProps<Props>()
+const iframeRef = ref<HTMLIFrameElement>()
+const isLoading = ref(true)
+const router = useRouter()
+const themeStore = useThemeStore()
+const clientService = useClientService()
+const capabilityStore = useCapabilityStore()
+const userStore = useUserStore()
+const { removeModal } = useModals()
+const { showErrorMessage } = useMessages()
+const { getMatchingSpace } = useGetMatchingSpace()
+const { $gettext } = useGettext()
+
+const parentFolderRoute = router.resolve(parentFolderLink)
+const iframeTitle = themeStore.currentTheme.common?.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')
+if (fileTypes?.length) {
+  iframeUrl.searchParams.append('embed-file-types', fileTypes.join(','))
+}
+
+const iframeSrc = iframeUrl.href
+
+const onLoad = () => {
+  isLoading.value = false
+  unref(iframeRef).contentWindow.focus()
+}
+
+const onFilePick = async ({ data }: MessageEvent) => {
+  if (data.name !== 'owncloud-embed:file-pick') {
+    return
+  }
+
+  const { resource }: embedModeFilePickMessageData = data.data
+  const space = getMatchingSpace(resource)
+
+  try {
+    // Resolve to a signed WebDAV URL so the Collabora server can download the file
+    const url = await clientService.webdav.getFileUrl(space, resource, {
+      isUrlSigningEnabled: capabilityStore.supportUrlSigning,
+      username: userStore.user?.onPremisesSamAccountName
+    })
+    onSelect({ filename: resource.name, url })
+  } catch (e) {
+    console.error('Failed to resolve download URL for remote file insert', e)
+    showErrorMessage({
+      title: $gettext('Failed to get file URL'),
+      errors: [e]
+    })
+  }
+
+  removeModal(modal.id)
+}
+
+const onCancel = ({ data }: MessageEvent) => {
+  if (data.name !== 'owncloud-embed:cancel') {
+    return
+  }
+
+  removeModal(modal.id)
+}
+
+onMounted(() => {
+  window.addEventListener('message', onFilePick)
+  window.addEventListener('message', onCancel)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('message', onFilePick)
+  window.removeEventListener('message', onCancel)
+})
+</script>
+
+<style lang="scss">
+.oc-modal.insert-remote-file-modal {
+  max-width: 80dvw;
+  border: none;
+  overflow: hidden;
+
+  .oc-modal-title {
+    display: none;
+  }
+
+  .oc-modal-body {
+    padding: 0;
+
+    &-message {
+      height: 60dvh;
+      margin: 0;
+    }
+  }
+}
+</style>