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

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

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: [