Merge branch 'fix-safari-copy-to-clipboard' into 'develop'

bram2w · bram2w · commit 17e33869dbae · 2025-10-08T11:11:50.000Z
Fix copy to clipboard on Safari Closes baserow#3830 See merge request baserow/baserow!3738
diff --git a/changelog/entries/unreleased/bug/fix_copypaste_on_safari_186.json b/changelog/entries/unreleased/bug/fix_copypaste_on_safari_186.json
@@ -0,0 +1,8 @@
+{
+  "type": "bug",
+  "message": "Fix copy/paste on Safari 18.6+",
+  "domain": "database",
+  "issue_number": 3830,
+  "bullet_points": [],
+  "created_at": "2025-09-18"
+}
diff --git a/web-frontend/modules/database/components/view/grid/GridView.vue b/web-frontend/modules/database/components/view/grid/GridView.vue
@@ -1460,27 +1460,21 @@ export default {
      * Prepare and copy the multi-select cells into the clipboard,
      * formatted as TSV
      */
-    async copySelection(event, includeHeader = false) {
+    copySelection(event, includeHeader = false) {
       const gridStore = this.storePrefix + 'view/grid'
       if (!this.$store.getters[`${gridStore}/isMultiSelectActive`]) {
         return
       }
 
-      try {
-        this.$store.dispatch('toast/setCopying', true)
-        await this.copySelectionToClipboard(
-          this.$store.dispatch(`${gridStore}/getCurrentSelection`, {
-            fields: this.allVisibleFields,
-          }),
-          includeHeader
-        )
-      } catch (error) {
-        notifyIf(error, 'view')
-      } finally {
-        this.$store.dispatch('toast/setCopying', false)
-        // prevent Safari from beeping since window.getSelection() is empty
-        event.preventDefault()
-      }
+      this.copySelectionToClipboard(
+        this.$store.dispatch(`${gridStore}/getCurrentSelection`, {
+          fields: this.allVisibleFields,
+        }),
+        includeHeader
+      )
+
+      // prevent Safari from beeping since window.getSelection() is empty
+      event.preventDefault()
     },
     /**
      * Called when the @paste event is triggered from the `GridViewSection` component.
diff --git a/web-frontend/modules/database/mixins/copyPasteHelper.js b/web-frontend/modules/database/mixins/copyPasteHelper.js
@@ -14,7 +14,20 @@ const PAPA_CONFIG = {
 
 export default {
   methods: {
-    prepareValuesForCopy(fields, rows, includeHeader) {
+    /**
+     * Prepares the values of the given fields and rows for copying to the clipboard. It
+     * returns both a text representation and a json representation of the data. The
+     * text representation is a 2D array of strings, where each inner array represents a
+     * row and each string represents a cell. The json representation is a 2D array of
+     * values, where each inner array represents a row and each value represents a cell.
+     * The json representation can contain rich values, such as objects or arrays, that
+     * can be later used to paste rich data back into the grid.
+     *
+     * @param {Array} fields The fields to copy.
+     * @param {Array} rows The rows to copy.
+     * @param {boolean} includeHeader Whether to include the field names as the first
+     */
+    prepareValuesForCopy(fields, rows, includeHeader = false) {
       const textData = []
       const jsonData = []
       if (includeHeader) {
@@ -37,6 +50,18 @@ export default {
       }
       return { textData, jsonData }
     },
+    /**
+     * Prepares the given text data as an HTML table. If the text data only contains
+     * a single cell, no HTML table is returned as it would conflict with tiptap.
+     * The html data is used when pasting into external applications that support rich
+     * clipboard data, such as Google Sheets or Excel. If the firstRowIsHeader is true,
+     * the first row will be wrapped in <th> tags instead of <td> tags.
+     *
+     * @param {Array} textData The text data to prepare.
+     * @param {boolean} firstRowIsHeader Whether the first row should be treated as a
+     * header row.
+     * @returns {string|null} The HTML table or null if no table is needed.
+     */
     prepareHTMLData(textData, firstRowIsHeader) {
       const table = document.createElement('table')
       const tbody = document.createElement('tbody')
@@ -71,11 +96,29 @@ export default {
         { root: true }
       )
     },
-    async copySelectionToClipboard(selectionPromise, includeHeader = false) {
-      const { textData, jsonData } = await selectionPromise.then(
-        ([fields, rows]) =>
-          this.prepareValuesForCopy(fields, rows, includeHeader)
-      )
+    /**
+     * Formats the given text and json data for the clipboard and stores the rich
+     * representation in local storage. It returns both a tsv representation and an html
+     * representation of the text data. The tsv representation is used for plain text
+     * clipboard data, the html representation is used when pasting into external
+     * applications that support rich clipboard data, such as Google Sheets or Excel.
+     * The json representation is stored in local storage to be able to paste rich
+     * values back into the Baserow grid later. If the the stored version is the same as
+     * the clipboard version, the rich values will be used when pasting instead of the
+     * text values, so we can be more accurate (i.e. link row values, select options,
+     * etc.)
+     *
+     * @param {Object} data An object containing the text and json data.
+     * @param {Array} data.textData A 2D array of strings representing the text data.
+     * @param {Array} data.jsonData A 2D array of values representing the json data.
+     * @param {boolean} includeHeader Whether the copied data includes a header row.
+     * @returns {Object} An object containing the tsv and html representation of the
+     * text data. The html representation can be null if no html table is needed.
+     */
+    formatClipboardDataAndStoreRichCopy(
+      { textData, jsonData },
+      includeHeader = false
+    ) {
       const tsvData = this.$papa.unparse(textData, PAPA_CONFIG)
       const htmlData = this.prepareHTMLData(textData, includeHeader)
       try {
@@ -85,43 +128,107 @@ export default {
         )
       } catch (e) {
         this.showCopyClipboardError()
+        throw e
       }
+      return { tsvData, htmlData }
+    },
+    /**
+     * Copies the given selection to the clipboard. The selection is a promise that
+     * resolves to an array containing the fields and rows to copy. The fields are
+     * used to determine which columns to copy and in which order. The rows are the
+     * actual data to copy. If includeHeader is true, the field names are included as
+     * the first row of the copied data.
+     *
+     * @param {Promise} selectionPromise A promise that resolves to an array containing
+     * the fields and rows to copy.
+     * @param {boolean} includeHeader Whether to include the field names as the first
+     * row of the copied data.
+     */
+    copySelectionToClipboard(selectionPromise, includeHeader = false) {
+      this.$store.dispatch('toast/setCopying', true)
+      const dataPromise = selectionPromise
+        .then(([fields, rows]) => {
+          const { textData, jsonData } = this.prepareValuesForCopy(
+            fields,
+            rows,
+            includeHeader
+          )
+          this.$store.dispatch('toast/setCopying', false)
+          return this.formatClipboardDataAndStoreRichCopy(
+            { textData, jsonData },
+            includeHeader
+          )
+        })
+        .catch((error) => {
+          this.$store.dispatch('toast/setCopying', false)
+          throw error
+        })
 
       try {
-        await this.writeToClipboard(tsvData, htmlData)
+        this.writeToClipboard(dataPromise)
       } catch (e) {
         if (!document.hasFocus()) {
           window.addEventListener(
             'focus',
-            () => this.writeToClipboard(tsvData, htmlData),
+            () => this.writeToClipboard(dataPromise),
             { once: true }
           )
         } else {
           this.showCopyClipboardError()
         }
       }
     },
-    async writeToClipboard(tsvData, htmlData) {
+    /**
+     * Writes the given data to the clipboard. It tries to write both a plain text
+     * representation and a html representation of the data if supported by the browser.
+     * If the ClipboardItem API is not supported, it falls back to writing only the
+     * plain text representation. If that is also not supported, it falls back to using
+     * the rich clipboard utils that uses an older approach to write both a plain text
+     * and html representation of the data.
+     *
+     * @param {Promise} dataPromise A promise that resolves to an object containing
+     * the tsv and html representation of the data.
+     */
+    writeToClipboard(dataPromise) {
       if (typeof ClipboardItem !== 'undefined') {
-        const clipboardConfig = {
-          'text/plain': new Blob([tsvData], { type: 'text/plain' }),
-        }
-        if (htmlData) {
-          clipboardConfig['text/html'] = new Blob([htmlData], {
-            type: 'text/html',
-          })
-        }
-        await navigator.clipboard.write([new ClipboardItem(clipboardConfig)])
+        const clipboardItem = new ClipboardItem({
+          'text/plain': Promise.resolve(dataPromise).then(({ tsvData }) =>
+            tsvData ? new Blob([tsvData], { type: 'text/plain' }) : null
+          ),
+          'text/html': Promise.resolve(dataPromise).then(({ htmlData }) =>
+            htmlData ? new Blob([htmlData], { type: 'text/html' }) : null
+          ),
+        })
+        navigator.clipboard.write([clipboardItem])
       } else if (typeof navigator.clipboard?.writeText !== 'undefined') {
-        await navigator.clipboard.writeText(tsvData)
+        navigator.clipboard.writeText(
+          Promise.resolve(dataPromise).then(({ tsvData }) => tsvData)
+        )
       } else {
-        const richClipboardConfig = { 'text/plain': tsvData }
-        if (htmlData) {
-          richClipboardConfig['text/html'] = htmlData
+        const richClipboardConfig = {
+          'text/plain': Promise.resolve(dataPromise).then(
+            ({ tsvData }) => tsvData || null
+          ),
+          'text/html': Promise.resolve(dataPromise).then(
+            ({ htmlData }) => htmlData || null
+          ),
         }
         setRichClipboard(richClipboardConfig)
       }
     },
+    /**
+     * Extracts the clipboard data from the given paste event. It tries to extract
+     * both a plain text representation and a json representation of the data. The
+     * plain text representation is a 2D array of strings, where each inner array
+     * represents a row and each string represents a cell. The json representation
+     * is a 2D array of values, where each inner array represents a row and each
+     * value represents a cell. The json representation can contain rich values,
+     * such as objects or arrays, that can be later used to paste rich data back
+     * into the grid, if the versions match.
+     *
+     * @param {Event} event The paste event.
+     * @returns {Array} An array containing the text and json data.
+     */
     async extractClipboardData(event) {
       const { textRawData, jsonRawData } = await getRichClipboard(event)
       const { data: textData } = await this.$papa.parsePromise(
diff --git a/web-frontend/modules/database/mixins/gridField.js b/web-frontend/modules/database/mixins/gridField.js
@@ -165,15 +165,24 @@ export default {
         keyDownEventListener
       )
 
-      const copyEventListener = async (event) => {
+      const copyEventListener = (event) => {
         if (!this.canKeyDown(event) || !this.canKeyboardShortcut(event)) return
 
-        await this.copySelectionToClipboard(
-          Promise.resolve([
-            [this.field],
-            [{ [`field_${this.field.id}`]: this.value }],
-          ])
+        const { textData, jsonData } = this.prepareValuesForCopy(
+          [this.field],
+          [{ [`field_${this.field.id}`]: this.value }]
         )
+        const { tsvData } = this.formatClipboardDataAndStoreRichCopy({
+          textData,
+          jsonData,
+        })
+
+        try {
+          navigator.clipboard.writeText(tsvData)
+        } catch (err) {
+          console.error('Failed to copy: ', err)
+        }
+
         // prevent Safari from beeping since the window.getSelection() is empty
         event.preventDefault()
       }
diff --git a/web-frontend/modules/database/utils/view.js b/web-frontend/modules/database/utils/view.js
@@ -32,7 +32,7 @@ export function getRowSortFunction($registry, sortings, fields, groupBys = []) {
   })
 
   sortFunction = sortFunction.thenBy((a, b) =>
-    new BigNumber(a.order).minus(new BigNumber(b.order))
+    new BigNumber(a.order).minus(new BigNumber(b.order)).toNumber()
   )
   sortFunction = sortFunction.thenBy((a, b) => a.id - b.id)
   return sortFunction

Original file line number	Diff line number	Diff line change
`@@ -32,7 +32,7 @@ export function getRowSortFunction($registry, sortings, fields, groupBys = []) {`
`32`	`32`	`})`
`33`	`33`
`34`	`34`	`sortFunction = sortFunction.thenBy((a, b) =>`
`35`		`- new BigNumber(a.order).minus(new BigNumber(b.order))`
	`35`	`+ new BigNumber(a.order).minus(new BigNumber(b.order)).toNumber()`
`36`	`36`	`)`
`37`	`37`	`sortFunction = sortFunction.thenBy((a, b) => a.id - b.id)`
`38`	`38`	`return sortFunction`