draft-to-lexical

Convert Draft.js RawDraftContentState to Lexical SerializedEditorState. Zero dependencies (except commander for CLI).

Draft.js has been archived by Meta. Lexical is its successor. This tool automates the data migration.

Install

npm install draft-to-lexical

Usage

As a library

import { convert } from "draft-to-lexical";

const draftContent = {
  blocks: [
    {
      key: "a1",
      text: "Hello World",
      type: "unstyled",
      depth: 0,
      inlineStyleRanges: [{ offset: 6, length: 5, style: "BOLD" }],
      entityRanges: [],
      data: {},
    },
  ],
  entityMap: {},
};

const lexicalState = convert(draftContent);
console.log(JSON.stringify(lexicalState, null, 2));

As a CLI

# Convert a single file
draft-to-lexical convert input.json -o output.json --pretty

# Pipe from stdin
cat draft-content.json | draft-to-lexical convert --pretty

# Batch convert a directory
draft-to-lexical batch ./draft-files/ -o ./lexical-files/ --pretty

Supported conversions

Block types

| Draft.js | Lexical | |----------|---------| | unstyled | paragraph | | header-one ... header-six | heading (h1-h6) | | blockquote | quote | | code-block | code | | unordered-list-item | listitem inside list (bullet) | | ordered-list-item | listitem inside list (number) | | atomic | Depends on entity (image, embed, etc.) |

Inline styles

| Draft.js | Lexical format flag | |----------|-------------------| | BOLD | 1 | | ITALIC | 2 | | UNDERLINE | 4 | | STRIKETHROUGH | 8 | | CODE | 16 | | HIGHLIGHT | 32 | | SUBSCRIPT | 64 | | SUPERSCRIPT | 128 |

Entities

| Draft.js | Lexical | |----------|---------| | LINK | link node wrapping text | | IMAGE | image node |

Custom entity handlers

Handle your project's custom entities:

import { convert } from "draft-to-lexical";

const result = convert(draftContent, {
  entityHandlers: {
    MENTION: (entity, text, children) => ({
      type: "mention",
      version: 1,
      mentionName: entity.data.name,
      detail: 0,
      format: 0,
      mode: "normal",
      style: "",
      text,
    }),
  },
});

API

convert(rawContentState, options?)

• rawContentState — Draft.js RawDraftContentState object
• options.entityHandlers — Record of custom entity type handlers
• Returns: Lexical SerializedEditorState

License

MIT