feat: Add the PasteHTMLTableAsString extension (Doist#290)

* feat: Add the `PasteSpreadsheetTable` extension

* Rename extension to be more explicit on what it does

* Add support for multiple copied GFM tables

* Do not paste images there are multiple clipboard types

Apparently, Numbers (Apple's spreadsheet app) copies content as text,
HTML, and an image (for some reason), and the `RichTextImage` will
take precedence over `PasteHTMLTableAsString` and paste an image instead
of pasting the Numbers table as text/HTML.

This changes prevents that from happening by making sure that the
`RichTextImage` extension will only handle images if only images are
found in the clipboard data, otherwise the event will not be handled,
and passed on to the next handler in the chain.

src/constants/extension-priorities.ts

@@ -12,6 +12,13 @@ const SUGGESTION_EXTENSION_PRIORITY = 1000
  */
 const SMART_MARKDOWN_TYPING_PRIORITY = 110
 
+/**
+ * Priority for the `PasteHTMLTableAsString` extension. This needs to be higher than most paste
+ * extensions (e.g., `PasteSinglelineText`, `PasteMarkdown`, etc.), so that the extension can first
+ * parse HTML tables that might exist in the clipboard data.
+ */
+const PASTE_EXTENSION_PRIORITY = 105
+
 /**
  * Priority for the `ViewEventHandlers` extension. This needs to be higher than the default for most
  * of the built-in and official extensions (i.e. `100`), so that the event handlers from the
@@ -28,6 +35,7 @@ const BLOCKQUOTE_EXTENSION_PRIORITY = 101
 
 export {
     BLOCKQUOTE_EXTENSION_PRIORITY,
+    PASTE_EXTENSION_PRIORITY,
     SMART_MARKDOWN_TYPING_PRIORITY,
     SUGGESTION_EXTENSION_PRIORITY,
     VIEW_EVENT_HANDLERS_PRIORITY,

src/extensions/plain-text/plain-text-kit.ts

@@ -4,6 +4,7 @@ import { Text } from '@tiptap/extension-text'
 import { Typography } from '@tiptap/extension-typography'
 
 import { CopyMarkdownSource } from '../shared/copy-markdown-source'
+import { PasteHTMLTableAsString } from '../shared/paste-html-table-as-string'
 import { PasteSinglelineText } from '../shared/paste-singleline-text'
 
 import { SmartMarkdownTyping } from './smart-markdown-typing/smart-markdown-typing'
@@ -34,6 +35,11 @@ type PlainTextKitOptions = {
      */
     paragraph: Partial<PlainTextParagraphOptions> | false
 
+    /**
+     * Set to `false` to disable the `PasteHTMLTableAsString` extension.
+     */
+    pasteHTMLTableAsString: false
+
     /**
      * Set to `false` to disable the `Text` extension.
      */
@@ -72,6 +78,11 @@ const PlainTextKit = Extension.create<PlainTextKitOptions>({
                     ? PasteSinglelineText
                     : PasteMultilineText,
             )
+
+            if (this.options?.pasteHTMLTableAsString !== false) {
+                // Supports pasting tables (from spreadsheets and websites) into the editor
+                extensions.push(PasteHTMLTableAsString)
+            }
         }
 
         if (this.options.history !== false) {

src/extensions/rich-text/rich-text-image.ts

@@ -185,6 +185,11 @@ const RichTextImage = Image.extend<RichTextImageOptions>({
                             return false
                         }
 
+                        // Do not handle the event if there are multiple clipboard types
+                        if ((event.clipboardData?.types || []).length > 1) {
+                            return false
+                        }
+
                         const pastedFiles = Array.from(event.clipboardData?.files || [])
 
                         // Do not handle the event if no files were pasted

src/extensions/rich-text/rich-text-kit.ts

@@ -20,6 +20,7 @@ import { Typography } from '@tiptap/extension-typography'
 
 import { BLOCKQUOTE_EXTENSION_PRIORITY } from '../../constants/extension-priorities'
 import { CopyMarkdownSource } from '../shared/copy-markdown-source'
+import { PasteHTMLTableAsString } from '../shared/paste-html-table-as-string'
 import { PasteSinglelineText } from '../shared/paste-singleline-text'
 
 import { BoldAndItalics } from './bold-and-italics'
@@ -159,6 +160,11 @@ type RichTextKitOptions = {
      */
     pasteSinglelineText: false
 
+    /**
+     * Set to `false` to disable the `PasteHTMLTableAsString` extension.
+     */
+    pasteHTMLTableAsString: false
+
     /**
      * Set options for the `Strike` extension, or `false` to disable.
      */
@@ -242,6 +248,11 @@ const RichTextKit = Extension.create<RichTextKitOptions>({
                 // pasted lines together
                 extensions.push(PasteSinglelineText)
             }
+
+            if (this.options?.pasteHTMLTableAsString !== false) {
+                // Supports pasting tables (from spreadsheets and websites) into the editor
+                extensions.push(PasteHTMLTableAsString)
+            }
         }
 
         if (this.options.dropCursor !== false) {

src/extensions/shared/paste-html-table-as-string.ts

@@ -0,0 +1,77 @@
+import { Extension } from '@tiptap/core'
+import { Plugin, PluginKey } from 'prosemirror-state'
+
+import { PASTE_EXTENSION_PRIORITY } from '../../constants/extension-priorities'
+import { parseHtmlToElement } from '../../helpers/dom'
+
+/**
+ * The `PasteHTMLTableAsString` extension adds the ability to paste a table copied from a spreadsheet
+ * web app (e.g., Google Sheets, Microsoft Excel), along with tables rendered by GitHub Flavored
+ * Markdown (GFM), into the editor.
+ *
+ * Since Typist does not yet support tables, this extension simply pastes the table as a string of
+ * paragraphs (one paragraph per row), with each cell separated by a space character. However,
+ * whenever we do add support for tables, this extension will need to be completely rewritten.
+ *
+ * Lastly, please note that formatting is lost when the copied table comes from Google Sheets or
+ * Microsoft Excel, because unfortunately, these apps style the cell contents using CSS.
+ */
+const PasteHTMLTableAsString = Extension.create({
+    name: 'pasteHTMLTableAsString',
+    priority: PASTE_EXTENSION_PRIORITY,
+    addProseMirrorPlugins() {
+        return [
+            new Plugin({
+                key: new PluginKey('pasteHTMLTableAsString'),
+                props: {
+                    transformPastedHTML(html) {
+                        // Attempt to extract table(s) HTML from the pasted HTML
+                        const tableHTML = html.match(/<table[^>]+>[\s\S]*?<\/table>/gi)
+
+                        // Do not handle the event if no table HTML was found
+                        if (!tableHTML) {
+                            return html
+                        }
+
+                        // Concatenate all tables into a single string of paragraphs
+                        return tableHTML.reduce((result, table) => {
+                            const { firstElementChild: tableElement } = parseHtmlToElement(
+                                table,
+                            ) as {
+                                firstElementChild: HTMLTableElement | null
+                            }
+
+                            if (!tableElement) {
+                                return result
+                            }
+
+                            // Transform the table element into a string of paragraphs
+                            return (
+                                result +
+                                Array.from(tableElement.rows)
+                                    // Join each cell into a single string for each row
+                                    .reduce<string[]>((acc, row) => {
+                                        return [
+                                            ...acc,
+                                            // Use `innerHTML` instead of `innerText` to preserve
+                                            // potential formatting (e.g., GFM) within each cell
+                                            Array.from(row.cells)
+                                                .map((cell) => cell.innerHTML)
+                                                .join(' '),
+                                        ]
+                                    }, [])
+                                    // Discard rows that are completely empty
+                                    .filter((row) => row.trim().length > 0)
+                                    // Wrap each row in a paragraph
+                                    .map((row) => `<p>${row}</p>`)
+                                    .join('')
+                            )
+                        }, '')
+                    },
+                },
+            }),
+        ]
+    },
+})
+
+export { PasteHTMLTableAsString }

src/extensions/shared/paste-singleline-text.ts

@@ -26,7 +26,7 @@ const PasteSinglelineText = Extension.create({
                             // Join break lines with a space character in-between
                             .replace(/<br>/g, ' ')
                             // Join paragraphs with a space character in-between
-                            .replace(/<p[^>]+>(.*?)<\/p>/g, '$1 ')
+                            .replace(/<p[^>]*>(.*?)<\/p>/g, '$1 ')
 
                         return isPlainTextDocument(view.state.schema)
                             ? escape(bodyElement.innerText)