@tiptap/extension-youtube 2.0.0-beta.194

package/README.md

@@ -0,0 +1,14 @@
+# @tiptap/extension-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?minimal=true)
+[![License](https://img.shields.io/npm/l/@tiptap/extension-youtube.svg)](https://www.npmjs.com/package/@tiptap/extension-youtube)
+[![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/ueberdosis)
+
+## Introduction
+Tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
+
+## Official Documentation
+Documentation can be found on the [tiptap website](https://tiptap.dev).
+
+## License
+Tiptap is open sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap/blob/main/LICENSE.md).

package/dist/packages/extension-youtube/src/index.d.ts

@@ -0,0 +1,3 @@
+import { Youtube } from './youtube';
+export * from './youtube';
+export default Youtube;

package/dist/packages/extension-youtube/src/utils.d.ts

@@ -0,0 +1,11 @@
+export declare const YOUTUBE_REGEX: RegExp;
+export declare const YOUTUBE_REGEX_GLOBAL: RegExp;
+export declare const isValidYoutubeUrl: (url: string) => RegExpMatchArray | null;
+export interface GetEmbedUrlOptions {
+    url: string;
+    controls?: boolean;
+    nocookie?: boolean;
+    startAt?: number;
+}
+export declare const getYoutubeEmbedUrl: (nocookie?: boolean) => "https://www.youtube-nocookie.com/embed/" | "https://www.youtube.com/embed/";
+export declare const getEmbedURLFromYoutubeURL: (options: GetEmbedUrlOptions) => string | null;

package/dist/packages/extension-youtube/src/youtube.d.ts

@@ -0,0 +1,27 @@
+import { Node } from '@tiptap/core';
+export interface YoutubeOptions {
+    addPasteHandler: boolean;
+    allowFullscreen: boolean;
+    controls: boolean;
+    height: number;
+    HTMLAttributes: Record<string, any>;
+    inline: boolean;
+    nocookie: boolean;
+    width: number;
+}
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        youtube: {
+            /**
+             * Insert a youtube video
+             */
+            setYoutubeVideo: (options: {
+                src: string;
+                width?: number;
+                height?: number;
+                start?: number;
+            }) => ReturnType;
+        };
+    }
+}
+export declare const Youtube: Node<YoutubeOptions, any>;

package/dist/tiptap-extension-youtube.cjs.js

@@ -0,0 +1,144 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@tiptap/core');
+
+const YOUTUBE_REGEX = /^(https?:\/\/)?(www\.|music\.)?(youtube\.com|youtu\.be)(.+)?$/;
+const YOUTUBE_REGEX_GLOBAL = /^(https?:\/\/)?(www\.|music\.)?(youtube\.com|youtu\.be)(.+)?$/g;
+const isValidYoutubeUrl = (url) => {
+    return url.match(YOUTUBE_REGEX);
+};
+const getYoutubeEmbedUrl = (nocookie) => {
+    return nocookie ? 'https://www.youtube-nocookie.com/embed/' : 'https://www.youtube.com/embed/';
+};
+const getEmbedURLFromYoutubeURL = (options) => {
+    const { url, controls, nocookie, startAt, } = options;
+    // if is already an embed url, return it
+    if (url.includes('/embed/')) {
+        return url;
+    }
+    // if is a youtu.be url, get the id after the /
+    if (url.includes('youtu.be')) {
+        const id = url.split('/').pop();
+        if (!id) {
+            return null;
+        }
+        return `${getYoutubeEmbedUrl(nocookie)}${id}`;
+    }
+    const videoIdRegex = /v=([-\w]+)/gm;
+    const matches = videoIdRegex.exec(url);
+    if (!matches || !matches[1]) {
+        return null;
+    }
+    let outputUrl = `${getYoutubeEmbedUrl(nocookie)}${matches[1]}`;
+    const params = [];
+    if (!controls) {
+        params.push('controls=0');
+    }
+    if (startAt) {
+        params.push(`start=${startAt}`);
+    }
+    if (params.length) {
+        outputUrl += `?${params.join('&')}`;
+    }
+    return outputUrl;
+};
+
+const Youtube = core.Node.create({
+    name: 'youtube',
+    addOptions() {
+        return {
+            addPasteHandler: true,
+            allowFullscreen: false,
+            controls: true,
+            height: 480,
+            HTMLAttributes: {},
+            inline: false,
+            nocookie: false,
+            width: 640,
+        };
+    },
+    inline() {
+        return this.options.inline;
+    },
+    group() {
+        return this.options.inline ? 'inline' : 'block';
+    },
+    draggable: true,
+    addAttributes() {
+        return {
+            src: {
+                default: null,
+            },
+            start: {
+                default: 0,
+            },
+            width: {
+                default: this.options.width,
+            },
+            height: {
+                default: this.options.height,
+            },
+        };
+    },
+    parseHTML() {
+        return [
+            {
+                tag: 'div[data-youtube-video] iframe',
+            },
+        ];
+    },
+    addCommands() {
+        return {
+            setYoutubeVideo: options => ({ commands }) => {
+                if (!isValidYoutubeUrl(options.src)) {
+                    return false;
+                }
+                return commands.insertContent({
+                    type: this.name,
+                    attrs: options,
+                });
+            },
+        };
+    },
+    addPasteRules() {
+        if (!this.options.addPasteHandler) {
+            return [];
+        }
+        return [
+            core.nodePasteRule({
+                find: YOUTUBE_REGEX_GLOBAL,
+                type: this.type,
+                getAttributes: match => {
+                    return { src: match.input };
+                },
+            }),
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        const embedUrl = getEmbedURLFromYoutubeURL({
+            url: HTMLAttributes.src,
+            controls: this.options.controls,
+            nocookie: this.options.nocookie,
+            startAt: HTMLAttributes.start || 0,
+        });
+        HTMLAttributes.src = embedUrl;
+        return [
+            'div',
+            { 'data-youtube-video': '' },
+            [
+                'iframe',
+                core.mergeAttributes(this.options.HTMLAttributes, {
+                    width: this.options.width,
+                    height: this.options.height,
+                    allowfullscreen: this.options.allowFullscreen,
+                }, HTMLAttributes),
+            ],
+        ];
+    },
+});
+
+exports.Youtube = Youtube;
+exports["default"] = Youtube;
+//# sourceMappingURL=tiptap-extension-youtube.cjs.js.map

package/dist/tiptap-extension-youtube.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tiptap-extension-youtube.cjs.js","sources":["../src/utils.ts","../src/youtube.ts"],"sourcesContent":["export const YOUTUBE_REGEX = /^(https?:\\/\\/)?(www\\.|music\\.)?(youtube\\.com|youtu\\.be)(.+)?$/\nexport const YOUTUBE_REGEX_GLOBAL = /^(https?:\\/\\/)?(www\\.|music\\.)?(youtube\\.com|youtu\\.be)(.+)?$/g\n\nexport const isValidYoutubeUrl = (url: string) => {\n  return url.match(YOUTUBE_REGEX)\n}\n\nexport interface GetEmbedUrlOptions {\n  url: string;\n  controls?: boolean;\n  nocookie?: boolean;\n  startAt?: number;\n}\n\nexport const getYoutubeEmbedUrl = (nocookie?: boolean) => {\n  return nocookie ? 'https://www.youtube-nocookie.com/embed/' : 'https://www.youtube.com/embed/'\n}\n\nexport const getEmbedURLFromYoutubeURL = (options: GetEmbedUrlOptions) => {\n  const {\n    url,\n    controls,\n    nocookie,\n    startAt,\n  } = options\n\n  // if is already an embed url, return it\n  if (url.includes('/embed/')) {\n    return url\n  }\n\n  // if is a youtu.be url, get the id after the /\n  if (url.includes('youtu.be')) {\n    const id = url.split('/').pop()\n\n    if (!id) {\n      return null\n    }\n    return `${getYoutubeEmbedUrl(nocookie)}${id}`\n  }\n\n  const videoIdRegex = /v=([-\\w]+)/gm\n  const matches = videoIdRegex.exec(url)\n\n  if (!matches || !matches[1]) {\n    return null\n  }\n\n  let outputUrl = `${getYoutubeEmbedUrl(nocookie)}${matches[1]}`\n\n  const params = []\n\n  if (!controls) {\n    params.push('controls=0')\n  }\n\n  if (startAt) {\n    params.push(`start=${startAt}`)\n  }\n\n  if (params.length) {\n    outputUrl += `?${params.join('&')}`\n  }\n\n  return outputUrl\n}\n","import { mergeAttributes, Node, nodePasteRule } from '@tiptap/core'\n\nimport { getEmbedURLFromYoutubeURL, isValidYoutubeUrl, YOUTUBE_REGEX_GLOBAL } from './utils'\n\nexport interface YoutubeOptions {\n  addPasteHandler: boolean;\n  allowFullscreen: boolean;\n  controls: boolean;\n  height: number;\n  HTMLAttributes: Record<string, any>,\n  inline: boolean;\n  nocookie: boolean;\n  width: number;\n}\n\ndeclare module '@tiptap/core' {\n  interface Commands<ReturnType> {\n    youtube: {\n      /**\n       * Insert a youtube video\n       */\n      setYoutubeVideo: (options: { src: string, width?: number, height?: number, start?: number }) => ReturnType,\n    }\n  }\n}\n\nexport const Youtube = Node.create<YoutubeOptions>({\n  name: 'youtube',\n\n  addOptions() {\n    return {\n      addPasteHandler: true,\n      allowFullscreen: false,\n      controls: true,\n      height: 480,\n      HTMLAttributes: {},\n      inline: false,\n      nocookie: false,\n      width: 640,\n    }\n  },\n\n  inline() {\n    return this.options.inline\n  },\n\n  group() {\n    return this.options.inline ? 'inline' : 'block'\n  },\n\n  draggable: true,\n\n  addAttributes() {\n    return {\n      src: {\n        default: null,\n      },\n      start: {\n        default: 0,\n      },\n      width: {\n        default: this.options.width,\n      },\n      height: {\n        default: this.options.height,\n      },\n    }\n  },\n\n  parseHTML() {\n    return [\n      {\n        tag: 'div[data-youtube-video] iframe',\n      },\n    ]\n  },\n\n  addCommands() {\n    return {\n      setYoutubeVideo: options => ({ commands }) => {\n        if (!isValidYoutubeUrl(options.src)) {\n          return false\n        }\n\n        return commands.insertContent({\n          type: this.name,\n          attrs: options,\n        })\n      },\n    }\n  },\n\n  addPasteRules() {\n    if (!this.options.addPasteHandler) {\n      return []\n    }\n\n    return [\n      nodePasteRule({\n        find: YOUTUBE_REGEX_GLOBAL,\n        type: this.type,\n        getAttributes: match => {\n          return { src: match.input }\n        },\n      }),\n    ]\n  },\n\n  renderHTML({ HTMLAttributes }) {\n    const embedUrl = getEmbedURLFromYoutubeURL({\n      url: HTMLAttributes.src,\n      controls: this.options.controls,\n      nocookie: this.options.nocookie,\n      startAt: HTMLAttributes.start || 0,\n    })\n\n    HTMLAttributes.src = embedUrl\n\n    return [\n      'div',\n      { 'data-youtube-video': '' },\n      [\n        'iframe',\n        mergeAttributes(\n          this.options.HTMLAttributes,\n          {\n            width: this.options.width,\n            height: this.options.height,\n            allowfullscreen: this.options.allowFullscreen,\n          },\n          HTMLAttributes,\n        ),\n      ],\n    ]\n  },\n})\n"],"names":["Node","nodePasteRule","mergeAttributes"],"mappings":"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"}

package/dist/tiptap-extension-youtube.esm.js

@@ -0,0 +1,139 @@
+import { Node, nodePasteRule, mergeAttributes } from '@tiptap/core';
+
+const YOUTUBE_REGEX = /^(https?:\/\/)?(www\.|music\.)?(youtube\.com|youtu\.be)(.+)?$/;
+const YOUTUBE_REGEX_GLOBAL = /^(https?:\/\/)?(www\.|music\.)?(youtube\.com|youtu\.be)(.+)?$/g;
+const isValidYoutubeUrl = (url) => {
+    return url.match(YOUTUBE_REGEX);
+};
+const getYoutubeEmbedUrl = (nocookie) => {
+    return nocookie ? 'https://www.youtube-nocookie.com/embed/' : 'https://www.youtube.com/embed/';
+};
+const getEmbedURLFromYoutubeURL = (options) => {
+    const { url, controls, nocookie, startAt, } = options;
+    // if is already an embed url, return it
+    if (url.includes('/embed/')) {
+        return url;
+    }
+    // if is a youtu.be url, get the id after the /
+    if (url.includes('youtu.be')) {
+        const id = url.split('/').pop();
+        if (!id) {
+            return null;
+        }
+        return `${getYoutubeEmbedUrl(nocookie)}${id}`;
+    }
+    const videoIdRegex = /v=([-\w]+)/gm;
+    const matches = videoIdRegex.exec(url);
+    if (!matches || !matches[1]) {
+        return null;
+    }
+    let outputUrl = `${getYoutubeEmbedUrl(nocookie)}${matches[1]}`;
+    const params = [];
+    if (!controls) {
+        params.push('controls=0');
+    }
+    if (startAt) {
+        params.push(`start=${startAt}`);
+    }
+    if (params.length) {
+        outputUrl += `?${params.join('&')}`;
+    }
+    return outputUrl;
+};
+
+const Youtube = Node.create({
+    name: 'youtube',
+    addOptions() {
+        return {
+            addPasteHandler: true,
+            allowFullscreen: false,
+            controls: true,
+            height: 480,
+            HTMLAttributes: {},
+            inline: false,
+            nocookie: false,
+            width: 640,
+        };
+    },
+    inline() {
+        return this.options.inline;
+    },
+    group() {
+        return this.options.inline ? 'inline' : 'block';
+    },
+    draggable: true,
+    addAttributes() {
+        return {
+            src: {
+                default: null,
+            },
+            start: {
+                default: 0,
+            },
+            width: {
+                default: this.options.width,
+            },
+            height: {
+                default: this.options.height,
+            },
+        };
+    },
+    parseHTML() {
+        return [
+            {
+                tag: 'div[data-youtube-video] iframe',
+            },
+        ];
+    },
+    addCommands() {
+        return {
+            setYoutubeVideo: options => ({ commands }) => {
+                if (!isValidYoutubeUrl(options.src)) {
+                    return false;
+                }
+                return commands.insertContent({
+                    type: this.name,
+                    attrs: options,
+                });
+            },
+        };
+    },
+    addPasteRules() {
+        if (!this.options.addPasteHandler) {
+            return [];
+        }
+        return [
+            nodePasteRule({
+                find: YOUTUBE_REGEX_GLOBAL,
+                type: this.type,
+                getAttributes: match => {
+                    return { src: match.input };
+                },
+            }),
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        const embedUrl = getEmbedURLFromYoutubeURL({
+            url: HTMLAttributes.src,
+            controls: this.options.controls,
+            nocookie: this.options.nocookie,
+            startAt: HTMLAttributes.start || 0,
+        });
+        HTMLAttributes.src = embedUrl;
+        return [
+            'div',
+            { 'data-youtube-video': '' },
+            [
+                'iframe',
+                mergeAttributes(this.options.HTMLAttributes, {
+                    width: this.options.width,
+                    height: this.options.height,
+                    allowfullscreen: this.options.allowFullscreen,
+                }, HTMLAttributes),
+            ],
+        ];
+    },
+});
+
+export { Youtube, Youtube as default };
+//# sourceMappingURL=tiptap-extension-youtube.esm.js.map

package/dist/tiptap-extension-youtube.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tiptap-extension-youtube.esm.js","sources":["../src/utils.ts","../src/youtube.ts"],"sourcesContent":["export const YOUTUBE_REGEX = /^(https?:\\/\\/)?(www\\.|music\\.)?(youtube\\.com|youtu\\.be)(.+)?$/\nexport const YOUTUBE_REGEX_GLOBAL = /^(https?:\\/\\/)?(www\\.|music\\.)?(youtube\\.com|youtu\\.be)(.+)?$/g\n\nexport const isValidYoutubeUrl = (url: string) => {\n  return url.match(YOUTUBE_REGEX)\n}\n\nexport interface GetEmbedUrlOptions {\n  url: string;\n  controls?: boolean;\n  nocookie?: boolean;\n  startAt?: number;\n}\n\nexport const getYoutubeEmbedUrl = (nocookie?: boolean) => {\n  return nocookie ? 'https://www.youtube-nocookie.com/embed/' : 'https://www.youtube.com/embed/'\n}\n\nexport const getEmbedURLFromYoutubeURL = (options: GetEmbedUrlOptions) => {\n  const {\n    url,\n    controls,\n    nocookie,\n    startAt,\n  } = options\n\n  // if is already an embed url, return it\n  if (url.includes('/embed/')) {\n    return url\n  }\n\n  // if is a youtu.be url, get the id after the /\n  if (url.includes('youtu.be')) {\n    const id = url.split('/').pop()\n\n    if (!id) {\n      return null\n    }\n    return `${getYoutubeEmbedUrl(nocookie)}${id}`\n  }\n\n  const videoIdRegex = /v=([-\\w]+)/gm\n  const matches = videoIdRegex.exec(url)\n\n  if (!matches || !matches[1]) {\n    return null\n  }\n\n  let outputUrl = `${getYoutubeEmbedUrl(nocookie)}${matches[1]}`\n\n  const params = []\n\n  if (!controls) {\n    params.push('controls=0')\n  }\n\n  if (startAt) {\n    params.push(`start=${startAt}`)\n  }\n\n  if (params.length) {\n    outputUrl += `?${params.join('&')}`\n  }\n\n  return outputUrl\n}\n","import { mergeAttributes, Node, nodePasteRule } from '@tiptap/core'\n\nimport { getEmbedURLFromYoutubeURL, isValidYoutubeUrl, YOUTUBE_REGEX_GLOBAL } from './utils'\n\nexport interface YoutubeOptions {\n  addPasteHandler: boolean;\n  allowFullscreen: boolean;\n  controls: boolean;\n  height: number;\n  HTMLAttributes: Record<string, any>,\n  inline: boolean;\n  nocookie: boolean;\n  width: number;\n}\n\ndeclare module '@tiptap/core' {\n  interface Commands<ReturnType> {\n    youtube: {\n      /**\n       * Insert a youtube video\n       */\n      setYoutubeVideo: (options: { src: string, width?: number, height?: number, start?: number }) => ReturnType,\n    }\n  }\n}\n\nexport const Youtube = Node.create<YoutubeOptions>({\n  name: 'youtube',\n\n  addOptions() {\n    return {\n      addPasteHandler: true,\n      allowFullscreen: false,\n      controls: true,\n      height: 480,\n      HTMLAttributes: {},\n      inline: false,\n      nocookie: false,\n      width: 640,\n    }\n  },\n\n  inline() {\n    return this.options.inline\n  },\n\n  group() {\n    return this.options.inline ? 'inline' : 'block'\n  },\n\n  draggable: true,\n\n  addAttributes() {\n    return {\n      src: {\n        default: null,\n      },\n      start: {\n        default: 0,\n      },\n      width: {\n        default: this.options.width,\n      },\n      height: {\n        default: this.options.height,\n      },\n    }\n  },\n\n  parseHTML() {\n    return [\n      {\n        tag: 'div[data-youtube-video] iframe',\n      },\n    ]\n  },\n\n  addCommands() {\n    return {\n      setYoutubeVideo: options => ({ commands }) => {\n        if (!isValidYoutubeUrl(options.src)) {\n          return false\n        }\n\n        return commands.insertContent({\n          type: this.name,\n          attrs: options,\n        })\n      },\n    }\n  },\n\n  addPasteRules() {\n    if (!this.options.addPasteHandler) {\n      return []\n    }\n\n    return [\n      nodePasteRule({\n        find: YOUTUBE_REGEX_GLOBAL,\n        type: this.type,\n        getAttributes: match => {\n          return { src: match.input }\n        },\n      }),\n    ]\n  },\n\n  renderHTML({ HTMLAttributes }) {\n    const embedUrl = getEmbedURLFromYoutubeURL({\n      url: HTMLAttributes.src,\n      controls: this.options.controls,\n      nocookie: this.options.nocookie,\n      startAt: HTMLAttributes.start || 0,\n    })\n\n    HTMLAttributes.src = embedUrl\n\n    return [\n      'div',\n      { 'data-youtube-video': '' },\n      [\n        'iframe',\n        mergeAttributes(\n          this.options.HTMLAttributes,\n          {\n            width: this.options.width,\n            height: this.options.height,\n            allowfullscreen: this.options.allowFullscreen,\n          },\n          HTMLAttributes,\n        ),\n      ],\n    ]\n  },\n})\n"],"names":[],"mappings":"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"}

package/dist/tiptap-extension-youtube.umd.js

@@ -0,0 +1,148 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@tiptap/core')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@tiptap/core'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@tiptap/extension-youtube"] = {}, global.core));
+})(this, (function (exports, core) { 'use strict';
+
+  const YOUTUBE_REGEX = /^(https?:\/\/)?(www\.|music\.)?(youtube\.com|youtu\.be)(.+)?$/;
+  const YOUTUBE_REGEX_GLOBAL = /^(https?:\/\/)?(www\.|music\.)?(youtube\.com|youtu\.be)(.+)?$/g;
+  const isValidYoutubeUrl = (url) => {
+      return url.match(YOUTUBE_REGEX);
+  };
+  const getYoutubeEmbedUrl = (nocookie) => {
+      return nocookie ? 'https://www.youtube-nocookie.com/embed/' : 'https://www.youtube.com/embed/';
+  };
+  const getEmbedURLFromYoutubeURL = (options) => {
+      const { url, controls, nocookie, startAt, } = options;
+      // if is already an embed url, return it
+      if (url.includes('/embed/')) {
+          return url;
+      }
+      // if is a youtu.be url, get the id after the /
+      if (url.includes('youtu.be')) {
+          const id = url.split('/').pop();
+          if (!id) {
+              return null;
+          }
+          return `${getYoutubeEmbedUrl(nocookie)}${id}`;
+      }
+      const videoIdRegex = /v=([-\w]+)/gm;
+      const matches = videoIdRegex.exec(url);
+      if (!matches || !matches[1]) {
+          return null;
+      }
+      let outputUrl = `${getYoutubeEmbedUrl(nocookie)}${matches[1]}`;
+      const params = [];
+      if (!controls) {
+          params.push('controls=0');
+      }
+      if (startAt) {
+          params.push(`start=${startAt}`);
+      }
+      if (params.length) {
+          outputUrl += `?${params.join('&')}`;
+      }
+      return outputUrl;
+  };
+
+  const Youtube = core.Node.create({
+      name: 'youtube',
+      addOptions() {
+          return {
+              addPasteHandler: true,
+              allowFullscreen: false,
+              controls: true,
+              height: 480,
+              HTMLAttributes: {},
+              inline: false,
+              nocookie: false,
+              width: 640,
+          };
+      },
+      inline() {
+          return this.options.inline;
+      },
+      group() {
+          return this.options.inline ? 'inline' : 'block';
+      },
+      draggable: true,
+      addAttributes() {
+          return {
+              src: {
+                  default: null,
+              },
+              start: {
+                  default: 0,
+              },
+              width: {
+                  default: this.options.width,
+              },
+              height: {
+                  default: this.options.height,
+              },
+          };
+      },
+      parseHTML() {
+          return [
+              {
+                  tag: 'div[data-youtube-video] iframe',
+              },
+          ];
+      },
+      addCommands() {
+          return {
+              setYoutubeVideo: options => ({ commands }) => {
+                  if (!isValidYoutubeUrl(options.src)) {
+                      return false;
+                  }
+                  return commands.insertContent({
+                      type: this.name,
+                      attrs: options,
+                  });
+              },
+          };
+      },
+      addPasteRules() {
+          if (!this.options.addPasteHandler) {
+              return [];
+          }
+          return [
+              core.nodePasteRule({
+                  find: YOUTUBE_REGEX_GLOBAL,
+                  type: this.type,
+                  getAttributes: match => {
+                      return { src: match.input };
+                  },
+              }),
+          ];
+      },
+      renderHTML({ HTMLAttributes }) {
+          const embedUrl = getEmbedURLFromYoutubeURL({
+              url: HTMLAttributes.src,
+              controls: this.options.controls,
+              nocookie: this.options.nocookie,
+              startAt: HTMLAttributes.start || 0,
+          });
+          HTMLAttributes.src = embedUrl;
+          return [
+              'div',
+              { 'data-youtube-video': '' },
+              [
+                  'iframe',
+                  core.mergeAttributes(this.options.HTMLAttributes, {
+                      width: this.options.width,
+                      height: this.options.height,
+                      allowfullscreen: this.options.allowFullscreen,
+                  }, HTMLAttributes),
+              ],
+          ];
+      },
+  });
+
+  exports.Youtube = Youtube;
+  exports["default"] = Youtube;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+}));
+//# sourceMappingURL=tiptap-extension-youtube.umd.js.map

package/dist/tiptap-extension-youtube.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tiptap-extension-youtube.umd.js","sources":["../src/utils.ts","../src/youtube.ts"],"sourcesContent":["export const YOUTUBE_REGEX = /^(https?:\\/\\/)?(www\\.|music\\.)?(youtube\\.com|youtu\\.be)(.+)?$/\nexport const YOUTUBE_REGEX_GLOBAL = /^(https?:\\/\\/)?(www\\.|music\\.)?(youtube\\.com|youtu\\.be)(.+)?$/g\n\nexport const isValidYoutubeUrl = (url: string) => {\n  return url.match(YOUTUBE_REGEX)\n}\n\nexport interface GetEmbedUrlOptions {\n  url: string;\n  controls?: boolean;\n  nocookie?: boolean;\n  startAt?: number;\n}\n\nexport const getYoutubeEmbedUrl = (nocookie?: boolean) => {\n  return nocookie ? 'https://www.youtube-nocookie.com/embed/' : 'https://www.youtube.com/embed/'\n}\n\nexport const getEmbedURLFromYoutubeURL = (options: GetEmbedUrlOptions) => {\n  const {\n    url,\n    controls,\n    nocookie,\n    startAt,\n  } = options\n\n  // if is already an embed url, return it\n  if (url.includes('/embed/')) {\n    return url\n  }\n\n  // if is a youtu.be url, get the id after the /\n  if (url.includes('youtu.be')) {\n    const id = url.split('/').pop()\n\n    if (!id) {\n      return null\n    }\n    return `${getYoutubeEmbedUrl(nocookie)}${id}`\n  }\n\n  const videoIdRegex = /v=([-\\w]+)/gm\n  const matches = videoIdRegex.exec(url)\n\n  if (!matches || !matches[1]) {\n    return null\n  }\n\n  let outputUrl = `${getYoutubeEmbedUrl(nocookie)}${matches[1]}`\n\n  const params = []\n\n  if (!controls) {\n    params.push('controls=0')\n  }\n\n  if (startAt) {\n    params.push(`start=${startAt}`)\n  }\n\n  if (params.length) {\n    outputUrl += `?${params.join('&')}`\n  }\n\n  return outputUrl\n}\n","import { mergeAttributes, Node, nodePasteRule } from '@tiptap/core'\n\nimport { getEmbedURLFromYoutubeURL, isValidYoutubeUrl, YOUTUBE_REGEX_GLOBAL } from './utils'\n\nexport interface YoutubeOptions {\n  addPasteHandler: boolean;\n  allowFullscreen: boolean;\n  controls: boolean;\n  height: number;\n  HTMLAttributes: Record<string, any>,\n  inline: boolean;\n  nocookie: boolean;\n  width: number;\n}\n\ndeclare module '@tiptap/core' {\n  interface Commands<ReturnType> {\n    youtube: {\n      /**\n       * Insert a youtube video\n       */\n      setYoutubeVideo: (options: { src: string, width?: number, height?: number, start?: number }) => ReturnType,\n    }\n  }\n}\n\nexport const Youtube = Node.create<YoutubeOptions>({\n  name: 'youtube',\n\n  addOptions() {\n    return {\n      addPasteHandler: true,\n      allowFullscreen: false,\n      controls: true,\n      height: 480,\n      HTMLAttributes: {},\n      inline: false,\n      nocookie: false,\n      width: 640,\n    }\n  },\n\n  inline() {\n    return this.options.inline\n  },\n\n  group() {\n    return this.options.inline ? 'inline' : 'block'\n  },\n\n  draggable: true,\n\n  addAttributes() {\n    return {\n      src: {\n        default: null,\n      },\n      start: {\n        default: 0,\n      },\n      width: {\n        default: this.options.width,\n      },\n      height: {\n        default: this.options.height,\n      },\n    }\n  },\n\n  parseHTML() {\n    return [\n      {\n        tag: 'div[data-youtube-video] iframe',\n      },\n    ]\n  },\n\n  addCommands() {\n    return {\n      setYoutubeVideo: options => ({ commands }) => {\n        if (!isValidYoutubeUrl(options.src)) {\n          return false\n        }\n\n        return commands.insertContent({\n          type: this.name,\n          attrs: options,\n        })\n      },\n    }\n  },\n\n  addPasteRules() {\n    if (!this.options.addPasteHandler) {\n      return []\n    }\n\n    return [\n      nodePasteRule({\n        find: YOUTUBE_REGEX_GLOBAL,\n        type: this.type,\n        getAttributes: match => {\n          return { src: match.input }\n        },\n      }),\n    ]\n  },\n\n  renderHTML({ HTMLAttributes }) {\n    const embedUrl = getEmbedURLFromYoutubeURL({\n      url: HTMLAttributes.src,\n      controls: this.options.controls,\n      nocookie: this.options.nocookie,\n      startAt: HTMLAttributes.start || 0,\n    })\n\n    HTMLAttributes.src = embedUrl\n\n    return [\n      'div',\n      { 'data-youtube-video': '' },\n      [\n        'iframe',\n        mergeAttributes(\n          this.options.HTMLAttributes,\n          {\n            width: this.options.width,\n            height: this.options.height,\n            allowfullscreen: this.options.allowFullscreen,\n          },\n          HTMLAttributes,\n        ),\n      ],\n    ]\n  },\n})\n"],"names":["Node","nodePasteRule","mergeAttributes"],"mappings":"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"}

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@tiptap/extension-youtube",
+  "description": "a youtube embed extension for tiptap",
+  "version": "2.0.0-beta.194",
+  "homepage": "https://tiptap.dev",
+  "keywords": [
+    "tiptap",
+    "tiptap extension"
+  ],
+  "license": "MIT",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/ueberdosis"
+  },
+  "main": "dist/tiptap-extension-youtube.cjs.js",
+  "umd": "dist/tiptap-extension-youtube.umd.js",
+  "module": "dist/tiptap-extension-youtube.esm.js",
+  "types": "dist/packages/extension-youtube/src/index.d.ts",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "peerDependencies": {
+    "@tiptap/core": "^2.0.0-beta.193"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ueberdosis/tiptap",
+    "directory": "packages/extension-youtube"
+  }
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+import { Youtube } from './youtube'
+
+export * from './youtube'
+
+export default Youtube

package/src/utils.ts

@@ -0,0 +1,66 @@
+export const YOUTUBE_REGEX = /^(https?:\/\/)?(www\.|music\.)?(youtube\.com|youtu\.be)(.+)?$/
+export const YOUTUBE_REGEX_GLOBAL = /^(https?:\/\/)?(www\.|music\.)?(youtube\.com|youtu\.be)(.+)?$/g
+
+export const isValidYoutubeUrl = (url: string) => {
+  return url.match(YOUTUBE_REGEX)
+}
+
+export interface GetEmbedUrlOptions {
+  url: string;
+  controls?: boolean;
+  nocookie?: boolean;
+  startAt?: number;
+}
+
+export const getYoutubeEmbedUrl = (nocookie?: boolean) => {
+  return nocookie ? 'https://www.youtube-nocookie.com/embed/' : 'https://www.youtube.com/embed/'
+}
+
+export const getEmbedURLFromYoutubeURL = (options: GetEmbedUrlOptions) => {
+  const {
+    url,
+    controls,
+    nocookie,
+    startAt,
+  } = options
+
+  // if is already an embed url, return it
+  if (url.includes('/embed/')) {
+    return url
+  }
+
+  // if is a youtu.be url, get the id after the /
+  if (url.includes('youtu.be')) {
+    const id = url.split('/').pop()
+
+    if (!id) {
+      return null
+    }
+    return `${getYoutubeEmbedUrl(nocookie)}${id}`
+  }
+
+  const videoIdRegex = /v=([-\w]+)/gm
+  const matches = videoIdRegex.exec(url)
+
+  if (!matches || !matches[1]) {
+    return null
+  }
+
+  let outputUrl = `${getYoutubeEmbedUrl(nocookie)}${matches[1]}`
+
+  const params = []
+
+  if (!controls) {
+    params.push('controls=0')
+  }
+
+  if (startAt) {
+    params.push(`start=${startAt}`)
+  }
+
+  if (params.length) {
+    outputUrl += `?${params.join('&')}`
+  }
+
+  return outputUrl
+}

package/src/youtube.ts

@@ -0,0 +1,136 @@
+import { mergeAttributes, Node, nodePasteRule } from '@tiptap/core'
+
+import { getEmbedURLFromYoutubeURL, isValidYoutubeUrl, YOUTUBE_REGEX_GLOBAL } from './utils'
+
+export interface YoutubeOptions {
+  addPasteHandler: boolean;
+  allowFullscreen: boolean;
+  controls: boolean;
+  height: number;
+  HTMLAttributes: Record<string, any>,
+  inline: boolean;
+  nocookie: boolean;
+  width: number;
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    youtube: {
+      /**
+       * Insert a youtube video
+       */
+      setYoutubeVideo: (options: { src: string, width?: number, height?: number, start?: number }) => ReturnType,
+    }
+  }
+}
+
+export const Youtube = Node.create<YoutubeOptions>({
+  name: 'youtube',
+
+  addOptions() {
+    return {
+      addPasteHandler: true,
+      allowFullscreen: false,
+      controls: true,
+      height: 480,
+      HTMLAttributes: {},
+      inline: false,
+      nocookie: false,
+      width: 640,
+    }
+  },
+
+  inline() {
+    return this.options.inline
+  },
+
+  group() {
+    return this.options.inline ? 'inline' : 'block'
+  },
+
+  draggable: true,
+
+  addAttributes() {
+    return {
+      src: {
+        default: null,
+      },
+      start: {
+        default: 0,
+      },
+      width: {
+        default: this.options.width,
+      },
+      height: {
+        default: this.options.height,
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'div[data-youtube-video] iframe',
+      },
+    ]
+  },
+
+  addCommands() {
+    return {
+      setYoutubeVideo: options => ({ commands }) => {
+        if (!isValidYoutubeUrl(options.src)) {
+          return false
+        }
+
+        return commands.insertContent({
+          type: this.name,
+          attrs: options,
+        })
+      },
+    }
+  },
+
+  addPasteRules() {
+    if (!this.options.addPasteHandler) {
+      return []
+    }
+
+    return [
+      nodePasteRule({
+        find: YOUTUBE_REGEX_GLOBAL,
+        type: this.type,
+        getAttributes: match => {
+          return { src: match.input }
+        },
+      }),
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    const embedUrl = getEmbedURLFromYoutubeURL({
+      url: HTMLAttributes.src,
+      controls: this.options.controls,
+      nocookie: this.options.nocookie,
+      startAt: HTMLAttributes.start || 0,
+    })
+
+    HTMLAttributes.src = embedUrl
+
+    return [
+      'div',
+      { 'data-youtube-video': '' },
+      [
+        'iframe',
+        mergeAttributes(
+          this.options.HTMLAttributes,
+          {
+            width: this.options.width,
+            height: this.options.height,
+            allowfullscreen: this.options.allowFullscreen,
+          },
+          HTMLAttributes,
+        ),
+      ],
+    ]
+  },
+})