Feature: setTextByKey and replaceTextByKey (#1745)

* basic functions

* basic tests

* First Complish: tests and functions for setTextByKey and replaceTextByKey

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

@@ -2,6 +2,7 @@ import Block from '../models/block'
 import Inline from '../models/inline'
 import Mark from '../models/mark'
 import Node from '../models/node'
+import Range from '../models/range'
 
 /**
  * Changes.
@@ -346,6 +347,71 @@ Changes.removeNodeByKey = (change, key, options = {}) => {
   }
 }
 
+/**
+ * Insert `text` at `offset` in node by `key`.
+ *
+ * @param {Change} change
+ * @param {String} key
+ * @param {String} text
+ * @param {Set<Mark>} marks (optional)
+ * @param {Object} options
+ *   @property {Boolean} normalize
+ */
+
+Changes.setTextByKey = (change, key, text, marks, options = {}) => {
+  const textNode = change.value.document.getDescendant(key)
+  change.replaceTextByKey(key, 0, textNode.text.length, text, marks, options)
+}
+
+/**
+ * Replace A Length of Text with another string or text
+ * @param {Change} change
+ * @param {String} key
+ * @param {Number} offset
+ * @param {Number} length
+ * @param {string} text
+ * @param {Set<Mark>} marks (optional)
+ * @param {Object} options
+ *   @property {Boolean} normalize
+ *
+ */
+
+Changes.replaceTextByKey = (
+  change,
+  key,
+  offset,
+  length,
+  text,
+  marks,
+  options
+) => {
+  const { document } = change.value
+  const textNode = document.getDescendant(key)
+  if (length + offset > textNode.text.length) {
+    length = textNode.text.length - offset
+  }
+  const range = Range.create({
+    anchorKey: key,
+    focusKey: key,
+    anchorOffset: offset,
+    focusOffset: offset + length,
+  })
+  let activeMarks = document.getActiveMarksAtRange(range)
+
+  change.removeTextByKey(key, offset, length, { normalize: false })
+  if (!marks) {
+    // Do not use mark at index when marks and activeMarks are both empty
+    marks = activeMarks ? activeMarks : []
+  } else if (activeMarks) {
+    // Do not use `has` because we may want to reset marks like font-size with an updated data;
+    activeMarks = activeMarks.filter(
+      activeMark => !marks.find(m => activeMark.type === m.type)
+    )
+    marks = activeMarks.merge(marks)
+  }
+  change.insertTextByKey(key, offset, text, marks, options)
+}
+
 /**
  * Remove text at `offset` and `length` in node by `key`.
  *

packages/slate/test/changes/by-key/replace-text-by-key/replace-with-active-marks-with-data.js

@@ -0,0 +1,36 @@
+/** @jsx h */
+
+import h from '../../../helpers/h'
+
+export default function(change) {
+  const { anchorKey, anchorOffset } = change.value
+  change.replaceTextByKey(anchorKey, anchorOffset, 3, 'cat is cute', [
+    { type: 'font-size', data: { size: 16 } },
+  ])
+}
+
+export const input = (
+  <value>
+    <document>
+      <paragraph>
+        Meow,{' '}
+        <fontSize size={12}>
+          <cursor />word.
+        </fontSize>
+      </paragraph>
+    </document>
+  </value>
+)
+
+export const output = (
+  <value>
+    <document>
+      <paragraph>
+        Meow, <fontSize size={16}>cat is cute</fontSize>
+        <fontSize size={12}>
+          <cursor />d.
+        </fontSize>
+      </paragraph>
+    </document>
+  </value>
+)

packages/slate/test/changes/by-key/replace-text-by-key/replace-with-active-marks.js

@@ -0,0 +1,34 @@
+/** @jsx h */
+
+import h from '../../../helpers/h'
+
+export default function(change) {
+  const { anchorKey, anchorOffset } = change.value
+  change.replaceTextByKey(anchorKey, anchorOffset, 3, 'cat is cute')
+}
+
+export const input = (
+  <value>
+    <document>
+      <paragraph>
+        Meow,{' '}
+        <b>
+          <cursor />word.
+        </b>
+      </paragraph>
+    </document>
+  </value>
+)
+
+export const output = (
+  <value>
+    <document>
+      <paragraph>
+        Meow,{' '}
+        <b>
+          cat is cute<cursor />d.
+        </b>
+      </paragraph>
+    </document>
+  </value>
+)

packages/slate/test/changes/by-key/replace-text-by-key/replace-with-mark-and-active-mark.js

@@ -0,0 +1,39 @@
+/** @jsx h */
+
+import h from '../../../helpers/h'
+
+export default function(change) {
+  const { anchorKey, anchorOffset } = change.value
+  change.replaceTextByKey(anchorKey, anchorOffset, 3, 'cat is cute', [
+    { type: 'italic' },
+  ])
+}
+
+export const input = (
+  <value>
+    <document>
+      <paragraph>
+        Meow,{' '}
+        <b>
+          <cursor />word.
+        </b>
+      </paragraph>
+    </document>
+  </value>
+)
+
+export const output = (
+  <value>
+    <document>
+      <paragraph>
+        Meow,{' '}
+        <i>
+          <b>
+            cat is cute<cursor />
+          </b>
+        </i>
+        <b>d.</b>
+      </paragraph>
+    </document>
+  </value>
+)

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

@@ -0,0 +1,30 @@
+/** @jsx h */
+
+import h from '../../../helpers/h'
+
+export default function(change) {
+  const { anchorKey, anchorOffset } = change.value
+  change.replaceTextByKey(anchorKey, anchorOffset, 3, 'cat is cute')
+}
+
+export const input = (
+  <value>
+    <document>
+      <paragraph>
+        <b>Meow, </b>
+        <cursor />word.
+      </paragraph>
+    </document>
+  </value>
+)
+
+export const output = (
+  <value>
+    <document>
+      <paragraph>
+        <b>Meow, </b>
+        cat is cute<cursor />d.
+      </paragraph>
+    </document>
+  </value>
+)

packages/slate/test/changes/by-key/replace-text-by-key/replace-without-any-marks.js

@@ -0,0 +1,28 @@
+/** @jsx h */
+
+import h from '../../../helpers/h'
+
+export default function(change) {
+  const { anchorKey, anchorOffset } = change.value
+  change.replaceTextByKey(anchorKey, anchorOffset, 3, 'cat is cute')
+}
+
+export const input = (
+  <value>
+    <document>
+      <paragraph>
+        Meow, <cursor />word.
+      </paragraph>
+    </document>
+  </value>
+)
+
+export const output = (
+  <value>
+    <document>
+      <paragraph>
+        Meow, cat is cute<cursor />d.
+      </paragraph>
+    </document>
+  </value>
+)

packages/slate/test/changes/by-key/set-text-by-key/replace-with-string-and-mark.js

@@ -0,0 +1,33 @@
+/** @jsx h */
+
+import h from '../../../helpers/h'
+
+export default function(change) {
+  change.setTextByKey(change.value.anchorKey, 'cat is cute', [
+    { type: 'bold' },
+    { type: 'italic' },
+  ])
+}
+
+export const input = (
+  <value>
+    <document>
+      <paragraph>
+        <cursor />word
+      </paragraph>
+    </document>
+  </value>
+)
+
+export const output = (
+  <value>
+    <document>
+      <paragraph>
+        <i>
+          <b>cat is cute</b>
+        </i>
+        <cursor />
+      </paragraph>
+    </document>
+  </value>
+)

packages/slate/test/changes/by-key/set-text-by-key/replace-with-string.js

@@ -0,0 +1,27 @@
+/** @jsx h */
+
+import h from '../../../helpers/h'
+
+export default function(change) {
+  change.setTextByKey(change.value.anchorKey, 'cat is cute')
+}
+
+export const input = (
+  <value>
+    <document>
+      <paragraph>
+        <cursor />word
+      </paragraph>
+    </document>
+  </value>
+)
+
+export const output = (
+  <value>
+    <document>
+      <paragraph>
+        cat is cute<cursor />
+      </paragraph>
+    </document>
+  </value>
+)

packages/slate/test/helpers/h.js

@@ -32,6 +32,7 @@ const h = createHyperscript({
     b: 'bold',
     i: 'italic',
     u: 'underline',
+    fontSize: 'font-size',
   },
 })