From dc15f7d2ccb7d4b5e46bac2ed7c2e3858674d28a Mon Sep 17 00:00:00 2001
From: Pedro Pinto Silva <pedro.silva@collabora.com>
Date: Wed, 8 Apr 2026 14:07:35 +0200
Subject: [PATCH] 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>
---
 ...nhancement-collabora-insert-remote-file.md |  12 ++
 packages/web-app-external/src/App.vue         | 120 +++++++++++++--
 .../src/components/InsertRemoteFileModal.vue  | 141 ++++++++++++++++++
 3 files changed, 263 insertions(+), 10 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-collabora-insert-remote-file.md
 create mode 100644 packages/web-app-external/src/components/InsertRemoteFileModal.vue

diff --git a/changelog/unreleased/enhancement-collabora-insert-remote-file.md b/changelog/unreleased/enhancement-collabora-insert-remote-file.md
new file mode 100644
index 00000000000..00c85941cef
--- /dev/null
+++ b/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
diff --git a/packages/web-app-external/src/App.vue b/packages/web-app-external/src/App.vue
index 97402a17c4d..15eb3f626ee 100644
--- a/packages/web-app-external/src/App.vue
+++ b/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(
diff --git a/packages/web-app-external/src/components/InsertRemoteFileModal.vue b/packages/web-app-external/src/components/InsertRemoteFileModal.vue
new file mode 100644
index 00000000000..2a5b1ff6cd2
--- /dev/null
+++ b/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>