add Decoration and Selection models (#2112)

#### Is this adding or improving a _feature_ or fixing a _bug_?

Improvement.

#### What's the new behavior?

This introduces two new models: `Decoration` and `Selection`, which both implement the simpler `Range` interface. This way we can introduce properties to these concepts without having to have them live on all ranges, and we can start to introduce more helpful methods specific to each one's needs.

It also means we don't need to move `isFocused` to value, which saves some complexity on the operations side, retaining `set_selection` as the only way selections are modified.

In the process, it also cleans up a lot of the existing model logic for implementing the `Node` interface, and introduces another `Common` interface for shared properties of all Slate models.

#### How does this change work?

It introduces a new `interfaces/` directory where common sets of properties can be declared, and mixed in to the models with the new (simple) `mixin` utility.

#### Have you checked that...?

* [x] The new code matches the existing patterns and styles.
* [x] The tests pass with `yarn test`.
* [x] The linter passes with `yarn lint`. (Fix errors with `yarn prettier`.)
* [x] The relevant examples still work. (Run examples with `yarn watch`.)

#### Does this fix any issues or need any specific reviewers?

Fixes: #1952 
Fixes: #1807 
Fixes: https://github.com/ianstormtaylor/slate/issues/2110

packages/slate-react/Changelog.md

@@ -4,6 +4,14 @@ This document maintains a list of changes to the `slate-react` package with each
 
 ---
 
+### `0.17.0` — August 22, 2018
+
+###### NEW
+
+**Updated to work with `slate@0.39.0` with the new `Decoration` and `Selection`.** This isn't a breaking change to any of the API's in `slate-react`, but it does update it to work with the newly introduced models and breaking changed in the newest version of Slate core.
+
+---
+
 ### `0.16.0` — August 21, 2018
 
 ###### NEW

packages/slate-react/src/components/content.js

@@ -297,7 +297,7 @@ class Content extends React.Component {
       const native = window.getSelection()
       const range = findRange(native, value)
 
-      if (range && range.equals(selection)) {
+      if (range && range.equals(selection.toRange())) {
         this.updateSelection()
         return
       }
@@ -380,7 +380,7 @@ class Content extends React.Component {
     const Container = tagName
     const { document, selection, decorations } = value
     const indexes = document.getSelectionIndexes(selection)
-    const decs = document.getDecorations(stack).concat(decorations || [])
+    const decs = document.getDecorations(stack).concat(decorations)
     const childrenDecorations = getChildrenDecorations(document, decs)
 
     const children = document.nodes.toArray().map((child, i) => {

packages/slate-react/src/plugins/after.js

@@ -671,8 +671,9 @@ function AfterPlugin() {
       if (next) range = range.moveFocusTo(next.key, 0)
     }
 
-    range = document.resolveRange(range)
-    change.select(range)
+    let selection = document.createSelection(range)
+    selection = selection.setIsFocused(true)
+    change.select(selection)
   }
 
   /**

packages/slate-react/src/utils/find-range.js

@@ -1,5 +1,4 @@
 import getWindow from 'get-window'
-import isBackward from 'selection-is-backward'
 import { IS_IE, IS_EDGE } from 'slate-dev-environment'
 
 import findPoint from './find-point'
@@ -63,8 +62,6 @@ function findRange(native, value) {
   const range = document.createRange({
     anchor,
     focus,
-    isBackward: isCollapsed ? false : isBackward(native),
-    isFocused: true,
   })
 
   return range

packages/slate-react/test/plugins/core/on-select/move-selection.js

@@ -1,12 +1,12 @@
 /** @jsx h */
 
 import h from '../../../helpers/h'
-import { Range } from 'slate'
+import { Selection } from 'slate'
 
 export default function(simulator) {
   const { value } = simulator
   const text = value.document.getTexts().first()
-  const selection = Range.create()
+  const selection = Selection.create()
     .collapseToStartOf(text)
     .move(1)
     .focus()

packages/slate-react/test/rendering/fixtures/custom-decorator.js

@@ -15,7 +15,9 @@ function decorateNode(block) {
         key: text.key,
         offset: 2,
       },
-      marks: [{ type: 'bold' }],
+      mark: {
+        type: 'bold',
+      },
     },
   ]
 }