[IMP] clipboard: keep cell formatting when copy/pasting cells from on…

…e spreadsheet to another

Currently, copy/pasting cells from one spreadsheet to another external spreadsheet removes all cell formatting and only keeps cell values. This is because the model clipboard is invalidated from one instance to another.

This commit solves the issue by adding a new custom type in the browser clipboard object and using the content saved in this key to re-create the cell formatting in the new spreadsheet.

Task: 3597039

src/actions/menu_items_actions.ts

@@ -58,7 +58,14 @@ async function paste(env: SpreadsheetChildEnv, pasteOption?: ClipboardPasteOptio
     case "ok":
       const target = env.model.getters.getSelectedZones();
       if (osClipboard && osClipboard.content !== spreadsheetClipboard) {
-        interactivePasteFromOS(env, target, osClipboard.content, pasteOption);
+        interactivePasteFromOS(
+          env,
+          target,
+          {
+            "text/plain": osClipboard.content,
+          },
+          pasteOption
+        );
       } else {
         interactivePaste(env, target, pasteOption);
       }

src/clipboard_handlers/tables_clipboard.ts

@@ -7,7 +7,7 @@ import {
   ClipboardPasteTarget,
   CoreTableType,
   HeaderIndex,
-  Range,
+  RangeData,
   Style,
   TableConfig,
   UID,
@@ -21,7 +21,7 @@ interface TableStyle {
 }
 
 interface CopiedTable {
-  range: Range;
+  range: RangeData;
   config: TableConfig;
   type: CoreTableType;
 }
@@ -71,7 +71,7 @@ export class TableClipboardHandler extends AbstractCellClipboardHandler<
           }
           tableCellsInRow.push({
             table: {
-              range: coreTable.range,
+              range: coreTable.range.rangeData,
               config: coreTable.config,
               type: coreTable.type,
             },
@@ -131,7 +131,7 @@ export class TableClipboardHandler extends AbstractCellClipboardHandler<
         if (tableCell.table) {
           this.dispatch("REMOVE_TABLE", {
             sheetId: content.sheetId,
-            target: [tableCell.table.range.zone],
+            target: [this.getters.getRangeFromRangeData(tableCell.table.range).zone],
           });
         }
       }
@@ -174,7 +174,7 @@ export class TableClipboardHandler extends AbstractCellClipboardHandler<
   ) {
     if (tableCell.table && !options?.pasteOption) {
       const { range: tableRange } = tableCell.table;
-      const zoneDims = zoneToDimension(tableRange.zone);
+      const zoneDims = zoneToDimension(this.getters.getRangeFromRangeData(tableRange).zone);
       const newTableZone = {
         left: position.col,
         top: position.row,

src/components/grid/grid.ts

@@ -647,7 +647,13 @@ export class Grid extends Component<Props, SpreadsheetChildEnv> {
         // the paste actually comes from o-spreadsheet itself
         interactivePaste(this.env, target);
       } else {
-        interactivePasteFromOS(this.env, target, content);
+        interactivePasteFromOS(this.env, target, {
+          [ClipboardMIMEType.PlainText]: ev.clipboardData.getData(ClipboardMIMEType.PlainText),
+          [ClipboardMIMEType.Html]: ev.clipboardData.getData(ClipboardMIMEType.Html),
+          [ClipboardMIMEType.OSpreadsheet]: ev.clipboardData.getData(
+            ClipboardMIMEType.OSpreadsheet
+          ),
+        });
       }
       if (isCutOperation) {
         await this.env.clipboard.write({ [ClipboardMIMEType.PlainText]: "" });

src/helpers/ui/paste_interactive.ts

@@ -1,4 +1,4 @@
-import { CommandResult, DispatchResult } from "../..";
+import { ClipboardContent, CommandResult, DispatchResult } from "../..";
 import { _t } from "../../translation";
 import { ClipboardPasteOptions, SpreadsheetChildEnv, Zone } from "../../types";
 
@@ -37,9 +37,13 @@ export function interactivePaste(
 export function interactivePasteFromOS(
   env: SpreadsheetChildEnv,
   target: Zone[],
-  text: string,
+  clipboardContent: ClipboardContent,
   pasteOption?: ClipboardPasteOptions
 ) {
-  const result = env.model.dispatch("PASTE_FROM_OS_CLIPBOARD", { target, text, pasteOption });
+  const result = env.model.dispatch("PASTE_FROM_OS_CLIPBOARD", {
+    target,
+    clipboardContent,
+    pasteOption,
+  });
   handlePasteResult(env, result);
 }

src/plugins/ui_stateful/clipboard.ts

@@ -48,6 +48,7 @@ export class ClipboardPlugin extends UIPlugin {
   static getters = [
     "getClipboardContent",
     "getClipboardTextContent",
+    "getClipboardCellFormattingContent",
     "isCutOperation",
     "isPaintingFormat",
   ] as const;
@@ -68,7 +69,9 @@ export class ClipboardPlugin extends UIPlugin {
         const zones = this.getters.getSelectedZones();
         return this.isCutAllowedOn(zones);
       case "PASTE_FROM_OS_CLIPBOARD": {
-        const copiedData = this.convertOSClipboardData(cmd.text);
+        const copiedData = this.convertOSClipboardData(
+          cmd.clipboardContent[ClipboardMIMEType.PlainText]
+        );
         const pasteOption =
           cmd.pasteOption || (this.paintFormatStatus !== "inactive" ? "onlyFormat" : undefined);
         return this.isPasteAllowed(cmd.target, copiedData, { pasteOption });
@@ -125,7 +128,13 @@ export class ClipboardPlugin extends UIPlugin {
         this.copiedData = this.copy(cmd.type, zones);
         break;
       case "PASTE_FROM_OS_CLIPBOARD": {
-        this.copiedData = this.convertOSClipboardData(cmd.text);
+        if (cmd.clipboardContent[ClipboardMIMEType.OSpreadsheet]) {
+          this.copiedData = JSON.parse(cmd.clipboardContent[ClipboardMIMEType.OSpreadsheet]);
+        } else {
+          this.copiedData = this.convertOSClipboardData(
+            cmd.clipboardContent[ClipboardMIMEType.PlainText]
+          );
+        }
         const pasteOption =
           cmd.pasteOption || (this.paintFormatStatus !== "inactive" ? "onlyFormat" : undefined);
         this.paste(cmd.target, {
@@ -278,7 +287,7 @@ export class ClipboardPlugin extends UIPlugin {
     }
   }
 
-  private convertOSClipboardData(clipboardData: string): {} {
+  private convertOSClipboardData(clipboardData: string | undefined): {} {
     this._isCutOperation = false;
     const handlers: ClipboardHandler<any>[] = clipboardHandlersRegistries.figureHandlers
       .getAll()
@@ -460,13 +469,29 @@ export class ClipboardPlugin extends UIPlugin {
     return this.getPlainTextContent();
   }
 
+  getClipboardCellFormattingContent(): string {
+    return this.getCellFormattingContent();
+  }
+
   getClipboardContent(): ClipboardContent {
     return {
       [ClipboardMIMEType.PlainText]: this.getPlainTextContent(),
       [ClipboardMIMEType.Html]: this.getHTMLContent(),
+      [ClipboardMIMEType.OSpreadsheet]: this.getCellFormattingContent(),
     };
   }
 
+  private getCellFormattingContent(): string {
+    const zones = this.getters.getSelectedZones();
+    const clipboardData = this.getClipboardData(zones);
+    let copiedCellFormattingData = {};
+    for (const handler of this.selectClipboardHandlers(clipboardData)) {
+      const data = handler.copy(clipboardData);
+      copiedCellFormattingData = { ...copiedCellFormattingData, ...data };
+    }
+    return JSON.stringify(copiedCellFormattingData);
+  }
+
   private getPlainTextContent(): string {
     if (!this.copiedData?.cells) {
       return "\t";

src/types/clipboard.ts

@@ -3,6 +3,7 @@ import { HeaderIndex, UID, Zone } from "./misc";
 export enum ClipboardMIMEType {
   PlainText = "text/plain",
   Html = "text/html",
+  OSpreadsheet = "web application/o-spreadsheet",
 }
 
 export type ClipboardContent = { [type in ClipboardMIMEType]?: string };
@@ -15,6 +16,11 @@ export interface ClipboardOptions {
 export type ClipboardPasteOptions = "onlyFormat" | "asValue";
 export type ClipboardOperation = "CUT" | "COPY";
 
+export type ClipboardPasteContent = {
+  plainText: string;
+  cellFormatting?: string;
+};
+
 export type ClipboardCellData = {
   zones: Zone[];
   rowsIndexes: HeaderIndex[];

src/types/commands.ts

@@ -21,7 +21,7 @@ import {
 } from "./misc";
 
 import { ChartDefinition } from "./chart/chart";
-import { ClipboardPasteOptions } from "./clipboard";
+import { ClipboardContent, ClipboardPasteOptions } from "./clipboard";
 import { FigureSize } from "./figure";
 import { SearchOptions } from "./find_and_replace";
 import { Image } from "./image";
@@ -685,7 +685,7 @@ export interface CancelPaintFormatCommand {
 export interface PasteFromOSClipboardCommand {
   type: "PASTE_FROM_OS_CLIPBOARD";
   target: Zone[];
-  text: string;
+  clipboardContent: ClipboardContent;
   pasteOption?: ClipboardPasteOptions;
 }
 

src/types/table.ts

@@ -54,7 +54,7 @@ export interface TableElementStyle {
   size?: number;
 }
 
-interface TableBorder extends Border {
+export interface TableBorder extends Border {
   // used to describe borders inside of a zone
   horizontal?: BorderDescr;
   vertical?: BorderDescr;