diff --git a/site/examples/check-lists.tsx b/site/examples/check-lists.tsx
index 3f46d24e3..0fed9641d 100644
--- a/site/examples/check-lists.tsx
+++ b/site/examples/check-lists.tsx
@@ -69,7 +69,7 @@ const CheckListsExample = () => {
   const [value, setValue] = useState<Descendant[]>(initialValue)
   const renderElement = useCallback(props => <Element {...props} />, [])
   const editor = useMemo(
-    () => withChecklists(withHistory(withReact(createEditor()))),
+    () => withReact(withChecklists(withHistory(createEditor()))),
     []
   )
 
diff --git a/site/examples/code-highlighting.tsx b/site/examples/code-highlighting.tsx
index b2ad12a83..48bad98b1 100644
--- a/site/examples/code-highlighting.tsx
+++ b/site/examples/code-highlighting.tsx
@@ -13,7 +13,7 @@ const CodeHighlightingExample = () => {
   const [value, setValue] = useState<Descendant[]>(initialValue)
   const [language, setLanguage] = useState('html')
   const renderLeaf = useCallback(props => <Leaf {...props} />, [])
-  const editor = useMemo(() => withHistory(withReact(createEditor())), [])
+  const editor = useMemo(() => withReact(withHistory(createEditor())), [])
 
   // decorate function depends on the language selected
   const decorate = useCallback(
@@ -99,7 +99,7 @@ const Leaf = ({ attributes, children, leaf }) => {
         ${leaf.comment &&
           css`
             color: slategray;
-          `} 
+          `}
 
         ${(leaf.operator || leaf.url) &&
           css`
diff --git a/site/examples/custom-placeholder.tsx b/site/examples/custom-placeholder.tsx
index 9181e633d..5a0e44f66 100644
--- a/site/examples/custom-placeholder.tsx
+++ b/site/examples/custom-placeholder.tsx
@@ -5,7 +5,7 @@ import { withHistory } from 'slate-history'
 
 const PlainTextExample = () => {
   const [value, setValue] = useState<Descendant[]>(initialValue)
-  const editor = useMemo(() => withHistory(withReact(createEditor())), [])
+  const editor = useMemo(() => withReact(withHistory(createEditor())), [])
   return (
     <Slate editor={editor} value={value} onChange={value => setValue(value)}>
       <Editable
diff --git a/site/examples/editable-voids.tsx b/site/examples/editable-voids.tsx
index 45031e336..b4f90fee8 100644
--- a/site/examples/editable-voids.tsx
+++ b/site/examples/editable-voids.tsx
@@ -11,7 +11,7 @@ import { EditableVoidElement } from './custom-types'
 const EditableVoidsExample = () => {
   const [value, setValue] = useState<Descendant[]>(initialValue)
   const editor = useMemo(
-    () => withEditableVoids(withHistory(withReact(createEditor()))),
+    () => withReact(withEditableVoids(withHistory(createEditor()))),
     []
   )
 
diff --git a/site/examples/embeds.tsx b/site/examples/embeds.tsx
index 561aa9c1a..5e07df1bc 100644
--- a/site/examples/embeds.tsx
+++ b/site/examples/embeds.tsx
@@ -15,7 +15,7 @@ import {
 
 const EmbedsExample = () => {
   const [value, setValue] = useState<Descendant[]>(initialValue)
-  const editor = useMemo(() => withEmbeds(withReact(createEditor())), [])
+  const editor = useMemo(() => withReact(withEmbeds(createEditor())), [])
   return (
     <Slate editor={editor} value={value} onChange={value => setValue(value)}>
       <Editable
diff --git a/site/examples/forced-layout.tsx b/site/examples/forced-layout.tsx
index 6ca6c1122..6c0bd97c6 100644
--- a/site/examples/forced-layout.tsx
+++ b/site/examples/forced-layout.tsx
@@ -65,7 +65,7 @@ const ForcedLayoutExample = () => {
   const [value, setValue] = useState<Descendant[]>(initialValue)
   const renderElement = useCallback(props => <Element {...props} />, [])
   const editor = useMemo(
-    () => withLayout(withHistory(withReact(createEditor()))),
+    () => withReact(withLayout(withHistory(createEditor()))),
     []
   )
   return (
diff --git a/site/examples/hovering-toolbar.tsx b/site/examples/hovering-toolbar.tsx
index 8420f3fd0..902b4319e 100644
--- a/site/examples/hovering-toolbar.tsx
+++ b/site/examples/hovering-toolbar.tsx
@@ -16,7 +16,7 @@ import { Button, Icon, Menu, Portal } from '../components'
 
 const HoveringMenuExample = () => {
   const [value, setValue] = useState<Descendant[]>(initialValue)
-  const editor = useMemo(() => withHistory(withReact(createEditor())), [])
+  const editor = useMemo(() => withReact(withHistory(createEditor())), [])
 
   return (
     <Slate editor={editor} value={value} onChange={value => setValue(value)}>
diff --git a/site/examples/iframe.tsx b/site/examples/iframe.tsx
index e6cd922b4..809299bc1 100644
--- a/site/examples/iframe.tsx
+++ b/site/examples/iframe.tsx
@@ -21,7 +21,7 @@ const IFrameExample = () => {
     []
   )
   const renderLeaf = useCallback(props => <Leaf {...props} />, [])
-  const editor = useMemo(() => withHistory(withReact(createEditor())), [])
+  const editor = useMemo(() => withReact(withHistory(createEditor())), [])
 
   const handleBlur = useCallback(() => ReactEditor.deselect(editor), [editor])
 
diff --git a/site/examples/images.tsx b/site/examples/images.tsx
index 30fb3964a..53bf539ce 100644
--- a/site/examples/images.tsx
+++ b/site/examples/images.tsx
@@ -19,7 +19,7 @@ import { ImageElement } from './custom-types'
 const ImagesExample = () => {
   const [value, setValue] = useState<Descendant[]>(initialValue)
   const editor = useMemo(
-    () => withImages(withHistory(withReact(createEditor()))),
+    () => withImages(withReact(withHistory(createEditor()))),
     []
   )
 
diff --git a/site/examples/links.tsx b/site/examples/links.tsx
index ab66fd2d7..247340566 100644
--- a/site/examples/links.tsx
+++ b/site/examples/links.tsx
@@ -17,7 +17,7 @@ import { Button, Icon, Toolbar } from '../components'
 const LinkExample = () => {
   const [value, setValue] = useState<Descendant[]>(initialValue)
   const editor = useMemo(
-    () => withLinks(withHistory(withReact(createEditor()))),
+    () => withLinks(withReact(withHistory(createEditor()))),
     []
   )
 
diff --git a/site/examples/markdown-preview.tsx b/site/examples/markdown-preview.tsx
index 0d6703f8f..cfbabcc42 100644
--- a/site/examples/markdown-preview.tsx
+++ b/site/examples/markdown-preview.tsx
@@ -11,7 +11,7 @@ import { css } from 'emotion'
 const MarkdownPreviewExample = () => {
   const [value, setValue] = useState<Descendant[]>(initialValue)
   const renderLeaf = useCallback(props => <Leaf {...props} />, [])
-  const editor = useMemo(() => withHistory(withReact(createEditor())), [])
+  const editor = useMemo(() => withReact(withHistory(createEditor())), [])
   const decorate = useCallback(([node, path]) => {
     const ranges = []
 
diff --git a/site/examples/markdown-shortcuts.tsx b/site/examples/markdown-shortcuts.tsx
index ffecace2b..f1307f44a 100644
--- a/site/examples/markdown-shortcuts.tsx
+++ b/site/examples/markdown-shortcuts.tsx
@@ -29,7 +29,7 @@ const MarkdownShortcutsExample = () => {
   const [value, setValue] = useState<Descendant[]>(initialValue)
   const renderElement = useCallback(props => <Element {...props} />, [])
   const editor = useMemo(
-    () => withShortcuts(withReact(withHistory(createEditor()))),
+    () => withReact(withShortcuts(withHistory(createEditor()))),
     []
   )
   return (
diff --git a/site/examples/mentions.tsx b/site/examples/mentions.tsx
index 44d56e989..9935c8783 100644
--- a/site/examples/mentions.tsx
+++ b/site/examples/mentions.tsx
@@ -21,7 +21,7 @@ const MentionExample = () => {
   const [search, setSearch] = useState('')
   const renderElement = useCallback(props => <Element {...props} />, [])
   const editor = useMemo(
-    () => withMentions(withReact(withHistory(createEditor()))),
+    () => withReact(withMentions(withHistory(createEditor()))),
     []
   )
 
diff --git a/site/examples/plaintext.tsx b/site/examples/plaintext.tsx
index 9ba20dda7..bcd4a2806 100644
--- a/site/examples/plaintext.tsx
+++ b/site/examples/plaintext.tsx
@@ -5,7 +5,7 @@ import { withHistory } from 'slate-history'
 
 const PlainTextExample = () => {
   const [value, setValue] = useState<Descendant[]>(initialValue)
-  const editor = useMemo(() => withHistory(withReact(createEditor())), [])
+  const editor = useMemo(() => withReact(withHistory(createEditor())), [])
   return (
     <Slate editor={editor} value={value} onChange={value => setValue(value)}>
       <Editable placeholder="Enter some plain text..." />
diff --git a/site/examples/richtext.tsx b/site/examples/richtext.tsx
index 29bce988c..99d3c9206 100644
--- a/site/examples/richtext.tsx
+++ b/site/examples/richtext.tsx
@@ -25,7 +25,7 @@ const RichTextExample = () => {
   const [value, setValue] = useState<Descendant[]>(initialValue)
   const renderElement = useCallback(props => <Element {...props} />, [])
   const renderLeaf = useCallback(props => <Leaf {...props} />, [])
-  const editor = useMemo(() => withHistory(withReact(createEditor())), [])
+  const editor = useMemo(() => withReact(withHistory(createEditor())), [])
 
   return (
     <Slate editor={editor} value={value} onChange={value => setValue(value)}>
diff --git a/site/examples/scroll-into-view.tsx b/site/examples/scroll-into-view.tsx
index 938a3e597..37a9d487d 100644
--- a/site/examples/scroll-into-view.tsx
+++ b/site/examples/scroll-into-view.tsx
@@ -50,7 +50,7 @@ const ScrollIntoViewExample = () => {
 
 const PlainTextEditor = () => {
   const [value, setValue] = useState<Descendant[]>(initialValue)
-  const editor = useMemo(() => withHistory(withReact(createEditor())), [])
+  const editor = useMemo(() => withReact(withHistory(createEditor())), [])
   return (
     <Slate editor={editor} value={value} onChange={value => setValue(value)}>
       <Editable placeholder="Enter some plain text..." />
diff --git a/site/examples/search-highlighting.tsx b/site/examples/search-highlighting.tsx
index 4731f9ed5..c081b7069 100644
--- a/site/examples/search-highlighting.tsx
+++ b/site/examples/search-highlighting.tsx
@@ -9,7 +9,7 @@ import { Icon, Toolbar } from '../components'
 const SearchHighlightingExample = () => {
   const [value, setValue] = useState<Descendant[]>(initialValue)
   const [search, setSearch] = useState<string | undefined>()
-  const editor = useMemo(() => withHistory(withReact(createEditor())), [])
+  const editor = useMemo(() => withReact(withHistory(createEditor())), [])
   const decorate = useCallback(
     ([node, path]) => {
       const ranges = []
diff --git a/site/examples/shadow-dom.tsx b/site/examples/shadow-dom.tsx
index 30ee46bf4..e03c8509c 100644
--- a/site/examples/shadow-dom.tsx
+++ b/site/examples/shadow-dom.tsx
@@ -29,7 +29,7 @@ const ShadowDOM = () => {
 
 const ShadowEditor = () => {
   const [value, setValue] = useState<Descendant[]>(initialValue)
-  const editor = useMemo(() => withHistory(withReact(createEditor())), [])
+  const editor = useMemo(() => withReact(withHistory(createEditor())), [])
 
   return (
     <Slate editor={editor} value={value} onChange={value => setValue(value)}>
diff --git a/site/examples/tables.tsx b/site/examples/tables.tsx
index 7eee22d50..085fdd1e3 100644
--- a/site/examples/tables.tsx
+++ b/site/examples/tables.tsx
@@ -15,7 +15,7 @@ const TablesExample = () => {
   const renderElement = useCallback(props => <Element {...props} />, [])
   const renderLeaf = useCallback(props => <Leaf {...props} />, [])
   const editor = useMemo(
-    () => withTables(withHistory(withReact(createEditor()))),
+    () => withReact(withTables(withHistory(createEditor()))),
     []
   )
   return (