Table paste plugin

[mikaelmattsson]

Great plugin! Thought I would share a plugin I created which helps insert data from excel or other tables because it was quite useful

It has a button, but it also adds a paste event listener so the button is not needed

import {
  realmPlugin,
  Signal,
  usePublisher,
  ButtonWithTooltip,
  $createTableNode
} from "@mdxeditor/editor"
import { createActiveEditorSubscription$ } from '@mdxeditor/editor'
import TableChartIcon from '@mui/icons-material/TableChart'
import { $getSelection, $isRangeSelection, $insertNodes, PASTE_COMMAND, $getRoot } from 'lexical'
import type { Table } from 'mdast'
import { useCallback } from 'react'

// Signal to convert selected text to table
const convertTextToTable$ = Signal<{ text: string }>()

// Function to detect if text contains tabular data
const isTabularData = (text: string): boolean => {
  // Check if the text contains tabs or multiple lines with consistent delimiters
  const lines = text.split('\n').filter(line => line.trim().length > 0)
  if (lines.length < 2) return false
  
  // Check if all lines have the same number of tabs
  const tabCounts = lines.map(line => (line.match(/\t/g) || []).length)
  const firstTabCount = tabCounts[0]
  if (firstTabCount === 0) return false // No tabs found
  
  // All lines should have the same number of tabs
  return tabCounts.every(count => count === firstTabCount)
}


// Function to create MDAST table structure
const createMdastTable = (tableData: string[][]): Table => {
  if (tableData.length === 0) return { type: 'table', children: [] }
  
  const rows = tableData.map((row) => {
    return {
      type: 'tableRow' as const,
      children: row.map(cell => ({
        type: 'tableCell' as const,
        children: [
          {
            type: 'text' as const,
            value: cell || ''
          }
        ]
      }))
    }
  })
  
  return {
    type: 'table' as const,
    children: rows
  }
}

// The Excel paste plugin
export const excelPastePlugin = realmPlugin({
  init(realm) {
    // Subscribe to the active editor to handle paste events
    realm.pub(createActiveEditorSubscription$, (editor) => {
      // Register a paste command with high priority
      const removeCommand = editor.registerCommand(
        PASTE_COMMAND,
        (event: ClipboardEvent) => {
          const clipboardData = event.clipboardData
          if (!clipboardData) return false
          
          const text = clipboardData.getData('text/plain')
          if (!text || !isTabularData(text)) return false
          
          // Prevent default paste behavior
          event.preventDefault()
          
          // Convert text to table data
          const lines = text.split('\n').filter(line => line.trim().length > 0)
          const tableData = lines.map(line => line.split('\t'))
          
          // Create MDAST table structure
          const mdastTable = createMdastTable(tableData)
          
          // Insert table using editor update
          editor.update(() => {
            let selection = $getSelection()
            
            // If no valid selection, select the end of the document
            if (!$isRangeSelection(selection)) {
              const root = $getRoot()
              if (root) {
                root.selectEnd()
                selection = $getSelection()
              }
            }
            
            if (!$isRangeSelection(selection)) return
            
            // Create table node
            const tableNode = $createTableNode(mdastTable)
            
            // Insert table at current cursor position (or end of document)
            $insertNodes([tableNode])
          })
          
          return true // Command handled
        },
        1 // High priority
      )
      
      // Return cleanup function
      return () => {
        removeCommand()
      }
    })
    
    // Subscribe to the active editor to handle manual text to table conversion
    realm.pub(createActiveEditorSubscription$, (editor) => {
      return realm.sub(convertTextToTable$, ({ text }) => {
        editor.update(() => {
          let selection = $getSelection()
          
          // If no valid selection, select the end of the document
          if (!$isRangeSelection(selection)) {
            const root = $getRoot()
            if (root) {
              root.selectEnd()
              selection = $getSelection()
            }
          }
          
          if (!$isRangeSelection(selection)) return
          
          // Check if the text is tabular data
          if (!isTabularData(text)) return
          
          // Convert text to table data
          const lines = text.split('\n').filter(line => line.trim().length > 0)
          const tableData = lines.map(line => line.split('\t'))
          
          // Create MDAST table structure
          const mdastTable = createMdastTable(tableData)
          
          // Create table node
          const tableNode = $createTableNode(mdastTable)
          
          // Insert table at current cursor position (or end of document)
          $insertNodes([tableNode])
        })
      })
    })
  }
})


// Custom toolbar button component for manual table insertion
export function ExcelPasteButton() {
  const convertTextToTable = usePublisher(convertTextToTable$)
  
  
  const handleConvertPastedText = useCallback(async () => {
    try {
      // Get text from clipboard
      const clipboardText = await navigator.clipboard.readText()
      
      // Check if it's tabular data
      if (isTabularData(clipboardText)) {
        convertTextToTable({ text: clipboardText })
      } else {
        alert('No tabular data found in clipboard. Please copy a table from Excel first.')
      }
    } catch (error) {
      console.error('Failed to read clipboard:', error)
      alert('Failed to read clipboard. Please make sure you have copied data from Excel.')
    }
  }, [convertTextToTable])

  return (
    <ButtonWithTooltip
      title="Paste as Table"
      onClick={handleConvertPastedText}
    >
      <TableChartIcon />
    </ButtonWithTooltip>
  )
}