feat: Add the PasteHTMLTableAsString extension

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)