From 6552da940ad734faf2dfdf470ba61907d51258bd Mon Sep 17 00:00:00 2001
From: Ian Storm Taylor <ian@ianstormtaylor.com>
Date: Thu, 12 Dec 2019 15:37:55 -0500
Subject: [PATCH] Add `format_text` command, and `editor.marks` state (#3308)

* add format_text command, refactor command extensions

* update onChange to not receive selection

* update docs

* fix tests
---
 docs/concepts/06-editor.md                    |   7 +-
 docs/walkthroughs/01-installing-slate.md      |  38 +----
 docs/walkthroughs/02-adding-event-handlers.md |  33 +----
 .../03-defining-custom-elements.md            |  43 +-----
 .../04-applying-custom-formatting.md          |  33 +----
 docs/walkthroughs/05-executing-commands.md    |  44 +-----
 docs/walkthroughs/06-saving-to-a-database.md  |  25 +---
 packages/slate-history/src/history-command.ts |  26 ++--
 packages/slate-history/src/with-history.ts    |   9 +-
 packages/slate-react/src/components/slate.tsx |  19 ++-
 .../slate-react/src/plugin/react-command.ts   |  21 ++-
 packages/slate-react/src/plugin/with-react.ts |  12 +-
 packages/slate-react/src/utils/weak-maps.ts   |   7 +-
 packages/slate/src/create-editor.ts           |  79 ++++++++++-
 packages/slate/src/interfaces/command.ts      | 132 ++++++------------
 packages/slate/src/interfaces/editor/index.ts |   7 +-
 .../src/interfaces/editor/queries/general.ts  |  55 ++++++++
 packages/slate/src/interfaces/operation.ts    | 102 +++++---------
 .../interfaces/Element/isElement/editor.js    |   3 +-
 .../Element/isElementList/full-editor.js      |   3 +-
 .../Operation/isOperation/set_value.js        |  13 --
 site/examples/check-lists.js                  |  11 +-
 site/examples/embeds.js                       |  11 +-
 site/examples/forced-layout.js                |  11 +-
 site/examples/hovering-toolbar.js             |  11 +-
 site/examples/huge-document.js                |  11 +-
 site/examples/images.js                       |  11 +-
 site/examples/links.js                        |  11 +-
 site/examples/markdown-preview.js             |  11 +-
 site/examples/markdown-shortcuts.js           |  11 +-
 site/examples/mentions.js                     |   5 +-
 site/examples/paste-html.js                   |  11 +-
 site/examples/plaintext.js                    |  11 +-
 site/examples/read-only.js                    |  11 +-
 site/examples/richtext.js                     | 127 ++++++++---------
 site/examples/search-highlighting.js          |  11 +-
 site/examples/tables.js                       |  11 +-
 37 files changed, 350 insertions(+), 647 deletions(-)
 delete mode 100644 packages/slate/test/interfaces/Operation/isOperation/set_value.js

diff --git a/docs/concepts/06-editor.md b/docs/concepts/06-editor.md
index 746d950f1..1b8e45ec8 100644
--- a/docs/concepts/06-editor.md
+++ b/docs/concepts/06-editor.md
@@ -4,15 +4,16 @@ All of the behaviors, content and state of a Slate editor is rollup up into a si
 
 ```ts
 interface Editor {
+  children: Node[]
+  operations: Operation[]
+  selection: Range | null
+  marks: Record<string, any> | null
   apply: (operation: Operation) => void
   exec: (command: Command) => void
   isInline: (element: Element) => boolean
   isVoid: (element: Element) => boolean
   normalizeNode: (entry: NodeEntry) => void
   onChange: () => void
-  children: Node[]
-  operations: Operation[]
-  selection: Range | null
   [key: string]: any
 }
 ```
diff --git a/docs/walkthroughs/01-installing-slate.md b/docs/walkthroughs/01-installing-slate.md
index ef455a840..e7345e13e 100644
--- a/docs/walkthroughs/01-installing-slate.md
+++ b/docs/walkthroughs/01-installing-slate.md
@@ -45,15 +45,14 @@ const App = () => {
 
 Of course we haven't rendered anything, so you won't see any changes.
 
-Next we want to create state for `value` and `selection`:
+Next we want to create state for `value`:
 
 ```jsx
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
 
-  // Keep track of state for the value and selection of the editor.
+  // Keep track of state for the value of the editor.
   const [value, setValue] = useState([])
-  const [selection, setSelection] = useState(null)
   return null
 }
 ```
@@ -66,18 +65,9 @@ The provider component keeps track of your Slate editor, its plugins, its value,
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
   const [value, setValue] = useState([])
-  const [selection, setSelection] = useState(null)
   // Render the Slate context.
   return (
-    <Slate
-      editor={editor}
-      value={value}
-      selection={selection}
-      onChange={(value, selection) => {
-        setValue(value)
-        setSelection(selection)
-      }}
-    />
+    <Slate editor={editor} value={value} onChange={value => setValue(value)} />
   )
 }
 ```
@@ -94,18 +84,9 @@ Okay, so the next step is to render the `<Editable>` component itself:
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
   const [value, setValue] = useState([])
-  const [selection, setSelection] = useState(null)
   return (
     // Add the editable component inside the context.
-    <Slate
-      editor={editor}
-      value={value}
-      selection={selection}
-      onChange={(value, selection) => {
-        setValue(value)
-        setSelection(selection)
-      }}
-    >
+    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
       <Editable />
     </Slate>
   )
@@ -121,7 +102,6 @@ The value is just plain JSON. Here's one containing a single paragraph block wit
 ```js
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
-  const [selection, setSelection] = useState(null)
   // Add the initial value when setting up our state.
   const [value, setValue] = useState([
     {
@@ -131,15 +111,7 @@ const App = () => {
   ])
 
   return (
-    <Slate
-      editor={editor}
-      value={value}
-      selection={selection}
-      onChange={(value, selection) => {
-        setValue(value)
-        setSelection(selection)
-      }}
-    >
+    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
       <Editable />
     </Slate>
   )
diff --git a/docs/walkthroughs/02-adding-event-handlers.md b/docs/walkthroughs/02-adding-event-handlers.md
index 274a21b0d..f735debcc 100644
--- a/docs/walkthroughs/02-adding-event-handlers.md
+++ b/docs/walkthroughs/02-adding-event-handlers.md
@@ -11,7 +11,6 @@ Here's our app from earlier:
 ```js
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
-  const [selection, setSelection] = useState(null)
   const [value, setValue] = useState([
     {
       type: 'paragraph',
@@ -20,15 +19,7 @@ const App = () => {
   ])
 
   return (
-    <Slate
-      editor={editor}
-      value={value}
-      selection={selection}
-      onChange={(value, selection) => {
-        setValue(value)
-        setSelection(selection)
-      }}
-    >
+    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
       <Editable />
     </Slate>
   )
@@ -40,7 +31,6 @@ Now we add an `onKeyDown` handler:
 ```js
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
-  const [selection, setSelection] = useState(null)
   const [value, setValue] = useState([
     {
       type: 'paragraph',
@@ -49,15 +39,7 @@ const App = () => {
   ])
 
   return (
-    <Slate
-      editor={editor}
-      value={value}
-      selection={selection}
-      onChange={(value, selection) => {
-        setValue(value)
-        setSelection(selection)
-      }}
-    >
+    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
       <Editable
         // Define a new handler which prints the key that was pressed.
         onKeyDown={event => {
@@ -78,7 +60,6 @@ Our `onKeyDown` handler might look like this:
 ```js
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
-  const [selection, setSelection] = useState(null)
   const [value, setValue] = useState([
     {
       type: 'paragraph',
@@ -87,15 +68,7 @@ const App = () => {
   ])
 
   return (
-    <Slate
-      editor={editor}
-      value={value}
-      selection={selection}
-      onChange={(value, selection) => {
-        setValue(value)
-        setSelection(selection)
-      }}
-    >
+    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
       <Editable
         onKeyDown={event => {
           if (event.key === '&') {
diff --git a/docs/walkthroughs/03-defining-custom-elements.md b/docs/walkthroughs/03-defining-custom-elements.md
index 60ac14840..6f8b520b2 100644
--- a/docs/walkthroughs/03-defining-custom-elements.md
+++ b/docs/walkthroughs/03-defining-custom-elements.md
@@ -9,7 +9,6 @@ We'll show you how. Let's start with our app from earlier:
 ```js
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
-  const [selection, setSelection] = useState(null)
   const [value, setValue] = useState([
     {
       type: 'paragraph',
@@ -18,15 +17,7 @@ const App = () => {
   ])
 
   return (
-    <Slate
-      editor={editor}
-      value={value}
-      selection={selection}
-      onChange={(value, selection) => {
-        setValue(value)
-        setSelection(selection)
-      }}
-    >
+    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
       <Editable
         onKeyDown={event => {
           if (event.key === '&') {
@@ -76,7 +67,6 @@ Now, let's add that renderer to our `Editor`:
 ```js
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
-  const [selection, setSelection] = useState(null)
   const [value, setValue] = useState([
     {
       type: 'paragraph',
@@ -96,15 +86,7 @@ const App = () => {
   }, [])
 
   return (
-    <Slate
-      editor={editor}
-      value={value}
-      selection={selection}
-      onChange={(value, selection) => {
-        setValue(value)
-        setSelection(selection)
-      }}
-    >
+    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
       <Editable
         // Pass in the `renderElement` function.
         renderElement={renderElement}
@@ -140,7 +122,6 @@ import { Editor } from 'slate'
 
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
-  const [selection, setSelection] = useState(null)
   const [value, setValue] = useState([
     {
       type: 'paragraph',
@@ -158,15 +139,7 @@ const App = () => {
   }, [])
 
   return (
-    <Slate
-      editor={editor}
-      value={value}
-      selection={selection}
-      onChange={(value, selection) => {
-        setValue(value)
-        setSelection(selection)
-      }}
-    >
+    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
       <Editable
         renderElement={renderElement}
         onKeyDown={event => {
@@ -220,15 +193,7 @@ const App = () => {
   }, [])
 
   return (
-    <Slate
-      editor={editor}
-      value={value}
-      selection={selection}
-      onChange={(value, selection) => {
-        setValue(value)
-        setSelection(selection)
-      }}
-    >
+    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
       <Editable
         renderElement={renderElement}
         onKeyDown={event => {
diff --git a/docs/walkthroughs/04-applying-custom-formatting.md b/docs/walkthroughs/04-applying-custom-formatting.md
index 89f39df4f..1371082ac 100644
--- a/docs/walkthroughs/04-applying-custom-formatting.md
+++ b/docs/walkthroughs/04-applying-custom-formatting.md
@@ -9,7 +9,6 @@ So we start with our app from earlier:
 ```js
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
-  const [selection, setSelection] = useState(null)
   const [value, setValue] = useState([
     {
       type: 'paragraph',
@@ -27,15 +26,7 @@ const App = () => {
   }, [])
 
   return (
-    <Slate
-      editor={editor}
-      value={value}
-      selection={selection}
-      onChange={(value, selection) => {
-        setValue(value)
-        setSelection(selection)
-      }}
-    >
+    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
       <Editable
         renderElement={renderElement}
         onKeyDown={event => {
@@ -61,7 +52,6 @@ And now, we'll edit the `onKeyDown` handler to make it so that when you press `c
 ```js
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
-  const [selection, setSelection] = useState(null)
   const [value, setValue] = useState([
     {
       type: 'paragraph',
@@ -79,15 +69,7 @@ const App = () => {
   }, [])
 
   return (
-    <Slate
-      editor={editor}
-      value={value}
-      selection={selection}
-      onChange={(value, selection) => {
-        setValue(value)
-        setSelection(selection)
-      }}
-    >
+    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
       <Editable
         renderElement={renderElement}
         onKeyDown={event => {
@@ -153,7 +135,6 @@ And now, let's tell Slate about that leaf. To do that, we'll pass in the `render
 ```js
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
-  const [selection, setSelection] = useState(null)
   const [value, setValue] = useState([
     {
       type: 'paragraph',
@@ -176,15 +157,7 @@ const App = () => {
   }, [])
 
   return (
-    <Slate
-      editor={editor}
-      value={value}
-      selection={selection}
-      onChange={(value, selection) => {
-        setValue(value)
-        setSelection(selection)
-      }}
-    >
+    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
       <Editable
         renderElement={renderElement}
         // Pass in the `renderLeaf` function.
diff --git a/docs/walkthroughs/05-executing-commands.md b/docs/walkthroughs/05-executing-commands.md
index dd7c7a753..a3a78d42e 100644
--- a/docs/walkthroughs/05-executing-commands.md
+++ b/docs/walkthroughs/05-executing-commands.md
@@ -13,7 +13,6 @@ We'll start with our app from earlier:
 ```js
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
-  const [selection, setSelection] = useState(null)
   const [value, setValue] = useState([
     {
       type: 'paragraph',
@@ -35,15 +34,7 @@ const App = () => {
   }, [])
 
   return (
-    <Slate
-      editor={editor}
-      value={value}
-      selection={selection}
-      onChange={(value, selection) => {
-        setValue(value)
-        setSelection(selection)
-      }}
-    >
+    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
       <Editable
         renderElement={renderElement}
         renderLeaf={renderLeaf}
@@ -94,7 +85,6 @@ const withCustom = editor => {
 const App = () => {
   // Wrap the editor with our new `withCustom` plugin.
   const editor = useMemo(() => withCustom(withReact(createEditor())), [])
-  const [selection, setSelection] = useState(null)
   const [value, setValue] = useState([
     {
       type: 'paragraph',
@@ -116,15 +106,7 @@ const App = () => {
   }, [])
 
   return (
-    <Slate
-      editor={editor}
-      value={value}
-      selection={selection}
-      onChange={(value, selection) => {
-        setValue(value)
-        setSelection(selection)
-      }}
-    >
+    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
       <Editable
         renderElement={renderElement}
         renderLeaf={renderLeaf}
@@ -224,7 +206,6 @@ const CustomEditor = {
 
 const App = () => {
   const editor = useMemo(() => withCustom(withReact(createEditor())), [])
-  const [selection, setSelection] = useState(null)
   const [value, setValue] = useState([
     {
       type: 'paragraph',
@@ -246,15 +227,7 @@ const App = () => {
   }, [])
 
   return (
-    <Slate
-      editor={editor}
-      value={value}
-      selection={selection}
-      onChange={(value, selection) => {
-        setValue(value)
-        setSelection(selection)
-      }}
-    >
+    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
       <Editable
         renderElement={renderElement}
         renderLeaf={renderLeaf}
@@ -289,7 +262,6 @@ Now our commands are clearly defined and you can invoke them from anywhere we ha
 ```js
 const App = () => {
   const editor = useMemo(() => withCustom(withReact(createEditor())), [])
-  const [selection, setSelection] = useState(null)
   const [value, setValue] = useState([
     {
       type: 'paragraph',
@@ -312,15 +284,7 @@ const App = () => {
 
   return (
     // Add a toolbar with buttons that call the same methods.
-    <Slate
-      editor={editor}
-      value={value}
-      selection={selection}
-      onChange={(value, selection) => {
-        setValue(value)
-        setSelection(selection)
-      }}
-    >
+    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
       <div>
         <button
           onMouseDown={event => {
diff --git a/docs/walkthroughs/06-saving-to-a-database.md b/docs/walkthroughs/06-saving-to-a-database.md
index ce1600e39..ba90334b4 100644
--- a/docs/walkthroughs/06-saving-to-a-database.md
+++ b/docs/walkthroughs/06-saving-to-a-database.md
@@ -9,7 +9,6 @@ Let's start with a basic editor:
 ```js
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
-  const [selection, setSelection] = useState(null)
   const [value, setValue] = useState([
     {
       type: 'paragraph',
@@ -18,15 +17,7 @@ const App = () => {
   ])
 
   return (
-    <Slate
-      editor={editor}
-      value={value}
-      selection={selection}
-      onChange={(value, selection) => {
-        setValue(value)
-        setSelection(selection)
-      }}
-    >
+    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
       <Editable />
     </Slate>
   )
@@ -52,7 +43,6 @@ const defaultValue = [
 
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
-  const [selection, setSelection] = useState(null)
   const [value, setValue] = useState([
     {
       type: 'paragraph',
@@ -65,9 +55,8 @@ const App = () => {
       editor={editor}
       value={value}
       selection={selection}
-      onChange={(value, selection) => {
+      onChange={value => {
         setValue(value)
-        setSelection(selection)
 
         // Save the value to Local Storage.
         const content = JSON.stringify(value)
@@ -87,7 +76,6 @@ But... if you refresh the page, everything is still reset. That's because we nee
 ```js
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
-  const [selection, setSelection] = useState(null)
   // Update the initial content to be pulled from Local Storage if it exists.
   const [value, setValue] = useState(
     JSON.parse(localStorage.getItem('content')) || [
@@ -102,10 +90,8 @@ const App = () => {
     <Slate
       editor={editor}
       value={value}
-      selection={selection}
-      onChange={(value, selection) => {
+      onChange={value => {
         setValue(value)
-        setSelection(selection)
         const content = JSON.stringify(value)
         localStorage.setItem('content', content)
       }}
@@ -149,7 +135,6 @@ const deserialize = string => {
 
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
-  const [selection, setSelection] = useState(null)
   // Use our deserializing function to read the data from Local Storage.
   const [value, setValue] = useState(
     deserialize(localStorage.getItem('content')) || ''
@@ -159,10 +144,8 @@ const App = () => {
     <Slate
       editor={editor}
       value={value}
-      selection={selection}
-      onChange={(value, selection) => {
+      onChange={value => {
         setValue(value)
-        setSelection(selection)
         // Serialize the value and save the string value to Local Storage.
         localStorage.setItem('content', serialize(value))
       }}
diff --git a/packages/slate-history/src/history-command.ts b/packages/slate-history/src/history-command.ts
index 58c3cad6a..8bce72981 100644
--- a/packages/slate-history/src/history-command.ts
+++ b/packages/slate-history/src/history-command.ts
@@ -16,24 +16,14 @@ export const HistoryCommand = {
    */
 
   isHistoryCommand(value: any): value is HistoryCommand {
-    return (
-      HistoryCommand.isRedoCommand(value) || HistoryCommand.isUndoCommand(value)
-    )
-  },
+    if (Command.isCommand(value)) {
+      switch (value.type) {
+        case 'redo':
+        case 'undo':
+          return true
+      }
+    }
 
-  /**
-   * Check if a value is a `RedoCommand` object.
-   */
-
-  isRedoCommand(value: any): value is RedoCommand {
-    return Command.isCommand(value) && value.type === 'redo'
-  },
-
-  /**
-   * Check if a value is an `UndoCommand` object.
-   */
-
-  isUndoCommand(value: any): value is UndoCommand {
-    return Command.isCommand(value) && value.type === 'undo'
+    return false
   },
 }
diff --git a/packages/slate-history/src/with-history.ts b/packages/slate-history/src/with-history.ts
index bcd54d43a..be19ba3dc 100644
--- a/packages/slate-history/src/with-history.ts
+++ b/packages/slate-history/src/with-history.ts
@@ -13,11 +13,14 @@ export const withHistory = (editor: Editor): HistoryEditor => {
   editor.history = { undos: [], redos: [] }
 
   editor.exec = (command: Command) => {
-    if (HistoryEditor.isHistoryEditor(editor)) {
+    if (
+      HistoryEditor.isHistoryEditor(editor) &&
+      HistoryCommand.isHistoryCommand(command)
+    ) {
       const { history } = editor
       const { undos, redos } = history
 
-      if (redos.length > 0 && HistoryCommand.isRedoCommand(command)) {
+      if (command.type === 'redo' && redos.length > 0) {
         const batch = redos[redos.length - 1]
 
         HistoryEditor.withoutSaving(editor, () => {
@@ -33,7 +36,7 @@ export const withHistory = (editor: Editor): HistoryEditor => {
         return
       }
 
-      if (undos.length > 0 && HistoryCommand.isUndoCommand(command)) {
+      if (command.type === 'undo' && undos.length > 0) {
         const batch = undos[undos.length - 1]
 
         HistoryEditor.withoutSaving(editor, () => {
diff --git a/packages/slate-react/src/components/slate.tsx b/packages/slate-react/src/components/slate.tsx
index 5d9e4a1b9..3aa3c073f 100644
--- a/packages/slate-react/src/components/slate.tsx
+++ b/packages/slate-react/src/components/slate.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import React, { useMemo, useState, useCallback } from 'react'
 import { Editor, Node, Range } from 'slate'
 
 import { ReactEditor } from '../plugin/react-editor'
@@ -15,19 +15,24 @@ import { EDITOR_TO_ON_CHANGE } from '../utils/weak-maps'
 export const Slate = (props: {
   editor: Editor
   value: Node[]
-  selection: Range | null
   children: React.ReactNode
-  onChange: (children: Node[], selection: Range | null) => void
+  onChange: (value: Node[]) => void
   [key: string]: any
 }) => {
-  const { editor, children, onChange, value, selection, ...rest } = props
+  const { editor, children, onChange, value, ...rest } = props
+  const [key, setKey] = useState(0)
   const context: [Editor] = useMemo(() => {
     editor.children = value
-    editor.selection = selection
+    Object.assign(editor, rest)
     return [editor]
-  }, [value, selection, ...Object.values(rest)])
+  }, [key, value, ...Object.values(rest)])
 
-  EDITOR_TO_ON_CHANGE.set(editor, onChange)
+  const onContextChange = useCallback(() => {
+    onChange(editor.children)
+    setKey(key + 1)
+  }, [key, onChange])
+
+  EDITOR_TO_ON_CHANGE.set(editor, onContextChange)
 
   return (
     <SlateContext.Provider value={context}>
diff --git a/packages/slate-react/src/plugin/react-command.ts b/packages/slate-react/src/plugin/react-command.ts
index b0a814105..64d57dc58 100644
--- a/packages/slate-react/src/plugin/react-command.ts
+++ b/packages/slate-react/src/plugin/react-command.ts
@@ -16,23 +16,18 @@ export interface InsertDataCommand {
 export type ReactCommand = InsertDataCommand
 
 export const ReactCommand = {
-  /**
-   * Check if a value is an `InsertDataCommand` object.
-   */
-
-  isInsertDataCommand(value: any): value is InsertDataCommand {
-    return (
-      Command.isCommand(value) &&
-      value.type === 'insert_data' &&
-      value.data instanceof DataTransfer
-    )
-  },
-
   /**
    * Check if a value is a `ReactCommand` object.
    */
 
   isReactCommand(value: any): value is InsertDataCommand {
-    return ReactCommand.isInsertDataCommand(value)
+    if (Command.isCommand(value)) {
+      switch (value.type) {
+        case 'insert_data':
+          return value.data instanceof DataTransfer
+      }
+    }
+
+    return false
   },
 }
diff --git a/packages/slate-react/src/plugin/with-react.ts b/packages/slate-react/src/plugin/with-react.ts
index 0302085c7..31227d0b6 100644
--- a/packages/slate-react/src/plugin/with-react.ts
+++ b/packages/slate-react/src/plugin/with-react.ts
@@ -57,7 +57,10 @@ export const withReact = (editor: Editor): Editor => {
   }
 
   editor.exec = (command: Command) => {
-    if (ReactCommand.isInsertDataCommand(command)) {
+    if (
+      ReactCommand.isReactCommand(command) &&
+      command.type === 'insert_data'
+    ) {
       const { data } = command
       const fragment = data.getData('application/x-slate-fragment')
 
@@ -94,11 +97,10 @@ export const withReact = (editor: Editor): Editor => {
     // have to use this unstable API to ensure it batches them. (2019/12/03)
     // https://github.com/facebook/react/issues/14259#issuecomment-439702367
     ReactDOM.unstable_batchedUpdates(() => {
-      const contextOnChange = EDITOR_TO_ON_CHANGE.get(editor)
+      const onContextChange = EDITOR_TO_ON_CHANGE.get(editor)
 
-      if (contextOnChange) {
-        const { children, selection } = editor
-        contextOnChange(children, selection)
+      if (onContextChange) {
+        onContextChange()
       }
 
       onChange()
diff --git a/packages/slate-react/src/utils/weak-maps.ts b/packages/slate-react/src/utils/weak-maps.ts
index 11a8e0e96..05f4ec9bc 100644
--- a/packages/slate-react/src/utils/weak-maps.ts
+++ b/packages/slate-react/src/utils/weak-maps.ts
@@ -32,13 +32,10 @@ export const IS_DRAGGING: WeakMap<Editor, boolean> = new WeakMap()
 export const IS_CLICKING: WeakMap<Editor, boolean> = new WeakMap()
 
 /**
- * Weak map for associating the context `onChange` prop with the plugin.
+ * Weak map for associating the context `onChange` context with the plugin.
  */
 
-export const EDITOR_TO_ON_CHANGE = new WeakMap<
-  Editor,
-  (children: Node[], selection: Range | null) => void
->()
+export const EDITOR_TO_ON_CHANGE = new WeakMap<Editor, () => void>()
 
 /**
  * Symbols.
diff --git a/packages/slate/src/create-editor.ts b/packages/slate/src/create-editor.ts
index 1a5ee471b..188ff99c7 100755
--- a/packages/slate/src/create-editor.ts
+++ b/packages/slate/src/create-editor.ts
@@ -1,5 +1,6 @@
 import {
   Command,
+  CoreCommand,
   Descendant,
   Editor,
   Element,
@@ -26,6 +27,7 @@ export const createEditor = (): Editor => {
     children: [],
     operations: [],
     selection: null,
+    marks: null,
     isInline: () => false,
     isVoid: () => false,
     onChange: () => {},
@@ -73,6 +75,11 @@ export const createEditor = (): Editor => {
       editor.operations.push(op)
       Editor.normalize(editor)
 
+      // Clear any formats applied to the cursor if the selection changes.
+      if (op.type === 'set_selection') {
+        editor.marks = null
+      }
+
       if (!FLUSHING.get(editor)) {
         FLUSHING.set(editor, true)
 
@@ -84,9 +91,9 @@ export const createEditor = (): Editor => {
       }
     },
     exec: (command: Command) => {
-      const { selection } = editor
+      if (CoreCommand.isCoreCommand(command)) {
+        const { selection } = editor
 
-      if (Command.isCoreCommand(command)) {
         switch (command.type) {
           case 'delete_backward': {
             if (selection && Range.isCollapsed(selection)) {
@@ -112,6 +119,56 @@ export const createEditor = (): Editor => {
             break
           }
 
+          case 'format_text': {
+            if (selection) {
+              const { properties } = command
+
+              if (Range.isExpanded(selection)) {
+                const [match] = Editor.nodes(editor, {
+                  at: selection,
+                  match: n => Text.isText(n) && Text.matches(n, properties),
+                  // TODO: should be `mode: 'universal'`
+                })
+
+                if (match) {
+                  const keys = Object.keys(properties)
+                  Editor.unsetNodes(editor, keys, {
+                    match: 'text',
+                    split: true,
+                  })
+                } else {
+                  Editor.setNodes(editor, properties, {
+                    match: 'text',
+                    split: true,
+                  })
+                }
+              } else {
+                const marks = { ...(Editor.marks(editor) || {}) }
+                let match = true
+
+                for (const key in properties) {
+                  if (marks[key] !== properties[key]) {
+                    match = false
+                    break
+                  }
+                }
+
+                if (match) {
+                  for (const key in properties) {
+                    delete marks[key]
+                  }
+                } else {
+                  Object.assign(marks, properties)
+                }
+
+                editor.marks = marks
+                editor.onChange()
+              }
+            }
+
+            break
+          }
+
           case 'insert_break': {
             Editor.splitNodes(editor, { always: true })
             break
@@ -123,7 +180,7 @@ export const createEditor = (): Editor => {
           }
 
           case 'insert_node': {
-            Editor.insertNodes(editor, [command.node])
+            Editor.insertNodes(editor, command.node)
             break
           }
 
@@ -131,8 +188,8 @@ export const createEditor = (): Editor => {
             if (selection) {
               const { anchor } = selection
 
-              // If the cursor is at the end of an inline, move it outside
-              // of the inline before inserting
+              // If the cursor is at the end of an inline, move it outside of
+              // the inline before inserting
               if (Range.isCollapsed(selection)) {
                 const inline = Editor.match(editor, anchor, 'inline')
 
@@ -146,7 +203,17 @@ export const createEditor = (): Editor => {
                 }
               }
 
-              Editor.insertText(editor, command.text)
+              const { marks } = editor
+              const { text } = command
+
+              if (marks) {
+                const node = { text, ...marks }
+                Editor.insertNodes(editor, node)
+              } else {
+                Editor.insertText(editor, text)
+              }
+
+              editor.marks = null
             }
             break
           }
diff --git a/packages/slate/src/interfaces/command.ts b/packages/slate/src/interfaces/command.ts
index f3ee7b099..adb2f49c4 100644
--- a/packages/slate/src/interfaces/command.ts
+++ b/packages/slate/src/interfaces/command.ts
@@ -19,97 +19,6 @@ export const Command = {
   isCommand(value: any): value is Command {
     return isPlainObject(value) && typeof value.type === 'string'
   },
-
-  /**
-   * Check if a value is a `CoreCommand` object.
-   */
-
-  isCoreCommand(value: any): value is CoreCommand {
-    return (
-      Command.isDeleteBackwardCommand(value) ||
-      Command.isDeleteForwardCommand(value) ||
-      Command.isDeleteFragmentCommand(value) ||
-      Command.isInsertTextCommand(value) ||
-      Command.isInsertFragmentCommand(value) ||
-      Command.isInsertBreakCommand(value)
-    )
-  },
-
-  /**
-   * Check if a value is a `DeleteBackwardCommand` object.
-   */
-
-  isDeleteBackwardCommand(value: any): value is DeleteBackwardCommand {
-    return (
-      Command.isCommand(value) &&
-      value.type === 'delete_backward' &&
-      typeof value.unit === 'string'
-    )
-  },
-
-  /**
-   * Check if a value is a `DeleteForwardCommand` object.
-   */
-
-  isDeleteForwardCommand(value: any): value is DeleteForwardCommand {
-    return (
-      Command.isCommand(value) &&
-      value.type === 'delete_forward' &&
-      typeof value.unit === 'string'
-    )
-  },
-
-  /**
-   * Check if a value is a `DeleteFragmentCommand` object.
-   */
-
-  isDeleteFragmentCommand(value: any): value is DeleteFragmentCommand {
-    return Command.isCommand(value) && value.type === 'delete_fragment'
-  },
-
-  /**
-   * Check if a value is an `InsertBreakCommand` object.
-   */
-
-  isInsertBreakCommand(value: any): value is InsertBreakCommand {
-    return Command.isCommand(value) && value.type === 'insert_break'
-  },
-
-  /**
-   * Check if a value is an `InsertFragmentCommand` object.
-   */
-
-  isInsertFragmentCommand(value: any): value is InsertFragmentCommand {
-    return (
-      Command.isCommand(value) &&
-      value.type === 'insert_fragment' &&
-      Node.isNodeList(value.fragment)
-    )
-  },
-
-  /**
-   * Check if a value is an `InsertNodeCommand` object.
-   */
-
-  isInsertNodeCommand(value: any): value is InsertNodeCommand {
-    return (
-      Command.isCommand(value) &&
-      value.type === 'insert_node' &&
-      Node.isNode(value.node)
-    )
-  },
-
-  /**
-   * Check if a value is a `InsertTextCommand` object.
-   */
-
-  isInsertTextCommand(value: any): value is InsertTextCommand {
-    return (
-      Command.isCommand(value) &&
-      value.type === 'insert_text' &&
-      typeof value.text === 'string'
-    )
-  },
 }
 
 /**
@@ -140,6 +49,15 @@ export interface DeleteFragmentCommand {
   type: 'delete_fragment'
 }
 
+/**
+ * The `FormatTextCommand` adds properties to the text nodes in the selection.
+ */
+
+export interface FormatTextCommand {
+  type: 'format_text'
+  properties: Record<string, any>
+}
+
 /**
  * The `InsertBreakCommand` breaks a block in two at the current selection.
  */
@@ -184,7 +102,39 @@ export type CoreCommand =
   | DeleteBackwardCommand
   | DeleteForwardCommand
   | DeleteFragmentCommand
+  | FormatTextCommand
   | InsertBreakCommand
   | InsertFragmentCommand
   | InsertNodeCommand
   | InsertTextCommand
+
+export const CoreCommand = {
+  /**
+   * Check if a value is a `CoreCommand` object.
+   */
+
+  isCoreCommand(value: any): value is CoreCommand {
+    if (Command.isCommand(value)) {
+      switch (value.type) {
+        case 'delete_backward':
+          return typeof value.unit === 'string'
+        case 'delete_forward':
+          return typeof value.unit === 'string'
+        case 'delete_fragment':
+          return true
+        case 'format_text':
+          return isPlainObject(value.properties)
+        case 'insert_break':
+          return true
+        case 'insert_fragment':
+          return Node.isNodeList(value.fragment)
+        case 'insert_node':
+          return Node.isNode(value.node)
+        case 'insert_text':
+          return typeof value.text === 'string'
+      }
+    }
+
+    return false
+  },
+}
diff --git a/packages/slate/src/interfaces/editor/index.ts b/packages/slate/src/interfaces/editor/index.ts
index e4f196979..7d84fb1e8 100755
--- a/packages/slate/src/interfaces/editor/index.ts
+++ b/packages/slate/src/interfaces/editor/index.ts
@@ -16,15 +16,16 @@ import { TextTransforms } from './transforms/text'
  */
 
 export interface Editor {
-  apply: (operation: Operation) => void
   children: Node[]
+  selection: Range | null
+  operations: Operation[]
+  marks: Record<string, any> | null
+  apply: (operation: Operation) => void
   exec: (command: Command) => void
   isInline: (element: Element) => boolean
   isVoid: (element: Element) => boolean
   normalizeNode: (entry: NodeEntry) => void
   onChange: () => void
-  operations: Operation[]
-  selection: Range | null
   [key: string]: any
 }
 
diff --git a/packages/slate/src/interfaces/editor/queries/general.ts b/packages/slate/src/interfaces/editor/queries/general.ts
index 1aab2bd18..f3b580750 100644
--- a/packages/slate/src/interfaces/editor/queries/general.ts
+++ b/packages/slate/src/interfaces/editor/queries/general.ts
@@ -4,12 +4,14 @@ import {
   Operation,
   Path,
   Point,
+  Text,
   PathRef,
   PointRef,
   Range,
   RangeRef,
   Node,
 } from '../../..'
+import { TextEntry } from '../../text'
 
 export const NORMALIZING: WeakMap<Editor, boolean> = new WeakMap()
 export const PATH_REFS: WeakMap<Editor, Set<PathRef>> = new WeakMap()
@@ -30,6 +32,7 @@ export const GeneralQueries = {
       typeof value.isVoid === 'function' &&
       typeof value.normalizeNode === 'function' &&
       typeof value.onChange === 'function' &&
+      (value.marks === null || isPlainObject(value.marks)) &&
       (value.selection === null || Range.isRange(value.selection)) &&
       Node.isNodeList(value.children) &&
       Operation.isOperationList(value.operations)
@@ -45,6 +48,58 @@ export const GeneralQueries = {
     return isNormalizing === undefined ? true : isNormalizing
   },
 
+  /**
+   * Get the marks that would be added to text at the current selection.
+   */
+
+  marks(editor: Editor): Record<string, any> | null {
+    const { marks, selection } = editor
+
+    if (!selection) {
+      return null
+    }
+
+    if (marks) {
+      return marks
+    }
+
+    if (Range.isExpanded(selection)) {
+      const [match] = Editor.nodes(editor, {
+        match: 'text',
+        mode: 'all',
+      })
+
+      if (match) {
+        const [node] = match as TextEntry
+        const { text, ...rest } = node
+        return rest
+      } else {
+        return {}
+      }
+    }
+
+    const { anchor } = selection
+    const { path } = anchor
+    let [node] = Editor.leaf(editor, path)
+
+    if (anchor.offset === 0) {
+      const prev = Editor.previous(editor, path, 'text')
+      const block = Editor.match(editor, path, 'block')
+
+      if (prev && block) {
+        const [prevNode, prevPath] = prev
+        const [, blockPath] = block
+
+        if (Path.isAncestor(blockPath, prevPath)) {
+          node = prevNode as Text
+        }
+      }
+    }
+
+    const { text, ...rest } = node
+    return rest
+  },
+
   /**
    * Create a mutable ref for a `Path` object, which will stay in sync as new
    * operations are applied to the editor.
diff --git a/packages/slate/src/interfaces/operation.ts b/packages/slate/src/interfaces/operation.ts
index 3617408b2..e8791fcd4 100755
--- a/packages/slate/src/interfaces/operation.ts
+++ b/packages/slate/src/interfaces/operation.ts
@@ -1,14 +1,14 @@
 import { Node, Path, Range } from '..'
 import isPlainObject from 'is-plain-object'
 
-type InsertNodeOperation = {
+export type InsertNodeOperation = {
   type: 'insert_node'
   path: Path
   node: Node
   [key: string]: any
 }
 
-type InsertTextOperation = {
+export type InsertTextOperation = {
   type: 'insert_text'
   path: Path
   offset: number
@@ -16,7 +16,7 @@ type InsertTextOperation = {
   [key: string]: any
 }
 
-type MergeNodeOperation = {
+export type MergeNodeOperation = {
   type: 'merge_node'
   path: Path
   position: number
@@ -25,21 +25,21 @@ type MergeNodeOperation = {
   [key: string]: any
 }
 
-type MoveNodeOperation = {
+export type MoveNodeOperation = {
   type: 'move_node'
   path: Path
   newPath: Path
   [key: string]: any
 }
 
-type RemoveNodeOperation = {
+export type RemoveNodeOperation = {
   type: 'remove_node'
   path: Path
   node: Node
   [key: string]: any
 }
 
-type RemoveTextOperation = {
+export type RemoveTextOperation = {
   type: 'remove_text'
   path: Path
   offset: number
@@ -47,7 +47,7 @@ type RemoveTextOperation = {
   [key: string]: any
 }
 
-type SetNodeOperation = {
+export type SetNodeOperation = {
   type: 'set_node'
   path: Path
   properties: Partial<Node>
@@ -55,7 +55,7 @@ type SetNodeOperation = {
   [key: string]: any
 }
 
-type SetSelectionOperation =
+export type SetSelectionOperation =
   | {
       type: 'set_selection'
       [key: string]: any
@@ -75,7 +75,7 @@ type SetSelectionOperation =
       newProperties: null
     }
 
-type SplitNodeOperation = {
+export type SplitNodeOperation = {
   type: 'split_node'
   path: Path
   position: number
@@ -84,16 +84,7 @@ type SplitNodeOperation = {
   [key: string]: any
 }
 
-/**
- * `Operation` objects define the low-level instructions that Slate editors use
- * to apply changes to their internal state. Representing all changes as
- * operations is what allows Slate editors to easily implement history,
- * collaboration, and other features.
- */
-
-type Operation = NodeOperation | SelectionOperation | TextOperation
-
-type NodeOperation =
+export type NodeOperation =
   | InsertNodeOperation
   | MergeNodeOperation
   | MoveNodeOperation
@@ -101,11 +92,20 @@ type NodeOperation =
   | SetNodeOperation
   | SplitNodeOperation
 
-type SelectionOperation = SetSelectionOperation
+export type SelectionOperation = SetSelectionOperation
 
-type TextOperation = InsertTextOperation | RemoveTextOperation
+export type TextOperation = InsertTextOperation | RemoveTextOperation
 
-const Operation = {
+/**
+ * `Operation` objects define the low-level instructions that Slate editors use
+ * to apply changes to their internal state. Representing all changes as
+ * operations is what allows Slate editors to easily implement history,
+ * collaboration, and other features.
+ */
+
+export type Operation = NodeOperation | SelectionOperation | TextOperation
+
+export const Operation = {
   /**
    * Check of a value is a `NodeOperation` object.
    */
@@ -124,78 +124,53 @@ const Operation = {
     }
 
     switch (value.type) {
-      case 'insert_node': {
+      case 'insert_node':
         return Path.isPath(value.path) && Node.isNode(value.node)
-      }
-
-      case 'insert_text': {
+      case 'insert_text':
         return (
           typeof value.offset === 'number' &&
           typeof value.text === 'string' &&
           Path.isPath(value.path)
         )
-      }
-
-      case 'merge_node': {
+      case 'merge_node':
         return (
           typeof value.position === 'number' &&
           (typeof value.target === 'number' || value.target === null) &&
           Path.isPath(value.path) &&
           isPlainObject(value.properties)
         )
-      }
-
-      case 'move_node': {
+      case 'move_node':
         return Path.isPath(value.path) && Path.isPath(value.newPath)
-      }
-
-      case 'remove_node': {
+      case 'remove_node':
         return Path.isPath(value.path) && Node.isNode(value.node)
-      }
-
-      case 'remove_text': {
+      case 'remove_text':
         return (
           typeof value.offset === 'number' &&
           typeof value.text === 'string' &&
           Path.isPath(value.path)
         )
-      }
-
-      case 'set_node': {
+      case 'set_node':
         return (
           Path.isPath(value.path) &&
           isPlainObject(value.properties) &&
           isPlainObject(value.newProperties)
         )
-      }
-
-      case 'set_selection': {
+      case 'set_selection':
         return (
           (value.properties === null && Range.isRange(value.newProperties)) ||
           (value.newProperties === null && Range.isRange(value.properties)) ||
           (isPlainObject(value.properties) &&
             isPlainObject(value.newProperties))
         )
-      }
-
-      case 'set_value': {
-        return (
-          isPlainObject(value.properties) && isPlainObject(value.newProperties)
-        )
-      }
-
-      case 'split_node': {
+      case 'split_node':
         return (
           Path.isPath(value.path) &&
           typeof value.position === 'number' &&
           (typeof value.target === 'number' || value.target === null) &&
           isPlainObject(value.properties)
         )
-      }
-
-      default: {
+      default:
         return false
-      }
     }
   },
 
@@ -300,16 +275,3 @@ const Operation = {
     }
   },
 }
-
-export {
-  InsertNodeOperation,
-  InsertTextOperation,
-  MergeNodeOperation,
-  MoveNodeOperation,
-  RemoveNodeOperation,
-  RemoveTextOperation,
-  SetNodeOperation,
-  SetSelectionOperation,
-  SplitNodeOperation,
-  Operation,
-}
diff --git a/packages/slate/test/interfaces/Element/isElement/editor.js b/packages/slate/test/interfaces/Element/isElement/editor.js
index 844fb2de7..31b78b9dc 100644
--- a/packages/slate/test/interfaces/Element/isElement/editor.js
+++ b/packages/slate/test/interfaces/Element/isElement/editor.js
@@ -2,8 +2,9 @@ import { Element } from 'slate'
 
 export const input = {
   children: [],
-  selection: null,
   operations: [],
+  selection: null,
+  marks: null,
   apply() {},
   exec() {},
   isInline() {},
diff --git a/packages/slate/test/interfaces/Element/isElementList/full-editor.js b/packages/slate/test/interfaces/Element/isElementList/full-editor.js
index c092522d6..de9132044 100644
--- a/packages/slate/test/interfaces/Element/isElementList/full-editor.js
+++ b/packages/slate/test/interfaces/Element/isElementList/full-editor.js
@@ -3,8 +3,9 @@ import { Element } from 'slate'
 export const input = [
   {
     children: [],
-    selection: null,
     operations: [],
+    selection: null,
+    marks: null,
     apply() {},
     exec() {},
     isInline() {},
diff --git a/packages/slate/test/interfaces/Operation/isOperation/set_value.js b/packages/slate/test/interfaces/Operation/isOperation/set_value.js
deleted file mode 100644
index 71bef0491..000000000
--- a/packages/slate/test/interfaces/Operation/isOperation/set_value.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Operation } from 'slate'
-
-export const input = {
-  type: 'set_value',
-  properties: {},
-  newProperties: {},
-}
-
-export const test = value => {
-  return Operation.isOperation(value)
-}
-
-export const output = true
diff --git a/site/examples/check-lists.js b/site/examples/check-lists.js
index d08a44eb1..7cb95f7c4 100644
--- a/site/examples/check-lists.js
+++ b/site/examples/check-lists.js
@@ -13,7 +13,6 @@ import { withHistory } from 'slate-history'
 
 const CheckListsExample = () => {
   const [value, setValue] = useState(initialValue)
-  const [selection, setSelection] = useState(null)
   const renderElement = useCallback(props => <Element {...props} />, [])
   const editor = useMemo(
     () => withChecklists(withHistory(withReact(createEditor()))),
@@ -21,15 +20,7 @@ const CheckListsExample = () => {
   )
 
   return (
-    <Slate
-      editor={editor}
-      value={value}
-      selection={selection}
-      onChange={(value, selection) => {
-        setValue(value)
-        setSelection(selection)
-      }}
-    >
+    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
       <Editable
         renderElement={renderElement}
         placeholder="Get to work…"
diff --git a/site/examples/embeds.js b/site/examples/embeds.js
index 6fd761f86..521890b9f 100644
--- a/site/examples/embeds.js
+++ b/site/examples/embeds.js
@@ -11,18 +11,9 @@ import {
 
 const EmbedsExample = () => {
   const [value, setValue] = useState(initialValue)
-  const [selection, setSelection] = useState(null)
   const editor = useMemo(() => withEmbeds(withReact(createEditor())), [])
   return (
-    <Slate
-      editor={editor}
-      value={value}
-      selection={selection}
-      onChange={(value, selection) => {
-        setValue(value)
-        setSelection(selection)
-      }}
-    >
+    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
       <Editable
         renderElement={props => <Element {...props} />}
         placeholder="Enter some text..."
diff --git a/site/examples/forced-layout.js b/site/examples/forced-layout.js
index 2567cac52..6cbaa01be 100644
--- a/site/examples/forced-layout.js
+++ b/site/examples/forced-layout.js
@@ -35,22 +35,13 @@ const withLayout = editor => {
 
 const ForcedLayoutExample = () => {
   const [value, setValue] = useState(initialValue)
-  const [selection, setSelection] = useState(null)
   const renderElement = useCallback(props => <Element {...props} />, [])
   const editor = useMemo(
     () => withLayout(withHistory(withReact(createEditor()))),
     []
   )
   return (
-    <Slate
-      editor={editor}
-      value={value}
-      selection={selection}
-      onChange={(value, selection) => {
-        setValue(value)
-        setSelection(selection)
-      }}
-    >
+    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
       <Editable
         renderElement={renderElement}
         placeholder="Enter a title…"
diff --git a/site/examples/hovering-toolbar.js b/site/examples/hovering-toolbar.js
index 898ff0331..e78eb906a 100644
--- a/site/examples/hovering-toolbar.js
+++ b/site/examples/hovering-toolbar.js
@@ -9,22 +9,13 @@ import { Range } from 'slate'
 
 const HoveringMenuExample = () => {
   const [value, setValue] = useState(initialValue)
-  const [selection, setSelection] = useState(null)
   const editor = useMemo(
     () => withFormatting(withHistory(withReact(createEditor()))),
     []
   )
 
   return (
-    <Slate
-      editor={editor}
-      value={value}
-      selection={selection}
-      onChange={(value, selection) => {
-        setValue(value)
-        setSelection(selection)
-      }}
-    >
+    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
       <HoveringToolbar />
       <Editable
         renderLeaf={props => <Leaf {...props} />}
diff --git a/site/examples/huge-document.js b/site/examples/huge-document.js
index a63b81ed7..52f750f15 100644
--- a/site/examples/huge-document.js
+++ b/site/examples/huge-document.js
@@ -22,19 +22,10 @@ for (let h = 0; h < HEADINGS; h++) {
 
 const HugeDocumentExample = () => {
   const [value, setValue] = useState(initialValue)
-  const [selection, setSelection] = useState(null)
   const renderElement = useCallback(props => <Element {...props} />, [])
   const editor = useMemo(() => withReact(createEditor()), [])
   return (
-    <Slate
-      editor={editor}
-      value={value}
-      selection={selection}
-      onChange={(value, selection) => {
-        setValue(value)
-        setSelection(selection)
-      }}
-    >
+    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
       <Editable renderElement={renderElement} spellCheck autoFocus />
     </Slate>
   )
diff --git a/site/examples/images.js b/site/examples/images.js
index 7696063b0..fff9d54c6 100644
--- a/site/examples/images.js
+++ b/site/examples/images.js
@@ -17,22 +17,13 @@ import { Button, Icon, Toolbar } from '../components'
 
 const ImagesExample = () => {
   const [value, setValue] = useState(initialValue)
-  const [selection, setSelection] = useState(null)
   const editor = useMemo(
     () => withImages(withHistory(withReact(createEditor()))),
     []
   )
 
   return (
-    <Slate
-      editor={editor}
-      value={value}
-      selection={selection}
-      onChange={(value, selection) => {
-        setValue(value)
-        setSelection(selection)
-      }}
-    >
+    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
       <Toolbar>
         <InsertImageButton />
       </Toolbar>
diff --git a/site/examples/links.js b/site/examples/links.js
index b4a2c905f..565f80e3a 100644
--- a/site/examples/links.js
+++ b/site/examples/links.js
@@ -8,22 +8,13 @@ import { Button, Icon, Toolbar } from '../components'
 
 const LinkExample = () => {
   const [value, setValue] = useState(initialValue)
-  const [selection, setSelection] = useState(null)
   const editor = useMemo(
     () => withLinks(withHistory(withReact(createEditor()))),
     []
   )
 
   return (
-    <Slate
-      editor={editor}
-      value={value}
-      selection={selection}
-      onChange={(value, selection) => {
-        setValue(value)
-        setSelection(selection)
-      }}
-    >
+    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
       <Toolbar>
         <LinkButton />
       </Toolbar>
diff --git a/site/examples/markdown-preview.js b/site/examples/markdown-preview.js
index 353c96eaf..78a3eb227 100644
--- a/site/examples/markdown-preview.js
+++ b/site/examples/markdown-preview.js
@@ -10,7 +10,6 @@ import { css } from 'emotion'
 
 const MarkdownPreviewExample = () => {
   const [value, setValue] = useState(initialValue)
-  const [selection, setSelection] = useState(null)
   const renderLeaf = useCallback(props => <Leaf {...props} />, [])
   const editor = useMemo(() => withHistory(withReact(createEditor())), [])
   const decorate = useCallback(([node, path]) => {
@@ -52,15 +51,7 @@ const MarkdownPreviewExample = () => {
   }, [])
 
   return (
-    <Slate
-      editor={editor}
-      value={value}
-      selection={selection}
-      onChange={(value, selection) => {
-        setValue(value)
-        setSelection(selection)
-      }}
-    >
+    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
       <Editable
         decorate={decorate}
         renderLeaf={renderLeaf}
diff --git a/site/examples/markdown-shortcuts.js b/site/examples/markdown-shortcuts.js
index e64c90105..567f6833f 100644
--- a/site/examples/markdown-shortcuts.js
+++ b/site/examples/markdown-shortcuts.js
@@ -18,22 +18,13 @@ const SHORTCUTS = {
 
 const MarkdownShortcutsExample = () => {
   const [value, setValue] = useState(initialValue)
-  const [selection, setSelection] = useState(null)
   const renderElement = useCallback(props => <Element {...props} />, [])
   const editor = useMemo(
     () => withShortcuts(withReact(withHistory(createEditor()))),
     []
   )
   return (
-    <Slate
-      editor={editor}
-      value={value}
-      selection={selection}
-      onChange={(value, selection) => {
-        setValue(value)
-        setSelection(selection)
-      }}
-    >
+    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
       <Editable
         renderElement={renderElement}
         placeholder="Write some markdown..."
diff --git a/site/examples/mentions.js b/site/examples/mentions.js
index 8a1ab7729..129604077 100644
--- a/site/examples/mentions.js
+++ b/site/examples/mentions.js
@@ -15,7 +15,6 @@ import { Portal } from '../components'
 const MentionExample = () => {
   const ref = useRef()
   const [value, setValue] = useState(initialValue)
-  const [selection, setSelection] = useState(null)
   const [target, setTarget] = useState()
   const [index, setIndex] = useState(0)
   const [search, setSearch] = useState('')
@@ -74,10 +73,8 @@ const MentionExample = () => {
     <Slate
       editor={editor}
       value={value}
-      selection={selection}
-      onChange={(value, selection) => {
+      onChange={value => {
         setValue(value)
-        setSelection(selection)
 
         if (selection && Range.isCollapsed(selection)) {
           const [start] = Range.edges(selection)
diff --git a/site/examples/paste-html.js b/site/examples/paste-html.js
index 207506d43..99bffa03f 100644
--- a/site/examples/paste-html.js
+++ b/site/examples/paste-html.js
@@ -82,7 +82,6 @@ export const deserialize = el => {
 
 const PasteHtmlExample = () => {
   const [value, setValue] = useState(initialValue)
-  const [selection, setSelection] = useState(null)
   const renderElement = useCallback(props => <Element {...props} />, [])
   const renderLeaf = useCallback(props => <Leaf {...props} />, [])
   const editor = useMemo(
@@ -90,15 +89,7 @@ const PasteHtmlExample = () => {
     []
   )
   return (
-    <Slate
-      editor={editor}
-      value={value}
-      selection={selection}
-      onChange={(value, selection) => {
-        setValue(value)
-        setSelection(selection)
-      }}
-    >
+    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
       <Editable
         renderElement={renderElement}
         renderLeaf={renderLeaf}
diff --git a/site/examples/plaintext.js b/site/examples/plaintext.js
index f74e8fe63..6d458703d 100644
--- a/site/examples/plaintext.js
+++ b/site/examples/plaintext.js
@@ -5,18 +5,9 @@ import { withHistory } from 'slate-history'
 
 const PlainTextExample = () => {
   const [value, setValue] = useState(initialValue)
-  const [selection, setSelection] = useState(null)
   const editor = useMemo(() => withHistory(withReact(createEditor())), [])
   return (
-    <Slate
-      editor={editor}
-      value={value}
-      selection={selection}
-      onChange={(value, selection) => {
-        setValue(value)
-        setSelection(selection)
-      }}
-    >
+    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
       <Editable placeholder="Enter some plain text..." />
     </Slate>
   )
diff --git a/site/examples/read-only.js b/site/examples/read-only.js
index 2ca37a8c9..0aca0cb48 100644
--- a/site/examples/read-only.js
+++ b/site/examples/read-only.js
@@ -4,18 +4,9 @@ import { Slate, Editable, withReact } from 'slate-react'
 
 const ReadOnlyExample = () => {
   const [value, setValue] = useState(initialValue)
-  const [selection, setSelection] = useState(null)
   const editor = useMemo(() => withReact(createEditor()), [])
   return (
-    <Slate
-      editor={editor}
-      value={value}
-      selection={selection}
-      onChange={(value, selection) => {
-        setValue(value)
-        setSelection(selection)
-      }}
-    >
+    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
       <Editable readOnly placeholder="Enter some plain text..." />
     </Slate>
   )
diff --git a/site/examples/richtext.js b/site/examples/richtext.js
index 328f9bc82..9c5e3b547 100644
--- a/site/examples/richtext.js
+++ b/site/examples/richtext.js
@@ -9,22 +9,14 @@ import { Button, Icon, Toolbar } from '../components'
 const HOTKEYS = {
   'mod+b': 'bold',
   'mod+i': 'italic',
-  'mod+u': 'underlined',
+  'mod+u': 'underline',
   'mod+`': 'code',
 }
 
-const TEXT_FORMATS = ['bold', 'italic', 'underlined', 'code']
-const LIST_FORMATS = ['numbered-list', 'bulleted-list']
-const BLOCK_FORMATS = [
-  ...LIST_FORMATS,
-  'heading-one',
-  'heading-two',
-  'block-quote',
-]
+const LIST_TYPES = ['numbered-list', 'bulleted-list']
 
 const RichTextExample = () => {
   const [value, setValue] = useState(initialValue)
-  const [selection, setSelection] = useState(null)
   const renderElement = useCallback(props => <Element {...props} />, [])
   const renderLeaf = useCallback(props => <Leaf {...props} />, [])
   const editor = useMemo(
@@ -33,25 +25,17 @@ const RichTextExample = () => {
   )
 
   return (
-    <Slate
-      editor={editor}
-      value={value}
-      selection={selection}
-      onChange={(value, selection) => {
-        setValue(value)
-        setSelection(selection)
-      }}
-    >
+    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
       <Toolbar>
-        <FormatButton format="bold" icon="format_bold" />
-        <FormatButton format="italic" icon="format_italic" />
-        <FormatButton format="underlined" icon="format_underlined" />
-        <FormatButton format="code" icon="code" />
-        <FormatButton format="heading-one" icon="looks_one" />
-        <FormatButton format="heading-two" icon="looks_two" />
-        <FormatButton format="block-quote" icon="format_quote" />
-        <FormatButton format="numbered-list" icon="format_list_numbered" />
-        <FormatButton format="bulleted-list" icon="format_list_bulleted" />
+        <MarkButton format="bold" icon="format_bold" />
+        <MarkButton format="italic" icon="format_italic" />
+        <MarkButton format="underline" icon="format_underlined" />
+        <MarkButton format="code" icon="code" />
+        <BlockButton format="heading-one" icon="looks_one" />
+        <BlockButton format="heading-two" icon="looks_two" />
+        <BlockButton format="block-quote" icon="format_quote" />
+        <BlockButton format="numbered-list" icon="format_list_numbered" />
+        <BlockButton format="bulleted-list" icon="format_list_bulleted" />
       </Toolbar>
       <Editable
         renderElement={renderElement}
@@ -63,7 +47,11 @@ const RichTextExample = () => {
           for (const hotkey in HOTKEYS) {
             if (isHotkey(hotkey, event)) {
               event.preventDefault()
-              editor.exec({ type: 'toggle_format', format: HOTKEYS[hotkey] })
+              const mark = HOTKEYS[hotkey]
+              editor.exec({
+                type: 'format_text',
+                properties: { [mark]: true },
+              })
             }
           }
         }}
@@ -76,31 +64,21 @@ const withRichText = editor => {
   const { exec } = editor
 
   editor.exec = command => {
-    if (command.type === 'toggle_format') {
+    if (command.type === 'format_block') {
       const { format } = command
-      const isActive = isFormatActive(editor, format)
-      const isList = LIST_FORMATS.includes(format)
+      const isActive = isBlockActive(editor, format)
+      const isList = LIST_TYPES.includes(format)
 
-      if (TEXT_FORMATS.includes(format)) {
-        Editor.setNodes(
-          editor,
-          { [format]: isActive ? null : true },
-          { match: 'text', split: true }
-        )
+      for (const f of LIST_TYPES) {
+        Editor.unwrapNodes(editor, { match: { type: f }, split: true })
       }
 
-      if (BLOCK_FORMATS.includes(format)) {
-        for (const f of LIST_FORMATS) {
-          Editor.unwrapNodes(editor, { match: { type: f }, split: true })
-        }
+      Editor.setNodes(editor, {
+        type: isActive ? 'paragraph' : isList ? 'list-item' : format,
+      })
 
-        Editor.setNodes(editor, {
-          type: isActive ? 'paragraph' : isList ? 'list-item' : format,
-        })
-
-        if (!isActive && isList) {
-          Editor.wrapNodes(editor, { type: format, children: [] })
-        }
+      if (!isActive && isList) {
+        Editor.wrapNodes(editor, { type: format, children: [] })
       }
     } else {
       exec(command)
@@ -110,26 +88,18 @@ const withRichText = editor => {
   return editor
 }
 
-const isFormatActive = (editor, format) => {
-  if (TEXT_FORMATS.includes(format)) {
-    const [match] = Editor.nodes(editor, {
-      match: { [format]: true },
-      mode: 'all',
-    })
+const isBlockActive = (editor, format) => {
+  const [match] = Editor.nodes(editor, {
+    match: { type: format },
+    mode: 'all',
+  })
 
-    return !!match
-  }
+  return !!match
+}
 
-  if (BLOCK_FORMATS.includes(format)) {
-    const [match] = Editor.nodes(editor, {
-      match: { type: format },
-      mode: 'all',
-    })
-
-    return !!match
-  }
-
-  return false
+const isMarkActive = (editor, format) => {
+  const marks = Editor.marks(editor)
+  return marks ? marks[format] === true : false
 }
 
 const Element = ({ attributes, children, element }) => {
@@ -164,21 +134,36 @@ const Leaf = ({ attributes, children, leaf }) => {
     children = <em>{children}</em>
   }
 
-  if (leaf.underlined) {
+  if (leaf.underline) {
     children = <u>{children}</u>
   }
 
   return <span {...attributes}>{children}</span>
 }
 
-const FormatButton = ({ format, icon }) => {
+const BlockButton = ({ format, icon }) => {
   const editor = useSlate()
   return (
     <Button
-      active={isFormatActive(editor, format)}
+      active={isBlockActive(editor, format)}
       onMouseDown={event => {
         event.preventDefault()
-        editor.exec({ type: 'toggle_format', format })
+        editor.exec({ type: 'format_block', format })
+      }}
+    >
+      <Icon>{icon}</Icon>
+    </Button>
+  )
+}
+
+const MarkButton = ({ format, icon }) => {
+  const editor = useSlate()
+  return (
+    <Button
+      active={isMarkActive(editor, format)}
+      onMouseDown={event => {
+        event.preventDefault()
+        editor.exec({ type: 'format_text', properties: { [format]: true } })
       }}
     >
       <Icon>{icon}</Icon>
diff --git a/site/examples/search-highlighting.js b/site/examples/search-highlighting.js
index a5661aac5..15c72b5e9 100644
--- a/site/examples/search-highlighting.js
+++ b/site/examples/search-highlighting.js
@@ -8,7 +8,6 @@ import { Icon, Toolbar } from '../components'
 
 const SearchHighlightingExample = () => {
   const [value, setValue] = useState(initialValue)
-  const [selection, setSelection] = useState(null)
   const [search, setSearch] = useState()
   const editor = useMemo(() => withHistory(withReact(createEditor())), [])
   const decorate = useCallback(
@@ -39,15 +38,7 @@ const SearchHighlightingExample = () => {
   )
 
   return (
-    <Slate
-      editor={editor}
-      value={value}
-      selection={selection}
-      onChange={(value, selection) => {
-        setValue(value)
-        setSelection(selection)
-      }}
-    >
+    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
       <Toolbar>
         <div
           className={css`
diff --git a/site/examples/tables.js b/site/examples/tables.js
index 51bd4084c..37794e3b0 100644
--- a/site/examples/tables.js
+++ b/site/examples/tables.js
@@ -5,7 +5,6 @@ import { withHistory } from 'slate-history'
 
 const TablesExample = () => {
   const [value, setValue] = useState(initialValue)
-  const [selection, setSelection] = useState(null)
   const renderElement = useCallback(props => <Element {...props} />, [])
   const renderLeaf = useCallback(props => <Leaf {...props} />, [])
   const editor = useMemo(
@@ -13,15 +12,7 @@ const TablesExample = () => {
     []
   )
   return (
-    <Slate
-      editor={editor}
-      value={value}
-      selection={selection}
-      onChange={(value, selection) => {
-        setValue(value)
-        setSelection(selection)
-      }}
-    >
+    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
       <Editable renderElement={renderElement} renderLeaf={renderLeaf} />
     </Slate>
   )