From 0aaab077928b9dbcc2ee2f99468eb7bbb43625f6 Mon Sep 17 00:00:00 2001
From: Cameron Ackerman <cameron_ackerman@selinc.com>
Date: Wed, 26 Feb 2020 07:48:39 -0800
Subject: [PATCH] fixed some bugs with the input event handler on the embeds
 example (#3516)

* fixed some bugs with the input event handler on the embeds example, got rid of the non functional 'is selected and is focused' conditions for showing the input.

* fix linting error

Co-authored-by: DamareYoh <34608378+DamareYoh@users.noreply.github.com>
---
 site/examples/embeds.js | 50 ++++++++++++-----------------------------
 1 file changed, 14 insertions(+), 36 deletions(-)

diff --git a/site/examples/embeds.js b/site/examples/embeds.js
index f3dc631f6..e8317fd54 100644
--- a/site/examples/embeds.js
+++ b/site/examples/embeds.js
@@ -1,5 +1,5 @@
 import React, { useState, useMemo } from 'react'
-import { Editor, createEditor } from 'slate'
+import { Transforms, createEditor } from 'slate'
 import {
   Slate,
   Editable,
@@ -41,30 +41,10 @@ const Element = props => {
 
 const VideoElement = ({ attributes, children, element }) => {
   const editor = useEditor()
-  const selected = useSelected()
-  const focused = useFocused()
   const { url } = element
   return (
     <div {...attributes}>
-      <div
-        contentEditable={false}
-        style={{
-          position: 'relative',
-          boxShadow: selected && focused ? '0 0 0 3px #B4D5FF' : 'none',
-        }}
-      >
-        <div
-          style={{
-            display: selected && focused ? 'none' : 'block',
-            position: 'absolute',
-            top: '0',
-            left: '0',
-            height: '100%',
-            width: '100%',
-            cursor: 'cell',
-            zIndex: 1,
-          }}
-        />
+      <div contentEditable={false}>
         <div
           style={{
             padding: '75% 0 0 0',
@@ -83,20 +63,18 @@ const VideoElement = ({ attributes, children, element }) => {
             }}
           />
         </div>
-        {selected && focused ? (
-          <input
-            value={url}
-            onClick={e => e.stopPropagation()}
-            style={{
-              marginTop: '5px',
-              boxSizing: 'border-box',
-            }}
-            onChange={value => {
-              const path = ReactEditor.findPath(editor, element)
-              Transforms.setNodes(editor, { url: value }, { at: path })
-            }}
-          />
-        ) : null}
+        <input
+          value={url}
+          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 })
+          }}
+        />
       </div>
       {children}
     </div>