fixing order of blocks if inserted at start of node (#2772)

* fixing order of blocks if inserted at start of node

* fix lint errors

packages/slate/src/commands/at-range.js

@@ -662,15 +662,11 @@ Commands.insertBlockAtRange = (editor, range, block) => {
   const startInline = document.getClosestInline(startKey)
   const parent = document.getParent(startBlock.key)
   const index = parent.nodes.indexOf(startBlock)
+  const insertionMode = getInsertionMode(editor, range)
 
-  if (editor.isVoid(startBlock)) {
-    const extra = start.isAtEndOfNode(startBlock) ? 1 : 0
-    editor.insertNodeByKey(parent.key, index + extra, block)
-  } else if (!startInline && startBlock.text === '') {
-    editor.insertNodeByKey(parent.key, index + 1, block)
-  } else if (start.isAtStartOfNode(startBlock)) {
+  if (insertionMode === 'before') {
     editor.insertNodeByKey(parent.key, index, block)
-  } else if (start.isAtEndOfNode(startBlock)) {
+  } else if (insertionMode === 'behind') {
     editor.insertNodeByKey(parent.key, index + 1, block)
   } else {
     if (startInline && editor.isVoid(startInline)) {
@@ -694,6 +690,34 @@ Commands.insertBlockAtRange = (editor, range, block) => {
   }
 }
 
+/**
+ * Check if current block should be split or new block should be added before or behind it.
+ *
+ * @param {Editor} editor
+ * @param {Range} range
+ */
+
+const getInsertionMode = (editor, range) => {
+  const { value } = editor
+  const { document } = value
+  const { start } = range
+  const startKey = start.key
+  const startBlock = document.getClosestBlock(startKey)
+  const startInline = document.getClosestInline(startKey)
+
+  if (editor.isVoid(startBlock)) {
+    if (start.isAtEndOfNode(startBlock)) return 'behind'
+    else return 'before'
+  } else if (!startInline && startBlock.text === '') {
+    return 'behind'
+  } else if (start.isAtStartOfNode(startBlock)) {
+    return 'before'
+  } else if (start.isAtEndOfNode(startBlock)) {
+    return 'behind'
+  }
+  return 'split'
+}
+
 /**
  * Insert a `fragment` at a `range`.
  *
@@ -744,7 +768,12 @@ Commands.insertFragmentAtRange = (editor, range, fragment) => {
       insertionNode === fragment &&
       (firstChild.hasBlockChildren() || lastChild.hasBlockChildren())
     ) {
-      fragment.nodes.reverse().forEach(node => {
+      // check if reversal is necessary or not
+      const insertionMode = getInsertionMode(editor, range)
+      const nodes =
+        insertionMode === 'before' ? fragment.nodes : fragment.nodes.reverse()
+
+      nodes.forEach(node => {
         editor.insertBlockAtRange(range, node)
       })
       return

packages/slate/test/commands/at-current-range/insert-fragment/fragment-nested-blocks-end-of-node.js

@@ -0,0 +1,40 @@
+/** @jsx h */
+
+import h from '../../../helpers/h'
+
+export default function(editor) {
+  editor.insertFragment(
+    <document>
+      <quote>
+        <quote>one</quote>
+        <quote>two</quote>
+      </quote>
+      <paragraph>after quote</paragraph>
+    </document>
+  )
+}
+
+export const input = (
+  <value>
+    <document>
+      <paragraph>
+        word<cursor />
+      </paragraph>
+    </document>
+  </value>
+)
+
+export const output = (
+  <value>
+    <document>
+      <paragraph>word</paragraph>
+      <quote>
+        <quote>one</quote>
+        <quote>two</quote>
+      </quote>
+      <paragraph>
+        after quote<cursor />
+      </paragraph>
+    </document>
+  </value>
+)

packages/slate/test/commands/at-current-range/insert-fragment/fragment-nested-blocks-start-of-node.js

@@ -0,0 +1,40 @@
+/** @jsx h */
+
+import h from '../../../helpers/h'
+
+export default function(editor) {
+  editor.insertFragment(
+    <document>
+      <quote>
+        <quote>one</quote>
+        <quote>two</quote>
+      </quote>
+      <paragraph>after quote</paragraph>
+    </document>
+  )
+}
+
+export const input = (
+  <value>
+    <document>
+      <paragraph>
+        <cursor />word
+      </paragraph>
+    </document>
+  </value>
+)
+
+export const output = (
+  <value>
+    <document>
+      <quote>
+        <quote>one</quote>
+        <quote>two</quote>
+      </quote>
+      <paragraph>
+        after quote<cursor />
+      </paragraph>
+      <paragraph>word</paragraph>
+    </document>
+  </value>
+)