Serializing CSV

Copy paste from CSV to Slate.

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

import React from 'react';

import { Plate } from '@udecode/plate-common/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.)

    Refer to 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 editor instance.

    The CSV data string to be deserialized.

    Percentage in decimal form, from 0 to a very large number, 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.

    • Default: { header: true } (Indicating that the first row of the CSV data should be treated as a header.)

    Refer to PapaParse documentation for more details about these options.

Returns

Collapse all

    Returns an array of TDescendant objects that represent the structure of the CSV data in a Slate compatible format. If parsing of the CSV data fails or the data is not valid, this function returns undefined.

This function creates a table representation of the CSV data. If the CSV file includes headers, they are added as the first row of the table. Each subsequent row represents the values from the CSV file. If the CSV file does not include headers, each row of data is represented as a row in the table.

Please note that the function assumes the usage of specific plugins corresponding to ParagraphPlugin.key, TablePlugin.key, TableCellHeaderPlugin.key, TableRowPlugin.key, and TableCellPlugin.key.

SelectSerializing DOCX