Skip to content

Converts DraftJS blocks JSON data into JSX to render in broswer

Notifications You must be signed in to change notification settings

aadityarajkumawat/draftjs-raw-parser

Repository files navigation

draftjs-raw-parser

Made with create-react-library

NPM JavaScript Style Guide

Install

npm install draftjs-raw-parser

or

yarn add draftjs-raw-parser

Usage

import React from 'react'
import { ParsedData } from 'draftjs-raw-parser'
import { convertToRaw, Editor, EditorState, RichUtils } from 'draft-js'

const App = () => {
  const [editorState, setEditorState] = React.useState(() =>
    EditorState.createEmpty()
  )

  const postRawContent = convertToRaw(editorState.getCurrentContent()).blocks
  console.log(postRawContent)

  const handleKeyCommand = (command: any, editorState: any) => {
    const newState = RichUtils.handleKeyCommand(editorState, command)

    if (newState) {
      setEditorState(newState)
      return 'handled'
    }

    return 'not-handled'
  }
  return (
    <Fragment>
      <Editor
        editorState={editorState}
        onChange={setEditorState}
        handleKeyCommand={handleKeyCommand}
        placeholder='Content'
      />
      {/* Parsed Data */}
      <div style={{ border: '1px solid' }}>
        <ParsedData
          rawContent={JSON.stringify(postRawContent)}
          color='#0066ff'
          fontSize='20px'
        />
      </div>
    </Fragment>
  )
}

export default App

License

MIT © aadityarajkumawat