feat: integrate Collabora using iframe [WPB-21650]

package.json

@@ -16,7 +16,7 @@
     "@wireapp/avs": "10.2.19",
     "@wireapp/avs-debugger": "0.0.7",
     "@wireapp/commons": "5.4.9",
-    "@wireapp/core": "^46.46.6-beta.9.457c85ad6",
+    "@wireapp/core": "46.46.7",
     "@wireapp/kalium-backup": "0.0.4",
     "@wireapp/promise-queue": "2.4.9",
     "@wireapp/react-ui-kit": "9.69.6",

src/i18n/en-US.json

@@ -437,6 +437,7 @@
   "cells.options.restore": "Restore",
   "cells.options.share": "Share",
   "cells.options.tags": "Add or Remove Tags",
+  "cells.options.edit": "Edit",
   "cells.pagination.loadMoreResults": "Load More Items",
   "cells.pagination.nextPage": "Next Page",
   "cells.pagination.previousPage": "Previous Page",
@@ -981,6 +982,8 @@
   "federationConnectionRemove": "The backends [bold]{backendUrlOne}[/bold] and [bold]{backendUrlTwo}[/bold] stopped federating.",
   "federationDelete": "[bold]Your backend[/bold] stopped federating with [bold]{backendUrl}.[/bold]",
   "fileCardDefaultCloseButtonLabel": "Close",
+  "fileFullscreenModal.editor.error": "Failed to load edit preview",
+  "fileFullscreenModal.editor.iframeTitle": "Document editor",
   "fileFullscreenModal.noPreviewAvailable.callToAction": "Download File",
   "fileFullscreenModal.noPreviewAvailable.description": "There is no preview available for this file. Download the file instead.",
   "fileFullscreenModal.noPreviewAvailable.title": "File without preview",
@@ -2047,4 +2050,4 @@
   "wireMacos": "{brandName} for macOS",
   "wireWindows": "{brandName} for Windows",
   "wire_for_web": "{brandName} for Web"
-}
+}

src/script/components/CellsGlobalView/CellsTable/CellsFilePreviewModal/CellsFilePreviewModal.tsx

@@ -25,7 +25,7 @@ import {useCellsFilePreviewModal} from '../common/CellsFilePreviewModalContext/C
 // This component is duplicated across global view and conversation view
 // TODO: Abstract when it starts to grow / feels right
 export const CellsFilePreviewModal = () => {
-  const {id, selectedFile, handleCloseFile} = useCellsFilePreviewModal();
+  const {selectedFile, handleCloseFile, isEditMode} = useCellsFilePreviewModal();
 
   if (!selectedFile) {
     return null;
@@ -49,7 +49,7 @@ export const CellsFilePreviewModal = () => {
 
   return (
     <FileFullscreenModal
-      id={id}
+      id={selectedFile.id}
       isOpen={!!selectedFile}
       onClose={handleCloseFile}
       filePreviewUrl={getFileUrl()}
@@ -60,6 +60,7 @@ export const CellsFilePreviewModal = () => {
       senderName={owner}
       timestamp={uploadedAtTimestamp}
       badges={tags}
+      isEditMode={isEditMode}
     />
   );
 };

src/script/components/CellsGlobalView/CellsTable/CellsTableColumns/CellsTableRowOptions/CellsTableRowOptions.tsx

@@ -21,6 +21,7 @@ import {DropdownMenu, MoreIcon} from '@wireapp/react-ui-kit';
 
 import {openFolder} from 'Components/CellsGlobalView/common/openFolder/openFolder';
 import {CellsRepository} from 'Repositories/cells/CellsRepository';
+import {isFileEditable} from 'Util/FileTypeUtil';
 import {t} from 'Util/LocalizerUtil';
 import {forcedDownloadFile} from 'Util/util';
 
@@ -41,6 +42,7 @@ export const CellsTableRowOptions = ({node, cellsRepository}: CellsTableRowOptio
 
   const url = node.url;
   const name = node.type === 'folder' ? `${node.name}.zip` : node.name;
+  const isEditable = node.type === 'file' && isFileEditable(node.extension);
 
   return (
     <DropdownMenu>
@@ -59,6 +61,9 @@ export const CellsTableRowOptions = ({node, cellsRepository}: CellsTableRowOptio
         <DropdownMenu.Item onClick={() => showShareModal({type: node.type, uuid: node.id, cellsRepository})}>
           {t('cells.options.share')}
         </DropdownMenu.Item>
+        {isEditable && (
+          <DropdownMenu.Item onClick={() => handleOpenFile(node, true)}>{t('cells.options.edit')}</DropdownMenu.Item>
+        )}
         {!!url && (
           <DropdownMenu.Item
             onClick={() =>

src/script/components/CellsGlobalView/CellsTable/common/CellsFilePreviewModalContext/CellsFilePreviewModalContext.tsx

@@ -24,7 +24,8 @@ import {CellFile} from '../../../common/cellNode/cellNode';
 interface CellsFilePreviewModalContextValue {
   id: string;
   selectedFile: CellFile | null;
-  handleOpenFile: (file: CellFile) => void;
+  isEditMode: boolean;
+  handleOpenFile: (file: CellFile, isEditMode?: boolean) => void;
   handleCloseFile: () => void;
 }
 
@@ -36,17 +37,22 @@ interface FilePreviewProviderProps {
 
 export const FilePreviewProvider = ({children}: FilePreviewProviderProps) => {
   const [selectedFile, setSelectedFile] = useState<CellFile | null>(null);
+  const [isEditMode, setIsEditMode] = useState(false);
 
   const id = useId();
 
   const value = useMemo(
     () => ({
       id,
       selectedFile,
-      handleOpenFile: (file: CellFile) => setSelectedFile(file),
+      isEditMode,
+      handleOpenFile: (file: CellFile, isEditMode?: boolean) => {
+        setSelectedFile(file);
+        setIsEditMode(!!isEditMode);
+      },
       handleCloseFile: () => setSelectedFile(null),
     }),
-    [id, selectedFile],
+    [id, selectedFile, isEditMode],
   );
 
   return <CellsFilePreviewModalContext.Provider value={value}>{children}</CellsFilePreviewModalContext.Provider>;

src/script/components/Conversation/ConversationCells/CellsTable/CellsFilePreviewModal/CellsFilePreviewModal.tsx

@@ -25,7 +25,7 @@ import {useCellsFilePreviewModal} from '../common/CellsFilePreviewModalContext/C
 // This component is duplicated across global view and conversation view
 // TODO: Abstract when it starts to grow / feels right
 export const CellsFilePreviewModal = () => {
-  const {id, selectedFile, handleCloseFile} = useCellsFilePreviewModal();
+  const {selectedFile, handleCloseFile, isEditMode} = useCellsFilePreviewModal();
 
   if (!selectedFile) {
     return null;
@@ -49,7 +49,7 @@ export const CellsFilePreviewModal = () => {
 
   return (
     <FileFullscreenModal
-      id={id}
+      id={selectedFile.id}
       isOpen={!!selectedFile}
       onClose={handleCloseFile}
       filePreviewUrl={getFileUrl()}
@@ -60,6 +60,7 @@ export const CellsFilePreviewModal = () => {
       senderName={owner}
       timestamp={uploadedAtTimestamp}
       badges={tags}
+      isEditMode={isEditMode}
     />
   );
 };

src/script/components/Conversation/ConversationCells/CellsTable/CellsTableColumns/CellsTableRowOptions/CellsTableRowOptions.tsx

@@ -31,6 +31,7 @@ import {
   isRootRecycleBinPath,
 } from 'Components/Conversation/ConversationCells/common/recycleBin/recycleBin';
 import {CellsRepository} from 'Repositories/cells/CellsRepository';
+import {isFileEditable} from 'Util/FileTypeUtil';
 import {t} from 'Util/LocalizerUtil';
 import {forcedDownloadFile} from 'Util/util';
 
@@ -124,6 +125,8 @@ const CellsTableRowOptionsContent = ({
   const isRootRecycleBin = isRootRecycleBinPath();
   const isNestedRecycleBin = isInRecycleBin();
 
+  const isEditable = node.type === 'file' && isFileEditable(node.extension);
+
   if (isRootRecycleBin || isNestedRecycleBin) {
     return (
       <DropdownMenu.Content>
@@ -190,6 +193,9 @@ const CellsTableRowOptionsContent = ({
         </DropdownMenu.Item>
         <DropdownMenu.Item onClick={() => setIsMoveNodeModalOpen(true)}>{t('cells.options.move')}</DropdownMenu.Item>
         <DropdownMenu.Item onClick={() => setIsTagsModalOpen(true)}>{t('cells.options.tags')}</DropdownMenu.Item>
+        {isEditable && (
+          <DropdownMenu.Item onClick={() => handleOpenFile(node, true)}>{t('cells.options.edit')}</DropdownMenu.Item>
+        )}
         <DropdownMenu.Item
           onClick={() =>
             showMoveToRecycleBinModal({

src/script/components/Conversation/ConversationCells/CellsTable/common/CellsFilePreviewModalContext/CellsFilePreviewModalContext.tsx

@@ -23,8 +23,9 @@ import {CellFile} from '../../../common/cellNode/cellNode';
 
 interface CellsFilePreviewModalContextValue {
   id: string;
+  isEditMode: boolean;
   selectedFile: CellFile | null;
-  handleOpenFile: (file: CellFile) => void;
+  handleOpenFile: (file: CellFile, isEditMode?: boolean) => void;
   handleCloseFile: () => void;
 }
 
@@ -36,17 +37,22 @@ interface FilePreviewProviderProps {
 
 export const CellsFilePreviewModalProvider = ({children}: FilePreviewProviderProps) => {
   const [selectedFile, setSelectedFile] = useState<CellFile | null>(null);
+  const [isEditMode, setIsEditMode] = useState(false);
 
   const id = useId();
 
   const value = useMemo(
     () => ({
       id,
       selectedFile,
-      handleOpenFile: (file: CellFile) => setSelectedFile(file),
+      isEditMode,
+      handleOpenFile: (file: CellFile, isEditMode?: boolean) => {
+        setSelectedFile(file);
+        setIsEditMode(!!isEditMode);
+      },
       handleCloseFile: () => setSelectedFile(null),
     }),
-    [id, selectedFile],
+    [id, selectedFile, isEditMode],
   );
 
   return <CellsFilePreviewModalContext.Provider value={value}>{children}</CellsFilePreviewModalContext.Provider>;

src/script/components/FileFullscreenModal/FileEditor/FileEditor.styles.ts

@@ -0,0 +1,25 @@
+/*
+ * Wire
+ * Copyright (C) 2025 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {CSSObject} from '@emotion/react';
+
+export const editorIframe: CSSObject = {
+  width: '100%',
+  height: '100%',
+};

src/script/components/FileFullscreenModal/FileEditor/FileEditor.tsx

@@ -0,0 +1,97 @@
+/*
+ * Wire
+ * Copyright (C) 2025 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {useCallback, useEffect, useState} from 'react';
+
+import {Node} from '@wireapp/api-client/lib/cells';
+import {container} from 'tsyringe';
+
+import {CellsRepository} from 'Repositories/cells/CellsRepository';
+import {t} from 'Util/LocalizerUtil';
+
+import * as styles from './FileEditor.styles';
+
+import {FileLoader} from '../FileLoader/FileLoader';
+
+const MILLISECONDS_IN_SECOND = 1000;
+const REFRESH_BUFFER_SECONDS = 10; // Refresh 10 seconds before expiry for safety
+
+interface FileEditorProps {
+  id: string;
+}
+
+export const FileEditor = ({id}: FileEditorProps) => {
+  const cellsRepository = container.resolve(CellsRepository);
+  const [node, setNode] = useState<Node | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isError, setIsError] = useState(false);
+
+  const fetchNode = useCallback(async () => {
+    try {
+      setIsLoading(true);
+      setIsError(false);
+      const fetchedNode = await cellsRepository.getNode({uuid: id, flags: ['WithEditorURLs']});
+      setNode(fetchedNode);
+    } catch (err) {
+      setIsError(true);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [id, cellsRepository]);
+
+  // Initial fetch
+  useEffect(() => {
+    void fetchNode();
+  }, [id, cellsRepository, fetchNode]);
+
+  // Auto-refresh mechanism before expiry
+  useEffect(() => {
+    if (!node?.EditorURLs?.collabora.ExpiresAt) {
+      return undefined;
+    }
+
+    const expiresInSeconds = Number(node.EditorURLs.collabora.ExpiresAt);
+    const refreshInSeconds = expiresInSeconds - REFRESH_BUFFER_SECONDS;
+
+    // Set timeout to refresh before expiry
+    const timeoutId = setTimeout(() => {
+      void fetchNode();
+    }, refreshInSeconds * MILLISECONDS_IN_SECOND);
+
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [node, fetchNode]);
+
+  if (isLoading) {
+    return <FileLoader />;
+  }
+
+  if (isError || !node) {
+    return <div>{t('fileFullscreenModal.editor.error')}</div>;
+  }
+
+  return (
+    <iframe
+      css={styles.editorIframe}
+      src={node.EditorURLs?.collabora.Url}
+      title={t('fileFullscreenModal.editor.iframeTitle')}
+    />
+  );
+};