From 1c291656614246e071bfcc4d4d7fd1002ab880a8 Mon Sep 17 00:00:00 2001
From: Entkenntnis <Entkenntnis@users.noreply.github.com>
Date: Sat, 21 Sep 2019 19:44:57 +0200
Subject: [PATCH] fix cursor jumping to end in embeds example (#3014)

* fix cursor jumping to end in embeds example

* prettier

* prettier again
---
 examples/embeds/video.js | 34 ++++++++++++++++++++++++++++++----
 1 file changed, 30 insertions(+), 4 deletions(-)

diff --git a/examples/embeds/video.js b/examples/embeds/video.js
index 8b4fa0f7d..292947d81 100644
--- a/examples/embeds/video.js
+++ b/examples/embeds/video.js
@@ -13,8 +13,7 @@ class Video extends React.Component {
    * @param {Event} e
    */
 
-  onChange = e => {
-    const video = e.target.value
+  onChange = video => {
     const { node, editor } = this.props
     editor.setNodeByKey(node.key, { data: { video } })
   }
@@ -108,8 +107,8 @@ class Video extends React.Component {
     }
 
     return (
-      <input
-        value={video}
+      <VideoUrlInput
+        defaultValue={video}
         onChange={this.onChange}
         onClick={this.onClick}
         style={style}
@@ -118,6 +117,33 @@ class Video extends React.Component {
   }
 }
 
+/**
+ * The video URL input as controlled input to avoid loosing cursor position.
+ *
+ * @type {Component}
+ */
+
+const VideoUrlInput = props => {
+  const [val, setVal] = React.useState(props.defaultValue)
+
+  const onChange = React.useCallback(
+    e => {
+      setVal(e.target.value)
+      props.onChange(e.target.value)
+    },
+    [props.onChange]
+  )
+
+  return (
+    <input
+      value={val}
+      onChange={onChange}
+      onClick={props.onClick}
+      style={props.style}
+    />
+  )
+}
+
 /**
  * Export.
  */