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

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

* fix(extension/youtube): remove wrong destroy call on undefined editor

* fix(extension/youtube): 🐛 fix youtu.be share urls not being recognized correctly

* style: remove stray console.log

* style: remove empty line

* docs(docs): update youtube docs

* Capitalize tiptap

* Capitalize Tiptap

* style(extension/youtube): ✏️ change youtube typing

Co-authored-by: Markus Krause <markus.krause@ueber.io>

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

@@ -0,0 +1,68 @@
+import './styles.scss'
+
+import Youtube from '@tiptap/extension-youtube'
+import { EditorContent, useEditor } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import React from 'react'
+
+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')
+    })
+  })
+})

demos/src/Experiments/Youtube/Vue/index.vue

@@ -0,0 +1,156 @@
+<template>
+  <div>
+    <div v-if="editor">
+      <button id="add" @click="addVideo">
+        Add youtube video
+      </button>
+      <input
+        id="width"
+        type="number"
+        v-model="width"
+        placeholder="width"
+      >
+      <input
+        id="height"
+        type="number"
+        v-model="height"
+        placeholder="height"
+      >
+      <editor-content class="editor-1" :editor="editor" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Youtube from '@tiptap/extension-youtube'
+import StarterKit from '@tiptap/starter-kit'
+import { Editor, EditorContent } from '@tiptap/vue-3'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+      width: '640',
+      height: '480',
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      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',
+        },
+      },
+    })
+  },
+
+  methods: {
+    addVideo() {
+      const url = prompt('Enter YouTube URL')
+
+      this.editor.commands.setYoutubeVideo({
+        src: url,
+        width: Math.max(320, parseInt(this.width, 10)) || 640,
+        height: Math.max(180, parseInt(this.height, 10)) || 480,
+      })
+    },
+  },
+
+  beforeUnmount() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style lang="scss">
+/* 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;
+  }
+}
+
+</style>