@studysync/draft-js-modifiers 0.4.15 → 0.5.0

package/README.md

@@ -8,17 +8,30 @@
 Modular state modifiers for [Draft.js](https://draftjs.org/)
 
 ```bash
-yarn add draft-js-modifiers
+yarn add @studysync/draft-js-modifiers draft-js immutable
 
 # or
 
-npm i draft-js-modifiers
+npm i @studysync/draft-js-modifiers draft-js immutable
+```
+
+When using legacy Draft.js packages, force a single patched `immutable` 3.x version at the app root:
+
+```json
+{
+  "overrides": {
+    "immutable": "3.8.3"
+  },
+  "resolutions": {
+    "immutable": "3.8.3"
+  }
+}
 ```
 
 ## Usage
 
 ```js
-import * as Modifiers from 'draft-js-modifiers'
+import * as Modifiers from '@studysync/draft-js-modifiers'
 
 const newEditorState = Modifiers.mergeBlockData(currentEditorState, { foo: 1 })
 ```
@@ -26,10 +39,10 @@ const newEditorState = Modifiers.mergeBlockData(currentEditorState, { foo: 1 })
 ### Moduler importing
 
 ```js
-import adjustBlockDepth from 'draft-js-modifiers/adjustBlockDepth'
+import adjustBlockDepth from '@studysync/draft-js-modifiers/adjustBlockDepth'
 
 // Support Tree Shaking for webpack, rollup.js
-import { insertText } from 'draft-js-modifiers'
+import { insertText } from '@studysync/draft-js-modifiers'
 ```
 
 ## Methods

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studysync/draft-js-modifiers",
-  "version": "0.4.15",
+  "version": "0.5.0",
   "description": "Modular state modifiers for Draft.js",
   "main": "index.js",
   "module": "es/index.js",
@@ -40,9 +40,9 @@
       "@babel/register"
     ]
   },
-  "dependencies": {
+  "peerDependencies": {
     "draft-js": "^0.11.7",
-    "immutable": "~3.7.4"
+    "immutable": ">=3.8.3 <4"
   },
   "devDependencies": {
     "@babel/cli": "7.17.0",
@@ -53,16 +53,22 @@
     "ava": "^0.25.0",
     "babel-eslint": "^8.2.3",
     "coveralls": "^3.0.1",
+    "draft-js": "0.11.7",
     "eslint": "^4.19.1",
     "eslint-plugin-ava": "^4.5.1",
     "eslint-plugin-babel": "^5.1.0",
     "eslint-plugin-flowtype": "^2.47.1",
     "flow-bin": "^0.70.0",
+    "immutable": "3.8.3",
     "nyc": "^11.8.0",
     "react": ">=17",
     "react-dom": ">=17"
   },
+  "overrides": {
+    "immutable": "3.8.3"
+  },
   "resolutions": {
-    "graceful-fs": "4.2.4"
+    "graceful-fs": "4.2.4",
+    "immutable": "3.8.3"
   }
 }

package/flow/stub/__dev__.js

@@ -1,3 +0,0 @@
-// @flow
-
-declare var __DEV__: boolean

package/script/add-module.js

@@ -1,48 +0,0 @@
-const fs = require('fs')
-const path = require('path')
-const n = process.argv[2]
-if (!n) {
-  throw new Error('should must be called with name. `npm run add -- someModule`')
-}
-const createFile = (name, dir, template) => {
-  const file = path.resolve(__dirname, '..', dir, `${name}.js`)
-  fs.writeFileSync(file, template.join('\n'))
-  console.log(`Successfully ${dir}/${name}.js created.`)
-}
-const addToIndex = name => {
-  const indexFilePath = path.resolve(__dirname, '..', 'src', 'index.js')
-  const indexFile = fs.readFileSync(indexFilePath, { encoding: 'utf8' })
-  fs.writeFileSync(indexFilePath, indexFile + [
-    `export { default as ${name} } from './${name}'`,
-    '',
-  ].join('\n'))
-  console.log(`Successfully src/${name}.js updated.`)
-}
-
-createFile(n, 'src', [
-  '// @flow',
-  '',
-  'import { EditorState } from \'draft-js\'',
-  '',
-  `const ${n} = (`,
-  '  editorState: EditorState',
-  '): EditorState => {}',
-  '',
-  `export default ${n}`,
-  '',
-])
-
-createFile(n, 'test', [
-  'import test from \'ava\'',
-  'import { convertToRaw } from \'draft-js\'',
-  'import createEditorState from \'./fixtures/createEditorState\'',
-  '',
-  `import ${n} from '../src/${n}'`,
-  '',
-  `test.skip('${n}', () => {})`,
-  '',
-])
-
-addToIndex(n)
-
-console.log('Please add documentation to README.md')

package/src/addBlock.js

@@ -1,98 +0,0 @@
-import { Modifier } from "draft-js"
-import { ContentBlock } from "draft-js"
-import { genKey } from "draft-js"
-import { CharacterMetadata } from "draft-js"
-import { BlockMapBuilder } from "draft-js"
-import { List, Repeat } from 'immutable'
-
-// from draft-js-plugins/draft-js-plugins/packages/drag-n-drop/src/modifiers/addBlock.ts
-const addBlock = (
-  editorState,
-  selection,
-  type,
-  data,
-  entityType,
-  text = ' '
-) => {
-  const currentContentState = editorState.getCurrentContent()
-  const currentSelectionState = selection
-
-  // in case text is selected it is removed and then the block is appended
-  const afterRemovalContentState = Modifier.removeRange(
-    currentContentState,
-    currentSelectionState,
-    'backward'
-  )
-
-  // deciding on the position to split the text
-  const targetSelection = afterRemovalContentState.getSelectionAfter()
-  const blockKeyForTarget = targetSelection.get('focusKey')
-  const block = currentContentState.getBlockForKey(blockKeyForTarget)
-  let insertionTargetSelection
-  let insertionTargetBlock
-
-  // In case there are no characters or entity or the selection is at the start it
-  // is safe to insert the block in the current block.
-  // Otherwise a new block is created (the block is always its own block)
-  const isEmptyBlock = block.getLength() === 0 && block.getEntityAt(0) === null
-  const selectedFromStart = currentSelectionState.getStartOffset() === 0
-  if (isEmptyBlock || selectedFromStart) {
-    insertionTargetSelection = targetSelection
-    insertionTargetBlock = afterRemovalContentState
-  } else {
-    // the only way to insert a new seems to be by splitting an existing in to two
-    insertionTargetBlock = Modifier.splitBlock(
-      afterRemovalContentState,
-      targetSelection
-    )
-
-    // the position to insert our blocks
-    insertionTargetSelection = insertionTargetBlock.getSelectionAfter()
-  }
-
-  // TODO not sure why we need it …
-  const newContentStateAfterSplit = Modifier.setBlockType(
-    insertionTargetBlock,
-    insertionTargetSelection,
-    type
-  )
-
-  // creating a new ContentBlock including the entity with data
-  // Entity will be created with a specific type, if defined, else will fall back to the ContentBlock type
-  const contentStateWithEntity = newContentStateAfterSplit.createEntity(
-    entityType || type,
-    'IMMUTABLE',
-    data
-  )
-  const entityKey = contentStateWithEntity.getLastCreatedEntityKey()
-  const charData = CharacterMetadata.create({ entity: entityKey })
-
-  const fragmentArray = [
-    new ContentBlock({
-      key: genKey(),
-      type,
-      text,
-      characterList: List(Repeat(charData, text.length || 1)), // eslint-disable-line new-cap
-    }),
-
-    // new contentblock so we can continue wrting right away after inserting the block
-    new ContentBlock({
-      key: genKey(),
-      type: 'unstyled',
-      text: '',
-      characterList: List(), // eslint-disable-line new-cap
-    }),
-  ]
-
-  // create fragment containing the two content blocks
-  const fragment = BlockMapBuilder.createFromArray(fragmentArray)
-
-  // replace the contentblock we reserved for our insert
-  return Modifier.replaceWithFragment(
-    newContentStateAfterSplit,
-    insertionTargetSelection,
-    fragment
-  )
-}
-
-export default addBlock

package/src/adjustBlockDepth.js

@@ -1,21 +0,0 @@
-// @flow
-
-import { EditorState } from 'draft-js'
-import adjustBlockDepthForContentState from 'draft-js/lib/adjustBlockDepthForContentState'
-
-const adjustBlockDepth = (
-  editorState: EditorState,
-  adjustment: number,
-  maxDepth: number
-): EditorState => {
-  const content = adjustBlockDepthForContentState(
-    editorState.getCurrentContent(),
-    editorState.getSelection(),
-    adjustment,
-    maxDepth
-  )
-
-  return EditorState.push(editorState, content, 'adjust-depth')
-}
-
-export default adjustBlockDepth

package/src/atEndOfBlock.js

@@ -1,10 +0,0 @@
-import getCurrentBlock from "./utils/getCurrentBlock"
-
-const atEndOfBlock = (editorState) => {
-  const currentBlock = getCurrentBlock(editorState)
-  const selection = editorState.getSelection()
-  const endOffset = selection.getEndOffset()
-  return endOffset === currentBlock.getLength()
-}
-
-export default atEndOfBlock

package/src/atStartOfBlock.js

@@ -1,7 +0,0 @@
-const atStartOfBlock = (editorState) => {
-  const selection = editorState.getSelection()
-  const endOffset = selection.getEndOffset()
-  return endOffset === 0
-}
-
-export default atStartOfBlock

package/src/changeBlockType.js

@@ -1,19 +0,0 @@
-import { RichUtils } from "draft-js"
-import toggleBlockStyle from "./toggleBlockStyle"
-import getCurrentBlock from "./utils/getCurrentBlock"
-import setBlockData from './setBlockData'
-
-const changeBlockType = (editorState, blockType, data) => {
-  const block = getCurrentBlock(editorState)
-  const currentBlockType = block.get('type')
-
-  if (currentBlockType === blockType) {
-    return setBlockData(editorState,  data )
-  } else {
-    return data
-      ? toggleBlockStyle(editorState, { type: blockType, data })
-      : RichUtils.toggleBlockType(editorState, blockType)
-  }
-}
-
-export default changeBlockType

package/src/getAllEntities.js

@@ -1,14 +0,0 @@
-import { getEntitiesForBlock } from "."
-
-export const flatten = arr => arr.reduce((a, b) => a.concat(b), [])
-
-const getAllEntities = (editorState, type = null) => {
-  const content = editorState.getCurrentContent()
-  const entities = []
-  content.getBlocksAsArray().forEach((contentBlock) => {
-    entities.push(getEntitiesForBlock(editorState, contentBlock, type))
-  })
-  return flatten(entities)
-}
-
-export default getAllEntities

package/src/getEntitiesForBlock.js

@@ -1,29 +0,0 @@
-const getEntitiesForBlock = (editorState, contentBlock, type = null) => {
-  const content = editorState.getCurrentContent()
-  const entities = []
-
-  let selectedEntity = null
-  contentBlock.findEntityRanges(
-    (character) => {
-      if (character.getEntity() !== null) {
-        const entity = content.getEntity(character.getEntity())
-        if (!type || (type && entity.getType() === type)) {
-          selectedEntity = {
-            entityKey: character.getEntity(),
-            blockKey: contentBlock.getKey(),
-            entity: content.getEntity(character.getEntity()),
-          }
-          return true
-        }
-      }
-      return false
-    },
-    (start, end) => {
-      entities.push({ ...selectedEntity, start, end })
-    }
-  )
-
-  return entities
-}
-
-export default getEntitiesForBlock

package/src/getEntitiesForSelection.js

@@ -1,20 +0,0 @@
-import { getCurrentBlock, getEntitiesForBlock } from "."
-import { rangesOverlap } from "./utils/numbers"
-
-const getEntitiesForCurrentBlock = (editorState, type = null) => getEntitiesForBlock(
-  editorState,
-  getCurrentBlock(editorState),
-  type
-)
-
-const getEntitiesForSelection = (editorState, type = null) => {
-  const entities = getEntitiesForCurrentBlock(editorState, type)
-  const selection = editorState.getSelection()
-  const selectionStart = selection.isCollapsed() ? selection.getStartOffset() - 1 : selection.getStartOffset()
-  const selectionEnd = selection.getEndOffset()
-
-  return entities
-    .filter(({ start, end }) => rangesOverlap(selectionStart, selectionEnd, start, end))
-}
-
-export default getEntitiesForSelection

package/src/getSelectedText.js

@@ -1,11 +0,0 @@
-const getSelectedText = (editorState) => {
-  const selectionState = editorState.getSelection()
-  const anchorKey = selectionState.getAnchorKey()
-  const currentContent = editorState.getCurrentContent()
-  const currentContentBlock = currentContent.getBlockForKey(anchorKey)
-  const start = selectionState.getStartOffset()
-  const end = selectionState.getEndOffset()
-  return currentContentBlock.getText().slice(start, end)
-}
-
-export default getSelectedText

package/src/getSimilarAdjacentBlocks.js

@@ -1,53 +0,0 @@
-const getSimilarAdjacentBlocks = (editorState, block, options = {}) => {
-  const blockType = block.getType()
-  const depth = block.getDepth()
-  const variant = block.getData().get('variant')
-
-  const contentState = editorState.getCurrentContent()
-
-  const {
-    includeDepth = true,
-    includeVariant = false,
-    onlyForBlockTypes = [],
-  } = options
-
-  const matches = aBlock => aBlock && [
-    (aBlock.getType() === blockType),
-    (!includeDepth || (aBlock.getDepth() === depth)),
-    !includeVariant || (aBlock.getData().get('variant') === variant),
-    !onlyForBlockTypes.length || onlyForBlockTypes.includes(aBlock.getType()),
-  ].every(Boolean)
-
-  const before = []
-  const after = []
-
-  let cursor = block
-  while (cursor) {
-    const prev = contentState.getBlockBefore(cursor.getKey())
-    if (matches(prev)) {
-      before.push(prev)
-      cursor = prev
-    } else {
-      cursor = null
-    }
-  }
-
-  cursor = block
-  while (cursor) {
-    const next = contentState.getBlockAfter(cursor.getKey())
-    if (matches(next)) {
-      after.push(next)
-      cursor = next
-    } else {
-      cursor = null
-    }
-  }
-
-  return {
-    before: before.reverse(),
-    after,
-    all: [...before.reverse(), block, ...after],
-  }
-}
-
-export default getSimilarAdjacentBlocks

package/src/index.js

@@ -1,41 +0,0 @@
-export { default as addBlock } from './addBlock'
-export { default as adjustBlockDepth } from './adjustBlockDepth'
-export { default as atEndOfBlock } from './atEndOfBlock'
-export { default as atStartOfBlock } from './atStartOfBlock'
-export { default as changeBlockType } from './changeBlockType'
-export { default as getAllEntities } from './getAllEntities'
-export { default as getCurrentBlock } from './utils/getCurrentBlock'
-export { default as getEntitiesForBlock } from './getEntitiesForBlock'
-export { default as getEntitiesForSelection } from './getEntitiesForSelection'
-export { default as getSelectedText } from './getSelectedText'
-export { default as getSimilarAdjacentBlocks } from './getSimilarAdjacentBlocks'
-export { default as insertAtomicBlock } from './insertAtomicBlock'
-export { default as insertBlock } from './insertBlock'
-export { default as insertEmptyBlock } from './insertEmptyBlock'
-export { default as insertEntity } from './insertEntity'
-export { default as insertNewBlock } from './insertNewBlock'
-export { default as insertText } from './insertText'
-export { default as mergeBlockData } from './mergeBlockData'
-export { default as mergeBlockDataByKey } from './mergeBlockDataByKey'
-export { default as mergeEntityData } from './mergeEntityData'
-export { default as modifyBlock } from './modifyBlock'
-export { default as modifyBlockByKey } from './modifyBlockByKey'
-export { default as moveCaretAfterBlock } from './moveCaretAfterBlock'
-export { default as moveCaretToEnd } from './moveCaretToEnd'
-export { default as removeBlock } from './removeBlock'
-export { default as removeBlockStyle } from './removeBlockStyle'
-export { default as removeEntity } from './removeEntity'
-export { default as removeInlineStyles } from './removeInlineStyles'
-export { default as resetBlock } from './resetBlock'
-export { default as selectAll} from './selectAll'
-export { default as selectBlockByKey } from './selectBlockByKey'
-export { default as setBlockData } from './setBlockData'
-export { default as toggleBlockStyle } from './toggleBlockStyle'
-export { default as toggleBlockType } from './toggleBlockType'
-export { default as toggleEntity } from './toggleEntity'
-export { default as toggleInlineStyle } from './toggleInlineStyle'
-export { default as trimEditorState } from './trimEditorState'
-
-export const DRAFTJS_BLOCK_KEY = 'DRAFTJS_BLOCK_KEY'
-export const HANDLED = 'handled'
-export const NOT_HANDLED = 'not-handled'

package/src/insertAtomicBlock.js

@@ -1,23 +0,0 @@
-// @flow
-
-import { AtomicBlockUtils } from 'draft-js'
-
-import type { EditorState } from 'draft-js'
-import type { DraftEntityType } from 'draft-js/lib/DraftEntityType'
-
-const insertAtomicBlock = (
-  editorState: EditorState,
-  entityType: DraftEntityType,
-  mutability: 'IMMUTABLE' | 'MUTABLE' | 'SEGMENTED',
-  data?: { [id: string]: any },
-  character?: string = ' '
-): EditorState => {
-  const entityKey = editorState.getCurrentContent().createEntity(entityType, mutability, data).getLastCreatedEntityKey()
-  return AtomicBlockUtils.insertAtomicBlock(
-    editorState,
-    entityKey,
-    character
-  )
-}
-
-export default insertAtomicBlock

package/src/insertBlock.js

@@ -1,40 +0,0 @@
-import { ContentBlock, EditorState, genKey } from "draft-js"
-import { List } from "immutable"
-
-const insertBlock = (direction, editorState, targetBlock, newBlockType) => {
-  const selection = editorState.getSelection()
-  const contentState = editorState.getCurrentContent()
-  const currentBlock = targetBlock || contentState.getBlockForKey(selection.getEndKey())
-
-  const blockMap = contentState.getBlockMap()
-  // Split the blocks
-  const blocksBefore = blockMap.toSeq().takeUntil(v => v === currentBlock)
-  const blocksAfter = blockMap.toSeq().skipUntil(v => v === currentBlock).rest()
-  const newBlockKey = genKey()
-  const newBlocks = direction === 'before' ? [
-    [newBlockKey, new ContentBlock({
-      key: newBlockKey,
-      type: newBlockType,
-      text: '',
-      characterList: List(),
-    })],
-    [currentBlock.getKey(), currentBlock],
-  ] : [
-    [currentBlock.getKey(), currentBlock],
-    [newBlockKey, new ContentBlock({
-      key: newBlockKey,
-      type: newBlockType,
-      text: '',
-      characterList: List(),
-    })],
-  ]
-  const newBlockMap = blocksBefore.concat(newBlocks, blocksAfter).toOrderedMap()
-  const newContentState = contentState.merge({
-    blockMap: newBlockMap,
-    selectionBefore: selection,
-    selectionAfter: selection,
-  })
-  return EditorState.push(editorState, newContentState, 'insert-fragment')
-}
-
-export default insertBlock

package/src/insertEmptyBlock.js

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

package/src/insertEntity.js

@@ -1,56 +0,0 @@
-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

@@ -1,61 +0,0 @@
-// @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