@studysync/draft-js-modifiers

draft-js-modifiers

Modular state modifiers for Draft.js

yarn add @studysync/draft-js-modifiers draft-js

# or

npm i @studysync/draft-js-modifiers draft-js

This package ships with immutable@3.8.3, the patched 3.x line for the prototype-pollution advisory described in the GitHub advisory for immutable.

When your app also uses other legacy Draft.js packages, force a single patched immutable 3.x version at the app root:

{
  "overrides": {
    "immutable": "3.8.3",
    "draft-js": {
      "immutable": "3.8.3"
    }
  },
  "resolutions": {
    "immutable": "3.8.3"
  }
}

Usage

import * as Modifiers from '@studysync/draft-js-modifiers'

const newEditorState = Modifiers.mergeBlockData(currentEditorState, { foo: 1 })

Moduler importing

import adjustBlockDepth from '@studysync/draft-js-modifiers/adjustBlockDepth'

// Support Tree Shaking for webpack, rollup.js
import { insertText } from '@studysync/draft-js-modifiers'

Methods

addBlock

addBlock(
  editorState: EditorState,
  selection,
  type: string,
  data: { [id: string]: any },
  entityType: string,
  text?: ?string = ' '

adjustBlockDepth

adjustBlockDepth(editorState: EditorState, adjustment: number, maxDepth: number)

getCurrentBlock

getCurrentBlock(editorState): EditorState

insertAtomicBlock

insertAtomicBlock(
  editorState: EditorState,
  entityType: string,
  mutability: 'IMMUTABLE' | 'MUTABLE' | 'SEGMENTED',
  data?: { [id: string]: any },
  character?: ?string = ' '
)

insertEmptyBlock

insertEmptyBlock(editorState: EditorState, blockType?: DraftBlockType = 'unstyled')

insertNewBlock

insertNewBlock(
  editorState: EditorState,
  blockType?: DraftBlockType = 'unstyled',
  text?: string = '',
  data?: { [id: string]: any } = {}
)

insertText

insertText(editorState: EditorState, text: string, entity?: ?string = null)

mergeBlockData

mergeBlockData(editorState: EditorState, data: { [id: string]: any })

mergeBlockDataByKey

mergeBlockDataByKey(editorState: EditorState, blockKey: string, data: { [id: string]: any })

mergeEntityData

mergeEntityData(editorState: EditorState, entityKey: string, data: { [id: string]: any })

modifyBlock

modifyBlock(editorState: EditorState, blockData: ContentBlock)

modifyBlockByKey

modifyBlockByKey(editorState: EditorState, blockKey: string, blockData: ContentBlock)

moveCaretAfterBlock

moveCaretAfterBlock(editorState: EditorState, block: ContentBlock)

removeBlock

removeBlock(contentState, blockKey)

removeBlockStyle

removeBlockStyle(editorState: EditorState)

removeInlineStyles

removeInlineStyles(editorState: EditorState, inlineStyles: Array<string> = [])

resetBlock

resetBlock(editorState: EditorState, block: ContentBlock)

selectBlockByKey

selectBlockByKey(editorState: EditorState, key: string)

toggleBlockStyle

toggleBlockStyle(editorState, { type: blockStyle, data })

toggleBlockType

toggleBlockType(editorState: EditorState, blockType: string)

toggleEntity

toggleEntity(editorState: EditorState, entityKey: ?string)

toggleInlineStyle

toggleInlineStyle(editorState: EditorState, inlineStyle: string)

How to add module

yarn run add -- moduleName

# or

npm run add -- moduleName

License

MIT

© sugarshin