From 39ba9aadd7ae34c3897ee053229f2986d799b0b9 Mon Sep 17 00:00:00 2001
From: Sunny Hirai <thesunny@gmail.com>
Date: Mon, 29 Mar 2021 08:58:58 -0700
Subject: [PATCH 1/7] Improve custom-types in slate unit tests

---
 .../interfaces/CustomTypes/custom-types.ts    | 52 ++++---------------
 1 file changed, 10 insertions(+), 42 deletions(-)

diff --git a/packages/slate/test/interfaces/CustomTypes/custom-types.ts b/packages/slate/test/interfaces/CustomTypes/custom-types.ts
index 13b60661b..a15f46555 100644
--- a/packages/slate/test/interfaces/CustomTypes/custom-types.ts
+++ b/packages/slate/test/interfaces/CustomTypes/custom-types.ts
@@ -1,61 +1,29 @@
-// import { Descendant, Element, Text, CustomTypes, BaseText } from 'slate'
-
-// export type HeadingElement = {
-//   type: 'heading'
-//   level: number
-//   children: Descendant[]
-// }
-
-// export type ListItemElement = {
-//   type: 'list-item'
-//   depth: number
-//   children: Descendant[]
-// }
-
-// export type CustomText = {
-//   placeholder: string
-//   bold: boolean
-//   italic: boolean
-//   text: string
-// }
-
-// export type BoldCustomText = {
-//   bold: boolean
-//   text: string
-// }
-
-// declare module 'slate' {
-//   interface CustomTypes {
-//     Element: HeadingElement | ListItemElement
-//     Text: CustomText
-//   }
-// }
-
 import {
-  BaseText,
   BaseEditor,
   BaseSelection,
   BasePoint,
   BaseRange,
-  BaseElement,
+  Descendant,
 } from 'slate'
-// import { Prettify } from './prettify'
 
 export type HeadingElement = {
   type: 'heading'
   level: number
-} & BaseElement
+  children: Descendant[]
+}
 
 export type ListItemElement = {
   type: 'list-item'
   depth: number
-} & BaseElement
+  children: Descendant[]
+}
 
 export type CustomText = {
-  placeholder: string
-  bold: boolean
-  italic: boolean
-} & BaseText
+  placeholder?: string
+  bold?: boolean
+  italic?: boolean
+  text: string
+}
 
 export type CustomElement = HeadingElement | ListItemElement
 

From 28e299991a189684b502139a20d0251a6fe29329 Mon Sep 17 00:00:00 2001
From: Sunny Hirai <thesunny@gmail.com>
Date: Mon, 29 Mar 2021 09:08:16 -0700
Subject: [PATCH 2/7] Remove unused imports in Editor

---
 packages/slate/src/interfaces/editor.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/slate/src/interfaces/editor.ts b/packages/slate/src/interfaces/editor.ts
index 58876211c..2bddceb05 100755
--- a/packages/slate/src/interfaces/editor.ts
+++ b/packages/slate/src/interfaces/editor.ts
@@ -1,5 +1,4 @@
 import isPlainObject from 'is-plain-object'
-import { createDraft, finishDraft, isDraft } from 'immer'
 import { reverse as reverseText } from 'esrever'
 
 import {

From 35bee40d23ffad643e3673607046b5609b7a6f53 Mon Sep 17 00:00:00 2001
From: Sunny Hirai <thesunny@gmail.com>
Date: Mon, 29 Mar 2021 09:09:13 -0700
Subject: [PATCH 3/7] Remove unused ExtendType in Node

---
 packages/slate/src/interfaces/node.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/slate/src/interfaces/node.ts b/packages/slate/src/interfaces/node.ts
index e9e35b73d..4e8b25e9c 100755
--- a/packages/slate/src/interfaces/node.ts
+++ b/packages/slate/src/interfaces/node.ts
@@ -1,7 +1,6 @@
 import { produce } from 'immer'
 import { Editor, Path, Range, Text } from '..'
 import { Element, ElementEntry } from './element'
-import { ExtendedType } from './custom-types'
 
 /**
  * The `Node` union type represents all of the different types of nodes that

From 0e22da7a59131145ce7624bdf41f1770ba3ff914 Mon Sep 17 00:00:00 2001
From: Sunny Hirai <thesunny@gmail.com>
Date: Mon, 29 Mar 2021 09:29:32 -0700
Subject: [PATCH 4/7] Improved ExtendedType to limit extending only known
 custom types

---
 packages/slate/src/interfaces/custom-types.ts | 24 ++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/packages/slate/src/interfaces/custom-types.ts b/packages/slate/src/interfaces/custom-types.ts
index c8999cd38..397112a05 100644
--- a/packages/slate/src/interfaces/custom-types.ts
+++ b/packages/slate/src/interfaces/custom-types.ts
@@ -2,10 +2,28 @@
  * Extendable Custom Types Interface
  */
 
+type ExtendableTypes =
+  | 'Editor'
+  | 'Element'
+  | 'Text'
+  | 'Selection'
+  | 'Range'
+  | 'Point'
+  | 'InsertNodeOperation'
+  | 'InsertTextOperation'
+  | 'MergeNodeOperation'
+  | 'MoveNodeOperation'
+  | 'RemoveNodeOperation'
+  | 'RemoveTextOperation'
+  | 'SetNodeOperation'
+  | 'SetSelectionOperation'
+  | 'SplitNodeOperation'
+
 export interface CustomTypes {
   [key: string]: unknown
 }
 
-export type ExtendedType<K extends string, B> = unknown extends CustomTypes[K]
-  ? B
-  : CustomTypes[K]
+export type ExtendedType<
+  K extends ExtendableTypes,
+  B
+> = unknown extends CustomTypes[K] ? B : CustomTypes[K]

From b88149c2f95184f01fc2d291c3764d3d66c47528 Mon Sep 17 00:00:00 2001
From: Sunny Hirai <thesunny@gmail.com>
Date: Mon, 29 Mar 2021 09:37:24 -0700
Subject: [PATCH 5/7] Remove unused imports from all examples

---
 site/examples/check-lists.tsx         | 1 -
 site/examples/code-highlighting.tsx   | 9 +--------
 site/examples/editable-voids.tsx      | 1 -
 site/examples/hovering-toolbar.tsx    | 1 -
 site/examples/iframe.tsx              | 1 -
 site/examples/images.tsx              | 1 -
 site/examples/links.tsx               | 1 -
 site/examples/markdown-preview.tsx    | 2 +-
 site/examples/markdown-shortcuts.tsx  | 1 -
 site/examples/mentions.tsx            | 1 -
 site/examples/paste-html.tsx          | 1 -
 site/examples/read-only.tsx           | 2 +-
 site/examples/richtext.tsx            | 1 -
 site/examples/search-highlighting.tsx | 2 +-
 14 files changed, 4 insertions(+), 21 deletions(-)

diff --git a/site/examples/check-lists.tsx b/site/examples/check-lists.tsx
index 65c5ff613..359e305ff 100644
--- a/site/examples/check-lists.tsx
+++ b/site/examples/check-lists.tsx
@@ -8,7 +8,6 @@ import {
   ReactEditor,
 } from 'slate-react'
 import {
-  Node,
   Editor,
   Transforms,
   Range,
diff --git a/site/examples/code-highlighting.tsx b/site/examples/code-highlighting.tsx
index f624b0123..6899fd039 100644
--- a/site/examples/code-highlighting.tsx
+++ b/site/examples/code-highlighting.tsx
@@ -5,14 +5,7 @@ import 'prismjs/components/prism-sql'
 import 'prismjs/components/prism-java'
 import React, { useState, useCallback, useMemo } from 'react'
 import { Slate, Editable, withReact } from 'slate-react'
-import {
-  Text,
-  createEditor,
-  Node,
-  Element as SlateElement,
-  BaseEditor,
-  Descendant,
-} from 'slate'
+import { Text, createEditor, Element as SlateElement, Descendant } from 'slate'
 import { withHistory } from 'slate-history'
 import { css } from 'emotion'
 
diff --git a/site/examples/editable-voids.tsx b/site/examples/editable-voids.tsx
index 35f0e2124..bcbda8c90 100644
--- a/site/examples/editable-voids.tsx
+++ b/site/examples/editable-voids.tsx
@@ -2,7 +2,6 @@ import React, { useState, useMemo } from 'react'
 import {
   Transforms,
   createEditor,
-  Node,
   Element as SlateElement,
   Descendant,
 } from 'slate'
diff --git a/site/examples/hovering-toolbar.tsx b/site/examples/hovering-toolbar.tsx
index bbe5c9569..5de0dc68b 100644
--- a/site/examples/hovering-toolbar.tsx
+++ b/site/examples/hovering-toolbar.tsx
@@ -5,7 +5,6 @@ import {
   Transforms,
   Text,
   createEditor,
-  Node,
   Element,
   Descendant,
 } from 'slate'
diff --git a/site/examples/iframe.tsx b/site/examples/iframe.tsx
index b208ee42b..860c847b6 100644
--- a/site/examples/iframe.tsx
+++ b/site/examples/iframe.tsx
@@ -6,7 +6,6 @@ import {
   Editor,
   Element as SlateElement,
   createEditor,
-  Node,
   Descendant,
 } from 'slate'
 import { withHistory } from 'slate-history'
diff --git a/site/examples/images.tsx b/site/examples/images.tsx
index c18c18d45..335013531 100644
--- a/site/examples/images.tsx
+++ b/site/examples/images.tsx
@@ -2,7 +2,6 @@ import React, { useState, useMemo } from 'react'
 import imageExtensions from 'image-extensions'
 import isUrl from 'is-url'
 import {
-  Node,
   Transforms,
   createEditor,
   Element as SlateElement,
diff --git a/site/examples/links.tsx b/site/examples/links.tsx
index 71028394f..66e1e14ff 100644
--- a/site/examples/links.tsx
+++ b/site/examples/links.tsx
@@ -2,7 +2,6 @@ import React, { useState, useMemo } from 'react'
 import isUrl from 'is-url'
 import { Slate, Editable, withReact, useSlate } from 'slate-react'
 import {
-  Node,
   Transforms,
   Editor,
   Range,
diff --git a/site/examples/markdown-preview.tsx b/site/examples/markdown-preview.tsx
index 55a2e6f85..280cbaab7 100644
--- a/site/examples/markdown-preview.tsx
+++ b/site/examples/markdown-preview.tsx
@@ -1,7 +1,7 @@
 import Prism from 'prismjs'
 import React, { useState, useCallback, useMemo } from 'react'
 import { Slate, Editable, withReact } from 'slate-react'
-import { Node, Text, createEditor, Element, Descendant } from 'slate'
+import { Text, createEditor, Element, Descendant } from 'slate'
 import { withHistory } from 'slate-history'
 import { css } from 'emotion'
 
diff --git a/site/examples/markdown-shortcuts.tsx b/site/examples/markdown-shortcuts.tsx
index a6f73b4b1..e4422644e 100644
--- a/site/examples/markdown-shortcuts.tsx
+++ b/site/examples/markdown-shortcuts.tsx
@@ -1,7 +1,6 @@
 import React, { useState, useCallback, useMemo } from 'react'
 import { Slate, Editable, withReact } from 'slate-react'
 import {
-  Node,
   Editor,
   Transforms,
   Range,
diff --git a/site/examples/mentions.tsx b/site/examples/mentions.tsx
index 5d69c516b..c36ef8b6a 100644
--- a/site/examples/mentions.tsx
+++ b/site/examples/mentions.tsx
@@ -1,6 +1,5 @@
 import React, { useMemo, useCallback, useRef, useEffect, useState } from 'react'
 import {
-  Node,
   Editor,
   Transforms,
   Range,
diff --git a/site/examples/paste-html.tsx b/site/examples/paste-html.tsx
index e4e154394..fd2dc3d0b 100644
--- a/site/examples/paste-html.tsx
+++ b/site/examples/paste-html.tsx
@@ -1,7 +1,6 @@
 import React, { useState, useCallback, useMemo } from 'react'
 import { jsx } from 'slate-hyperscript'
 import {
-  Node,
   Transforms,
   createEditor,
   Element as SlateElement,
diff --git a/site/examples/read-only.tsx b/site/examples/read-only.tsx
index e27317db2..75a02a4a6 100644
--- a/site/examples/read-only.tsx
+++ b/site/examples/read-only.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useMemo } from 'react'
-import { createEditor, Descendant, Element, Node } from 'slate'
+import { createEditor, Descendant, Element } from 'slate'
 import { Slate, Editable, withReact } from 'slate-react'
 
 const ReadOnlyExample = () => {
diff --git a/site/examples/richtext.tsx b/site/examples/richtext.tsx
index bc530742a..294c904c9 100644
--- a/site/examples/richtext.tsx
+++ b/site/examples/richtext.tsx
@@ -6,7 +6,6 @@ import {
   Transforms,
   createEditor,
   Descendant,
-  Node,
   Element as SlateElement,
 } from 'slate'
 import { withHistory } from 'slate-history'
diff --git a/site/examples/search-highlighting.tsx b/site/examples/search-highlighting.tsx
index abe1a331e..38285f8d8 100644
--- a/site/examples/search-highlighting.tsx
+++ b/site/examples/search-highlighting.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useCallback, useMemo } from 'react'
 import { Slate, Editable, withReact } from 'slate-react'
-import { Text, Node, Descendant, createEditor } from 'slate'
+import { Text, Descendant, createEditor } from 'slate'
 import { css } from 'emotion'
 import { withHistory } from 'slate-history'
 

From 4661f19d4b5a109070878f794a2085214e973dc1 Mon Sep 17 00:00:00 2001
From: Sunny Hirai <thesunny@gmail.com>
Date: Mon, 29 Mar 2021 09:38:20 -0700
Subject: [PATCH 6/7] Add language type for examples Readme.md code blocks

---
 site/examples/Readme.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/site/examples/Readme.md b/site/examples/Readme.md
index abab152c9..b728ac198 100644
--- a/site/examples/Readme.md
+++ b/site/examples/Readme.md
@@ -20,19 +20,19 @@ If you have an idea for an example that shows a common use case, pull request it
 
 To get the examples running on your machine, you need to have the Slate repository cloned to your computer. After that, you need to `cd` into the directory where you cloned it, and install the dependencies with `yarn` and build the monorepo:
 
-```
+```sh
 yarn install
 yarn build
 ```
 
 Then start the watcher and examples server:
 
-```
+```sh
 yarn start
 ```
 
 Now you can open up `http://localhost:3000` in your browser and you'll see the examples site. Any changes you make to the source code will be immediately reflected when you refresh the page. You can open the examples URL quickly with:
 
-```
+```sh
 yarn open
 ```

From c803e5ffd03110edf1667bb871d0a1a7ec1c9da9 Mon Sep 17 00:00:00 2001
From: Sunny Hirai <thesunny@gmail.com>
Date: Mon, 29 Mar 2021 09:49:44 -0700
Subject: [PATCH 7/7] Switch initialValue type in examples to Descendant

---
 site/examples/check-lists.tsx        |  2 +-
 site/examples/code-highlighting.tsx  |  2 +-
 site/examples/editable-voids.tsx     |  9 ++-------
 site/examples/embeds.tsx             |  5 +----
 site/examples/forced-layout.tsx      |  2 +-
 site/examples/hovering-toolbar.tsx   |  2 +-
 site/examples/huge-document.tsx      |  4 ++--
 site/examples/iframe.tsx             |  9 ++-------
 site/examples/images.tsx             |  9 ++-------
 site/examples/links.tsx              |  2 +-
 site/examples/markdown-preview.tsx   |  2 +-
 site/examples/markdown-shortcuts.tsx |  2 +-
 site/examples/mentions.tsx           | 11 ++---------
 site/examples/paste-html.tsx         |  9 ++-------
 site/examples/plaintext.tsx          |  4 ++--
 site/examples/read-only.tsx          |  2 +-
 site/examples/richtext.tsx           |  2 +-
 17 files changed, 24 insertions(+), 54 deletions(-)

diff --git a/site/examples/check-lists.tsx b/site/examples/check-lists.tsx
index 359e305ff..9cf074ce7 100644
--- a/site/examples/check-lists.tsx
+++ b/site/examples/check-lists.tsx
@@ -19,7 +19,7 @@ import {
 import { css } from 'emotion'
 import { withHistory } from 'slate-history'
 
-const initialValue: SlateElement[] = [
+const initialValue: Descendant[] = [
   {
     type: 'paragraph',
     children: [
diff --git a/site/examples/code-highlighting.tsx b/site/examples/code-highlighting.tsx
index 6899fd039..b2ad12a83 100644
--- a/site/examples/code-highlighting.tsx
+++ b/site/examples/code-highlighting.tsx
@@ -142,7 +142,7 @@ const Leaf = ({ attributes, children, leaf }) => {
   )
 }
 
-const initialValue: SlateElement[] = [
+const initialValue: Descendant[] = [
   {
     type: 'paragraph',
     children: [
diff --git a/site/examples/editable-voids.tsx b/site/examples/editable-voids.tsx
index bcbda8c90..45031e336 100644
--- a/site/examples/editable-voids.tsx
+++ b/site/examples/editable-voids.tsx
@@ -1,10 +1,5 @@
 import React, { useState, useMemo } from 'react'
-import {
-  Transforms,
-  createEditor,
-  Element as SlateElement,
-  Descendant,
-} from 'slate'
+import { Transforms, createEditor, Descendant } from 'slate'
 import { Slate, Editable, useSlateStatic, withReact } from 'slate-react'
 import { withHistory } from 'slate-history'
 import { css } from 'emotion'
@@ -136,7 +131,7 @@ const InsertEditableVoidButton = () => {
   )
 }
 
-const initialValue: SlateElement[] = [
+const initialValue: Descendant[] = [
   {
     type: 'paragraph',
     children: [
diff --git a/site/examples/embeds.tsx b/site/examples/embeds.tsx
index c8a13e2a9..561aa9c1a 100644
--- a/site/examples/embeds.tsx
+++ b/site/examples/embeds.tsx
@@ -2,7 +2,6 @@ import React, { useState, useMemo } from 'react'
 import {
   Transforms,
   createEditor,
-  Node,
   Element as SlateElement,
   Descendant,
 } from 'slate'
@@ -12,8 +11,6 @@ import {
   withReact,
   useSlateStatic,
   ReactEditor,
-  useFocused,
-  useSelected,
 } from 'slate-react'
 
 const EmbedsExample = () => {
@@ -104,7 +101,7 @@ const UrlInput = ({ url, onChange }) => {
   )
 }
 
-const initialValue: SlateElement[] = [
+const initialValue: Descendant[] = [
   {
     type: 'paragraph',
     children: [
diff --git a/site/examples/forced-layout.tsx b/site/examples/forced-layout.tsx
index 3905a5ed7..7d2c5f6a4 100644
--- a/site/examples/forced-layout.tsx
+++ b/site/examples/forced-layout.tsx
@@ -75,7 +75,7 @@ const Element = ({ attributes, children, element }) => {
   }
 }
 
-const initialValue: SlateElement[] = [
+const initialValue: Descendant[] = [
   {
     type: 'title',
     children: [{ text: 'Enforce Your Layout!' }],
diff --git a/site/examples/hovering-toolbar.tsx b/site/examples/hovering-toolbar.tsx
index 5de0dc68b..23258923d 100644
--- a/site/examples/hovering-toolbar.tsx
+++ b/site/examples/hovering-toolbar.tsx
@@ -147,7 +147,7 @@ const FormatButton = ({ format, icon }) => {
   )
 }
 
-const initialValue: Element[] = [
+const initialValue: Descendant[] = [
   {
     type: 'paragraph',
     children: [
diff --git a/site/examples/huge-document.tsx b/site/examples/huge-document.tsx
index 6c5986053..20746e999 100644
--- a/site/examples/huge-document.tsx
+++ b/site/examples/huge-document.tsx
@@ -1,11 +1,11 @@
 import React, { useState, useMemo, useCallback } from 'react'
 import faker from 'faker'
-import { Element as SlateElement, Node, createEditor, Descendant } from 'slate'
+import { createEditor, Descendant } from 'slate'
 import { Slate, Editable, withReact } from 'slate-react'
 
 const HEADINGS = 100
 const PARAGRAPHS = 7
-const initialValue: SlateElement[] = []
+const initialValue: Descendant[] = []
 
 for (let h = 0; h < HEADINGS; h++) {
   initialValue.push({
diff --git a/site/examples/iframe.tsx b/site/examples/iframe.tsx
index 860c847b6..e6cd922b4 100644
--- a/site/examples/iframe.tsx
+++ b/site/examples/iframe.tsx
@@ -2,12 +2,7 @@ import React, { useCallback, useMemo, useState } from 'react'
 import { createPortal } from 'react-dom'
 import isHotkey from 'is-hotkey'
 import { Editable, withReact, useSlate, Slate, ReactEditor } from 'slate-react'
-import {
-  Editor,
-  Element as SlateElement,
-  createEditor,
-  Descendant,
-} from 'slate'
+import { Editor, createEditor, Descendant } from 'slate'
 import { withHistory } from 'slate-history'
 
 import { Button, Icon, Toolbar } from '../components'
@@ -122,7 +117,7 @@ const IFrame = ({ children, ...props }) => {
   )
 }
 
-const initialValue: SlateElement[] = [
+const initialValue: Descendant[] = [
   {
     type: 'paragraph',
     children: [
diff --git a/site/examples/images.tsx b/site/examples/images.tsx
index 335013531..5416303e5 100644
--- a/site/examples/images.tsx
+++ b/site/examples/images.tsx
@@ -1,12 +1,7 @@
 import React, { useState, useMemo } from 'react'
 import imageExtensions from 'image-extensions'
 import isUrl from 'is-url'
-import {
-  Transforms,
-  createEditor,
-  Element as SlateElement,
-  Descendant,
-} from 'slate'
+import { Transforms, createEditor, Descendant } from 'slate'
 import {
   Slate,
   Editable,
@@ -137,7 +132,7 @@ const isImageUrl = url => {
   return imageExtensions.includes(ext)
 }
 
-const initialValue: SlateElement[] = [
+const initialValue: Descendant[] = [
   {
     type: 'paragraph',
     children: [
diff --git a/site/examples/links.tsx b/site/examples/links.tsx
index 66e1e14ff..ffb271dea 100644
--- a/site/examples/links.tsx
+++ b/site/examples/links.tsx
@@ -134,7 +134,7 @@ const LinkButton = () => {
   )
 }
 
-const initialValue: SlateElement[] = [
+const initialValue: Descendant[] = [
   {
     type: 'paragraph',
     children: [
diff --git a/site/examples/markdown-preview.tsx b/site/examples/markdown-preview.tsx
index 280cbaab7..0d6703f8f 100644
--- a/site/examples/markdown-preview.tsx
+++ b/site/examples/markdown-preview.tsx
@@ -109,7 +109,7 @@ const Leaf = ({ attributes, children, leaf }) => {
   )
 }
 
-const initialValue: Element[] = [
+const initialValue: Descendant[] = [
   {
     type: 'paragraph',
     children: [
diff --git a/site/examples/markdown-shortcuts.tsx b/site/examples/markdown-shortcuts.tsx
index e4422644e..ffecace2b 100644
--- a/site/examples/markdown-shortcuts.tsx
+++ b/site/examples/markdown-shortcuts.tsx
@@ -160,7 +160,7 @@ const Element = ({ attributes, children, element }) => {
   }
 }
 
-const initialValue: SlateElement[] = [
+const initialValue: Descendant[] = [
   {
     type: 'paragraph',
     children: [
diff --git a/site/examples/mentions.tsx b/site/examples/mentions.tsx
index c36ef8b6a..dac03f7b2 100644
--- a/site/examples/mentions.tsx
+++ b/site/examples/mentions.tsx
@@ -1,12 +1,5 @@
 import React, { useMemo, useCallback, useRef, useEffect, useState } from 'react'
-import {
-  Editor,
-  Transforms,
-  Range,
-  createEditor,
-  Element as SlateElement,
-  Descendant,
-} from 'slate'
+import { Editor, Transforms, Range, createEditor, Descendant } from 'slate'
 import { withHistory } from 'slate-history'
 import {
   Slate,
@@ -205,7 +198,7 @@ const Mention = ({ attributes, children, element }) => {
   )
 }
 
-const initialValue: SlateElement[] = [
+const initialValue: Descendant[] = [
   {
     type: 'paragraph',
     children: [
diff --git a/site/examples/paste-html.tsx b/site/examples/paste-html.tsx
index fd2dc3d0b..9f6007139 100644
--- a/site/examples/paste-html.tsx
+++ b/site/examples/paste-html.tsx
@@ -1,11 +1,6 @@
 import React, { useState, useCallback, useMemo } from 'react'
 import { jsx } from 'slate-hyperscript'
-import {
-  Transforms,
-  createEditor,
-  Element as SlateElement,
-  Descendant,
-} from 'slate'
+import { Transforms, createEditor, Descendant } from 'slate'
 import { withHistory } from 'slate-history'
 import { css } from 'emotion'
 import {
@@ -216,7 +211,7 @@ const Leaf = ({ attributes, children, leaf }) => {
   return <span {...attributes}>{children}</span>
 }
 
-const initialValue: SlateElement[] = [
+const initialValue: Descendant[] = [
   {
     type: 'paragraph',
     children: [
diff --git a/site/examples/plaintext.tsx b/site/examples/plaintext.tsx
index a96e177e3..9ba20dda7 100644
--- a/site/examples/plaintext.tsx
+++ b/site/examples/plaintext.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useMemo } from 'react'
-import { createEditor, Element, Descendant } from 'slate'
+import { createEditor, Descendant } from 'slate'
 import { Slate, Editable, withReact } from 'slate-react'
 import { withHistory } from 'slate-history'
 
@@ -13,7 +13,7 @@ const PlainTextExample = () => {
   )
 }
 
-const initialValue: Element[] = [
+const initialValue: Descendant[] = [
   {
     type: 'paragraph',
     children: [
diff --git a/site/examples/read-only.tsx b/site/examples/read-only.tsx
index 75a02a4a6..41aaff524 100644
--- a/site/examples/read-only.tsx
+++ b/site/examples/read-only.tsx
@@ -12,7 +12,7 @@ const ReadOnlyExample = () => {
   )
 }
 
-const initialValue: Element[] = [
+const initialValue: Descendant[] = [
   {
     type: 'paragraph',
     children: [
diff --git a/site/examples/richtext.tsx b/site/examples/richtext.tsx
index 294c904c9..243a182b0 100644
--- a/site/examples/richtext.tsx
+++ b/site/examples/richtext.tsx
@@ -175,7 +175,7 @@ const MarkButton = ({ format, icon }) => {
   )
 }
 
-const initialValue: SlateElement[] = [
+const initialValue: Descendant[] = [
   {
     type: 'paragraph',
     children: [