Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
draftjs-utils
Advanced tools
The draftjs-utils package provides utility functions for working with Draft.js, a rich text editor framework for React. These utilities help in manipulating and converting Draft.js content states, blocks, and entities, making it easier to handle common tasks such as extracting text, converting content to HTML, and managing inline styles.
Extracting Plain Text
This feature allows you to extract plain text from a Draft.js content state. The utility function `getTextFromContentState` takes a raw content state and returns the plain text.
const { convertToRaw, ContentState } = require('draft-js');
const { getTextFromContentState } = require('draftjs-utils');
const contentState = ContentState.createFromText('Hello, world!');
const rawContentState = convertToRaw(contentState);
const plainText = getTextFromContentState(rawContentState);
console.log(plainText); // Output: 'Hello, world!'
Converting Content to HTML
This feature allows you to convert Draft.js content state to HTML. The utility function `stateToHTML` takes a raw content state and returns the corresponding HTML string.
const { convertToRaw, ContentState } = require('draft-js');
const { stateToHTML } = require('draftjs-utils');
const contentState = ContentState.createFromText('Hello, world!');
const rawContentState = convertToRaw(contentState);
const html = stateToHTML(rawContentState);
console.log(html); // Output: '<p>Hello, world!</p>'
Managing Inline Styles
This feature allows you to manage inline styles in Draft.js. The utility function `getSelectedInlineStyles` returns a set of inline styles applied to the current selection in the editor state.
const { EditorState, RichUtils } = require('draft-js');
const { getSelectedInlineStyles } = require('draftjs-utils');
let editorState = EditorState.createEmpty();
editorState = RichUtils.toggleInlineStyle(editorState, 'BOLD');
const inlineStyles = getSelectedInlineStyles(editorState);
console.log(inlineStyles); // Output: Set { 'BOLD' }
The draft-js-export-html package provides utilities to convert Draft.js content state to HTML. It is similar to the `stateToHTML` function in draftjs-utils but offers more customization options for the conversion process.
The draft-js-import-html package allows you to import HTML content into Draft.js content state. This is useful for initializing the editor with pre-existing HTML content, a feature not directly provided by draftjs-utils.
An collection of useful utility functions for DraftJS.
I have been using DraftJS in few of my projects. DraftJS is very nice library for creating editors. I wrote a couple of utility functions for myself which I can re-use across my projects. They are well tested. I am open-sourcing them so that others can also leverage. Many of the functions described use ImmutableJS.
npm install draftjs-utils
Method Name | Parameters | Return Type | Description | |
---|---|---|---|---|
1 | getSelectedBlocksMap | EditorState | OrderedMap | The function will return an Immutable OrderedMap of currently selected Blocks. The key is key of Block and value is ContentBlock. |
2 | getSelectedBlocksList | EditorState | List | The function will return an Immutable List of currently selected Blocks. The data type of returned objects is ContentBlock. |
3 | getSelectedBlock | EditorState | ContentBlock | The function will return first of currently selected Blocks, this is more useful when we expect user to select only one Block. The data type of returned object is ContentBlock. |
4 | getAllBlocks | EditorState | List | The function will return all the Blocks of the editor. The data type of returned objects is ContentBlock. |
5 | getSelectedBlocksType | EditorState | string | The function will return the type of currently selected Blocks. The type is a simple string. It will return undefined if not all selected Blocks have same type. |
6 | removeSelectedBlocksStyle | EditorState | EditorState | The function will reset the type of selected Blocks to unstyled . |
7 | getSelectionText | EditorState | string | The function will return plain text of current selection. |
8 | addLineBreakRemovingSelection | EditorState | EditorState | The function will replace currently selected text with a \n . |
9 | insertNewUnstyledBlock | EditorState | EditorState | The function will add a new unstyled Block and copy current selection to it. |
10 | clearEditorContent | EditorState | EditorState | The function will clear all content from the Editor. |
11 | getSelectionInlineStyle | EditorState | object | The function will return inline style applicable to current selection. The function will return only those styles that are applicable to whole selection. |
12 | setBlockData | EditorState, object | EditorState | The function will add block level meta-data. |
13 | getSelectedBlocksMetadata | EditorState | Map | The function will return map of block data of current block. |
14 | getSelectionEntity | EditorState | Entity | The function will return the Entity of current selection. Entity can not span multiple Blocks, method will check only first selected Block. |
15 | getEntityRange | EditorState, entityKey | object | The function will return the range of given Entity in currently selected Block. Entity can not span multiple Blocks, method will check only first selected Block. |
16 | handleNewLine | EditorState | EditorState, Event | The function will handle newline event in editor gracefully, it will insert \n for soft-new lines and remove selected text if any. |
17 | isListBlock | ContentBlock | boolean | The function will return true is type of block is 'unordered-list-item' or 'ordered-list-item'. |
18 | changeDepth | EditorState , adjustment, maxDepth | EditorState | Change the depth of selected Blocks by adjustment if its less than maxdepth. |
19 | getSelectionCustomInlineStyle | EditorState , Array (of styles) | object | Function will return Map of custom inline styles applicable to current selection. |
20 | toggleCustomInlineStyle | EditorState , string (styleType), string(styleValue) | EditorState | Toggle application of custom inline style to current selection. |
21 | removeAllInlineStyles | EditorState | EditorState | The function will remove all inline styles of current selection. |
MIT.
FAQs
Collection of utility function for use with Draftjs.
We found that draftjs-utils demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.