Revert "in examples, move withReact in front of withHistory (#4604)" (#4607)

This reverts commit 9cf2f4eea2.

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(
-    () => withReact(withChecklists(withHistory(createEditor()))),
+    () => withChecklists(withHistory(withReact(createEditor()))),
     []
   )
 

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(() => withReact(withHistory(createEditor())), [])
+  const editor = useMemo(() => withHistory(withReact(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`

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(() => withReact(withHistory(createEditor())), [])
+  const editor = useMemo(() => withHistory(withReact(createEditor())), [])
   return (
     <Slate editor={editor} value={value} onChange={value => setValue(value)}>
       <Editable

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(
-    () => withReact(withEditableVoids(withHistory(createEditor()))),
+    () => withEditableVoids(withHistory(withReact(createEditor()))),
     []
   )
 

site/examples/embeds.tsx

@@ -15,7 +15,7 @@ import {
 
 const EmbedsExample = () => {
   const [value, setValue] = useState<Descendant[]>(initialValue)
-  const editor = useMemo(() => withReact(withEmbeds(createEditor())), [])
+  const editor = useMemo(() => withEmbeds(withReact(createEditor())), [])
   return (
     <Slate editor={editor} value={value} onChange={value => setValue(value)}>
       <Editable

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(
-    () => withReact(withLayout(withHistory(createEditor()))),
+    () => withLayout(withHistory(withReact(createEditor()))),
     []
   )
   return (

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(() => withReact(withHistory(createEditor())), [])
+  const editor = useMemo(() => withHistory(withReact(createEditor())), [])
 
   return (
     <Slate editor={editor} value={value} onChange={value => setValue(value)}>

site/examples/iframe.tsx

@@ -21,7 +21,7 @@ const IFrameExample = () => {
     []
   )
   const renderLeaf = useCallback(props => <Leaf {...props} />, [])
-  const editor = useMemo(() => withReact(withHistory(createEditor())), [])
+  const editor = useMemo(() => withHistory(withReact(createEditor())), [])
 
   const handleBlur = useCallback(() => ReactEditor.deselect(editor), [editor])
 

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(withReact(withHistory(createEditor()))),
+    () => withImages(withHistory(withReact(createEditor()))),
     []
   )
 

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(withReact(withHistory(createEditor()))),
+    () => withLinks(withHistory(withReact(createEditor()))),
     []
   )
 

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(() => withReact(withHistory(createEditor())), [])
+  const editor = useMemo(() => withHistory(withReact(createEditor())), [])
   const decorate = useCallback(([node, path]) => {
     const ranges = []
 

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(
-    () => withReact(withShortcuts(withHistory(createEditor()))),
+    () => withShortcuts(withReact(withHistory(createEditor()))),
     []
   )
   return (

site/examples/mentions.tsx

@@ -21,7 +21,7 @@ const MentionExample = () => {
   const [search, setSearch] = useState('')
   const renderElement = useCallback(props => <Element {...props} />, [])
   const editor = useMemo(
-    () => withReact(withMentions(withHistory(createEditor()))),
+    () => withMentions(withReact(withHistory(createEditor()))),
     []
   )
 

site/examples/plaintext.tsx

@@ -5,7 +5,7 @@ import { withHistory } from 'slate-history'
 
 const PlainTextExample = () => {
   const [value, setValue] = useState<Descendant[]>(initialValue)
-  const editor = useMemo(() => withReact(withHistory(createEditor())), [])
+  const editor = useMemo(() => withHistory(withReact(createEditor())), [])
   return (
     <Slate editor={editor} value={value} onChange={value => setValue(value)}>
       <Editable placeholder="Enter some plain text..." />

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(() => withReact(withHistory(createEditor())), [])
+  const editor = useMemo(() => withHistory(withReact(createEditor())), [])
 
   return (
     <Slate editor={editor} value={value} onChange={value => setValue(value)}>

site/examples/scroll-into-view.tsx

@@ -50,7 +50,7 @@ const ScrollIntoViewExample = () => {
 
 const PlainTextEditor = () => {
   const [value, setValue] = useState<Descendant[]>(initialValue)
-  const editor = useMemo(() => withReact(withHistory(createEditor())), [])
+  const editor = useMemo(() => withHistory(withReact(createEditor())), [])
   return (
     <Slate editor={editor} value={value} onChange={value => setValue(value)}>
       <Editable placeholder="Enter some plain text..." />

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(() => withReact(withHistory(createEditor())), [])
+  const editor = useMemo(() => withHistory(withReact(createEditor())), [])
   const decorate = useCallback(
     ([node, path]) => {
       const ranges = []

site/examples/shadow-dom.tsx

@@ -29,7 +29,7 @@ const ShadowDOM = () => {
 
 const ShadowEditor = () => {
   const [value, setValue] = useState<Descendant[]>(initialValue)
-  const editor = useMemo(() => withReact(withHistory(createEditor())), [])
+  const editor = useMemo(() => withHistory(withReact(createEditor())), [])
 
   return (
     <Slate editor={editor} value={value} onChange={value => setValue(value)}>

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(
-    () => withReact(withTables(withHistory(createEditor()))),
+    () => withTables(withHistory(withReact(createEditor()))),
     []
   )
   return (