@tiptap/extension-youtube 2.0.0-beta.209 → 2.0.0-beta.210

package/dist/index.cjs

@@ -0,0 +1,249 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/youtube.ts
+var _core = require('@tiptap/core');
+
+// src/utils.ts
+var YOUTUBE_REGEX = /^(https?:\/\/)?(www\.|music\.)?(youtube\.com|youtu\.be)(.+)?$/;
+var YOUTUBE_REGEX_GLOBAL = /^(https?:\/\/)?(www\.|music\.)?(youtube\.com|youtu\.be)(.+)?$/g;
+var isValidYoutubeUrl = (url) => {
+  return url.match(YOUTUBE_REGEX);
+};
+var getYoutubeEmbedUrl = (nocookie) => {
+  return nocookie ? "https://www.youtube-nocookie.com/embed/" : "https://www.youtube.com/embed/";
+};
+var getEmbedUrlFromYoutubeUrl = (options) => {
+  const {
+    url,
+    allowFullscreen,
+    autoplay,
+    ccLanguage,
+    ccLoadPolicy,
+    controls,
+    disableKBcontrols,
+    enableIFrameApi,
+    endTime,
+    interfaceLanguage,
+    ivLoadPolicy,
+    loop,
+    modestBranding,
+    nocookie,
+    origin,
+    playlist,
+    progressBarColor,
+    startAt
+  } = options;
+  if (url.includes("/embed/")) {
+    return url;
+  }
+  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 (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 (params.length) {
+    outputUrl += `?${params.join("&")}`;
+  }
+  return outputUrl;
+};
+
+// src/youtube.ts
+var Youtube = _core.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
+    };
+  },
+  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.call(void 0, {
+        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
+    });
+    HTMLAttributes.src = embedUrl;
+    return [
+      "div",
+      { "data-youtube-video": "" },
+      [
+        "iframe",
+        _core.mergeAttributes.call(void 0, 
+          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
+          },
+          HTMLAttributes
+        )
+      ]
+    ];
+  }
+});
+
+// src/index.ts
+var src_default = Youtube;
+
+
+
+exports.Youtube = Youtube; exports.default = src_default;

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

@@ -1,40 +1,43 @@
-import { Node } from '@tiptap/core';
-export interface YoutubeOptions {
-    addPasteHandler: boolean;
-    allowFullscreen: boolean;
-    autoplay: boolean;
-    ccLanguage?: string;
-    ccLoadPolicy?: boolean;
-    controls: boolean;
-    disableKBcontrols: boolean;
-    enableIFrameApi: boolean;
-    endTime: number;
-    height: number;
-    interfaceLanguage?: string;
-    ivLoadPolicy: number;
-    loop: boolean;
-    modestBranding: boolean;
-    HTMLAttributes: Record<string, any>;
-    inline: boolean;
-    nocookie: boolean;
-    origin: string;
-    playlist: string;
-    progressBarColor?: string;
-    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>;
+import { Node } from '@tiptap/core';
+
+interface YoutubeOptions {
+    addPasteHandler: boolean;
+    allowFullscreen: boolean;
+    autoplay: boolean;
+    ccLanguage?: string;
+    ccLoadPolicy?: boolean;
+    controls: boolean;
+    disableKBcontrols: boolean;
+    enableIFrameApi: boolean;
+    endTime: number;
+    height: number;
+    interfaceLanguage?: string;
+    ivLoadPolicy: number;
+    loop: boolean;
+    modestBranding: boolean;
+    HTMLAttributes: Record<string, any>;
+    inline: boolean;
+    nocookie: boolean;
+    origin: string;
+    playlist: string;
+    progressBarColor?: string;
+    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;
+        };
+    }
+}
+declare const Youtube: Node<YoutubeOptions, any>;
+
+export { Youtube, YoutubeOptions, Youtube as default };

package/dist/index.js

@@ -0,0 +1,249 @@
+// src/youtube.ts
+import { mergeAttributes, Node, nodePasteRule } from "@tiptap/core";
+
+// src/utils.ts
+var YOUTUBE_REGEX = /^(https?:\/\/)?(www\.|music\.)?(youtube\.com|youtu\.be)(.+)?$/;
+var YOUTUBE_REGEX_GLOBAL = /^(https?:\/\/)?(www\.|music\.)?(youtube\.com|youtu\.be)(.+)?$/g;
+var isValidYoutubeUrl = (url) => {
+  return url.match(YOUTUBE_REGEX);
+};
+var getYoutubeEmbedUrl = (nocookie) => {
+  return nocookie ? "https://www.youtube-nocookie.com/embed/" : "https://www.youtube.com/embed/";
+};
+var getEmbedUrlFromYoutubeUrl = (options) => {
+  const {
+    url,
+    allowFullscreen,
+    autoplay,
+    ccLanguage,
+    ccLoadPolicy,
+    controls,
+    disableKBcontrols,
+    enableIFrameApi,
+    endTime,
+    interfaceLanguage,
+    ivLoadPolicy,
+    loop,
+    modestBranding,
+    nocookie,
+    origin,
+    playlist,
+    progressBarColor,
+    startAt
+  } = options;
+  if (url.includes("/embed/")) {
+    return url;
+  }
+  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 (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 (params.length) {
+    outputUrl += `?${params.join("&")}`;
+  }
+  return outputUrl;
+};
+
+// 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
+    };
+  },
+  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,
+      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
+    });
+    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
+          },
+          HTMLAttributes
+        )
+      ]
+    ];
+  }
+});
+
+// src/index.ts
+var src_default = Youtube;
+export {
+  Youtube,
+  src_default as default
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/extension-youtube",
   "description": "a youtube embed extension for tiptap",
-  "version": "2.0.0-beta.209",
+  "version": "2.0.0-beta.210",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -15,28 +15,41 @@
   "type": "module",
   "exports": {
     ".": {
-      "types": "./dist/packages/extension-youtube/src/index.d.ts",
-      "import": "./dist/tiptap-extension-youtube.esm.js",
-      "require": "./dist/tiptap-extension-youtube.cjs"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     }
   },
-  "main": "dist/tiptap-extension-youtube.cjs",
-  "umd": "dist/tiptap-extension-youtube.umd.js",
-  "module": "dist/tiptap-extension-youtube.esm.js",
-  "types": "dist/packages/extension-youtube/src/index.d.ts",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "src",
     "dist"
   ],
   "peerDependencies": {
-    "@tiptap/core": "^2.0.0-beta.193"
+    "@tiptap/core": "^2.0.0-beta.209"
   },
   "devDependencies": {
-    "@tiptap/core": "^2.0.0-beta.209"
+    "@tiptap/core": "^2.0.0-beta.210"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/ueberdosis/tiptap",
     "directory": "packages/extension-youtube"
+  },
+  "scripts": {
+    "build": "tsup"
+  },
+  "tsup": {
+    "entry": [
+      "src/index.ts"
+    ],
+    "dts": true,
+    "splitting": true,
+    "format": [
+      "esm",
+      "cjs"
+    ]
   }
 }

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

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

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

@@ -1,25 +0,0 @@
-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;
-    allowFullscreen?: boolean;
-    autoplay?: boolean;
-    ccLanguage?: string;
-    ccLoadPolicy?: boolean;
-    controls?: boolean;
-    disableKBcontrols?: boolean;
-    enableIFrameApi?: boolean;
-    endTime?: number;
-    interfaceLanguage?: string;
-    ivLoadPolicy?: number;
-    loop?: boolean;
-    modestBranding?: boolean;
-    nocookie?: boolean;
-    origin?: string;
-    playlist?: string;
-    progressBarColor?: string;
-    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;