From 1d7ab974292a3e831908a2ba0aab9fdd8a66fe10 Mon Sep 17 00:00:00 2001
From: Entkenntnis <Entkenntnis@users.noreply.github.com>
Date: Wed, 25 Mar 2020 02:16:32 +0100
Subject: [PATCH] use state to avoid cursor jumping in controlled input (#3552)

Co-authored-by: dal <test@x.com>
---
 site/examples/embeds.js | 32 +++++++++++++++++++++++---------
 1 file changed, 23 insertions(+), 9 deletions(-)

diff --git a/site/examples/embeds.js b/site/examples/embeds.js
index e8317fd54..3d8a7c831 100644
--- a/site/examples/embeds.js
+++ b/site/examples/embeds.js
@@ -63,16 +63,11 @@ const VideoElement = ({ attributes, children, element }) => {
             }}
           />
         </div>
-        <input
-          value={url}
-          onClick={e => e.stopPropagation()}
-          style={{
-            marginTop: '5px',
-            boxSizing: 'border-box',
-          }}
-          onChange={e => {
+        <UrlInput
+          url={url}
+          onChange={val => {
             const path = ReactEditor.findPath(editor, element)
-            Transforms.setNodes(editor, { url: e.target.value }, { at: path })
+            Transforms.setNodes(editor, { url: val }, { at: path })
           }}
         />
       </div>
@@ -81,6 +76,25 @@ const VideoElement = ({ attributes, children, element }) => {
   )
 }
 
+const UrlInput = ({ url, onChange }) => {
+  const [value, setValue] = React.useState(url)
+  return (
+    <input
+      value={value}
+      onClick={e => e.stopPropagation()}
+      style={{
+        marginTop: '5px',
+        boxSizing: 'border-box',
+      }}
+      onChange={e => {
+        const newUrl = e.target.value
+        setValue(newUrl)
+        onChange(newUrl)
+      }}
+    />
+  )
+}
+
 const initialValue = [
   {
     children: [