fix(active video button): added videoProviders prop + validation

Author: vk

src/extensions/Video/Video.ts

@@ -35,7 +35,15 @@ export interface VideoOptions extends GeneralOptions<VideoOptions> {
   upload?: (file: File) => Promise<string>
 
   /** The source URL of the video */
-  resourceVideo: 'upload' | 'link' | 'both'
+  resourceVideo: 'upload' | 'link' | 'both',
+
+  /**
+   * List of allowed video hosting providers
+   * Use ['.'] to allow any URL, or specify providers like ['youtube', 'vimeo']
+   *
+   * @default ['.']
+   */
+  videoProviders?: string[]
 }
 
 /**
@@ -119,6 +127,7 @@ export const Video = /* @__PURE__ */ Node.create<VideoOptions>({
             disabled: !editor.can().setVideo?.({}),
             icon: 'Video',
             tooltip: t('editor.video.tooltip'),
+            videoProviders: ['.'],
             editor,
           },
         };

src/extensions/Video/components/ActiveVideoButton.tsx

@@ -7,8 +7,29 @@ import { useLocale } from '@/locales';
 import { listenEvent } from '@/utils/customEvents/customEvents';
 import { EVENTS } from '@/utils/customEvents/events.constant';
 
-function checkIsVideo(url: string) {
-  return /\.(?:mp4|webm|ogg|mov)$/i.test(url);
+function checkIsVideoUrl(url: string, allowedProviders?: string[]): boolean {
+  let urlObj: URL;
+  try {
+    urlObj = new URL(url);
+  } catch {
+    return false;
+  }
+
+  // If no providers specified or wildcard ['.'] is used, allow any valid URL
+  if (!allowedProviders?.length || (allowedProviders.length === 1 && allowedProviders[0] === '.')) {
+    return true;
+  }
+
+  return allowedProviders.some(provider => {
+    if (provider.includes('*')) {
+      const pattern = provider
+          .replace(/\./g, '\\.')
+          .replace(/\*/g, '.*');
+      return new RegExp(`^${pattern}$`).test(urlObj.hostname);
+    }
+
+    return urlObj.hostname.includes(provider);
+  });
 }
 
 function ActionVideoButton(props: any) {
@@ -160,6 +181,16 @@ function ActionVideoButton(props: any) {
                   onChange={(e) => {
                     setLink(e.target.value);
                   }}
+                  onBlur={(e) => {
+                    const url = e.target.value;
+                    const videoProviders = uploadOptions.videoProviders || ['.'];
+
+                    if (url && !checkIsVideoUrl(url, videoProviders)) {
+                      setError('Invalid video URL');
+                    } else {
+                      setError('');
+                    }
+                  }}
                 />
 
                 <Button type="submit">