@studysync/draft-js-modifiers 0.4.12 → 0.4.14

package/es/insertBlockAfter.js

@@ -37,6 +37,7 @@ var insertBlockAfter = function insertBlockAfter(editorState, keyBefore, blockPa
     type: 'unstyled',
     text: ''
   }, blockParams));
+  var modified = false;
   var contentState = editorState.getCurrentContent();
   var oldBlockMap = contentState.getBlockMap();
 
@@ -54,6 +55,7 @@ var insertBlockAfter = function insertBlockAfter(editorState, keyBefore, blockPa
 
         if (keyBefore === k) {
           map.set(newBlock.key, newBlock);
+          modified = true;
         }
       }
     } catch (err) {
@@ -63,7 +65,7 @@ var insertBlockAfter = function insertBlockAfter(editorState, keyBefore, blockPa
     }
   });
 
-  return _draftJs.EditorState.push(editorState, _draftJs.ContentState.createFromBlockArray(Array.from(newBlockMap.values())).set('selectionBefore', contentState.getSelectionBefore()).set('selectionAfter', contentState.getSelectionAfter()));
+  return modified ? _draftJs.EditorState.push(editorState, _draftJs.ContentState.createFromBlockArray(Array.from(newBlockMap.values())).set('selectionBefore', contentState.getSelectionBefore()).set('selectionAfter', contentState.getSelectionAfter()), 'insert-fragment') : editorState;
 };
 
 var _default = insertBlockAfter;

package/es/insertBlockBefore.js

@@ -37,6 +37,7 @@ var insertBlockBefore = function insertBlockBefore(editorState, keyBefore, block
     type: 'unstyled',
     text: ''
   }, blockParams));
+  var modified = false;
   var contentState = editorState.getCurrentContent();
   var oldBlockMap = contentState.getBlockMap();
 
@@ -52,6 +53,7 @@ var insertBlockBefore = function insertBlockBefore(editorState, keyBefore, block
 
         if (keyBefore === k) {
           map.set(newBlock.key, newBlock);
+          modified = true;
         }
 
         map.set(k, v);
@@ -63,7 +65,7 @@ var insertBlockBefore = function insertBlockBefore(editorState, keyBefore, block
     }
   });
 
-  return _draftJs.EditorState.push(editorState, _draftJs.ContentState.createFromBlockArray(Array.from(newBlockMap.values())).set('selectionBefore', contentState.getSelectionBefore()).set('selectionAfter', contentState.getSelectionAfter()));
+  return modified ? _draftJs.EditorState.push(editorState, _draftJs.ContentState.createFromBlockArray(Array.from(newBlockMap.values())).set('selectionBefore', contentState.getSelectionBefore()).set('selectionAfter', contentState.getSelectionAfter()), 'insert-fragment') : editorState;
 };
 
 var _default = insertBlockBefore;

package/flow/stub/__dev__.js

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

package/insertBlockAfter.js

@@ -37,6 +37,7 @@ var insertBlockAfter = function insertBlockAfter(editorState, keyBefore, blockPa
     type: 'unstyled',
     text: ''
   }, blockParams));
+  var modified = false;
   var contentState = editorState.getCurrentContent();
   var oldBlockMap = contentState.getBlockMap();
 
@@ -54,6 +55,7 @@ var insertBlockAfter = function insertBlockAfter(editorState, keyBefore, blockPa
 
         if (keyBefore === k) {
           map.set(newBlock.key, newBlock);
+          modified = true;
         }
       }
     } catch (err) {
@@ -63,7 +65,7 @@ var insertBlockAfter = function insertBlockAfter(editorState, keyBefore, blockPa
     }
   });
 
-  return _draftJs.EditorState.push(editorState, _draftJs.ContentState.createFromBlockArray(Array.from(newBlockMap.values())).set('selectionBefore', contentState.getSelectionBefore()).set('selectionAfter', contentState.getSelectionAfter()));
+  return modified ? _draftJs.EditorState.push(editorState, _draftJs.ContentState.createFromBlockArray(Array.from(newBlockMap.values())).set('selectionBefore', contentState.getSelectionBefore()).set('selectionAfter', contentState.getSelectionAfter()), 'insert-fragment') : editorState;
 };
 
 var _default = insertBlockAfter;

package/insertBlockBefore.js

@@ -37,6 +37,7 @@ var insertBlockBefore = function insertBlockBefore(editorState, keyBefore, block
     type: 'unstyled',
     text: ''
   }, blockParams));
+  var modified = false;
   var contentState = editorState.getCurrentContent();
   var oldBlockMap = contentState.getBlockMap();
 
@@ -52,6 +53,7 @@ var insertBlockBefore = function insertBlockBefore(editorState, keyBefore, block
 
         if (keyBefore === k) {
           map.set(newBlock.key, newBlock);
+          modified = true;
         }
 
         map.set(k, v);
@@ -63,7 +65,7 @@ var insertBlockBefore = function insertBlockBefore(editorState, keyBefore, block
     }
   });
 
-  return _draftJs.EditorState.push(editorState, _draftJs.ContentState.createFromBlockArray(Array.from(newBlockMap.values())).set('selectionBefore', contentState.getSelectionBefore()).set('selectionAfter', contentState.getSelectionAfter()));
+  return modified ? _draftJs.EditorState.push(editorState, _draftJs.ContentState.createFromBlockArray(Array.from(newBlockMap.values())).set('selectionBefore', contentState.getSelectionBefore()).set('selectionAfter', contentState.getSelectionAfter()), 'insert-fragment') : editorState;
 };
 
 var _default = insertBlockBefore;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studysync/draft-js-modifiers",
-  "version": "0.4.12",
+  "version": "0.4.14",
   "description": "Modular state modifiers for Draft.js",
   "main": "index.js",
   "module": "es/index.js",
@@ -61,5 +61,8 @@
     "nyc": "^11.8.0",
     "react": ">=17",
     "react-dom": ">=17"
+  },
+  "resolutions": {
+    "graceful-fs": "4.2.4"
   }
 }

package/script/add-module.js

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

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

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

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

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

package/src/changeBlockType.js

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

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

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

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

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

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

@@ -0,0 +1,42 @@
+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 insertBlockAfter } from './insertBlockAfter'
+export { default as insertBlockBefore } from './insertBlockBefore'
+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

@@ -0,0 +1,23 @@
+// @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/insertBlockAfter.js

@@ -0,0 +1,42 @@
+import { EditorState } from "draft-js"
+import { genKey } from "draft-js"
+import { ContentBlock } from "draft-js"
+import { ContentState } from "draft-js"
+import Immutable from "immutable"
+
+const insertBlockAfter = (editorState, keyBefore, blockParams) => {
+  const newBlock = new ContentBlock({
+    key: genKey(),
+    type: 'unstyled',
+    text: '',
+    ...blockParams,
+  })
+
+  let modified = false
+
+  const contentState = editorState.getCurrentContent()
+  const oldBlockMap = contentState.getBlockMap()
+  const newBlockMap = Immutable.OrderedMap().withMutations((map) => {
+    for (const [k, v] of oldBlockMap.entries()) {
+      map.set(k, v)
+
+      if (keyBefore === k) {
+        map.set(newBlock.key, newBlock)
+        modified=true
+      }
+    }
+  })
+
+  return modified
+    ? EditorState.push(
+        editorState,
+        ContentState
+          .createFromBlockArray(Array.from(newBlockMap.values()))
+          .set('selectionBefore', contentState.getSelectionBefore())
+          .set('selectionAfter', contentState.getSelectionAfter()),
+        'insert-fragment'
+      )
+    : editorState
+}
+
+export default insertBlockAfter

package/src/insertBlockBefore.js

@@ -0,0 +1,42 @@
+import { EditorState } from "draft-js"
+import { genKey } from "draft-js"
+import { ContentBlock } from "draft-js"
+import { ContentState } from "draft-js"
+import Immutable from "immutable"
+
+const insertBlockBefore = (editorState, keyBefore, blockParams) => {
+  const newBlock = new ContentBlock({
+    key: genKey(),
+    type: 'unstyled',
+    text: '',
+    ...blockParams,
+  })
+
+  let modified = false
+
+  const contentState = editorState.getCurrentContent()
+  const oldBlockMap = contentState.getBlockMap()
+  const newBlockMap = Immutable.OrderedMap().withMutations((map) => {
+    for (const [k, v] of oldBlockMap.entries()) {
+      if (keyBefore === k) {
+        map.set(newBlock.key, newBlock)
+        modified = true
+      }
+
+      map.set(k, v)
+    }
+  })
+
+  return modified
+    ? EditorState.push(
+        editorState,
+        ContentState
+          .createFromBlockArray(Array.from(newBlockMap.values()))
+          .set('selectionBefore', contentState.getSelectionBefore())
+          .set('selectionAfter', contentState.getSelectionAfter()),
+        'insert-fragment'
+      )
+    : editorState
+}
+
+export default insertBlockBefore

package/src/insertEmptyBlock.js

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