use state to avoid cursor jumping in controlled input (#3552)

Co-authored-by: dal <test@x.com>

site/examples/embeds.js

@@ -63,21 +63,35 @@ const VideoElement = ({ attributes, children, element }) => {
             }}
           />
         </div>
+        <UrlInput
+          url={url}
+          onChange={val => {
+            const path = ReactEditor.findPath(editor, element)
+            Transforms.setNodes(editor, { url: val }, { at: path })
+          }}
+        />
+      </div>
+      {children}
+    </div>
+  )
+}
+
+const UrlInput = ({ url, onChange }) => {
+  const [value, setValue] = React.useState(url)
+  return (
     <input
-          value={url}
+      value={value}
       onClick={e => e.stopPropagation()}
       style={{
         marginTop: '5px',
         boxSizing: 'border-box',
       }}
       onChange={e => {
-            const path = ReactEditor.findPath(editor, element)
-            Transforms.setNodes(editor, { url: e.target.value }, { at: path })
+        const newUrl = e.target.value
+        setValue(newUrl)
+        onChange(newUrl)
       }}
     />
-      </div>
-      {children}
-    </div>
   )
 }