From zbeyens. The source code is available on GitHub.

Plate
PlatePliteEditorsTemplates
GitHub16kGitHub
DiscordDiscord
    • Stream
    • Copilot
  • Discussion
    • Comments
    • Suggestion
    • Basic Blocks
      • Blockquote
      • Heading
      • Horizontal Rule
    • Callout
    • Code Block
    • Column
    • Date
    • Equation
    • Link
    • List Classic
    • Media
    • MentionElement
    • Table
    • Table of Contents
    • Footnote
    • Toggle
  • Marks
    • Bold
    • Italic
    • Underline
    • Code
    • Highlight
    • Keyboard Input
    • Strikethrough
    • Subscript
    • Superscript
      • Font
      • Line Height
      • Text Align
    • Indent
    • List
      • Exit Break
      • Single Block
      • Trailing Block
    • Autoformat
    • Block Menu
    • Block Placeholder
    • Combobox
      • Emoji
      • MentionElement
      • Slash Command
    • Cursor Overlay
    • Drag & Drop
    • Navigation Feedback
    • Tabbable
    • Toolbar
    • Yjs
    • Multi SelectEditor
    • CSV
    • DOCX
    • HTML
    • Markdown

Serializing CSV

PreviousNext

Copy paste from CSV to Plite.

Loading…
Multi SelectDOCX

On This Page

FeaturesManual UsageInstallationAdd PluginConfigure PluginUsageCSV to PlatePluginsCsvPluginCsvPluginStateAPIeditor.api.csv.deserialize(options)
Build your editor
Production-ready AI template and reusable components.
Get all-access

Features

  • Convert CSV content to Plate table format
  • Configurable error tolerance for parsing malformed CSV data

CsvPlugin does not serialize a complete Plate value. When you copy multiple table cells, @platejs/table writes CSV, TSV, and plain-text clipboard data.

Report an issue

Manual Usage

Installation

pnpm add @platejs/csv
pnpm add @platejs/csv

Add Plugin

import { CsvPlugin } from '@platejs/csv';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    CsvPlugin,
  ],
});
import { CsvPlugin } from '@platejs/csv';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    CsvPlugin,
  ],
});

Configure Plugin

import { CsvPlugin } from '@platejs/csv';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    CsvPlugin.configure({
      initialState: {
        errorTolerance: 0.1,
        parseOptions: {
          header: true,
          skipEmptyLines: true,
          delimiter: ',',
        },
      },
    }),
  ],
});
  • errorTolerance: Percentage of rows that can contain errors (default: 0.25 for 25%)
  • parseOptions: Configuration passed to PapaParse library for CSV parsing
  • parseOptions.header: Treat first row as headers (default: true)

Per-call deserialization can override PapaParse fields, but not errorTolerance.

Usage

CSV to Plate

Use the API method to deserialize CSV data:

// Deserialize CSV string to Plate format
const csvData = `Name,Age,City
John,30,New York
Jane,25,Boston`;
 
const nodes = editor.api.csv.deserialize({ data: csvData });
// Deserialize CSV string to Plate format
const csvData = `Name,Age,City
John,30,New York
Jane,25,Boston`;
 
const nodes = editor.api.csv.deserialize({ data: csvData });

Pass PapaParse fields directly when one conversion needs a local override:

const nodes = editor.api.csv.deserialize({
  data: csvData,
  delimiter: ';',
  skipEmptyLines: true,
});
const nodes = editor.api.csv.deserialize({
  data: csvData,
  delimiter: ';',
  skipEmptyLines: true,
});

Plugins

CsvPlugin

Plugin for CSV deserialization functionality.

CsvPluginState

Pass CSV parser behavior through CsvPlugin.configure({ initialState }).

OptionsCsvPluginState

    The tolerance for errors in the CSV data, represented as a percentage in decimal form. This value is calculated as the ratio of errors to the total number of rows.

    • Default: 0.25 (This indicates that up to 25% of the rows can contain errors.)

    Options to be passed to the PapaParse library for parsing CSV data.

    • Default: { header: true } (Indicating that the first row of the CSV data should be treated as a header.)
    • See PapaParse documentation for more details about these options.

API

editor.api.csv.deserialize(options)

Takes a CSV (Comma Separated Values) string and converts it into a Plate compatible format. This function uses the papaparse library to parse the CSV data.

Parameters

    The CSV data string to be deserialized.

    PapaParse fields are passed directly beside data and override the plugin's parseOptions for this call. download and worker remain disabled. See PapaParse documentation.

ReturnsDescendant[] | undefined

    Array of Descendant nodes representing the CSV data in Plate format. Returns undefined if parsing fails.

Creates a table representation of the CSV data:

  • Headers (if present) become the first row
  • Each CSV row becomes a table row
  • Uses plugins: TablePlugin, TableRowPlugin, and TableCellPlugin
import { CsvPlugin } from '@platejs/csv';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    CsvPlugin.configure({
      initialState: {
        errorTolerance: 0.1,
        parseOptions: {
          header: true,
          skipEmptyLines: true,
          delimiter: ',',
        },
      },
    }),
  ],
});