• Stars
    star
    158
  • Rank 229,853 (Top 5 %)
  • Language
    HTML
  • License
    MIT License
  • Created over 7 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

HTML To DraftJS

A library for converting plain HTML to DraftJS Editor content. Build for use with react-draft-wysiwyg.

Installation

npm install html-to-draftjs --save

Usage

import { EditorState, ContentState } from 'draft-js';
import htmlToDraft from 'html-to-draftjs';

const blocksFromHtml = htmlToDraft(this.props.content);
const { contentBlocks, entityMap } = blocksFromHtml;
const contentState = ContentState.createFromBlockArray(contentBlocks, entityMap);
const editorState = EditorState.createWithContent(contentState);

(optional) customChunkRenderer

Use to define additional html nodes. Only supports atomic blocks.

  • nodeName: string - the name of the node, in lowercase
  • node: HTMLElement - the parsed node itself

This renderer function is executed before any other html to draft conversion. Return nothing (or something falsy) to continue with the normal translation.

Example:

htmlToDraft('<hr/>', (nodeName, node) => {
  if (nodeName === 'hr') {
    return {
      type: 'HORIZONTAL_RULE',
      mutability: 'MUTABLE',
      data: {}
    };
  }
})

Take Care: Plz not use version 1.2.0 it has build issues.

More Repositories

1

react-draft-wysiwyg

A Wysiwyg editor build on top of ReactJS and DraftJS. https://jpuri.github.io/react-draft-wysiwyg
JavaScript
6,308
star
2

draftjs-to-html

Library for converting Draftjs editor content state to HTML
JavaScript
315
star
3

draftjs-utils

An collection of useful utility functions for DraftJS.
JavaScript
283
star
4

react-range-slider

React range slider component.
JavaScript
115
star
5

draftjs-to-markdown

JavaScript
62
star
6

GraphQL-Typescript-Starter

React Node GraphQL TypeScript - Starter Kit
TypeScript
42
star
7

react-component-stores

A simplified and powerful state management library for React applications.
JavaScript
21
star
8

react-simplified-boilerplate

A simplified boilerplate for my React projects
JavaScript
7
star
9

rustoli

Programming problems solved using Rust programming language
Rust
5
star
10

defi_yield_farming

DEFI yield farming dapp using chainlink price feeds
JavaScript
5
star
11

reason-places

A single page web application build using ReasonML
JavaScript
5
star
12

Solidity-Examples

Example solidity contracts
Solidity
3
star
13

Runup

Runup token is implementation of ERC-20 token ground up (without using any library).
JavaScript
3
star
14

solom

Articles about solidity
3
star
15

reason-tictactoe

Simple game of Tic Tac Toe made using ReasonML
OCaml
3
star
16

Election-DAPP

Election is simple DAPP which allow users to cast votes. It has some rules built on top of it like a user can cast only 1 vote, etc.
JavaScript
2
star
17

DaddaNFT

NFT minting
JavaScript
2
star
18

VR

VR and 2D Experiments
JavaScript
2
star
19

hub-poc

HTML
1
star
20

Learning-Reason

1
star
21

react-prosemirror

JavaScript
1
star
22

sanity-gatsby-blog

Blog with Gatsby
JavaScript
1
star
23

humble-site

CSS
1
star
24

token_price_link

Obtaining latest token prices using chainlink blockchain
JavaScript
1
star