@studysync/draft-js-modifiers 0.4.11 → 0.4.13

package/src/insertEntity.js

@@ -0,0 +1,56 @@
+import { SelectionState } from "draft-js"
+import { Modifier } from "draft-js"
+import { EditorState } from "draft-js"
+import { getSelectedText } from "."
+
+const insertEntity = (editorState, text, type, data, mutability = 'MUTABLE') => {
+  const selectedText = getSelectedText(editorState)
+  const contentState = editorState.getCurrentContent()
+  const selection = editorState.getSelection()
+  const textWithSpace = text.concat(' ')
+  const newContent = selectedText ? Modifier.replaceText(
+    contentState,
+    selection,
+    text
+  ) : Modifier.insertText(
+    contentState,
+    selection,
+    textWithSpace
+  )
+
+  const newContentWithEntity = newContent.createEntity(
+    type,
+    mutability,
+    data,
+    false
+  )
+
+  const entityKey = newContentWithEntity.getLastCreatedEntityKey()
+
+  const anchorOffset = selection.getAnchorOffset()
+  const newSelection = new SelectionState({
+    anchorKey: selection.getAnchorKey(),
+    anchorOffset,
+    focusKey: selection.getAnchorKey(),
+    focusOffset: anchorOffset + text.length,
+  })
+
+  const newContentWithLink = Modifier.applyEntity(
+    newContentWithEntity,
+    newSelection,
+    entityKey
+  )
+
+  const withLinkText = EditorState.push(
+    editorState,
+    newContentWithLink,
+    'insert-characters'
+  )
+
+  return EditorState.forceSelection(
+    withLinkText,
+    newContent.getSelectionAfter()
+  )
+}
+
+export default insertEntity

package/src/insertNewBlock.js

@@ -0,0 +1,61 @@
+// @flow
+
+import { EditorState, ContentBlock, CharacterMetadata, genKey } from 'draft-js'
+import { Map, List, Repeat } from 'immutable'
+import getCurrentBlock from './utils/getCurrentBlock'
+
+import type { DraftBlockType } from 'draft-js/lib/DraftBlockType'
+
+const insertNewBlock = (
+  editorState: EditorState,
+  blockType: DraftBlockType = 'unstyled',
+  text: string = '',
+  data: Object = {}
+): EditorState => {
+  const content = editorState.getCurrentContent()
+  const selection = editorState.getSelection()
+  const currentBlock = getCurrentBlock(editorState)
+  const emptyBlockKey = genKey()
+  const emptyBlock = new ContentBlock({
+    key: emptyBlockKey,
+    type: blockType,
+    text,
+    characterList: List(Repeat(CharacterMetadata.create(), text.length)),
+    data: Map().merge(data),
+  })
+  const blockMap = content.getBlockMap()
+  const blocksBefore = blockMap.toSeq().takeUntil(value => value === currentBlock)
+  const blocksAfter = blockMap.toSeq().skipUntil(value => value === currentBlock).rest()
+  const augmentedBlocks = [
+    [
+      currentBlock.getKey(),
+      currentBlock,
+    ],
+    [
+      emptyBlockKey,
+      emptyBlock,
+    ],
+  ]
+  const newBlocks = blocksBefore.concat(augmentedBlocks, blocksAfter).toOrderedMap()
+  const focusKey = emptyBlockKey
+  const newContent = content.merge({
+    blockMap: newBlocks,
+    selectionBefore: selection,
+    selectionAfter: selection.merge({
+      anchorKey: focusKey,
+      anchorOffset: 0,
+      focusKey,
+      focusOffset: 0,
+      isBackward: false,
+    }),
+  })
+
+  const newState = EditorState.push(
+    editorState,
+    newContent,
+    'split-block'
+  )
+  return EditorState.forceSelection(newState, newContent.getSelectionAfter())
+}
+
+export default insertNewBlock

package/src/insertText.js

@@ -0,0 +1,23 @@
+// @flow
+
+import { EditorState, Modifier } from 'draft-js'
+
+const insertText = (editorState: EditorState, text: string, entity?: ?string = null): EditorState => {
+  const selection = editorState.getSelection()
+  const content = editorState.getCurrentContent()
+  const newContent = Modifier[selection.isCollapsed() ? 'insertText' : 'replaceText'](
+    content,
+    selection,
+    text,
+    editorState.getCurrentInlineStyle(),
+    entity
+  )
+
+  return EditorState.push(
+    editorState,
+    newContent,
+    'insert-fragment'
+  )
+}
+
+export default insertText

package/src/mergeBlockData.js

@@ -0,0 +1,13 @@
+// @flow
+
+import { EditorState, Modifier } from 'draft-js'
+import { Map } from 'immutable'
+
+const mergeBlockData = (editorState: EditorState, data: { [id: string]: any }): EditorState => {
+  const content = editorState.getCurrentContent()
+  const selection = editorState.getSelection()
+  const newContent = Modifier.mergeBlockData(content, selection, Map(data))
+  return EditorState.push(editorState, newContent, 'change-block-data')
+}
+
+export default mergeBlockData

package/src/mergeBlockDataByKey.js

@@ -0,0 +1,12 @@
+// @flow
+
+import { EditorState } from 'draft-js'
+
+const mergeBlockDataByKey = (editorState: EditorState, blockKey: string, data: { [id: string]: any }): EditorState => {
+  const content = editorState.getCurrentContent()
+  const updatedBlock = content.getBlockForKey(blockKey).mergeIn(['data'], data)
+  const blockMap = content.getBlockMap().merge({ [blockKey]: updatedBlock })
+  return EditorState.push(editorState, content.merge({ blockMap }), 'change-block-data')
+}
+
+export default mergeBlockDataByKey

package/src/mergeEntityData.js

@@ -0,0 +1,13 @@
+// @flow
+
+import { EditorState } from 'draft-js'
+
+const mergeEntityData = (editorState: EditorState, entityKey: string, data: Object): EditorState => {
+  const newContentState = editorState.getCurrentContent().mergeEntityData(entityKey, data)
+  return EditorState.forceSelection(
+    EditorState.push(editorState, newContentState, 'apply-entity'),
+    editorState.getSelection()
+  )
+}
+
+export default mergeEntityData

package/src/modifyBlock.js

@@ -0,0 +1,20 @@
+// @flow
+
+import { EditorState } from 'draft-js'
+import modifyBlockForContentState from 'draft-js/lib/modifyBlockForContentState'
+
+import type { ContentBlock } from 'draft-js'
+
+const modifyBlock = (editorState: EditorState, blockData: ContentBlock): EditorState => {
+  const content = editorState.getCurrentContent()
+  const selection = editorState.getSelection()
+  const newContent = modifyBlockForContentState(content, selection, block => block.merge(blockData))
+
+  return EditorState.push(
+    editorState,
+    newContent,
+    'split-block' // TODO: will this do ?
+  )
+}
+
+export default modifyBlock

package/src/modifyBlockByKey.js

@@ -0,0 +1,19 @@
+// @flow
+
+import { EditorState } from 'draft-js'
+
+import type { ContentBlock } from 'draft-js'
+
+const modifyBlockByKey = (editorState: EditorState, blockKey: string, blockData: ContentBlock): EditorState => {
+  const content = editorState.getCurrentContent()
+  const blockMap = content.getBlockMap().map(b => b.key === blockKey ? b.merge(blockData) : b)
+  const newContent = content.merge({ blockMap })
+
+  return EditorState.push(
+    editorState,
+    newContent,
+    'split-block' // TODO: will this do ?
+  )
+}
+
+export default modifyBlockByKey

package/src/moveCaretAfterBlock.js

@@ -0,0 +1,26 @@
+import { EditorState } from "draft-js"
+import { SelectionState } from "draft-js"
+
+const moveCaretAfterBlock = (editorState, block) => {
+  const content = editorState.getCurrentContent()
+  const nextBlock = content.getBlockAfter(block.getKey())
+  const key = nextBlock ? nextBlock.getKey() : undefined
+
+  if (key) {
+    const selectionState = SelectionState.createEmpty()
+    const newSelectionState = selectionState.merge({
+      anchorKey: key,
+      anchorOffset: 0,
+      focusKey: key,
+      focusOffset: 0,
+    })
+
+    return EditorState.forceSelection(
+      editorState,
+      newSelectionState
+    )
+  }
+  return editorState
+}
+
+export default moveCaretAfterBlock

package/src/moveCaretToEnd.js

@@ -0,0 +1,20 @@
+import { SelectionState } from "draft-js"
+import { EditorState } from "draft-js"
+
+const moveCaretToEnd = (editorState) => {
+  const content = editorState.getCurrentContent()
+  const lastBlock = content.getLastBlock()
+
+  const key = lastBlock.getKey()
+  const length = lastBlock.getLength()
+
+  const selection = new SelectionState({
+    anchorKey: key,
+    anchorOffset: length,
+    focusKey: key,
+    focusOffset: length,
+  })
+  return EditorState.forceSelection(editorState, selection)
+}
+
+export default moveCaretToEnd

package/src/removeBlock.js

@@ -0,0 +1,43 @@
+import { SelectionState } from "draft-js"
+import { Modifier } from "draft-js"
+
+// from draft-js-plugins/draft-js-plugins/packages/drag-n-drop/src/modifiers/addBlock.ts
+const removeBlock = (contentState, blockKey) => {
+  const afterKey = contentState.getKeyAfter(blockKey)
+  const afterBlock = contentState.getBlockForKey(afterKey)
+  let targetRange
+
+  // Only if the following block the last with no text then the whole block
+  // should be removed. Otherwise the block should be reduced to an unstyled block
+  // without any characters.
+  if (
+    afterBlock
+    && afterBlock.getType() === 'unstyled'
+    && afterBlock.getLength() === 0
+    && afterBlock === contentState.getBlockMap().last()
+  ) {
+    targetRange = new SelectionState({
+      anchorKey: blockKey,
+      anchorOffset: 0,
+      focusKey: afterKey,
+      focusOffset: 0,
+    })
+  } else {
+    targetRange = new SelectionState({
+      anchorKey: blockKey,
+      anchorOffset: 0,
+      focusKey: blockKey,
+      focusOffset: 1,
+    })
+  }
+
+  // change the blocktype and remove the characterList entry with the block
+  const newContentState = Modifier.setBlockType(
+    contentState,
+    targetRange,
+    'unstyled'
+  )
+  return Modifier.removeRange(newContentState, targetRange, 'backward')
+}
+
+export default removeBlock

package/src/removeBlockStyle.js

@@ -0,0 +1,17 @@
+// @flow
+
+import { EditorState, RichUtils } from 'draft-js'
+
+const removeBlockStyle = (editorState: EditorState): EditorState => {
+  const withoutBlockStyle = RichUtils.tryToRemoveBlockStyle(editorState)
+  if (withoutBlockStyle) {
+    return EditorState.push(
+      editorState,
+      withoutBlockStyle,
+      'change-block-type'
+    )
+  }
+  return editorState
+}
+
+export default removeBlockStyle

package/src/removeEntity.js

@@ -0,0 +1,38 @@
+import { Modifier } from "draft-js"
+import { EditorState } from "draft-js"
+
+const removeEntity = (editorState, entity) => {
+  const contentState = editorState.getCurrentContent()
+  const selectionState = editorState.getSelection()
+  const startKey = selectionState.getStartKey()
+  const contentBlock = contentState.getBlockForKey(startKey)
+
+  /* istanbul ignore if */
+  if (!entity) return editorState
+
+  let entitySelection = null
+
+  contentBlock.findEntityRanges(
+    character => character.getEntity() === entity.entityKey,
+    (start, end) => {
+      entitySelection = selectionState.merge({
+        anchorOffset: start,
+        focusOffset: end,
+      })
+    }
+  )
+
+  const newContentState = Modifier.applyEntity(
+    contentState,
+    entitySelection,
+    null
+  )
+
+  return EditorState.push(
+    editorState,
+    newContentState,
+    'apply-entity'
+  )
+}
+
+export default removeEntity

package/src/removeInlineStyles.js

@@ -0,0 +1,29 @@
+// @flow
+
+import { EditorState, ContentState, CharacterMetadata, Modifier } from 'draft-js'
+import getCurrentBlock from './utils/getCurrentBlock'
+
+const removeInlineStyles = (editorState: EditorState, inlineStyles: Array<string> = []): EditorState => {
+  const selection = editorState.getSelection()
+  const content = editorState.getCurrentContent()
+  let newContent
+
+  if (selection.isCollapsed()) {
+    const block = getCurrentBlock(editorState)
+    const updatedCharacterList = block.getCharacterList().map(c => {
+      return inlineStyles.reduce((characterMetadata: CharacterMetadata, style: string): CharacterMetadata => {
+        return CharacterMetadata.removeStyle(characterMetadata, style)
+      }, c)
+    })
+    const updatedBlock = block.set('characterList', updatedCharacterList)
+    newContent = content.merge({ blockMap: content.getBlockMap().merge({ [block.getKey()]: updatedBlock }) })
+  } else {
+    newContent = inlineStyles.reduce((contentState: ContentState, style: string): ContentState => {
+      return Modifier.removeInlineStyle(contentState, selection, style)
+    }, content)
+  }
+
+  return EditorState.push(editorState, newContent, 'change-inline-style')
+}
+
+export default removeInlineStyles

package/src/resetBlock.js

@@ -0,0 +1,29 @@
+// @flow
+
+import { EditorState, SelectionState, Modifier } from 'draft-js'
+
+import type { ContentBlock } from 'draft-js'
+
+/**
+ * Remove range also change block type to 'unstyled'
+ */
+const resetBlock = (editorState: EditorState, block: ContentBlock): EditorState => {
+  const content = editorState.getCurrentContent()
+  const key = block.getKey()
+  const targetRange = new SelectionState({
+    anchorKey: key,
+    anchorOffset: 0,
+    focusKey: key,
+    focusOffset: block.getLength(),
+  })
+  const withoutTargetContent = Modifier.removeRange(content, targetRange, 'backward')
+  const resetBlock = Modifier.setBlockType(
+    withoutTargetContent,
+    withoutTargetContent.getSelectionAfter(),
+    'unstyled'
+  )
+  const newState = EditorState.push(editorState, resetBlock, 'remove-range')
+  return EditorState.forceSelection(newState, resetBlock.getSelectionAfter())
+}
+
+export default resetBlock

package/src/selectAll.js

@@ -0,0 +1,15 @@
+import { EditorState } from "draft-js"
+
+const selectAll = (editorState) => {
+  const currentContent = editorState.getCurrentContent()
+  const selectionState = editorState.getSelection().merge({
+    anchorKey: currentContent.getFirstBlock().getKey(),
+    anchorOffset: 0,
+    focusOffset: currentContent.getLastBlock().getText().length,
+    focusKey: currentContent.getLastBlock().getKey(),
+  })
+
+  return EditorState.forceSelection(editorState, selectionState)
+}
+
+export default selectAll

package/src/selectBlockByKey.js

@@ -0,0 +1,20 @@
+import { SelectionState } from "draft-js"
+import { EditorState } from "draft-js"
+
+const selectBlockByKey = (editorState, key) => {
+  const currentBlock = editorState.getCurrentContent().getBlockForKey(key)
+  const selectionState = SelectionState.createEmpty()
+  const entireBlockSelectionState = selectionState.merge({
+    anchorKey: key,
+    anchorOffset: 0,
+    focusKey: key,
+    focusOffset: currentBlock.getText().length,
+  })
+
+  return EditorState.forceSelection(
+    editorState,
+    entireBlockSelectionState
+  )
+}
+
+export default selectBlockByKey

package/src/setBlockData.js

@@ -0,0 +1,14 @@
+import { EditorState } from "draft-js"
+import { Modifier } from "draft-js"
+
+const setBlockData = (editorState, data) => {
+  const newContentState = Modifier.setBlockData(
+    editorState.getCurrentContent(),
+    editorState.getSelection(),
+    data
+  )
+
+  return EditorState.push(editorState, newContentState, 'change-block-data')
+}
+
+export default setBlockData

package/src/toggleBlockStyle.js

@@ -0,0 +1,33 @@
+import { RichUtils } from "draft-js"
+import { EditorState } from "draft-js"
+import { Modifier } from "draft-js"
+import { Map } from 'immutable'
+
+const toggleBlockStyle = (editorState, { type: blockStyle, data }) => {
+  /* istanbul ignore else */
+  if (data) {
+    const selection = editorState.getSelection()
+
+    const newContentState = Modifier.mergeBlockData(
+      editorState.getCurrentContent(),
+      selection,
+      Map(data)
+    )
+    const newEditorState = EditorState.push(
+      editorState,
+      newContentState,
+      'change-block-data'
+    )
+    return RichUtils.toggleBlockType(newEditorState, blockStyle)
+  }
+
+  // We currently always have data, but just in case we add new types in the
+  // future, the default action is to just blindly toggle it.
+  /* istanbul ignore next */
+  return RichUtils.toggleBlockType(
+    editorState,
+    blockStyle
+  )
+}
+
+export default toggleBlockStyle

package/src/toggleBlockType.js

@@ -0,0 +1,12 @@
+// @flow
+
+import { RichUtils } from 'draft-js'
+
+import type { EditorState } from 'draft-js'
+import type { DraftBlockType } from 'draft-js/lib/DraftBlockType'
+
+const toggleBlockType = (editorState: EditorState, blockType: DraftBlockType): EditorState => {
+  return RichUtils.toggleBlockType(editorState, blockType)
+}
+
+export default toggleBlockType

package/src/toggleEntity.js

@@ -0,0 +1,11 @@
+// @flow
+
+import { RichUtils } from 'draft-js'
+
+import type { EditorState } from 'draft-js'
+
+const toggleEntity = (editorState: EditorState, entityKey: ?string): EditorState => {
+  return RichUtils.toggleLink(editorState, editorState.getSelection(), entityKey)
+}
+
+export default toggleEntity

package/src/toggleInlineStyle.js

@@ -0,0 +1,11 @@
+// @flow
+
+import { RichUtils } from 'draft-js'
+
+import type { EditorState } from 'draft-js'
+
+const toggleInlineStyle = (editorState: EditorState, inlineStyle: string): EditorState => {
+  return RichUtils.toggleInlineStyle(editorState, inlineStyle)
+}
+
+export default toggleInlineStyle

package/src/trimEditorState.js

@@ -0,0 +1,41 @@
+import { EditorState, Modifier, SelectionState } from 'draft-js'
+
+/**
+ * Taken from:
+ *    https://stackoverflow.com/questions/46802855/draft-js-how-to-trim-contents
+ *
+ * This *might* mess up entities, but so far I haven't seen any issues
+ */
+
+const trimEditorState = (currentEditorState) => {
+  const currentContent = currentEditorState.getCurrentContent()
+  const newContent = currentContent.getBlockMap().reduce((accumulator, block) => {
+    const key = block.getKey()
+    const text = block.getText()
+    const trimmedLeft = text.trimLeft()
+    const trimmedRight = text.trimRight()
+    const offset = text.length - trimmedLeft.length
+
+    const textToReplaceLeft = new SelectionState({
+      anchorKey: key,
+      focusKey: key,
+      anchorOffset: 0,
+      focusOffset: offset,
+    })
+
+    const leftTrimmedContent = Modifier.replaceText(accumulator, textToReplaceLeft, '')
+
+    const textToReplaceRight = new SelectionState({
+      anchorKey: key,
+      focusKey: key,
+      anchorOffset: trimmedRight.length - offset,
+      focusOffset: text.length - offset,
+    })
+
+    return Modifier.replaceText(leftTrimmedContent, textToReplaceRight, '')
+  }, currentContent)
+
+  return EditorState.push(currentEditorState, newContent, 'remove-range')
+}
+
+export default trimEditorState

package/src/utils/getCurrentBlock.js

@@ -0,0 +1,10 @@
+// @flow
+
+import type { EditorState, ContentBlock } from 'draft-js'
+
+const getCurrentBlock = (editorState: EditorState): ContentBlock => {
+  const selection = editorState.getSelection()
+  return editorState.getCurrentContent().getBlockForKey(selection.getEndKey())
+}
+
+export default getCurrentBlock

package/src/utils/numbers.js

@@ -0,0 +1,3 @@
+export const fallsWithin = (value, start, end) => start <= value && value <= end
+
+export const rangesOverlap = (s1, e1, s2, e2) => fallsWithin(s2, s1, e1) || fallsWithin(s1, s2, e2)

package/test/adjustBlockDepth.js

@@ -0,0 +1,45 @@
+import test from 'ava'
+import { convertToRaw } from 'draft-js'
+import createEditorState from './fixtures/createEditorState'
+
+import adjustBlockDepth from '../src/adjustBlockDepth'
+
+const rawContentState = (type, ...depths) => ({
+  entityMap: {},
+  blocks: depths.map((depth, i) => ({
+    key: `item${i}`,
+    text: `test ${i}`,
+    type,
+    depth,
+    inlineStyleRanges: [],
+    entityRanges: [],
+    data: {},
+  })),
+})
+const selectionState = () => ({
+  anchorKey: 'item1',
+  anchorOffset: 0,
+  focusKey: 'item1',
+  focusOffset: 0,
+  isBackward: false,
+  hasFocus: true,
+})
+
+;[
+  'unordered-list-item',
+  'ordered-list-item',
+  'checkable-list-item',
+].forEach(type => {
+  test(`adjustBlockDepth ${type}`, t => {
+    const editorState = createEditorState(
+      rawContentState(type, 0, 0),
+      selectionState()
+    )
+    const newEditorState = adjustBlockDepth(editorState, 1, 4)
+    t.not(newEditorState, editorState)
+    t.deepEqual(
+      convertToRaw(newEditorState.getCurrentContent()),
+      rawContentState(type, 0, 1)
+    )
+  })
+})