Introduce annotations (#2747)

* first stab at removing leaves with tests passing

* fixes

* add iterables to the element interface

* use iterables in more places

* update examples to use iterables

* update naming

* fix tests

* convert more key-based logic to paths

* add range support to iterables

* refactor many methods to use iterables, deprecate cruft

* clean up existing iterables

* more cleanup

* more cleaning

* fix word count example

* work

* split decoration and annotations

* update examples for `renderNode` useage

* deprecate old DOM-based helpers, update examples

* make formats first class, refactor leaf rendering

* fix examples, fix isAtomic checking

* deprecate leaf model

* convert Text and Leaf to functional components

* fix lint and tests

packages/slate-hyperscript/test/annotations/across-blocks.js

@@ -6,7 +6,7 @@ const h = createHyperscript({
   blocks: {
     paragraph: 'paragraph',
   },
-  decorations: {
+  annotations: {
     highlight: 'highlight',
   },
 })
@@ -68,18 +68,13 @@ export const output = {
   },
 }
 
-export const expectDecorations = [
+export const expectAnnotations = [
   {
+    type: 'highlight',
+    data: {},
     anchorOffset: 12,
     focusOffset: 13,
     anchorKey: input.document.nodes.get(0).getFirstText().key,
     focusKey: input.document.nodes.get(1).getFirstText().key,
-    marks: [
-      {
-        object: 'mark',
-        type: 'highlight',
-        data: {},
-      },
-    ],
   },
 ]

packages/slate-hyperscript/test/fixtures/annotation-across-block.js

@@ -6,7 +6,7 @@ const h = createHyperscript({
   blocks: {
     paragraph: 'paragraph',
   },
-  decorations: {
+  annotations: {
     highlight: 'highlight',
   },
 })
@@ -22,7 +22,7 @@ export const input = (
 )
 
 export const options = {
-  preserveDecorations: true,
+  preserveAnnotations: true,
   preserveKeys: true,
 }
 
@@ -49,9 +49,12 @@ export const output = {
       },
     ],
   },
-  decorations: [
+  annotations: [
     {
-      object: 'decoration',
+      key: '0',
+      object: 'annotation',
+      type: 'highlight',
+      data: {},
       anchor: {
         object: 'point',
         key: '1',
@@ -64,11 +67,6 @@ export const output = {
         path: [0, 0],
         offset: 6,
       },
-      mark: {
-        object: 'mark',
-        type: 'highlight',
-        data: {},
-      },
     },
   ],
 }

packages/slate-hyperscript/test/fixtures/annotation-across-multiple-blocks.js

@@ -6,7 +6,7 @@ const h = createHyperscript({
   blocks: {
     paragraph: 'paragraph',
   },
-  decorations: {
+  annotations: {
     highlight: 'highlight',
   },
 })
@@ -25,7 +25,7 @@ export const input = (
 )
 
 export const options = {
-  preserveDecorations: true,
+  preserveAnnotations: true,
   preserveKeys: true,
 }
 
@@ -66,9 +66,12 @@ export const output = {
       },
     ],
   },
-  decorations: [
+  annotations: [
     {
-      object: 'decoration',
+      object: 'annotation',
+      key: 'a',
+      type: 'highlight',
+      data: {},
       anchor: {
         object: 'point',
         key: '0',
@@ -81,11 +84,6 @@ export const output = {
         path: [1, 0],
         offset: 2,
       },
-      mark: {
-        object: 'mark',
-        type: 'highlight',
-        data: {},
-      },
     },
   ],
 }

packages/slate-hyperscript/test/index.js

@@ -9,21 +9,4 @@ describe('slate-hyperscript', () => {
     const expected = Value.isValue(output) ? output.toJSON() : output
     assert.deepEqual(actual, expected)
   })
-
-  fixtures.skip(__dirname, 'decorations', ({ module }) => {
-    const { input, output, expectDecorations } = module
-    const actual = input.toJSON()
-    const expected = Value.isValue(output) ? output.toJSON() : output
-    assert.deepEqual(actual, expected)
-
-    expectDecorations.forEach((decoration, i) => {
-      Object.keys(decoration).forEach(prop => {
-        assert.deepEqual(
-          decoration[prop],
-          input.decorations.toJS()[i][prop],
-          `decoration ${i} had incorrect prop: ${prop}`
-        )
-      })
-    })
-  })
 })