[FIX] clipboard: Fix clipboard cross-browser coverage

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/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";
@@ -626,32 +627,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,
+ ImportClipboardContent,
+ OSClipboardContent,
+ UID,
+ Zone,
+} from "../../types";
 import { mergeOverlappingZones, positions } from "../zones";
 
 export function getClipboardDataPositions(sheetId: UID, zones: Zone[]): ClipboardCellData {
@@ -54,3 +61,18 @@ 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): ImportClipboardContent {
+ const htmlDocument = new DOMParser().parseFromString(
+ content[ClipboardMIMEType.Html] ?? "<div></div>",
+ "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);
@@ -83,22 +83,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,
+ ImportClipboardContent,
  SpreadsheetChildEnv,
  Zone,
 } from "../../types";
@@ -45,7 +44,7 @@ export function interactivePaste(
 export function interactivePasteFromOS(
  env: SpreadsheetChildEnv,
  target: Zone[],
- clipboardContent: ClipboardContent,
+ clipboardContent: ImportClipboardContent,
  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,
  });

src/plugins/ui_stateful/clipboard.ts

@@ -6,11 +6,11 @@ import { getClipboardDataPositions } from "../../helpers/clipboard/clipboard_hel
 import { UuidGenerator, isZoneValid, union } from "../../helpers/index";
 import { CURRENT_VERSION } from "../../migrations/data";
 import {
- ClipboardContent,
  ClipboardData,
  ClipboardMIMEType,
  ClipboardOptions,
  ClipboardPasteTarget,
+ OSClipboardContent,
 } from "../../types/clipboard";
 import {
  ClipboardCell,
@@ -39,6 +39,11 @@ type MinimalClipboardData = {
  figureId?: UID;
  [key: string]: unknown;
 };
+
+export interface HtmlClipboardData extends MinimalClipboardData {
+ version?: number;
+ clipboardId?: string;
+}
 /**
  * Clipboard Plugin
  *
@@ -70,9 +75,7 @@ export class ClipboardPlugin extends UIPlugin {
  const zones = this.getters.getSelectedZones();
  return this.isCutAllowedOn(zones);
  case "PASTE_FROM_OS_CLIPBOARD": {
- const copiedData = this.convertOSClipboardData(
- cmd.clipboardContent[ClipboardMIMEType.PlainText] ?? ""
- );
+ const copiedData = this.convertOSClipboardData(cmd.clipboardContent.text ?? "");
  const pasteOption = cmd.pasteOption;
  return this.isPasteAllowed(cmd.target, copiedData, { pasteOption, isCutOperation: false });
  }
@@ -126,12 +129,12 @@ export class ClipboardPlugin extends UIPlugin {
  break;
  case "PASTE_FROM_OS_CLIPBOARD": {
  this._isCutOperation = false;
- if (cmd.clipboardContent[ClipboardMIMEType.OSpreadsheet]) {
- this.copiedData = JSON.parse(cmd.clipboardContent[ClipboardMIMEType.OSpreadsheet]);
+
+ const htmlData = cmd.clipboardContent.data;
+ if (htmlData) {
+ this.copiedData = htmlData;
  } else {
- this.copiedData = this.convertOSClipboardData(
- cmd.clipboardContent[ClipboardMIMEType.PlainText] ?? ""
- );
+ this.copiedData = this.convertOSClipboardData(cmd.clipboardContent.text ?? "");
  }
  const pasteOption = cmd.pasteOption;
  this.paste(cmd.target, this.copiedData, {
@@ -476,26 +479,25 @@ export class ClipboardPlugin extends UIPlugin {
  return this.clipboardId;
  }
 
- getClipboardContent(): ClipboardContent {
+ getClipboardContent(): OSClipboardContent {
  return {
  [ClipboardMIMEType.PlainText]: this.getPlainTextContent(),
  [ClipboardMIMEType.Html]: this.getHTMLContent(),
- [ClipboardMIMEType.OSpreadsheet]: this.getSerializedGridData(),
  };
  }
 
- private getSerializedGridData(): string {
+ private getgridData(): HtmlClipboardData {
  const data = {
  version: CURRENT_VERSION,
  clipboardId: this.clipboardId,
  };
  if (this.copiedData && "figureId" in this.copiedData) {
- return JSON.stringify(data);
+ return data;
  }
- return JSON.stringify({
+ return {
  ...data,
  ...this.copiedData,
- });
+ };
  }
 
  private getPlainTextContent(): string {
@@ -518,36 +520,35 @@ export class ClipboardPlugin extends UIPlugin {
  }
 
  private getHTMLContent(): string {
- if (!this.copiedData?.cells) {
- return `<div data-clipboard-id="${this.clipboardId}">\t</div>`;
- }
- const cells = this.copiedData.cells;
- if (cells.length === 1 && cells[0].length === 1) {
- return `<div data-clipboard-id="${this.clipboardId}">${this.getters.getCellText(
- cells[0][0].position
- )}</div>`;
- }
- if (!cells[0][0]) {
+ let innerHTML: string = "";
+ const cells = this.copiedData?.cells;
+ if (!cells) {
+ innerHTML = "\t";
+ } else if (cells.length === 1 && cells[0].length === 1) {
+ innerHTML = `${this.getters.getCellText(cells[0][0].position)}`;
+ } else if (!cells[0][0]) {
  return "";
- }
-
- let htmlTable = `<div data-clipboard-id="${this.clipboardId}"><table border="1" style="border-collapse:collapse">`;
- for (const row of cells) {
- htmlTable += "<tr>";
- for (const cell of row) {
- if (!cell) {
- continue;
+ } else {
+ let htmlTable = `<table border="1" style="border-collapse:collapse">`;
+ for (const row of cells) {
+ htmlTable += "<tr>";
+ for (const cell of row) {
+ if (!cell) {
+ continue;
+ }
+ const cssStyle = cssPropertiesToCss(
+ cellStyleToCss(this.getters.getCellComputedStyle(cell.position))
+ );
+ const cellText = this.getters.getCellText(cell.position);
+ htmlTable += `<td style="${cssStyle}">` + xmlEscape(cellText) + "</td>";
  }
- const cssStyle = cssPropertiesToCss(
- cellStyleToCss(this.getters.getCellComputedStyle(cell.position))
- );
- const cellText = this.getters.getCellText(cell.position);
- htmlTable += `<td style="${cssStyle}">` + xmlEscape(cellText) + "</td>";
+ htmlTable += "</tr>";
  }
- htmlTable += "</tr>";
+ htmlTable += "</table>";
+ innerHTML = htmlTable;
  }
- htmlTable += "</table></div>";
- return htmlTable;
+ const serializedData = JSON.stringify(this.getgridData());
+ return `<div data-osheet-clipboard='${xmlEscape(serializedData)}'>${innerHTML}</div>`;
  }
 
  isCutOperation(): boolean {

src/types/clipboard.ts

@@ -1,12 +1,17 @@
+import { HtmlClipboardData } from "../plugins/ui_stateful";
 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 };
+export type OSClipboardContent = { [type in ClipboardMIMEType]?: string };
+
+export type ImportClipboardContent = {
+ text?: string;
+ data?: HtmlClipboardData;
+};
 
 export interface ClipboardOptions {
  isCutOperation: boolean;