@tiptap/extension-youtube 2.11.7 → 3.0.0-beta.1

package/dist/index.d.ts

@@ -1,4 +1,164 @@
-import { Youtube } from './youtube.js';
-export * from './youtube.js';
-export default Youtube;
-//# sourceMappingURL=index.d.ts.map
+import { Node } from '@tiptap/core';
+
+interface YoutubeOptions {
+    /**
+     * Controls if the paste handler for youtube videos should be added.
+     * @default true
+     * @example false
+     */
+    addPasteHandler: boolean;
+    /**
+     * Controls if the youtube video should be allowed to go fullscreen.
+     * @default true
+     * @example false
+     */
+    allowFullscreen: boolean;
+    /**
+     * Controls if the youtube video should autoplay.
+     * @default false
+     * @example true
+     */
+    autoplay: boolean;
+    /**
+     * The language of the captions shown in the youtube video.
+     * @default undefined
+     * @example 'en'
+     */
+    ccLanguage?: string;
+    /**
+     * Controls if the captions should be shown in the youtube video.
+     * @default undefined
+     * @example true
+     */
+    ccLoadPolicy?: boolean;
+    /**
+     * Controls if the controls should be shown in the youtube video.
+     * @default true
+     * @example false
+     */
+    controls: boolean;
+    /**
+     * Controls if the keyboard controls should be disabled in the youtube video.
+     * @default false
+     * @example true
+     */
+    disableKBcontrols: boolean;
+    /**
+     * Controls if the iframe api should be enabled in the youtube video.
+     * @default false
+     * @example true
+     */
+    enableIFrameApi: boolean;
+    /**
+     * The end time of the youtube video.
+     * @default 0
+     * @example 120
+     */
+    endTime: number;
+    /**
+     * The height of the youtube video.
+     * @default 480
+     * @example 720
+     */
+    height: number;
+    /**
+     * The language of the youtube video.
+     * @default undefined
+     * @example 'en'
+     */
+    interfaceLanguage?: string;
+    /**
+     * Controls if the video annotations should be shown in the youtube video.
+     * @default 0
+     * @example 1
+     */
+    ivLoadPolicy: number;
+    /**
+     * Controls if the youtube video should loop.
+     * @default false
+     * @example true
+     */
+    loop: boolean;
+    /**
+     * Controls if the youtube video should show a small youtube logo.
+     * @default false
+     * @example true
+     */
+    modestBranding: boolean;
+    /**
+     * The HTML attributes for a youtube video node.
+     * @default {}
+     * @example { class: 'foo' }
+     */
+    HTMLAttributes: Record<string, any>;
+    /**
+     * Controls if the youtube node should be inline or not.
+     * @default false
+     * @example true
+     */
+    inline: boolean;
+    /**
+     * Controls if the youtube video should be loaded from youtube-nocookie.com.
+     * @default false
+     * @example true
+     */
+    nocookie: boolean;
+    /**
+     * The origin of the youtube video.
+     * @default ''
+     * @example 'https://tiptap.dev'
+     */
+    origin: string;
+    /**
+     * The playlist of the youtube video.
+     * @default ''
+     * @example 'PLQg6GaokU5CwiVmsZ0dZm6VeIg0V5z1tK'
+     */
+    playlist: string;
+    /**
+     * The color of the youtube video progress bar.
+     * @default undefined
+     * @example 'red'
+     */
+    progressBarColor?: string;
+    /**
+     * The width of the youtube video.
+     * @default 640
+     * @example 1280
+     */
+    width: number;
+    /**
+     * Controls if the related youtube videos at the end are from the same channel.
+     * @default 1
+     * @example 0
+     */
+    rel: number;
+}
+/**
+ * The options for setting a youtube video.
+ */
+type SetYoutubeVideoOptions = {
+    src: string;
+    width?: number;
+    height?: number;
+    start?: number;
+};
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        youtube: {
+            /**
+             * Insert a youtube video
+             * @param options The youtube video attributes
+             * @example editor.commands.setYoutubeVideo({ src: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ' })
+             */
+            setYoutubeVideo: (options: SetYoutubeVideoOptions) => ReturnType;
+        };
+    }
+}
+/**
+ * This extension adds support for youtube videos.
+ * @see https://www.tiptap.dev/api/nodes/youtube
+ */
+declare const Youtube: Node<YoutubeOptions, any>;
+
+export { Youtube, type YoutubeOptions, Youtube as default };

package/dist/index.js

@@ -1,194 +1,240 @@
-import { Node, nodePasteRule, mergeAttributes } from '@tiptap/core';
+// src/youtube.ts
+import { mergeAttributes, Node, nodePasteRule } from "@tiptap/core";
 
-const YOUTUBE_REGEX = /^((?:https?:)?\/\/)?((?:www|m|music)\.)?((?:youtube\.com|youtu.be|youtube-nocookie\.com))(\/(?:[\w-]+\?v=|embed\/|v\/)?)([\w-]+)(\S+)?$/;
-const YOUTUBE_REGEX_GLOBAL = /^((?:https?:)?\/\/)?((?:www|m|music)\.)?((?:youtube\.com|youtu.be|youtube-nocookie\.com))(\/(?:[\w-]+\?v=|embed\/|v\/)?)([\w-]+)(\S+)?$/g;
-const isValidYoutubeUrl = (url) => {
-    return url.match(YOUTUBE_REGEX);
+// src/utils.ts
+var YOUTUBE_REGEX = /^((?:https?:)?\/\/)?((?:www|m|music)\.)?((?:youtube\.com|youtu.be|youtube-nocookie\.com))(\/(?:[\w-]+\?v=|embed\/|v\/)?)([\w-]+)(\S+)?$/;
+var YOUTUBE_REGEX_GLOBAL = /^((?:https?:)?\/\/)?((?:www|m|music)\.)?((?:youtube\.com|youtu.be|youtube-nocookie\.com))(\/(?:[\w-]+\?v=|embed\/|v\/)?)([\w-]+)(\S+)?$/g;
+var isValidYoutubeUrl = (url) => {
+  return url.match(YOUTUBE_REGEX);
 };
-const getYoutubeEmbedUrl = (nocookie, isPlaylist) => {
-    if (isPlaylist) {
-        return 'https://www.youtube-nocookie.com/embed/videoseries?list=';
-    }
-    return nocookie ? 'https://www.youtube-nocookie.com/embed/' : 'https://www.youtube.com/embed/';
+var getYoutubeEmbedUrl = (nocookie, isPlaylist) => {
+  if (isPlaylist) {
+    return "https://www.youtube-nocookie.com/embed/videoseries?list=";
+  }
+  return nocookie ? "https://www.youtube-nocookie.com/embed/" : "https://www.youtube.com/embed/";
 };
-const getEmbedUrlFromYoutubeUrl = (options) => {
-    const { url, allowFullscreen, autoplay, ccLanguage, ccLoadPolicy, controls, disableKBcontrols, enableIFrameApi, endTime, interfaceLanguage, ivLoadPolicy, loop, modestBranding, nocookie, origin, playlist, progressBarColor, startAt, rel, } = options;
-    if (!isValidYoutubeUrl(url)) {
-        return null;
-    }
-    // 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|list)=|shorts\/)([-\w]+)/gm;
-    const matches = videoIdRegex.exec(url);
-    if (!matches || !matches[2]) {
-        return null;
-    }
-    let outputUrl = `${getYoutubeEmbedUrl(nocookie, matches[1] === 'list')}${matches[2]}`;
-    const params = [];
-    if (allowFullscreen === false) {
-        params.push('fs=0');
-    }
-    if (autoplay) {
-        params.push('autoplay=1');
-    }
-    if (ccLanguage) {
-        params.push(`cc_lang_pref=${ccLanguage}`);
-    }
-    if (ccLoadPolicy) {
-        params.push('cc_load_policy=1');
-    }
-    if (!controls) {
-        params.push('controls=0');
-    }
-    if (disableKBcontrols) {
-        params.push('disablekb=1');
-    }
-    if (enableIFrameApi) {
-        params.push('enablejsapi=1');
-    }
-    if (endTime) {
-        params.push(`end=${endTime}`);
-    }
-    if (interfaceLanguage) {
-        params.push(`hl=${interfaceLanguage}`);
+var getEmbedUrlFromYoutubeUrl = (options) => {
+  const {
+    url,
+    allowFullscreen,
+    autoplay,
+    ccLanguage,
+    ccLoadPolicy,
+    controls,
+    disableKBcontrols,
+    enableIFrameApi,
+    endTime,
+    interfaceLanguage,
+    ivLoadPolicy,
+    loop,
+    modestBranding,
+    nocookie,
+    origin,
+    playlist,
+    progressBarColor,
+    startAt,
+    rel
+  } = options;
+  if (!isValidYoutubeUrl(url)) {
+    return null;
+  }
+  if (url.includes("/embed/")) {
+    return url;
+  }
+  if (url.includes("youtu.be")) {
+    const id = url.split("/").pop();
+    if (!id) {
+      return null;
     }
-    if (ivLoadPolicy) {
-        params.push(`iv_load_policy=${ivLoadPolicy}`);
-    }
-    if (loop) {
-        params.push('loop=1');
-    }
-    if (modestBranding) {
-        params.push('modestbranding=1');
-    }
-    if (origin) {
-        params.push(`origin=${origin}`);
-    }
-    if (playlist) {
-        params.push(`playlist=${playlist}`);
-    }
-    if (startAt) {
-        params.push(`start=${startAt}`);
-    }
-    if (progressBarColor) {
-        params.push(`color=${progressBarColor}`);
-    }
-    if (rel !== undefined) {
-        params.push(`rel=${rel}`);
-    }
-    if (params.length) {
-        outputUrl += `${matches[1] === 'v' ? '?' : '&'}${params.join('&')}`;
-    }
-    return outputUrl;
+    return `${getYoutubeEmbedUrl(nocookie)}${id}`;
+  }
+  const videoIdRegex = /(?:(v|list)=|shorts\/)([-\w]+)/gm;
+  const matches = videoIdRegex.exec(url);
+  if (!matches || !matches[2]) {
+    return null;
+  }
+  let outputUrl = `${getYoutubeEmbedUrl(nocookie, matches[1] === "list")}${matches[2]}`;
+  const params = [];
+  if (allowFullscreen === false) {
+    params.push("fs=0");
+  }
+  if (autoplay) {
+    params.push("autoplay=1");
+  }
+  if (ccLanguage) {
+    params.push(`cc_lang_pref=${ccLanguage}`);
+  }
+  if (ccLoadPolicy) {
+    params.push("cc_load_policy=1");
+  }
+  if (!controls) {
+    params.push("controls=0");
+  }
+  if (disableKBcontrols) {
+    params.push("disablekb=1");
+  }
+  if (enableIFrameApi) {
+    params.push("enablejsapi=1");
+  }
+  if (endTime) {
+    params.push(`end=${endTime}`);
+  }
+  if (interfaceLanguage) {
+    params.push(`hl=${interfaceLanguage}`);
+  }
+  if (ivLoadPolicy) {
+    params.push(`iv_load_policy=${ivLoadPolicy}`);
+  }
+  if (loop) {
+    params.push("loop=1");
+  }
+  if (modestBranding) {
+    params.push("modestbranding=1");
+  }
+  if (origin) {
+    params.push(`origin=${origin}`);
+  }
+  if (playlist) {
+    params.push(`playlist=${playlist}`);
+  }
+  if (startAt) {
+    params.push(`start=${startAt}`);
+  }
+  if (progressBarColor) {
+    params.push(`color=${progressBarColor}`);
+  }
+  if (rel !== void 0) {
+    params.push(`rel=${rel}`);
+  }
+  if (params.length) {
+    outputUrl += `${matches[1] === "v" ? "?" : "&"}${params.join("&")}`;
+  }
+  return outputUrl;
 };
 
-/**
- * This extension adds support for youtube videos.
- * @see https://www.tiptap.dev/api/nodes/youtube
- */
-const Youtube = Node.create({
-    name: 'youtube',
-    addOptions() {
-        return {
-            addPasteHandler: true,
-            allowFullscreen: true,
-            autoplay: false,
-            ccLanguage: undefined,
-            ccLoadPolicy: undefined,
-            controls: true,
-            disableKBcontrols: false,
-            enableIFrameApi: false,
-            endTime: 0,
-            height: 480,
-            interfaceLanguage: undefined,
-            ivLoadPolicy: 0,
-            loop: false,
-            modestBranding: false,
-            HTMLAttributes: {},
-            inline: false,
-            nocookie: false,
-            origin: '',
-            playlist: '',
-            progressBarColor: undefined,
-            width: 640,
-            rel: 1,
-        };
-    },
-    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 [];
+// src/youtube.ts
+var Youtube = Node.create({
+  name: "youtube",
+  addOptions() {
+    return {
+      addPasteHandler: true,
+      allowFullscreen: true,
+      autoplay: false,
+      ccLanguage: void 0,
+      ccLoadPolicy: void 0,
+      controls: true,
+      disableKBcontrols: false,
+      enableIFrameApi: false,
+      endTime: 0,
+      height: 480,
+      interfaceLanguage: void 0,
+      ivLoadPolicy: 0,
+      loop: false,
+      modestBranding: false,
+      HTMLAttributes: {},
+      inline: false,
+      nocookie: false,
+      origin: "",
+      playlist: "",
+      progressBarColor: void 0,
+      width: 640,
+      rel: 1
+    };
+  },
+  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 [
-            nodePasteRule({
-                find: YOUTUBE_REGEX_GLOBAL,
-                type: this.type,
-                getAttributes: match => {
-                    return { src: match.input };
-                },
-            }),
-        ];
-    },
-    renderHTML({ HTMLAttributes }) {
-        const embedUrl = getEmbedUrlFromYoutubeUrl({
-            url: HTMLAttributes.src,
-            allowFullscreen: this.options.allowFullscreen,
+        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,
+      allowFullscreen: this.options.allowFullscreen,
+      autoplay: this.options.autoplay,
+      ccLanguage: this.options.ccLanguage,
+      ccLoadPolicy: this.options.ccLoadPolicy,
+      controls: this.options.controls,
+      disableKBcontrols: this.options.disableKBcontrols,
+      enableIFrameApi: this.options.enableIFrameApi,
+      endTime: this.options.endTime,
+      interfaceLanguage: this.options.interfaceLanguage,
+      ivLoadPolicy: this.options.ivLoadPolicy,
+      loop: this.options.loop,
+      modestBranding: this.options.modestBranding,
+      nocookie: this.options.nocookie,
+      origin: this.options.origin,
+      playlist: this.options.playlist,
+      progressBarColor: this.options.progressBarColor,
+      startAt: HTMLAttributes.start || 0,
+      rel: this.options.rel
+    });
+    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,
             autoplay: this.options.autoplay,
             ccLanguage: this.options.ccLanguage,
             ccLoadPolicy: this.options.ccLoadPolicy,
-            controls: this.options.controls,
             disableKBcontrols: this.options.disableKBcontrols,
             enableIFrameApi: this.options.enableIFrameApi,
             endTime: this.options.endTime,
@@ -196,42 +242,22 @@ const Youtube = Node.create({
             ivLoadPolicy: this.options.ivLoadPolicy,
             loop: this.options.loop,
             modestBranding: this.options.modestBranding,
-            nocookie: this.options.nocookie,
             origin: this.options.origin,
             playlist: this.options.playlist,
             progressBarColor: this.options.progressBarColor,
-            startAt: HTMLAttributes.start || 0,
-            rel: this.options.rel,
-        });
-        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,
-                    autoplay: this.options.autoplay,
-                    ccLanguage: this.options.ccLanguage,
-                    ccLoadPolicy: this.options.ccLoadPolicy,
-                    disableKBcontrols: this.options.disableKBcontrols,
-                    enableIFrameApi: this.options.enableIFrameApi,
-                    endTime: this.options.endTime,
-                    interfaceLanguage: this.options.interfaceLanguage,
-                    ivLoadPolicy: this.options.ivLoadPolicy,
-                    loop: this.options.loop,
-                    modestBranding: this.options.modestBranding,
-                    origin: this.options.origin,
-                    playlist: this.options.playlist,
-                    progressBarColor: this.options.progressBarColor,
-                    rel: this.options.rel,
-                }, HTMLAttributes),
-            ],
-        ];
-    },
+            rel: this.options.rel
+          },
+          HTMLAttributes
+        )
+      ]
+    ];
+  }
 });
 
-export { Youtube, Youtube as default };
-//# sourceMappingURL=index.js.map
+// src/index.ts
+var index_default = Youtube;
+export {
+  Youtube,
+  index_default as default
+};
+//# sourceMappingURL=index.js.map