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 (percentage in decimal form).

    • Default: 0.25 (25% of rows can contain errors)

    Options for the PapaParse library.

API

editor.api.csv.deserialize

Parameters

Collapse all

    The editor instance.

    The CSV data string to be deserialized.

    Percentage in decimal form for allowed errors (0 to ∞).

    • Default: 0.25

    Options for the PapaParse library.

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