Serializing CSV

PreviousNext
Loading...
Files
components/demo.tsx
'use client';

import * as React from 'react';

import { Plate, usePlateEditor } from 'platejs/react';

import { EditorKit } from '@/components/editor/editor-kit';
import { Editor, EditorContainer } from '@/components/ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = usePlateEditor({
    plugins: EditorKit,
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}

Features

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

Converting a Plate value to CSV is not yet supported.

Manual Usage

Installation

pnpm add @platejs/csv

Add Plugin

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({
      options: {
        errorTolerance: 0.1,
        parseOptions: {
          header: true,
          skipEmptyLines: true,
          delimiter: ',',
        },
      },
    }),
  ],
});
  • options.errorTolerance: Percentage of rows that can contain errors (default: 0.25 for 25%)
  • options.parseOptions: Configuration passed to PapaParse library for CSV parsing
  • options.parseOptions.header: Treat first row as headers (default: true)

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 });

Plugins

CsvPlugin

Plugin for CSV deserialization functionality.

Options

Collapse all

    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

api.csv.deserialize

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

Collapse all

    The CSV data string to be deserialized.

    Percentage in decimal form, from 0 to ∞, 0 for no errors allowed. Percentage is based on number of errors compared to number of rows.

    • Default: 0.25

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

ReturnsDescendant[]

    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, TableCellHeaderPlugin, TableRowPlugin, and TableCellPlugin
Multi SelectDOCX