Remove deprecations (#2113)

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

Debt.

#### What's the new behavior?

This removes almost all existing deprecations from previous API changes, to save on filesize and reduce complexity in the codebase going forward.

It also changes from using the `slate-dev-logger` to using the Facebook-inspired `slate-dev-warning` which can be compiled out of production builds with [`babel-plugin-dev-expression`](https://github.com/4Catalyzer/babel-plugin-dev-expression) to save even further on file size.

The only deprecations it keeps are in the `fromJSON` methods for data model changes like `.kind` and `.leaves` which may still may not have been migrated in databases, since this is a bigger pain point.

#### 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: #1922 
Fixes: #2105
Fixes: #646 
Fixes: #2109
Fixes: #2107 
Fixes: #2018

packages/slate-react/Changelog.md

@@ -4,6 +4,14 @@ This document maintains a list of changes to the `slate-react` package with each
 
 ---
 
+### `0.18.0` — August 22, 2018
+
+###### BREAKING
+
+**Remove all previously deprecated code paths.** This helps to reduce some of the complexity in Slate by not having to handle these code paths anymore. And it helps to reduce file size. When upgrading, it's _highly_ recommended that you upgrade to the previous version first and ensure there are no deprecation warnings being logged, then upgrade to this version.
+
+---
+
 ### `0.17.0` — August 22, 2018
 
 ###### NEW

packages/slate-react/package.json

@@ -16,16 +16,14 @@
     "debug": "^3.1.0",
     "get-window": "^1.1.1",
     "is-window": "^1.0.2",
-    "keycode": "^2.1.2",
     "lodash": "^4.1.1",
     "memoize-one": "^4.0.0",
     "prop-types": "^15.5.8",
     "react-immutable-proptypes": "^2.1.0",
-    "react-portal": "^3.1.0",
     "selection-is-backward": "^1.0.0",
     "slate-base64-serializer": "^0.2.60",
     "slate-dev-environment": "^0.2.0",
-    "slate-dev-logger": "^0.1.43",
+    "slate-dev-warning": "^0.0.0",
     "slate-hotkeys": "^0.2.3",
     "slate-plain-serializer": "^0.5.41",
     "slate-prop-types": "^0.4.58"

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

@@ -2,9 +2,9 @@ import Debug from 'debug'
 import React from 'react'
 import Types from 'prop-types'
 import getWindow from 'get-window'
-import { IS_FIREFOX, HAS_INPUT_EVENTS_LEVEL_2 } from 'slate-dev-environment'
-import logger from 'slate-dev-logger'
+import warning from 'slate-dev-warning'
 import throttle from 'lodash/throttle'
+import { IS_FIREFOX, HAS_INPUT_EVENTS_LEVEL_2 } from 'slate-dev-environment'
 
 import EVENT_HANDLERS from '../constants/event-handlers'
 import Node from './node'
@@ -37,7 +37,6 @@ class Content extends React.Component {
 
   static propTypes = {
     autoCorrect: Types.bool.isRequired,
-    children: Types.any.isRequired,
     className: Types.string,
     editor: Types.object.isRequired,
     readOnly: Types.bool.isRequired,
@@ -165,10 +164,11 @@ class Content extends React.Component {
     const range = findDOMRange(selection, window)
 
     if (!range) {
-      logger.error(
-        'Unable to find a native DOM range from the current selection.',
-        { selection }
+      warning(
+        false,
+        'Unable to find a native DOM range from the current selection.'
       )
+
       return
     }
 
@@ -426,7 +426,6 @@ class Content extends React.Component {
         data-gramm={false}
       >
         {children}
-        {this.props.children}
       </Container>
     )
   }

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

@@ -1,9 +1,8 @@
 import Debug from 'debug'
-import Portal from 'react-portal'
 import React from 'react'
 import SlateTypes from 'slate-prop-types'
 import Types from 'prop-types'
-import logger from 'slate-dev-logger'
+import warning from 'slate-dev-warning'
 import { Schema, Stack } from 'slate'
 import memoizeOne from 'memoize-one'
 
@@ -136,11 +135,10 @@ class Editor extends React.Component {
 
     // If we've resolved a few times already, and it's exactly in line with
     // the updates, then warn the user that they may be doing something wrong.
-    if (resolves > 5 && resolves === updates) {
-      logger.warn(
-        'A Slate <Editor> component is re-resolving `props.plugins` or `props.schema` on each update, which leads to poor performance. This is often due to passing in a new `schema` or `plugins` prop with each render by declaring them inline in your render function. Do not do this!'
-      )
-    }
+    warning(
+      resolves < 5 || resolves !== updates,
+      'A Slate <Editor> component is re-resolving `props.plugins` or `props.schema` on each update, which leads to poor performance. This is often due to passing in a new `schema` or `plugins` prop with each render by declaring them inline in your render function. Do not do this!'
+    )
 
     if (change) {
       this.onChange(change)
@@ -155,16 +153,7 @@ class Editor extends React.Component {
 
   render() {
     debug('render', this)
-
-    const children = this.stack
-      .map('renderPortal', this.value, this)
-      .map((child, i) => (
-        <Portal key={i} isOpened>
-          {child}
-        </Portal>
-      ))
-
-    const props = { ...this.props, children }
+    const props = { ...this.props }
     const tree = this.stack.render('renderEditor', props, this)
     return tree
   }
@@ -231,7 +220,8 @@ class Editor extends React.Component {
 
   change = (...args) => {
     if (this.tmp.isChanging) {
-      logger.warn(
+      warning(
+        false,
         "The `editor.change` method was called from within an existing `editor.change` callback. This is not allowed, and often due to calling `editor.change` directly from a plugin's event handler which is unnecessary."
       )
 

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

@@ -143,13 +143,13 @@ class Leaf extends React.Component {
       text === '' &&
       parent.object === 'block' &&
       parent.text === '' &&
-      parent.nodes.size === 1
+      parent.nodes.last() === node
     ) {
       return <span data-slate-zero-width="n">{'\u200B'}</span>
     }
 
     // COMPAT: If the text is empty, it's because it's on the edge of an inline
-    // void node, so we render a zero-width space so that the selection can be
+    // node, so we render a zero-width space so that the selection can be
     // inserted next to it still.
     if (text === '') {
       return <span data-slate-zero-width="z">{'\u200B'}</span>

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

@@ -2,7 +2,7 @@ import Debug from 'debug'
 import ImmutableTypes from 'react-immutable-proptypes'
 import React from 'react'
 import SlateTypes from 'slate-prop-types'
-import logger from 'slate-dev-logger'
+import warning from 'slate-dev-warning'
 import Types from 'prop-types'
 
 import Void from './void'
@@ -81,11 +81,10 @@ class Node extends React.Component {
         return true
       }
 
-      if (shouldUpdate === false) {
-        logger.warn(
-          "Returning false in `shouldNodeComponentUpdate` does not disable Slate's internal `shouldComponentUpdate` logic. If you want to prevent updates, use React's `shouldComponentUpdate` instead."
-        )
-      }
+      warning(
+        shouldUpdate !== false,
+        "Returning false in `shouldNodeComponentUpdate` does not disable Slate's internal `shouldComponentUpdate` logic. If you want to prevent updates, use React's `shouldComponentUpdate` instead."
+      )
     }
 
     // If the `readOnly` status has changed, re-render in case there is any

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

@@ -64,7 +64,7 @@ function AfterPlugin() {
     event.preventDefault()
 
     const { value } = change
-    const { selection } = value
+    const { document, selection, schema } = value
     const range = findRange(targetRange, value)
 
     switch (event.inputType) {
@@ -101,7 +101,12 @@ function AfterPlugin() {
 
       case 'insertLineBreak':
       case 'insertParagraph': {
-        if (change.value.isInVoid) {
+        const hasVoidParent = document.hasVoidParent(
+          selection.start.path,
+          schema
+        )
+
+        if (hasVoidParent) {
           change.moveToStartOfNextText()
         } else {
           change.splitBlockAtRange(range)
@@ -450,13 +455,14 @@ function AfterPlugin() {
     debug('onKeyDown', { event })
 
     const { value } = change
-    const { schema } = value
+    const { document, selection, schema } = value
+    const hasVoidParent = document.hasVoidParent(selection.start.path, schema)
 
     // COMPAT: In iOS, some of these hotkeys are handled in the
     // `onNativeBeforeInput` handler of the `<Content>` component in order to
     // preserve native autocorrect behavior, so they shouldn't be handled here.
     if (Hotkeys.isSplitBlock(event) && !IS_IOS) {
-      return value.isInVoid
+      return hasVoidParent
         ? change.moveToStartOfNextText()
         : change.splitBlock()
     }
@@ -520,44 +526,44 @@ function AfterPlugin() {
     // an inline is selected, we need to handle these hotkeys manually because
     // browsers won't know what to do.
     if (Hotkeys.isMoveBackward(event)) {
-      const { document, isInVoid, previousText, startText } = value
+      const { previousText, startText } = value
       const isPreviousInVoid =
         previousText && document.hasVoidParent(previousText.key, schema)
 
-      if (isInVoid || isPreviousInVoid || startText.text == '') {
+      if (hasVoidParent || isPreviousInVoid || startText.text == '') {
         event.preventDefault()
         return change.moveBackward()
       }
     }
 
     if (Hotkeys.isMoveForward(event)) {
-      const { document, isInVoid, nextText, startText } = value
+      const { nextText, startText } = value
       const isNextInVoid =
         nextText && document.hasVoidParent(nextText.key, schema)
 
-      if (isInVoid || isNextInVoid || startText.text == '') {
+      if (hasVoidParent || isNextInVoid || startText.text == '') {
         event.preventDefault()
         return change.moveForward()
       }
     }
 
     if (Hotkeys.isExtendBackward(event)) {
-      const { document, isInVoid, previousText, startText } = value
+      const { previousText, startText } = value
       const isPreviousInVoid =
         previousText && document.hasVoidParent(previousText.key, schema)
 
-      if (isInVoid || isPreviousInVoid || startText.text == '') {
+      if (hasVoidParent || isPreviousInVoid || startText.text == '') {
         event.preventDefault()
         return change.moveFocusBackward()
       }
     }
 
     if (Hotkeys.isExtendForward(event)) {
-      const { document, isInVoid, nextText, startText } = value
+      const { nextText, startText } = value
       const isNextInVoid =
         nextText && document.hasVoidParent(nextText.key, schema)
 
-      if (isInVoid || isNextInVoid || startText.text == '') {
+      if (hasVoidParent || isNextInVoid || startText.text == '') {
         event.preventDefault()
         return change.moveFocusForward()
       }
@@ -686,13 +692,11 @@ function AfterPlugin() {
 
   function renderEditor(props, editor) {
     const { handlers } = editor
-
     return (
       <Content
         {...handlers}
         autoCorrect={props.autoCorrect}
         className={props.className}
-        children={props.children}
         editor={editor}
         readOnly={props.readOnly}
         role={props.role}

packages/slate-react/test/helpers/h.js

@@ -12,19 +12,13 @@ const h = createHyperscript({
     paragraph: 'paragraph',
     quote: 'quote',
     code: 'code',
-    image: {
-      type: 'image',
-      isVoid: true,
-    },
+    image: 'image',
   },
   inlines: {
     link: 'link',
     hashtag: 'hashtag',
     comment: 'comment',
-    emoji: {
-      type: 'emoji',
-      isVoid: true,
-    },
+    emoji: 'emoji',
   },
   marks: {
     b: 'bold',

packages/slate-react/test/helpers/schema.js

@@ -0,0 +1,16 @@
+import { Schema } from 'slate'
+
+const schema = Schema.create({
+  blocks: {
+    image: {
+      isVoid: true,
+    },
+  },
+  inlines: {
+    emoji: {
+      isVoid: true,
+    },
+  },
+})
+
+export default schema

packages/slate-react/test/rendering/fixtures/custom-block-blurred.js

@@ -20,6 +20,13 @@ function renderNode(props) {
 
 export const props = {
   renderNode,
+  schema: {
+    blocks: {
+      image: {
+        isVoid: true,
+      },
+    },
+  },
 }
 
 export const value = (

packages/slate-react/test/rendering/fixtures/custom-block-focused.js

@@ -20,6 +20,13 @@ function renderNode(props) {
 
 export const props = {
   renderNode,
+  schema: {
+    blocks: {
+      image: {
+        isVoid: true,
+      },
+    },
+  },
 }
 
 export const value = (

packages/slate-react/test/rendering/fixtures/custom-block-selected.js

@@ -20,6 +20,13 @@ function renderNode(props) {
 
 export const props = {
   renderNode,
+  schema: {
+    blocks: {
+      image: {
+        isVoid: true,
+      },
+    },
+  },
 }
 
 export const value = (

packages/slate-react/test/rendering/fixtures/custom-block-void.js

@@ -19,6 +19,13 @@ function renderNode(props) {
 
 export const props = {
   renderNode,
+  schema: {
+    blocks: {
+      image: {
+        isVoid: true,
+      },
+    },
+  },
 }
 
 export const value = (

packages/slate-react/test/rendering/fixtures/custom-inline-void.js

@@ -16,6 +16,13 @@ function renderNode(props) {
 
 export const props = {
   renderNode,
+  schema: {
+    inlines: {
+      emoji: {
+        isVoid: true,
+      },
+    },
+  },
 }
 
 export const value = (
@@ -50,7 +57,7 @@ export const output = `
     </span>
     <span>
       <span>
-        <span data-slate-zero-width="z">&#x200B;</span>
+        <span data-slate-zero-width="n">&#x200B;</span>
       </span>
     </span>
   </div>

packages/slate-react/test/rendering/fixtures/empty-block-with-inline.js

@@ -1,27 +0,0 @@
-/** @jsx h */
-
-import h from '../../helpers/h'
-
-export const props = {}
-
-export const value = (
-  <value>
-    <document>
-      <paragraph>
-        <link />
-      </paragraph>
-    </document>
-  </value>
-)
-
-export const output = `
-<div data-slate-editor="true" contenteditable="true" role="textbox">
-  <div style="position:relative">
-    <span>
-      <span>
-        <span data-slate-zero-width="n">\u200B</span>
-      </span>
-    </span>
-  </div>
-</div>
-`.trim()

packages/slate-react/test/rendering/fixtures/readonly-custom-block-void.js

@@ -20,6 +20,13 @@ function renderNode(props) {
 export const props = {
   readOnly: true,
   renderNode,
+  schema: {
+    blocks: {
+      image: {
+        isVoid: true,
+      },
+    },
+  },
 }
 
 export const value = (

packages/slate-react/test/rendering/fixtures/readonly-custom-inline-void.js

@@ -17,6 +17,13 @@ function renderNode(props) {
 export const props = {
   readOnly: true,
   renderNode,
+  schema: {
+    inlines: {
+      emoji: {
+        isVoid: true,
+      },
+    },
+  },
 }
 
 export const value = (
@@ -44,7 +51,7 @@ export const output = `
     </span>
     <span>
       <span>
-        <span data-slate-zero-width="z">&#x200B;</span>
+        <span data-slate-zero-width="n">&#x200B;</span>
       </span>
     </span>
   </div>