Fix insert-node-by-key benchmark, add normalize and insert-fragment benchmarks (#2587)

* fix insert-node-by-key benchmark, add normalize-with-problems

* add benchmark for insertFragment

* more fragment benchmarks

benchmark/helpers/h.js

@@ -16,6 +16,12 @@ const h = createHyperscript({
     list: 'list',
     item: 'item',
     image: 'image',
+    table: 'table',
+    tbody: 'tbody',
+    tr: 'tr',
+    td: 'td',
+    thead: 'thead',
+    th: 'th',
   },
   inlines: {
     link: 'link',

benchmark/slate/changes/insert-fragment-deep-with-problems.js

@@ -0,0 +1,67 @@
+/** @jsx h */
+/* eslint-disable react/jsx-key */
+
+const h = require('../../helpers/h')
+const { Editor } = require('slate')
+
+const fragment = (
+  <document>
+    <table>
+      <thead>
+        <tr>
+          <th>
+            <paragraph>Column 1</paragraph>
+          </th>
+          <th>
+            <paragraph>Column 2</paragraph>
+          </th>
+          <th>
+            <paragraph>Column 3</paragraph>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        {Array.from(10).map(n => (
+          <tr key={n}>
+            <td>
+              <paragraph>Plain text</paragraph>
+            </td>
+            <td>
+              <paragraph>
+                <b>Bolded text</b>
+              </paragraph>
+            </td>
+            <td />
+          </tr>
+        ))}
+      </tbody>
+    </table>
+    <list>
+      <item>
+        <paragraph>Plain text</paragraph>
+      </item>
+      <item>
+        <emoji />
+      </item>
+      <item />
+    </list>
+  </document>
+)
+
+module.exports.default = function(editor) {
+  editor.insertFragment(fragment)
+}
+
+const value = (
+  <value>
+    <document>
+      <paragraph>
+        Some initial text.<cursor />
+      </paragraph>
+    </document>
+  </value>
+)
+
+module.exports.input = function() {
+  return new Editor({ value })
+}

benchmark/slate/changes/insert-fragment-large.js

@@ -0,0 +1,36 @@
+/** @jsx h */
+/* eslint-disable react/jsx-key */
+
+const h = require('../../helpers/h')
+const { Editor } = require('slate')
+
+const fragment = (
+  <document>
+    {Array.from(Array(100)).map((v, i) => (
+      <quote>
+        <paragraph>
+          This is editable <b>rich</b> text, <i>much</i> better than a textarea!
+          {i == 0 ? <cursor /> : ''}
+        </paragraph>
+      </quote>
+    ))}
+  </document>
+)
+
+module.exports.default = function(editor) {
+  editor.insertFragment(fragment)
+}
+
+const value = (
+  <value>
+    <document>
+      <paragraph>
+        Some initial text.<cursor />
+      </paragraph>
+    </document>
+  </value>
+)
+
+module.exports.input = function() {
+  return new Editor({ value })
+}

benchmark/slate/changes/insert-fragment.js

@@ -0,0 +1,36 @@
+/** @jsx h */
+/* eslint-disable react/jsx-key */
+
+const h = require('../../helpers/h')
+const { Editor } = require('slate')
+
+const fragment = (
+  <document>
+    {Array.from(Array(10)).map((v, i) => (
+      <quote key={`a${i}`}>
+        <paragraph>
+          This is editable <b>rich</b> text, <i>much</i> better than a textarea!
+          {i == 0 ? <cursor /> : ''}
+        </paragraph>
+      </quote>
+    ))}
+  </document>
+)
+
+module.exports.default = function(editor) {
+  editor.insertFragment(fragment)
+}
+
+const value = (
+  <value>
+    <document>
+      <paragraph>
+        Some initial text.<cursor />
+      </paragraph>
+    </document>
+  </value>
+)
+
+module.exports.input = function() {
+  return new Editor({ value })
+}

benchmark/slate/changes/insert-node-by-key.js

@@ -8,9 +8,9 @@ module.exports.default = function(editor) {
   editor
     .insertNodeByKey('a0', 0, <paragraph>Hello world</paragraph>)
     .insertNodeByKey('a1', 1, <paragraph>Hello world</paragraph>)
-    .insertNodeByKey('a2', 2, <paragraph>Hello world</paragraph>)
-    .insertNodeByKey('a3', 3, <paragraph>Hello world</paragraph>)
-    .insertNodeByKey('a4', 4, <paragraph>Hello world</paragraph>)
+    .insertNodeByKey('a2', 0, <paragraph>Hello world</paragraph>)
+    .insertNodeByKey('a3', 1, <paragraph>Hello world</paragraph>)
+    .insertNodeByKey('a4', 0, <paragraph>Hello world</paragraph>)
 }
 
 const value = (

benchmark/slate/changes/normalize-with-problems.js

@@ -0,0 +1,36 @@
+/** @jsx h */
+/* eslint-disable react/jsx-key */
+
+const h = require('../../helpers/h')
+const { Editor } = require('slate')
+
+module.exports.default = function(editor) {
+  editor.normalize().normalize()
+}
+
+const value = (
+  <value>
+    <document>
+      {Array.from(Array(10)).map((v, i) => (
+        <quote>
+          <paragraph>
+            <paragraph>
+              <link>link text</link>
+            </paragraph>
+            <paragraph />
+            <paragraph>
+              <paragraph>
+                <link>link text</link>
+                <text> more text after</text>
+              </paragraph>
+            </paragraph>
+          </paragraph>
+        </quote>
+      ))}
+    </document>
+  </value>
+)
+
+module.exports.input = function() {
+  return new Editor({ value }, { normalize: false })
+}

packages/slate-plain-serializer/test/helpers/h.js

@@ -13,6 +13,12 @@ const h = createHyperscript({
     quote: 'quote',
     code: 'code',
     image: 'image',
+    table: 'table',
+    tbody: 'tbody',
+    tr: 'tr',
+    td: 'td',
+    thead: 'thead',
+    th: 'th',
   },
   inlines: {
     link: 'link',