Nuclear Pumpkin Mocha

    convert-draftjs
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.0 • Public • Published

    Convert DraftJS

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

    GitHub Workflow Status (branch) npm version npm

    Content:

    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", "", ...]

    Install

    npm i convert-draftjs

    DownloadsWeekly Downloads

    3

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    33.3 kB

    Total Files

    24

    Last publish

    Collaborators

    • resqiar