Convert DraftJS

Easily convert the result of DraftJS into useful and easy to read data. For example; Array of text, plain text, etc.

Content:

• Installation
• Basic Usage
• Convert to Array
• Convert to Plain Text
  • Options
• Global Options

Installation

# npm
npm install --save convert-draftjs

# yarn
yarn add convert-draftjs

Basic Usage

Convert editor state directly

import { convertDraftToArray } from 'convert-draftjs';

// from draftjs raw content state
const result: string[] = convertDraftToArray(editorState.getCurrentContent());

// ["Hello", "World", ...]

Convert from the database (usually stringified json)

import { convertDraftToArray } from 'convert-draftjs';

// from database (JSON or string)
const mockDataFromDatabase =
  '{"blocks":[{"key":"5aeg1","text":"TEST","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}}]}';

const result: string[] = convertDraftToArray(mockDataFromDatabase);

// ["TEST"]

Convert to Array

Easily convert the result or the current state of DraftJS into an array of text.

import { convertDraftToArray } from 'convert-draftjs';

const result: string[] = convertDraftToArray(draftResult);

// ["Hello", "World"]

Convert to Plain Text

Easily convert the result or the current state of DraftJS into plain strings.

import { convertDraftToPlain } from 'convert-draftjs';

convertDraftToPlain(draftjsResult);

// result
{
  result: 'Hello World',
}

Special Options

join: string | undefined

Default: ' '

Set this options to anything to set join element between blocks. For example:

convertDraftToPlain(draftjsResult, {
  join: '.',
});

// result
{
  result: 'Hello.World',
}

includeCounter: boolean

Default: false

Do you want to include char and word counter? if true it will return result with sum of chars and words. This is very useful for example when you want to determine reading time for each content.

convertDraftToPlain(draftjsResult, {
  includeCounter: true,
});

// result
{
  result: 'Hello World',
  chars: 11,
  words: 2,
}

Global Options

select: [ 'all' | 'header-one' | 'unstyled' | 'code-block' ]

Default: all Options all | unstyled | header-one | code-block

You may want to target the specific draftjs blocks, for example if you want to get code block, select should be code-block

const codeBlock: string[] = convertDraftToArray(data, {
  select: ['code-block'],
});

// ["console.log();", "alert();", ...]

includeBlank: boolean

Default: false

Usually, blank string represent enter or "< br />" tag when user input a content. when includeBlank set to true, you may receive blank string value in the array.

const codeBlock: string[] = convertDraftToArray(data, {
  includeBlank: true,
});

// ["Hello", "", "World", "", ...]