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>
2022-06-17 05:29:48 +02:00
parent 5ac3ac3fa8
commit 1c0554b7c0
14 changed files with 764 additions and 0 deletions
--- a/docs/api/extensions/youtube.md
+++ b/docs/api/extensions/youtube.md
@@ -0,0 +1,112 @@
+---
+description: Your favorite videos and jams - right in your editor!
+icon: align-left
+---
+
+# YouTube
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-youtube.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-youtube)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-youtube.svg)](https://npmcharts.com/compare/@tiptap/extension-youtube?minimal=true)
+
+This extension adds a new youtube embed node to the editor.
+
+## Installation
+```bash
+npm install @tiptap/extension-youtube
+```
+
+## Settings
+
+### inline
+Controls if the node should be handled inline or as a block.
+
+Default: `false`
+
+```js
+Youtube.configure({
+  inline: false,
+})
+```
+
+### width
+Controls the default width of added videos
+
+Default: `640`
+
+```js
+Youtube.configure({
+  width: 480,
+})
+```
+
+### height
+Controls the default height of added videos
+
+Default: `480`
+
+```js
+Youtube.configure({
+  height: 320,
+})
+```
+
+### controls
+Enables or disables YouTube video controls
+
+Default: `true`
+
+```js
+Youtube.configure({
+  controls: false,
+})
+```
+
+### nocookie
+Enables the nocookie mode for YouTube embeds
+
+Default: `false`
+
+```js
+Youtube.configure({
+  nocookie: true,
+})
+```
+
+### allowFullscreen
+Allows the iframe to be played in fullscreen
+
+Default: `true`
+
+```js
+Youtube.configure({
+  allowFullscreen: false,
+})
+```
+
+
+## Commands
+
+### setYoutubeVideo(options)
+Inserts a YouTube iframe embed at the current position
+
+```js
+editor.commands.setYoutubeVideo({
+  src: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+  width: 640,
+  height: 480,
+})
+```
+
+#### Options
+
+| Option           | Description                                                             | Optional |
+| ---------------- | ----------------------------------------------------------------------- | -------- |
+| src              | The url of the youtube video. Can be a YouTube or YouTube Music link    |          |
+| width            | The embed width (overrides the default option, optional                 | ✅         |
+| height           | The embed height (overrides the default option, optional                | ✅         |
+
+
+## Source code
+[packages/extension-youtube/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-youtube/)
+
+## Usage
+https://embed.tiptap.dev/preview/Extensions/YouTube