Add replaceNodeByKey change (#1117)

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

@@ -641,8 +641,7 @@ Changes.insertBlockAtRange = (change, range, block, options = {}) => {
   }
 
   else if (startBlock.isEmpty) {
-    change.removeNodeByKey(startBlock.key)
-    change.insertNodeByKey(parent.key, index, block, { normalize })
+    change.insertNodeByKey(parent.key, index + 1, block, { normalize })
   }
 
   else if (range.isAtStartOf(startBlock)) {

packages/slate/src/changes/by-key.js

@@ -366,6 +366,31 @@ Changes.removeTextByKey = (change, key, offset, length, options = {}) => {
   }
 }
 
+/**
+`* Replace a `node` with another `node`
+ *
+ * @param {Change} change
+ * @param {String} key
+ * @param {Object|Node} node
+ * @param {Object} options
+ *   @property {Boolean} normalize
+ */
+
+Changes.replaceNodeByKey = (change, key, newNode, options = {}) => {
+  newNode = Node.create(newNode)
+  const { normalize = true } = options
+  const { state } = change
+  const { document } = state
+  const node = document.getNode(key)
+  const parent = document.getParent(key)
+  const index = parent.nodes.indexOf(node)
+  change.removeNodeByKey(key, { normalize: false })
+  change.insertNodeByKey(parent.key, index, newNode, options)
+  if (normalize) {
+    change.normalizeNodeByKey(parent.key, SCHEMA)
+  }
+}
+
 /**
  * Set `properties` on mark on text at `offset` and `length` in node by `key`.
  *

packages/slate/test/changes/at-current-range/insert-block/is-empty.js

@@ -22,6 +22,7 @@ export const input = (
 export const output = (
   <state>
     <document>
+      <paragraph />
       <quote>
         <cursor />
       </quote>

packages/slate/test/changes/by-key/replace-node-by-key/block.js

@@ -0,0 +1,27 @@
+/** @jsx h */
+
+import h from '../../../helpers/h'
+
+export default function (change) {
+  const key = '123'
+  const quote = { kind: 'block', type: 'quote' }
+  change.replaceNodeByKey(key, quote)
+}
+
+export const input = (
+  <state>
+    <document>
+      <paragraph key="123">
+        word
+      </paragraph>
+    </document>
+  </state>
+)
+
+export const output = (
+  <state>
+    <document>
+      <quote />
+    </document>
+  </state>
+)

packages/slate/test/changes/by-key/replace-node-by-key/inline.js

@@ -0,0 +1,28 @@
+/** @jsx h */
+
+import h from '../../../helpers/h'
+
+export default function (change) {
+  const quote = { kind: 'block', type: 'quote' }
+  change.replaceNodeByKey('a', quote)
+}
+
+export const input = (
+  <state>
+    <document>
+      <paragraph>
+        one <link key="a">two</link>
+      </paragraph>
+    </document>
+  </state>
+)
+
+export const output = (
+  <state>
+    <document>
+      <paragraph>
+        one <quote />
+      </paragraph>
+    </document>
+  </state>
+)

packages/slate/test/changes/by-key/replace-node-by-key/text.js

@@ -0,0 +1,35 @@
+/** @jsx h */
+
+import h from '../../../helpers/h'
+
+export default function (change) {
+  const key = change.state.document.getTexts().first().key
+  const text = { kind: 'text', text: 'three' }
+  change.replaceNodeByKey(key, text)
+}
+
+export const input = (
+  <state>
+    <document>
+      <paragraph>
+        one
+      </paragraph>
+      <paragraph>
+        two
+    </paragraph>
+    </document>
+  </state>
+)
+
+export const output = (
+  <state>
+    <document>
+      <paragraph>
+        three
+      </paragraph>
+      <paragraph>
+        two
+      </paragraph>
+    </document>
+  </state>
+)