@studysync/draft-js-modifiers 0.4.12 → 0.4.14

package/test/export.js

@@ -0,0 +1,14 @@
+import test from 'ava'
+import fs from 'fs'
+import path from 'path'
+import * as Modifiers from '../src'
+
+test('export all modules', t => {
+  const files = fs.readdirSync(path.resolve(__dirname, '..', 'src'))
+    .filter(name => /\.js$/.test(name) && name !== 'index.js')
+    .map(name => name.replace(/\.js$/, ''))
+
+  t.true(
+    files.every(file => Object.keys(Modifiers).includes(file))
+  )
+})

package/test/fixtures/createEditorState.js

@@ -0,0 +1,12 @@
+import Draft, { EditorState, SelectionState } from 'draft-js'
+
+const createEditorState = (rawContentState, rawSelectionState) => {
+  return EditorState.forceSelection(
+    EditorState.createWithContent(
+      Draft.convertFromRaw(rawContentState)
+    ),
+    new SelectionState(rawSelectionState)
+  )
+}
+
+export default createEditorState

package/test/fixtures/omitBlockKeysFromRawContent.js

@@ -0,0 +1,9 @@
+const omitBlockKeysFromRawContent = content => {
+  const ret = Object.assign({}, content)
+  ret.blocks.forEach(block => {
+    delete block.key
+  })
+  return ret
+}
+
+export default omitBlockKeysFromRawContent

package/test/insertAtomicBlock.js

@@ -0,0 +1,89 @@
+import test from 'ava'
+import { convertToRaw } from 'draft-js'
+import createEditorState from './fixtures/createEditorState'
+import omitBlockKeysFromRawContent from './fixtures/omitBlockKeysFromRawContent'
+
+import insertAtomicBlock from '../src/insertAtomicBlock'
+
+test('insertAtomicBlock', t => {
+  const beforeRawContentState = {
+    entityMap: {},
+    blocks: [{
+      key: 'item1',
+      text: '',
+      type: 'unstyled',
+      depth: 0,
+      inlineStyleRanges: [],
+      entityRanges: [],
+      data: {},
+    }],
+  }
+
+  const afterRawContentState = {
+    entityMap: {
+      0: {
+        data: {
+          foo: 'bar',
+        },
+        mutability: 'IMMUTABLE',
+        type: 'buz',
+      },
+    },
+    blocks: [
+      {
+        key: 'item1',
+        text: '',
+        type: 'unstyled',
+        depth: 0,
+        inlineStyleRanges: [],
+        entityRanges: [],
+        data: {},
+      },
+      {
+        key: 'item2',
+        text: ' ',
+        type: 'atomic',
+        depth: 0,
+        inlineStyleRanges: [],
+        entityRanges: [{
+          key: 0,
+          length: 1,
+          offset: 0,
+        }],
+        data: {},
+      },
+      {
+        key: 'item3',
+        text: '',
+        type: 'unstyled',
+        depth: 0,
+        inlineStyleRanges: [],
+        entityRanges: [],
+        data: {},
+      },
+    ],
+  }
+
+  const editorState = createEditorState(
+    beforeRawContentState,
+    {
+      anchorKey: 'item1',
+      anchorOffset: 0,
+      focusKey: 'item1',
+      focusOffset: 0,
+      isBackward: false,
+      hasFocus: true,
+    }
+  )
+
+  const newEditorState = insertAtomicBlock(editorState, 'buz', 'IMMUTABLE', { foo: 'bar' })
+  t.not(newEditorState, editorState)
+  t.deepEqual(
+    omitBlockKeysFromRawContent(
+      convertToRaw(newEditorState.getCurrentContent())
+    ),
+    omitBlockKeysFromRawContent(
+      afterRawContentState
+    )
+  )
+})

package/test/insertEmptyBlock.js

@@ -0,0 +1,65 @@
+import test from 'ava'
+import Draft from 'draft-js'
+import createEditorState from './fixtures/createEditorState'
+import omitBlockKeysFromRawContent from './fixtures/omitBlockKeysFromRawContent'
+
+import insertEmptyBlock from '../src/insertEmptyBlock'
+
+[
+  'header-one',
+  'unstyled',
+].forEach(type => {
+  test(`insertEmptyBlock ${type}`, t => {
+    const firstBlock = {
+      key: 'item1',
+      text: 'asdf',
+      type: 'unstyled',
+      depth: 0,
+      inlineStyleRanges: [{
+        length: 2,
+        offset: 1,
+        style: 'ITALIC',
+      }],
+      entityRanges: [],
+      data: { foo: 'bar' },
+    }
+    const beforeRawContentState = {
+      entityMap: {},
+      blocks: [firstBlock],
+    }
+    const afterRawContentState = {
+      entityMap: {},
+      blocks: [firstBlock, {
+        key: 'item2',
+        text: '',
+        type,
+        depth: 0,
+        inlineStyleRanges: [],
+        entityRanges: [],
+        data: {},
+      }],
+    }
+    const editorState = createEditorState(
+      beforeRawContentState,
+      {
+        anchorKey: 'item1',
+        anchorOffset: 4,
+        focusKey: 'item1',
+        focusOffset: 4,
+        isBackward: false,
+        hasFocus: true,
+      }
+    )
+    const newEditorState = insertEmptyBlock(editorState, type)
+
+    t.not(newEditorState, editorState)
+    t.deepEqual(
+      omitBlockKeysFromRawContent(
+        Draft.convertToRaw(newEditorState.getCurrentContent())
+      ),
+      omitBlockKeysFromRawContent(
+        afterRawContentState
+      )
+    )
+  })
+})

package/test/insertNewBlock.js

@@ -0,0 +1,68 @@
+import test from 'ava'
+import Draft from 'draft-js'
+import createEditorState from './fixtures/createEditorState'
+import omitBlockKeysFromRawContent from './fixtures/omitBlockKeysFromRawContent'
+
+import insertNewBlock from '../src/insertNewBlock'
+
+[
+  [],
+  ['header-one'],
+  ['unstyled', 'Text'],
+  ['blockquote', 'Quote text', { foo: 'bar' }],
+].forEach(args => {
+  test(`insertNewBlock ${args.length} args`, t => {
+    const [type = 'unstyled', text = '', data = {}] = args
+    const firstBlock = {
+      key: 'item1',
+      text: 'asdf',
+      type: 'unstyled',
+      depth: 0,
+      inlineStyleRanges: [{
+        length: 2,
+        offset: 1,
+        style: 'ITALIC',
+      }],
+      entityRanges: [],
+      data: {},
+    }
+    const beforeRawContentState = {
+      entityMap: {},
+      blocks: [firstBlock],
+    }
+    const afterRawContentState = {
+      entityMap: {},
+      blocks: [firstBlock, {
+        key: 'item2',
+        text,
+        type,
+        depth: 0,
+        inlineStyleRanges: [],
+        entityRanges: [],
+        data,
+      }],
+    }
+    const editorState = createEditorState(
+      beforeRawContentState,
+      {
+        anchorKey: 'item1',
+        anchorOffset: 4,
+        focusKey: 'item1',
+        focusOffset: 4,
+        isBackward: false,
+        hasFocus: true,
+      }
+    )
+    const newEditorState = insertNewBlock(editorState, ...args)
+
+    t.not(newEditorState, editorState)
+    t.deepEqual(
+      omitBlockKeysFromRawContent(
+        Draft.convertToRaw(newEditorState.getCurrentContent())
+      ),
+      omitBlockKeysFromRawContent(
+        afterRawContentState
+      )
+    )
+  })
+})

package/test/insertText.js

@@ -0,0 +1,58 @@
+import test from 'ava'
+import Draft from 'draft-js'
+import createEditorState from './fixtures/createEditorState'
+import omitBlockKeysFromRawContent from './fixtures/omitBlockKeysFromRawContent'
+
+import insertText from '../src/insertText'
+
+test('insertText', t => {
+  const beforeRawContentState = {
+    entityMap: {},
+    blocks: [{
+      key: 'item1',
+      text: '',
+      type: 'unstyled',
+      depth: 0,
+      inlineStyleRanges: [],
+      entityRanges: [],
+      data: {},
+    }],
+  }
+
+  const afterRawContentState = {
+    entityMap: {},
+    blocks: [{
+      key: 'item1',
+      text: 'jkl;',
+      type: 'unstyled',
+      depth: 0,
+      inlineStyleRanges: [],
+      entityRanges: [],
+      data: {},
+    }],
+  }
+
+  const editorState = createEditorState(
+    beforeRawContentState,
+    {
+      anchorKey: 'item1',
+      anchorOffset: 0,
+      focusKey: 'item1',
+      focusOffset: 0,
+      isBackward: false,
+      hasFocus: true,
+    }
+  )
+
+  const newEditorState = insertText(editorState, 'jkl;')
+
+  t.not(newEditorState, editorState)
+  t.deepEqual(
+    omitBlockKeysFromRawContent(
+      Draft.convertToRaw(newEditorState.getCurrentContent())
+    ),
+    omitBlockKeysFromRawContent(
+      afterRawContentState
+    )
+  )
+})

package/test/mergeBlockData.js

@@ -0,0 +1,40 @@
+import test from 'ava'
+import Draft from 'draft-js'
+
+import mergeBlockData from '../src/mergeBlockData'
+
+let editorState
+const KEY = 'item0'
+
+test.beforeEach(() => {
+  const content = Draft.ContentState.createFromBlockArray([new Draft.ContentBlock({ key: KEY })])
+  editorState = Draft.EditorState.createWithContent(content)
+})
+
+test('mergeBlockData Add', t => {
+  const newEditorState = mergeBlockData(editorState, { foo: 1 })
+  const block = newEditorState.getCurrentContent().getBlockForKey(KEY)
+  t.is(block.getData().get('foo'), 1)
+})
+
+test('mergeBlockData Update', t => {
+  let newEditorState = mergeBlockData(editorState, { foo: 1 })
+  newEditorState = mergeBlockData(newEditorState, { foo: 2 })
+  const block = newEditorState.getCurrentContent().getBlockForKey(KEY)
+  t.is(block.getData().get('foo'), 2)
+})
+
+test('mergeBlockData Remove', t => {
+  let newEditorState = mergeBlockData(editorState, { foo: 1 })
+  newEditorState = mergeBlockData(newEditorState, { foo: void 0 })
+  const block = newEditorState.getCurrentContent().getBlockForKey(KEY)
+  t.is(block.getData().get('foo'), undefined)
+})
+
+test('mergeBlockData Merge', t => {
+  let newEditorState = mergeBlockData(editorState, { foo: 1 })
+  newEditorState = mergeBlockData(newEditorState, { bar: 2 })
+  const block = newEditorState.getCurrentContent().getBlockForKey(KEY)
+  t.is(block.getData().get('foo'), 1)
+  t.is(block.getData().get('bar'), 2)
+})

package/test/mergeBlockDataByKey.js

@@ -0,0 +1,103 @@
+import test from 'ava'
+import { convertToRaw } from 'draft-js'
+import createEditorState from './fixtures/createEditorState'
+import omitBlockKeysFromRawContent from './fixtures/omitBlockKeysFromRawContent'
+
+import mergeBlockDataByKey from '../src/mergeBlockDataByKey'
+
+test('mergeBlockDataByKey', t => {
+  const beforeRawContentState = {
+    entityMap: {
+      0: {
+        data: {
+          foo: 'bar',
+        },
+        mutability: 'IMMUTABLE',
+        type: 'buz',
+      },
+    },
+    blocks: [
+      {
+        key: 'item1',
+        text: '',
+        type: 'unstyled',
+        depth: 0,
+        inlineStyleRanges: [],
+        entityRanges: [],
+        data: {},
+      },
+      {
+        key: 'item2',
+        text: ' ',
+        type: 'atomic',
+        depth: 0,
+        inlineStyleRanges: [],
+        entityRanges: [{
+          key: 0,
+          length: 1,
+          offset: 0,
+        }],
+        data: {},
+      },
+    ],
+  }
+
+  const afterRawContentState = {
+    entityMap: {
+      0: {
+        data: {
+          foo: 'bar',
+        },
+        mutability: 'IMMUTABLE',
+        type: 'buz',
+      },
+    },
+    blocks: [
+      {
+        key: 'item1',
+        text: '',
+        type: 'unstyled',
+        depth: 0,
+        inlineStyleRanges: [],
+        entityRanges: [],
+        data: {},
+      },
+      {
+        key: 'item2',
+        text: ' ',
+        type: 'atomic',
+        depth: 0,
+        inlineStyleRanges: [],
+        entityRanges: [{
+          key: 0,
+          length: 1,
+          offset: 0,
+        }],
+        data: { foo: 'bar' },
+      },
+    ],
+  }
+
+  const editorState = createEditorState(
+    beforeRawContentState,
+    {
+      anchorKey: 'item1',
+      anchorOffset: 0,
+      focusKey: 'item1',
+      focusOffset: 0,
+      isBackward: false,
+      hasFocus: true,
+    }
+  )
+
+  const newEditorState = mergeBlockDataByKey(editorState, 'item2', { foo: 'bar' })
+  t.not(newEditorState, editorState)
+  t.deepEqual(
+    omitBlockKeysFromRawContent(
+      convertToRaw(newEditorState.getCurrentContent())
+    ),
+    omitBlockKeysFromRawContent(
+      afterRawContentState
+    )
+  )
+})

package/test/mergeEntityData.js

@@ -0,0 +1,49 @@
+import test from 'ava'
+import { EditorState, ContentState, SelectionState, ContentBlock } from 'draft-js'
+
+import mergeEntityData from '../src/mergeEntityData'
+
+let editorState
+let entityKey
+
+test.beforeEach(() => {
+  const content = ContentState.createFromBlockArray([new ContentBlock({ key: 'item1', text: ' ' })])
+  const selection = new SelectionState({
+    anchorKey: 'item1',
+    anchorOffset: 0,
+    focusKey: 'item1',
+    focusOffset: 1,
+    isBackward: false,
+    hasFocus: true,
+  })
+  editorState = EditorState.forceSelection(
+    EditorState.createWithContent(content),
+    selection
+  )
+  const newContent = editorState.getCurrentContent().createEntity('LINK', 'IMMUTABLE', {})
+  entityKey = newContent.getLastCreatedEntityKey()
+  editorState = EditorState.createWithContent(newContent)
+})
+
+test('mergeEntityData Add', t => {
+  const newEditorState = mergeEntityData(editorState, entityKey, { foo: 1 })
+  t.is(newEditorState.getCurrentContent().getEntity(entityKey).getData().foo, 1)
+})
+
+test('mergeEntityData Update', t => {
+  let newEditorState = mergeEntityData(editorState, entityKey, { foo: 1 })
+  newEditorState = mergeEntityData(newEditorState, entityKey, { foo: 2 })
+  t.is(newEditorState.getCurrentContent().getEntity(entityKey).getData().foo, 2)
+})
+
+test('mergeEntityData Remove', t => {
+  let newEditorState = mergeEntityData(editorState, entityKey, { foo: 1 })
+  newEditorState = mergeEntityData(newEditorState, entityKey, { foo: void 0 })
+  t.is(newEditorState.getCurrentContent().getEntity(entityKey).getData().foo, undefined)
+})
+
+test('mergeEntityData Merge', t => {
+  let newEditorState = mergeEntityData(editorState, entityKey, { foo: 1 })
+  newEditorState = mergeEntityData(newEditorState, entityKey, { bar: 2 })
+  t.deepEqual(newEditorState.getCurrentContent().getEntity(entityKey).getData(), { foo: 1, bar: 2 })
+})

package/test/modifyBlock.js

@@ -0,0 +1,52 @@
+import test from 'ava'
+import { convertToRaw } from 'draft-js'
+import createEditorState from './fixtures/createEditorState'
+
+import modifyBlock from '../src/modifyBlock'
+
+test('modifyBlock', t => {
+  const beforeRawContentState = {
+    entityMap: {},
+    blocks: [{
+      key: 'item1',
+      text: '',
+      type: 'unstyled',
+      depth: 0,
+      inlineStyleRanges: [],
+      entityRanges: [],
+      data: {},
+    }],
+  }
+
+  const afterRawContentState = {
+    entityMap: {},
+    blocks: [{
+      key: 'item1',
+      text: 'jkl;',
+      type: 'header-one',
+      depth: 0,
+      inlineStyleRanges: [],
+      entityRanges: [],
+      data: { foo: 1 },
+    }],
+  }
+
+  const editorState = createEditorState(
+    beforeRawContentState,
+    {
+      anchorKey: 'item1',
+      anchorOffset: 0,
+      focusKey: 'item1',
+      focusOffset: 0,
+      isBackward: false,
+      hasFocus: true,
+    }
+  )
+
+  const newEditorState = modifyBlock(editorState, { text: 'jkl;', type: 'header-one', data: { foo: 1 }})
+  t.not(newEditorState, editorState)
+  t.deepEqual(
+    convertToRaw(newEditorState.getCurrentContent()),
+    afterRawContentState
+  )
+})

package/test/modifyBlockByKey.js

@@ -0,0 +1,91 @@
+import test from 'ava'
+import { convertToRaw, ContentBlock } from 'draft-js'
+import { Map, List } from 'immutable'
+import createEditorState from './fixtures/createEditorState'
+import omitBlockKeysFromRawContent from './fixtures/omitBlockKeysFromRawContent'
+
+import modifyBlockByKey from '../src/modifyBlockByKey'
+
+test('modifyBlockByKey', t => {
+  const beforeRawContentState = {
+    entityMap: {},
+    blocks: [
+      {
+        key: 'item1',
+        text: '',
+        type: 'unstyled',
+        depth: 0,
+        inlineStyleRanges: [],
+        entityRanges: [],
+        data: {},
+      },
+      {
+        key: 'item2',
+        text: '',
+        type: 'header-one',
+        depth: 0,
+        inlineStyleRanges: [],
+        entityRanges: [],
+        data: { foo: 'bar' },
+      },
+    ],
+  }
+
+  const afterRawContentState = {
+    entityMap: {},
+    blocks: [
+      {
+        key: 'item1',
+        text: '',
+        type: 'unstyled',
+        depth: 0,
+        inlineStyleRanges: [],
+        entityRanges: [],
+        data: {},
+      },
+      {
+        key: 'item2',
+        text: 'H1',
+        type: 'header-one',
+        depth: 0,
+        inlineStyleRanges: [],
+        entityRanges: [],
+        data: { foo: 'buz' },
+      },
+    ],
+  }
+
+  const editorState = createEditorState(
+    beforeRawContentState,
+    {
+      anchorKey: 'item1',
+      anchorOffset: 0,
+      focusKey: 'item1',
+      focusOffset: 0,
+      isBackward: false,
+      hasFocus: true,
+    }
+  )
+
+  const newEditorState = modifyBlockByKey(
+    editorState,
+    'item2',
+    new ContentBlock({
+      key: 'item2',
+      text: 'H1',
+      type: 'header-one',
+      characterList: List(),
+      depth: 0,
+      data: Map({ foo: 'buz' }),
+    })
+  )
+  t.not(newEditorState, editorState)
+  t.deepEqual(
+    omitBlockKeysFromRawContent(
+      convertToRaw(newEditorState.getCurrentContent())
+    ),
+    omitBlockKeysFromRawContent(
+      afterRawContentState
+    )
+  )
+})