Registry / web-framework / draftjs-utils

draftjs-utils

library0.10.2jsnpmunverified

DraftJS Utils is a collection of helper functions designed to simplify common operations when working with Facebook's Draft.js rich text editor framework. Currently at version 0.10.2, this library offers utilities for tasks such as retrieving selected content blocks, extracting plain text from selections, and manipulating editor state, often leveraging Immutable.js data structures (like OrderedMap and List) for its outputs, aligning with Draft.js's internal data model. While there isn't an explicit release cadence, updates are typically made as needed to support new Draft.js features or address community requirements, given its pre-1.0 versioning. Its key differentiators include providing pre-tested, battle-hardened functions for common Draft.js patterns, reducing boilerplate code, and helping developers interact more efficiently with `EditorState` and `ContentBlock` objects without needing to re-implement these functionalities.

web-framework serialization

npm install draftjs-utils

github ↗package ↗

INSTALL

IMPORT

SIG · DRAFTJS-UTILS

draftjs-utils

web-frameworkjavascriptv0.10.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

getSelectedBlocksList

✓ import { getSelectedBlocksList } from 'draftjs-utils';

✗ const { getSelectedBlocksList } = require('draftjs-utils');

Primary usage is via named ESM imports. CommonJS `require` works but is less idiomatic in modern React/Draft.js projects.

getSelectionText

✓ import { getSelectionText } from 'draftjs-utils';

✗ import getSelectionText from 'draftjs-utils';

All utilities are named exports; there is no default export from the package.

removeSelectedBlocksStyle

✓ import { removeSelectedBlocksStyle } from 'draftjs-utils';

✗ import * as DraftUtils from 'draftjs-utils'; DraftUtils.removeSelectedBlocksStyle(...);

While star imports technically work, it's generally better practice to directly import the specific utilities you need for better tree-shaking.

Demonstrates how to initialize an `EditorState` and use `draftjs-utils` to retrieve selected blocks and text, and apply a basic modification, highlighting the Immutable.js returns.

import { EditorState, ContentState, SelectionState } from 'draft-js'; import { getSelectedBlocksList, getSelectionText, removeSelectedBlocksStyle } from 'draftjs-utils'; // Create a basic EditorState for demonstration purposes. // In a real application, EditorState would come from your Draft.js editor component. const contentState = ContentState.createFromText('Hello world! This is a test paragraph.'); const selectionState = SelectionState.createEmpty(contentState.getFirstBlock().getKey()) .merge({ anchorKey: contentState.getFirstBlock().getKey(), anchorOffset: 6, focusKey: contentState.getFirstBlock().getKey(), focusOffset: 11, isBackward: false, hasFocus: true }); const editorState = EditorState.forceSelection(EditorState.createWithContent(contentState), selectionState); console.log('--- Using draftjs-utils ---'); // 1. Get selected blocks as an Immutable.List const selectedBlocks = getSelectedBlocksList(editorState); console.log('Selected Blocks Count:', selectedBlocks.size); selectedBlocks.forEach((block, index) => { console.log(`Block ${index + 1} Text: "${block.getText()}"`); }); // 2. Get selected text as a plain string const selectedText = getSelectionText(editorState); console.log('Selected Text:', `"${selectedText}"`); // 3. Example of a modification utility: remove style from selected blocks // This returns a new EditorState which you would then set in your Draft.js editor. const newEditorState = removeSelectedBlocksStyle(editorState); console.log('EditorState modified?', newEditorState !== editorState);

Debug

Known issues

gotchaMany utility functions return Immutable.js data structures (e.g., `Immutable.List`, `Immutable.OrderedMap`), not plain JavaScript arrays or objects. Direct access via `[index]` or `.property` will fail; instead, use Immutable.js methods like `.get(index)` or `.map()`, `.forEach()`, etc.

fix

Familiarize yourself with Immutable.js API methods for collections. Always check the return type documentation for each utility function.

affects: >=0.1.0

gotchaThe peer dependency for `immutable` allows both `3.x.x` and `4.x.x`. `draft-js` itself often has a more specific `immutable` dependency. Mismatches between your `draft-js` and `draftjs-utils`'s effective `immutable` version can lead to subtle bugs or runtime errors due to different Immutable.js API behaviors or data structures.

fix

Ensure that your `immutable` installation aligns with the exact version required by your `draft-js` package. Use `npm ls immutable` or `yarn why immutable` to inspect the resolved version.

affects: >=0.1.0

breakingAs a pre-1.0 library (currently at 0.10.x), minor version increments (e.g., from 0.10.x to 0.11.x) may introduce breaking changes without adhering strictly to semantic versioning's major version bump rule. Always review the changelog when upgrading.

fix

Consult the package's GitHub releases or `CHANGELOG.md` for specific breaking changes and migration instructions before upgrading pre-1.0 versions.

affects: >=0.1.0

Errors

Common errors & fixes

TypeError: block.getText is not a function

Attempting to call Immutable.js `ContentBlock` methods on a plain JavaScript object or an incorrectly typed block.

fix

Ensure that the `block` variable is a valid `ContentBlock` instance returned by a `draftjs-utils` function, which are typically Immutable.js objects. Access methods using `block.get('text')` or ensure correct typing.

TypeError: Cannot read properties of undefined (reading 'getSelection')

Passing `null` or `undefined` instead of a valid `EditorState` instance to a `draftjs-utils` function.

fix

Always pass a properly initialized `EditorState` object to `draftjs-utils` functions. Verify that your `editorState` variable is not `null` or `undefined`.

TypeError: Immutable.List.prototype.get not defined

This error or similar (e.g., for `OrderedMap`) indicates that you are trying to use an Immutable.js method on an object that is not an Immutable.js collection, possibly due to `immutable` version mismatch or incorrect usage.

fix

Verify that your `immutable` package version is compatible with both `draft-js` and `draftjs-utils`. Ensure the object you are calling `.get()` on is indeed an `Immutable.List` or `Immutable.OrderedMap` as expected by the utility's return type.

Upgrade

Version history

0.10.2latest on npm

Audit

Dependencies

draft-jsrequiredCore dependency for editor state and content structures.

immutablerequiredMany utility functions return Immutable.js data structures, mirroring Draft.js's internal model.

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/jpuri/draftjs-utils ↗

packagehttps://www.npmjs.com/package/draftjs-utils ↗