[FIX] clipboard: Fix clipboard cross-browser coverage

The current implementation of the cross-browser clipboard relies heavily
on an API that is currently only available on Chromium based browsers
(see [table](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API#api.clipboarditem)).

There is currently no definitive announce that the feature will be
adopted by other browsers (namely FF and Safari) and since the feature
is still marked as experimental, it'd be better to rely on a more generic
approach.

This revision changes the flow to rely entirely on the `text/html`
mimetype as it is supported by all modern browsers.

closes #5241

Task: 4241877
X-original-commit: 23037c3
Signed-off-by: Adrien Minne (adrm) <[email protected]>
Signed-off-by: Rémi Rahir (rar) <[email protected]>

src/actions/menu_items_actions.ts

@@ -1,5 +1,6 @@
 import { CellPopoverStore } from "../components/popover";
 import { DEFAULT_FIGURE_HEIGHT, DEFAULT_FIGURE_WIDTH } from "../constants";
+import { parseOSClipboardContent } from "../helpers/clipboard/clipboard_helpers";
 import {
   getChartPositionAtCenterOfViewport,
   getSmartChartDefinition,
@@ -54,20 +55,13 @@ async function paste(env: SpreadsheetChildEnv, pasteOption?: ClipboardPasteOptio
   const osClipboard = await env.clipboard.read();
   switch (osClipboard.status) {
     case "ok":
-      const htmlDocument = new DOMParser().parseFromString(
-        osClipboard.content[ClipboardMIMEType.Html] ?? "<div></div>",
-        "text/html"
-      );
-      const osClipboardSpreadsheetContent =
-        osClipboard.content[ClipboardMIMEType.OSpreadsheet] || "{}";
-      const clipboardId =
-        JSON.parse(osClipboardSpreadsheetContent).clipboardId ??
-        htmlDocument.querySelector("div")?.getAttribute("data-clipboard-id");
+      const clipboardContent = parseOSClipboardContent(osClipboard.content);
+      const clipboardId = clipboardContent.data?.clipboardId;
 
       const target = env.model.getters.getSelectedZones();
 
       if (env.model.getters.getClipboardId() !== clipboardId) {
-        interactivePasteFromOS(env, target, osClipboard.content, pasteOption);
+        interactivePasteFromOS(env, target, clipboardContent, pasteOption);
       } else {
         interactivePaste(env, target, pasteOption);
       }

src/clipboard_handlers/abstract_clipboard_handler.ts

@@ -40,7 +40,7 @@ export class ClipboardHandler<T> {
     return { zones: [], sheetId };
   }
 
-  convertOSClipboardData(data: any): T | undefined {
+  convertTextToClipboardData(data: string): T | undefined {
     return;
   }
 }

src/clipboard_handlers/cell_clipboard.ts

@@ -288,7 +288,7 @@ export class CellClipboardHandler extends AbstractCellClipboardHandler<
     }
   }
 
-  convertOSClipboardData(text: string): ClipboardContent {
+  convertTextToClipboardData(text: string): ClipboardContent {
     const locale = this.getters.getLocale();
     const copiedData: any = {
       cells: [],

src/components/grid/grid.ts

@@ -21,6 +21,7 @@ import {
   HEADER_WIDTH,
   SCROLLBAR_WIDTH,
 } from "../../constants";
+import { parseOSClipboardContent } from "../../helpers/clipboard/clipboard_helpers";
 import { isInside } from "../../helpers/index";
 import { openLink } from "../../helpers/links";
 import { isStaticTable } from "../../helpers/table_helpers";
@@ -628,32 +629,22 @@ export class Grid extends Component<Props, SpreadsheetChildEnv> {
     if (!clipboardData) {
       return;
     }
-    const clipboardDataTextContent = clipboardData?.getData(ClipboardMIMEType.PlainText);
-    const clipboardDataHtmlContent = clipboardData?.getData(ClipboardMIMEType.Html);
-    const htmlDocument = new DOMParser().parseFromString(
-      clipboardDataHtmlContent ?? "<div></div>",
-      "text/html"
-    );
-    const osClipboardSpreadsheetContent =
-      clipboardData.getData(ClipboardMIMEType.OSpreadsheet) || "{}";
+
+    const osClipboard = {
+      content: {
+        [ClipboardMIMEType.PlainText]: clipboardData?.getData(ClipboardMIMEType.PlainText),
+        [ClipboardMIMEType.Html]: clipboardData?.getData(ClipboardMIMEType.Html),
+      },
+    };
 
     const target = this.env.model.getters.getSelectedZones();
     const isCutOperation = this.env.model.getters.isCutOperation();
 
-    const clipboardId =
-      JSON.parse(osClipboardSpreadsheetContent).clipboardId ??
-      htmlDocument.querySelector("div")?.getAttribute("data-clipboard-id");
-
+    const clipboardContent = parseOSClipboardContent(osClipboard.content);
+    const clipboardId = clipboardContent.data?.clipboardId;
     if (this.env.model.getters.getClipboardId() === clipboardId) {
       interactivePaste(this.env, target);
     } else {
-      const clipboardContent = {
-        [ClipboardMIMEType.PlainText]: clipboardDataTextContent,
-        [ClipboardMIMEType.Html]: clipboardDataHtmlContent,
-      };
-      if (osClipboardSpreadsheetContent !== "{}") {
-        clipboardContent[ClipboardMIMEType.OSpreadsheet] = osClipboardSpreadsheetContent;
-      }
       interactivePasteFromOS(this.env, target, clipboardContent);
     }
     if (isCutOperation) {

src/helpers/clipboard/clipboard_helpers.ts

@@ -1,4 +1,11 @@
-import { ClipboardCellData, UID, Zone } from "../../types";
+import {
+  ClipboardCellData,
+  ClipboardMIMEType,
+  OSClipboardContent,
+  ParsedOSClipboardContent,
+  UID,
+  Zone,
+} from "../../types";
 import { mergeOverlappingZones, positions } from "../zones";
 
 export function getClipboardDataPositions(sheetId: UID, zones: Zone[]): ClipboardCellData {
@@ -54,3 +61,23 @@ export function getPasteZones<T>(target: Zone[], content: T[][]): Zone[] {
     height = content.length;
   return target.map((t) => splitZoneForPaste(t, width, height)).flat();
 }
+
+export function parseOSClipboardContent(content: OSClipboardContent): ParsedOSClipboardContent {
+  if (!content[ClipboardMIMEType.Html]) {
+    return {
+      text: content[ClipboardMIMEType.PlainText],
+    };
+  }
+  const htmlDocument = new DOMParser().parseFromString(
+    content[ClipboardMIMEType.Html],
+    "text/html"
+  );
+  const oSheetClipboardData = htmlDocument
+    .querySelector("div")
+    ?.getAttribute("data-osheet-clipboard");
+  const spreadsheetContent = oSheetClipboardData && JSON.parse(oSheetClipboardData);
+  return {
+    text: content[ClipboardMIMEType.PlainText],
+    data: spreadsheetContent,
+  };
+}

src/helpers/clipboard/navigator_clipboard_wrapper.ts

@@ -1,11 +1,11 @@
-import { ClipboardContent, ClipboardMIMEType } from "./../../types/clipboard";
+import { ClipboardMIMEType, OSClipboardContent } from "./../../types/clipboard";
 
 export type ClipboardReadResult =
-  | { status: "ok"; content: ClipboardContent }
+  | { status: "ok"; content: OSClipboardContent }
   | { status: "permissionDenied" | "notImplemented" };
 
 export interface ClipboardInterface {
-  write(clipboardContent: ClipboardContent): Promise<void>;
+  write(clipboardContent: OSClipboardContent): Promise<void>;
   writeText(text: string): Promise<void>;
   read(): Promise<ClipboardReadResult>;
 }
@@ -18,7 +18,7 @@ class WebClipboardWrapper implements ClipboardInterface {
   // Can be undefined because navigator.clipboard doesn't exist in old browsers
   constructor(private clipboard: Clipboard | undefined) {}
 
-  async write(clipboardContent: ClipboardContent): Promise<void> {
+  async write(clipboardContent: OSClipboardContent): Promise<void> {
     if (this.clipboard?.write) {
       try {
         await this.clipboard?.write(this.getClipboardItems(clipboardContent));
@@ -60,7 +60,7 @@ class WebClipboardWrapper implements ClipboardInterface {
     if (this.clipboard?.read) {
       try {
         const clipboardItems = await this.clipboard.read();
-        const clipboardContent: ClipboardContent = {};
+        const clipboardContent: OSClipboardContent = {};
         for (const item of clipboardItems) {
           for (const type of item.types) {
             const blob = await item.getType(type);
@@ -82,22 +82,15 @@ class WebClipboardWrapper implements ClipboardInterface {
     }
   }
 
-  private getClipboardItems(content: ClipboardContent): ClipboardItems {
+  private getClipboardItems(content: OSClipboardContent): ClipboardItems {
     const clipboardItemData = {
       [ClipboardMIMEType.PlainText]: this.getBlob(content, ClipboardMIMEType.PlainText),
       [ClipboardMIMEType.Html]: this.getBlob(content, ClipboardMIMEType.Html),
     };
-    const spreadsheetData = content[ClipboardMIMEType.OSpreadsheet];
-    if (spreadsheetData) {
-      clipboardItemData[ClipboardMIMEType.OSpreadsheet] = this.getBlob(
-        content,
-        ClipboardMIMEType.OSpreadsheet
-      );
-    }
     return [new ClipboardItem(clipboardItemData)];
   }
 
-  private getBlob(clipboardContent: ClipboardContent, type: ClipboardMIMEType): Blob {
+  private getBlob(clipboardContent: OSClipboardContent, type: ClipboardMIMEType): Blob {
     return new Blob([clipboardContent[type] || ""], {
       type,
     });

src/helpers/ui/paste_interactive.ts

@@ -1,11 +1,10 @@
 import { CURRENT_VERSION } from "../../migrations/data";
 import { _t } from "../../translation";
 import {
-  ClipboardContent,
-  ClipboardMIMEType,
   ClipboardPasteOptions,
   CommandResult,
   DispatchResult,
+  ParsedOSClipboardContent,
   SpreadsheetChildEnv,
   Zone,
 } from "../../types";
@@ -45,7 +44,7 @@ export function interactivePaste(
 export function interactivePasteFromOS(
   env: SpreadsheetChildEnv,
   target: Zone[],
-  clipboardContent: ClipboardContent,
+  clipboardContent: ParsedOSClipboardContent,
   pasteOption?: ClipboardPasteOptions
 ) {
   let result: DispatchResult;
@@ -59,10 +58,9 @@ export function interactivePasteFromOS(
       pasteOption,
     });
   } catch (error) {
-    const parsedSpreadsheetContent = clipboardContent[ClipboardMIMEType.OSpreadsheet]
-      ? JSON.parse(clipboardContent[ClipboardMIMEType.OSpreadsheet])
-      : {};
-    if (parsedSpreadsheetContent.version && parsedSpreadsheetContent.version !== CURRENT_VERSION) {
+    const parsedSpreadsheetContent = clipboardContent.data;
+
+    if (parsedSpreadsheetContent?.version !== CURRENT_VERSION) {
       env.raiseError(
         _t(
           "An unexpected error occurred while pasting content.\
@@ -73,7 +71,7 @@ export function interactivePasteFromOS(
     result = env.model.dispatch("PASTE_FROM_OS_CLIPBOARD", {
       target,
       clipboardContent: {
-        [ClipboardMIMEType.PlainText]: clipboardContent[ClipboardMIMEType.PlainText],
+        text: clipboardContent.text,
       },
       pasteOption,
     });