feat(extension/youtube): ✨ new youtube embed extension

demos/src/Experiments/Youtube/React/index.jsx

@@ -0,0 +1,69 @@
+import './styles.scss'
+
+import React from 'react'
+
+import YouTube from '@tiptap/extension-youtube'
+import { EditorContent, useEditor } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+
+const MenuBar = ({ editor }) => {
+  const widthRef = React.useRef(null)
+  const heightRef = React.useRef(null)
+
+  React.useEffect(() => {
+    if (widthRef.current && heightRef.current) {
+      widthRef.current.value = 640
+      heightRef.current.value = 480
+    }
+  }, [widthRef.current, heightRef.current])
+
+  if (!editor) {
+    return null
+  }
+
+  const addYouTubeVideo = () => {
+    const url = prompt('Enter YouTube URL')
+
+    editor.commands.setYoutubeVideo({
+      src: url,
+      width: Math.max(320, parseInt(widthRef.current.value, 10)) || 640,
+      height: Math.max(180, parseInt(heightRef.current.value, 10)) || 480,
+    })
+  }
+
+  return (
+    <>
+      <button id="add" onClick={addYouTubeVideo}>Add youtube video</button>
+      <input id="width" type="number" min="320" max="1024" ref={widthRef} placeholder="width" />
+      <input id="height" type="number" min="180" max="720" ref={heightRef} placeholder="height" />
+    </>
+  )
+}
+
+export default () => {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      YouTube,
+    ],
+    content: `
+      <p>Tiptap now supports youtube embeds! Awesome!</p>
+      <div data-youtube-video>
+        <iframe src="https://www.youtube.com/watch?v=cqHqLQgVCgY"></iframe>
+      </div>
+      <p>Try adding your own video to this editor!</p>
+    `,
+    editorProps: {
+      attributes: {
+        spellcheck: 'false',
+      },
+    },
+  })
+
+  return (
+    <div>
+      <MenuBar editor={editor} />
+      <EditorContent editor={editor} />
+    </div>
+  )
+}

demos/src/Experiments/Youtube/React/index.spec.js

@@ -0,0 +1,60 @@
+context('/src/Experiments/Youtube/React/', () => {
+  before(() => {
+    cy.visit('/src/Experiments/Youtube/React/')
+  })
+
+  beforeEach(() => {
+    cy.get('.ProseMirror').type('{selectall}{backspace}')
+  })
+
+  it('adds a video', () => {
+    cy.window().then(win => {
+      cy.stub(win, 'prompt', () => 'https://music.youtube.com/watch?v=hBp4dgE7Bho&feature=share')
+      cy.get('#add').eq(0).click()
+      cy.get('.ProseMirror div[data-youtube-video] iframe')
+        .should('have.length', 1)
+        .should('have.attr', 'src', 'https://www.youtube.com/embed/hBp4dgE7Bho?controls=0')
+    })
+  })
+
+  it('adds a video with 320 width and 240 height', () => {
+    cy.window().then(win => {
+      cy.stub(win, 'prompt', () => 'https://music.youtube.com/watch?v=hBp4dgE7Bho&feature=share')
+      cy.get('#width').type('{selectall}{backspace}320')
+      cy.get('#height').type('{selectall}{backspace}240')
+      cy.get('#add').eq(0).click()
+      cy.get('.ProseMirror div[data-youtube-video] iframe').should('have.length', 1)
+        .should('have.attr', 'src', 'https://www.youtube.com/embed/hBp4dgE7Bho?controls=0')
+        .should('have.css', 'width', '320px')
+        .should('have.css', 'height', '240px')
+    })
+  })
+
+  it('replaces a video', () => {
+    cy.window().then(win => {
+      let runs = 0
+
+      cy.stub(win, 'prompt', () => {
+        runs += 1
+        if (runs === 1) {
+          return 'https://music.youtube.com/watch?v=hBp4dgE7Bho&feature=share'
+        }
+        return 'https://music.youtube.com/watch?v=wRakoMYVHm8'
+      })
+
+      cy.get('#add').eq(0).click()
+      cy.get('.ProseMirror div[data-youtube-video] iframe')
+        .should('have.length', 1)
+        .should('have.attr', 'src', 'https://www.youtube.com/embed/hBp4dgE7Bho?controls=0')
+
+      cy.get('.ProseMirror div[data-youtube-video] iframe')
+        .click()
+
+      cy.get('#add').eq(0).click()
+
+      cy.get('.ProseMirror div[data-youtube-video] iframe')
+        .should('have.length', 1)
+        .should('have.attr', 'src', 'https://www.youtube.com/embed/wRakoMYVHm8?controls=0')
+    })
+  })
+})

demos/src/Experiments/Youtube/React/styles.scss

@@ -0,0 +1,73 @@
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+
+  ul,
+  ol {
+    padding: 0 1rem;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+  }
+
+  code {
+    background-color: rgba(#616161, 0.1);
+    color: #616161;
+  }
+
+  pre {
+    background: #0D0D0D;
+    color: #FFF;
+    font-family: 'JetBrainsMono', monospace;
+    padding: 0.75rem 1rem;
+    border-radius: 0.5rem;
+
+    code {
+      color: inherit;
+      padding: 0;
+      background: none;
+      font-size: 0.8rem;
+    }
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  hr {
+    margin: 1rem 0;
+  }
+
+  blockquote {
+    padding-left: 1rem;
+    border-left: 2px solid rgba(#0D0D0D, 0.1);
+  }
+
+  iframe {
+    border: 8px solid #000;
+    border-radius: 4px;
+    min-width: 200px;
+    min-height: 200px;
+    display: block;
+    outline: 0px solid transparent;
+  }
+
+  div[data-youtube-video] {
+    cursor: move;
+    padding-right: 24px;
+  }
+
+  .ProseMirror-selectednode iframe {
+    transition: outline 0.15s;
+    outline: 6px solid #ece111;
+  }
+}

demos/src/Experiments/Youtube/Vue/index.spec.js

@@ -0,0 +1,60 @@
+context('/src/Experiments/Youtube/Vue/', () => {
+  before(() => {
+    cy.visit('/src/Experiments/Youtube/Vue/')
+  })
+
+  beforeEach(() => {
+    cy.get('.ProseMirror').type('{selectall}{backspace}')
+  })
+
+  it('adds a video', () => {
+    cy.window().then(win => {
+      cy.stub(win, 'prompt', () => 'https://music.youtube.com/watch?v=hBp4dgE7Bho&feature=share')
+      cy.get('#add').eq(0).click()
+      cy.get('.ProseMirror div[data-youtube-video] iframe')
+        .should('have.length', 1)
+        .should('have.attr', 'src', 'https://www.youtube.com/embed/hBp4dgE7Bho?controls=0')
+    })
+  })
+
+  it('adds a video with 320 width and 240 height', () => {
+    cy.window().then(win => {
+      cy.stub(win, 'prompt', () => 'https://music.youtube.com/watch?v=hBp4dgE7Bho&feature=share')
+      cy.get('#width').type('{selectall}{backspace}320')
+      cy.get('#height').type('{selectall}{backspace}240')
+      cy.get('#add').eq(0).click()
+      cy.get('.ProseMirror div[data-youtube-video] iframe').should('have.length', 1)
+        .should('have.attr', 'src', 'https://www.youtube.com/embed/hBp4dgE7Bho?controls=0')
+        .should('have.css', 'width', '320px')
+        .should('have.css', 'height', '240px')
+    })
+  })
+
+  it('replaces a video', () => {
+    cy.window().then(win => {
+      let runs = 0
+
+      cy.stub(win, 'prompt', () => {
+        runs += 1
+        if (runs === 1) {
+          return 'https://music.youtube.com/watch?v=hBp4dgE7Bho&feature=share'
+        }
+        return 'https://music.youtube.com/watch?v=wRakoMYVHm8'
+      })
+
+      cy.get('#add').eq(0).click()
+      cy.get('.ProseMirror div[data-youtube-video] iframe')
+        .should('have.length', 1)
+        .should('have.attr', 'src', 'https://www.youtube.com/embed/hBp4dgE7Bho?controls=0')
+
+      cy.get('.ProseMirror div[data-youtube-video] iframe')
+        .click()
+
+      cy.get('#add').eq(0).click()
+
+      cy.get('.ProseMirror div[data-youtube-video] iframe')
+        .should('have.length', 1)
+        .should('have.attr', 'src', 'https://www.youtube.com/embed/wRakoMYVHm8?controls=0')
+    })
+  })
+})