Serializing CSV

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

import React from 'react';

import { Plate } from '@udecode/plate/react';

import { editorPlugins } from '@/components/editor/plugins/editor-plugins';
import { useCreateEditor } from '@/components/editor/use-create-editor';
import { Editor, EditorContainer } from '@/components/plate-ui/editor';

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

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

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

Features

  • Convert CSV content to a Slate value.

Installation

npm install @udecode/plate-csv

Usage

CSV -> Slate

import { CsvPlugin } from '@udecode/plate-csv';
 
const plugins = [
  // ...otherPlugins,
  CsvPlugin,
];

Plugins

CsvPlugin

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

editor.api.csv.deserialize

Takes a CSV (Comma Separated Values) string and converts it into a Slate 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 Slate 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: ParagraphPlugin, TablePlugin, TableCellHeaderPlugin, TableRowPlugin, and TableCellPlugin