JavaScriptExpert
diff --git a/‎packages/editor/package.json‎
Lines changed: 1 addition & 0 deletions b/‎packages/editor/package.json‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎packages/editor/src/plugins/jsx-blocks/YouTube.js‎
Lines changed: 3 additions & 1 deletion b/‎packages/editor/src/plugins/jsx-blocks/YouTube.js‎
Lines changed: 3 additions & 1 deletion
diff --git a/‎packages/editor/src/plugins/jsx-blocks/index.js‎
Lines changed: 1 addition & 1 deletion b/‎packages/editor/src/plugins/jsx-blocks/index.js‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎packages/editor/src/plugins/live-jsx.js‎
Lines changed: 0 additions & 3 deletions b/‎packages/editor/src/plugins/live-jsx.js‎
Lines changed: 0 additions & 3 deletions
diff --git a/‎yarn.lock‎
Lines changed: 5 additions & 0 deletions b/‎yarn.lock‎
Lines changed: 5 additions & 0 deletions
@@ -19,6 +19,7 @@
     "@styled-system/edit": "^0.0.4",
     "emotion-theming": "^10.0.10",
     "escape-string-regexp": "^2.0.0",
+    "get-youtube-id": "^1.0.1",
     "image-extensions": "^1.1.0",
     "immutable": "^4.0.0-rc.12",
     "is-url": "^1.2.4",
 
@@ -2,6 +2,7 @@
 import { jsx } from '@emotion/core'
 import React, { useState } from 'react'
 import Player from 'react-youtube'
+import getYouTubeID from 'get-youtube-id'
 
 const Form = ({ value, onSubmit }) => {
   const [state, setState] = useState({
@@ -24,7 +25,8 @@ const Form = ({ value, onSubmit }) => {
           name="videoId"
           value={state.videoId}
           onChange={e => {
-            setState({ ...state, videoId: e.target.value })
+            const videoId = getYouTubeID(e.target.value)
+            setState({ ...state, videoId })
           }}
         />
       </label>
 
@@ -2,7 +2,7 @@ import React from 'react'
 import { Data } from 'slate'
 import YouTube from './YouTube'
 
-const setJSXProps = (editor, props, ...args) => {
+const setJSXProps = (editor, props) => {
   editor.setBlocks({ data: { props: Data.create(props) } })
 }
 
 
@@ -64,14 +64,11 @@ export default (opts = {}) => ({
     const { node, attributes, children } = props
     if (node.type !== 'jsx') return next()
 
-    const metadata = node.data.toJS()
-
     return (
       <LiveJSX
         attributes={attributes}
         code={node.getText()}
         children={children}
-        metadata={metadata}
       />
     )
   }
 
@@ -4877,6 +4877,11 @@ get-window@^1.1.1:
   dependencies:
     get-document "1"
 
+get-youtube-id@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/get-youtube-id/-/get-youtube-id-1.0.1.tgz#adb6f475e292d98f98ed5bfb530887656193e157"
+  integrity sha512-5yidLzoLXbtw82a/Wb7LrajkGn29BM6JuLWeHyNfzOGp1weGyW4+7eMz6cP23+etqj27VlOFtq8fFFDMLq/FXQ==
+
 glob-parent@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"
Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@ import React from 'react'`
`2`	`2`	`import { Data } from 'slate'`
`3`	`3`	`import YouTube from './YouTube'`
`4`	`4`
`5`		`-const setJSXProps = (editor, props, ...args) => {`
	`5`	`+const setJSXProps = (editor, props) => {`
`6`	`6`	`editor.setBlocks({ data: { props: Data.create(props) } })`
`7`	`7`	`}`
`8`	`8`
Original file line number	Diff line number	Diff line change
`@@ -64,14 +64,11 @@ export default (opts = {}) => ({`
`64`	`64`	`const { node, attributes, children } = props`
`65`	`65`	`if (node.type !== 'jsx') return next()`
`66`	`66`
`67`		`- const metadata = node.data.toJS()`
`68`		`-`
`69`	`67`	`return (`
`70`	`68`	`<LiveJSX`
`71`	`69`	`attributes={attributes}`
`72`	`70`	`code={node.getText()}`
`73`	`71`	`children={children}`
`74`		`- metadata={metadata}`
`75`	`72`	`/>`
`76`	`73`	`)`
`77`	`74`	`}`