{"id":10766,"library":"draftjs-utils","title":"DraftJS Utils","description":"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.","status":"active","version":"0.10.2","language":"javascript","source_language":"en","source_url":"https://github.com/jpuri/draftjs-utils","tags":["javascript"],"install":[{"cmd":"npm install draftjs-utils","lang":"bash","label":"npm"},{"cmd":"yarn add draftjs-utils","lang":"bash","label":"yarn"},{"cmd":"pnpm add draftjs-utils","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency for editor state and content structures.","package":"draft-js","optional":false},{"reason":"Many utility functions return Immutable.js data structures, mirroring Draft.js's internal model.","package":"immutable","optional":false}],"imports":[{"note":"Primary usage is via named ESM imports. CommonJS `require` works but is less idiomatic in modern React/Draft.js projects.","wrong":"const { getSelectedBlocksList } = require('draftjs-utils');","symbol":"getSelectedBlocksList","correct":"import { getSelectedBlocksList } from 'draftjs-utils';"},{"note":"All utilities are named exports; there is no default export from the package.","wrong":"import getSelectionText from 'draftjs-utils';","symbol":"getSelectionText","correct":"import { getSelectionText } from 'draftjs-utils';"},{"note":"While star imports technically work, it's generally better practice to directly import the specific utilities you need for better tree-shaking.","wrong":"import * as DraftUtils from 'draftjs-utils'; DraftUtils.removeSelectedBlocksStyle(...);","symbol":"removeSelectedBlocksStyle","correct":"import { removeSelectedBlocksStyle } from 'draftjs-utils';"}],"quickstart":{"code":"import { EditorState, ContentState, SelectionState } from 'draft-js';\nimport { getSelectedBlocksList, getSelectionText, removeSelectedBlocksStyle } from 'draftjs-utils';\n\n// Create a basic EditorState for demonstration purposes.\n// In a real application, EditorState would come from your Draft.js editor component.\nconst contentState = ContentState.createFromText('Hello world! This is a test paragraph.');\nconst selectionState = SelectionState.createEmpty(contentState.getFirstBlock().getKey())\n  .merge({\n    anchorKey: contentState.getFirstBlock().getKey(),\n    anchorOffset: 6,\n    focusKey: contentState.getFirstBlock().getKey(),\n    focusOffset: 11,\n    isBackward: false,\n    hasFocus: true\n  });\nconst editorState = EditorState.forceSelection(EditorState.createWithContent(contentState), selectionState);\n\nconsole.log('--- Using draftjs-utils ---');\n\n// 1. Get selected blocks as an Immutable.List\nconst selectedBlocks = getSelectedBlocksList(editorState);\nconsole.log('Selected Blocks Count:', selectedBlocks.size);\nselectedBlocks.forEach((block, index) => {\n  console.log(`Block ${index + 1} Text: \"${block.getText()}\"`);\n});\n\n// 2. Get selected text as a plain string\nconst selectedText = getSelectionText(editorState);\nconsole.log('Selected Text:', `\"${selectedText}\"`);\n\n// 3. Example of a modification utility: remove style from selected blocks\n// This returns a new EditorState which you would then set in your Draft.js editor.\nconst newEditorState = removeSelectedBlocksStyle(editorState);\nconsole.log('EditorState modified?', newEditorState !== editorState);\n","lang":"typescript","description":"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."},"warnings":[{"fix":"Familiarize yourself with Immutable.js API methods for collections. Always check the return type documentation for each utility function.","message":"Many 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.","severity":"gotcha","affected_versions":">=0.1.0"},{"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.","message":"The 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.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Consult the package's GitHub releases or `CHANGELOG.md` for specific breaking changes and migration instructions before upgrading pre-1.0 versions.","message":"As 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.","severity":"breaking","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"Attempting to call Immutable.js `ContentBlock` methods on a plain JavaScript object or an incorrectly typed block.","error":"TypeError: block.getText is not a function"},{"fix":"Always pass a properly initialized `EditorState` object to `draftjs-utils` functions. Verify that your `editorState` variable is not `null` or `undefined`.","cause":"Passing `null` or `undefined` instead of a valid `EditorState` instance to a `draftjs-utils` function.","error":"TypeError: Cannot read properties of undefined (reading 'getSelection')"},{"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.","cause":"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.","error":"TypeError: Immutable.List.prototype.get not defined"}],"ecosystem":"npm"}