Moving atomic blocks (facebookarchive#551)

* Implemented moveAtomicBlockBefore and moveAtomicBlockAfter in AtomicBlockUtils

* Renamed EditorChangeType 'change-fragment' to 'move-block' and added to docs

* Changed interface for moving atomic blocks:

- Just use one function called moveAtomicBlock instead of three
- Introduce DraftInsertionType for determining if a fragment shall replace another fragment, or if it shall be inserted before or after another fragment

* Using ES6 variable declaration and getStart/EndKey instead of getAnchor/FocusKey

docs/APIReference-AtomicBlockUtils.md

@@ -24,3 +24,14 @@ insertAtomicBlock: function(
   character: string
 ): EditorState
 ```
+
+### moveAtomicBlock
+
+```
+moveAtomicBlock: function(
+  editorState: EditorState,
+  atomicBlock: ContentBlock,
+  targetRange: SelectionState,
+  insertionMode?: DraftInsertionType
+): EditorState
+```

docs/APIReference-EditorChangeType.md

@@ -50,6 +50,10 @@ The `type` value of one or more `ContentBlock` objects is being changed.
 
 An inline style is being applied or removed for one or more characters.
 
+#### `move-block`
+
+A block is being moved within the [BlockMap](https://github.com/facebook/draft-js/blob/master/src/model/immutable/BlockMap.js).
+
 #### `delete-character`
 
 A single character is being forward-removed.

src/model/constants/DraftInsertionType.js

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule DraftInsertionType
+ * @flow
+ */
+
+'use strict';
+
+/**
+ * A type that defines if an fragment shall be inserted before or after
+ * another fragment or if the selected fragment shall be replaced
+ */
+export type DraftInsertionType = 'replace' | 'before' | 'after';

src/model/immutable/EditorChangeType.js

@@ -21,6 +21,7 @@ export type EditorChangeType = (
   'change-block-data' |
   'change-block-type' |
   'change-inline-style' |
+  'move-block' |
   'delete-character' |
   'insert-characters' |
   'insert-fragment' |

src/model/modifier/AtomicBlockUtils.js

@@ -18,9 +18,13 @@ const CharacterMetadata = require('CharacterMetadata');
 const ContentBlock = require('ContentBlock');
 const DraftModifier = require('DraftModifier');
 const EditorState = require('EditorState');
+const SelectionState = require('SelectionState');
 const Immutable = require('immutable');
 
 const generateRandomKey = require('generateRandomKey');
+const moveBlockInContentState = require('moveBlockInContentState');
+
+import type {DraftInsertionType} from 'DraftInsertionType';
 
 const {
   List,
@@ -84,6 +88,84 @@ const AtomicBlockUtils = {
 
     return EditorState.push(editorState, newContent, 'insert-fragment');
   },
+
+  moveAtomicBlock: function(
+    editorState: EditorState,
+    atomicBlock: ContentBlock,
+    targetRange: SelectionState,
+    insertionMode?: DraftInsertionType
+  ): EditorState {
+    const contentState = editorState.getCurrentContent();
+    const selectionState = editorState.getSelection();
+
+    let withMovedAtomicBlock;
+
+    if (insertionMode === 'before' || insertionMode === 'after') {
+      const targetBlock = contentState.getBlockForKey(
+        insertionMode === 'before' ?
+          targetRange.getStartKey() :
+          targetRange.getEndKey()
+      );
+
+      withMovedAtomicBlock = moveBlockInContentState(
+        contentState,
+        atomicBlock,
+        targetBlock,
+        insertionMode
+      );
+    } else {
+      const afterRemoval = DraftModifier.removeRange(
+        contentState,
+        targetRange,
+        'backward'
+      );
+
+      const selectionAfterRemoval = afterRemoval.getSelectionAfter();
+      const targetBlock = afterRemoval.getBlockForKey(
+        selectionAfterRemoval.getFocusKey()
+      );
+
+      if (selectionAfterRemoval.getStartOffset() === 0) {
+        withMovedAtomicBlock = moveBlockInContentState(
+          afterRemoval,
+          atomicBlock,
+          targetBlock,
+          'before'
+        );
+      } else if (selectionAfterRemoval.getEndOffset() === targetBlock.getLength()) {
+        withMovedAtomicBlock = moveBlockInContentState(
+          afterRemoval,
+          atomicBlock,
+          targetBlock,
+          'after'
+        );
+      } else {
+        const afterSplit = DraftModifier.splitBlock(
+          afterRemoval,
+          selectionAfterRemoval
+        );
+
+        const selectionAfterSplit = afterSplit.getSelectionAfter();
+        const targetBlock = afterSplit.getBlockForKey(
+          selectionAfterSplit.getFocusKey()
+        );
+
+        withMovedAtomicBlock = moveBlockInContentState(
+          afterSplit,
+          atomicBlock,
+          targetBlock,
+          'before'
+        );
+      }
+    }
+
+    const newContent = withMovedAtomicBlock.merge({
+      selectionBefore: selectionState,
+      selectionAfter: withMovedAtomicBlock.getSelectionAfter().set('hasFocus', true),
+    });
+
+    return EditorState.push(editorState, newContent, 'move-block');
+  },
 };
 
 module.exports = AtomicBlockUtils;