draft-js-utils

What is draft-js-utils?

The draft-js-utils package provides utility functions for working with Draft.js, a rich text editor framework for React. These utilities help in handling various operations like converting content state to HTML, extracting entities, and managing inline styles.

What are draft-js-utils's main functionalities?

convertToHTML

This feature allows you to convert Draft.js content state to HTML. The code sample demonstrates how to convert an HTML string to Draft.js content state and then back to HTML.

const { stateToHTML } = require('draft-js-export-html');
const { EditorState, ContentState, convertFromHTML } = require('draft-js');

const html = '<p>Hello, world!</p>';
const contentBlocks = convertFromHTML(html);
const contentState = ContentState.createFromBlockArray(contentBlocks);
const editorState = EditorState.createWithContent(contentState);

const htmlOutput = stateToHTML(editorState.getCurrentContent());
console.log(htmlOutput);

extractEntities

This feature helps in extracting entities from the content state. The code sample shows how to extract entity ranges from a block of text in Draft.js.

const { getEntityRanges } = require('draft-js-utils');
const { EditorState, ContentState, convertFromRaw } = require('draft-js');

const rawContent = {
  blocks: [{
    text: 'Hello, world!',
    type: 'unstyled',
    entityRanges: [{ offset: 0, length: 5, key: '1' }]
  }],
  entityMap: {
    '1': { type: 'LINK', mutability: 'MUTABLE', data: { url: 'http://example.com' } }
  }
};

const contentState = convertFromRaw(rawContent);
const editorState = EditorState.createWithContent(contentState);

const entityRanges = getEntityRanges(editorState.getCurrentContent().getFirstBlock(), (start, end) => true);
console.log(entityRanges);

manageInlineStyles

This feature allows you to manage inline styles in Draft.js. The code sample demonstrates how to get the selected inline styles from the editor state.

const { getSelectedInlineStyle } = require('draft-js-utils');
const { EditorState, ContentState, convertFromRaw } = require('draft-js');

const rawContent = {
  blocks: [{
    text: 'Hello, world!',
    type: 'unstyled',
    inlineStyleRanges: [{ offset: 0, length: 5, style: 'BOLD' }]
  }],
  entityMap: {}
};

const contentState = convertFromRaw(rawContent);
const editorState = EditorState.createWithContent(contentState);

const inlineStyles = getSelectedInlineStyle(editorState);
console.log(inlineStyles);

Other packages similar to draft-js-utils

draft-js-export-html

The draft-js-export-html package provides utilities to convert Draft.js content state to HTML. It is similar to the convertToHTML feature of draft-js-utils but focuses solely on HTML conversion.

draft-js-import-html

The draft-js-import-html package allows you to import HTML content into Draft.js content state. It complements the draft-js-export-html package and is useful for converting HTML to Draft.js content state.

README

Collection of utilities for DraftJS

This is a set of utilities originally built for React-RTE, a rich text editor built on the awesome DraftJS.

Development

This project uses Flow for static type checking. The type annotations are optional, but preferred. Each file can opt-in to using Flow by adding @flow to the docblock or put this as the first line: // @flow.

Flow typechecks will be run as part of the normal tests npm run test but can also be run separately using npm run typecheck.