From 1ba9ecdde8e57f7bed9dd5341e340c7bc3b8fac6 Mon Sep 17 00:00:00 2001
From: Md Saban <md.saban@atlan.com>
Date: Wed, 2 Oct 2024 19:57:11 +0530
Subject: [PATCH 1/6] feat: allow pasting image from clipboard

---
 .../editor/src/parsers/getClipboardImage.ts   | 41 +++++++++++++++++++
 .../src/plugins/SlateEditorComponent.tsx      |  8 +++-
 2 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 packages/core/editor/src/parsers/getClipboardImage.ts

diff --git a/packages/core/editor/src/parsers/getClipboardImage.ts b/packages/core/editor/src/parsers/getClipboardImage.ts
new file mode 100644
index 000000000..4dd22f7cc
--- /dev/null
+++ b/packages/core/editor/src/parsers/getClipboardImage.ts
@@ -0,0 +1,41 @@
+import { generateId } from '../utils/generateId';
+import { YooEditor, YooptaBlockData } from '../editor/types';
+
+const buildBlockData = (imageURL: string) => {
+  const blockData = {
+    id: generateId(),
+    type: 'Image',
+    value: [
+      {
+        id: generateId(),
+        type: 'image',
+        children: [{ text: '' }],
+        props: {
+          nodeType: 'void',
+          src: imageURL,
+          alt: 'pasted image',
+          srcSet: null,
+          fit: 'contain',
+        },
+      },
+    ],
+    meta: {
+      order: 0,
+      depth: 0,
+      align: 'left',
+    },
+  };
+  return blockData as YooptaBlockData;
+};
+
+export const pasteClipboardImage = (editor: YooEditor, image: DataTransferItem) => {
+  const blob = image.getAsFile();
+  if (!blob) return;
+  const reader = new FileReader();
+  reader.onload = (e) => {
+    if (!e.target) return;
+    const blockData = buildBlockData(e.target.result as string);
+    editor.insertBlock(blockData, { at: editor.selection, focus: true });
+  };
+  reader.readAsDataURL(blob);
+};
diff --git a/packages/core/editor/src/plugins/SlateEditorComponent.tsx b/packages/core/editor/src/plugins/SlateEditorComponent.tsx
index e029e6ee5..8f40ca0db 100644
--- a/packages/core/editor/src/plugins/SlateEditorComponent.tsx
+++ b/packages/core/editor/src/plugins/SlateEditorComponent.tsx
@@ -11,6 +11,7 @@ import { TextLeaf } from '../components/TextLeaf/TextLeaf';
 
 import { IS_FOCUSED_EDITOR } from '../utils/weakMaps';
 import { deserializeHTML } from '../parsers/deserializeHTML';
+import { pasteClipboardImage } from '../parsers/getClipboardImage';
 import { useEventHandlers, useSlateEditor } from './hooks';
 import { SlateElement } from '../editor/types';
 
@@ -154,9 +155,9 @@ const SlateEditorComponent = <TElementMap extends Record<string, SlateElement>,
 
       const data = event.clipboardData;
       const html = data.getData('text/html');
+      const clipboardItem = data.items[0];
 
       const parsedHTML = new DOMParser().parseFromString(html, 'text/html');
-
       if (parsedHTML.body.childNodes.length > 0) {
         const blocks = deserializeHTML(editor, parsedHTML.body);
 
@@ -167,6 +168,11 @@ const SlateEditorComponent = <TElementMap extends Record<string, SlateElement>,
           return;
         }
       }
+      const isImageInClipboard = clipboardItem?.type?.startsWith('image/');
+      if (isImageInClipboard) {
+        event.preventDefault();
+        pasteClipboardImage(editor, clipboardItem);
+      }
     },
     [eventHandlers.onPaste, editor.readOnly],
   );

From a70600be543b3252da448975004b5e2b0cf93807 Mon Sep 17 00:00:00 2001
From: Md Saban <md.saban@atlan.com>
Date: Sun, 10 Nov 2024 15:35:54 +0530
Subject: [PATCH 2/6] fix: add onpaste and ondrop on editor

---
 .../editor/src/components/Editor/Editor.tsx   | 54 ++++++++++++++++++-
 .../editor/src/parsers/getClipboardImage.ts   | 41 --------------
 .../src/plugins/SlateEditorComponent.tsx      |  8 +--
 packages/plugins/image/src/plugin/index.tsx   |  1 +
 packages/plugins/image/src/types.ts           |  1 +
 packages/plugins/video/src/plugin/index.tsx   |  1 +
 packages/plugins/video/src/types.ts           |  1 +
 7 files changed, 58 insertions(+), 49 deletions(-)
 delete mode 100644 packages/core/editor/src/parsers/getClipboardImage.ts

diff --git a/packages/core/editor/src/components/Editor/Editor.tsx b/packages/core/editor/src/components/Editor/Editor.tsx
index e88cebc5d..84c3af8c6 100644
--- a/packages/core/editor/src/components/Editor/Editor.tsx
+++ b/packages/core/editor/src/components/Editor/Editor.tsx
@@ -169,7 +169,6 @@ const Editor = ({
 
         navigator.clipboard.write([clipboardItem]).then(() => {
           const html = new DOMParser().parseFromString(htmlString, 'text/html');
-          console.log('HTML copied\n', html.body);
         });
 
         if (HOTKEYS.isCut(event)) {
@@ -306,6 +305,57 @@ const Editor = ({
     }
   };
 
+  const addImageOrVideoFromClipboard = async (file: File) => {
+    const ImagePlugin = {
+      plugin: editor.plugins.Image,
+      type: 'Image',
+    };
+    const VideoPlugin = {
+      plugin: editor.plugins.Video,
+      type: 'Video',
+    };
+
+    const isImage = file.type.startsWith('image/');
+    const { plugin, type } = isImage ? ImagePlugin : VideoPlugin;
+
+    if (!plugin?.options) return;
+
+    if (!plugin.options.enableFromClipboard) return;
+
+    const mimeTypes = plugin.options.accept;
+    if (isImage && !mimeTypes.includes(file.type)) return;
+    if (!file.type.includes('video')) return;
+
+    const element = await plugin.options.onUpload(file);
+    let block;
+    if (type === 'Image') {
+      block = plugin.commands?.buildImageElements(editor, { props: element });
+    }
+    if (type === 'Video') {
+      block = plugin.commands?.buildVideoElements(editor, { props: element });
+    }
+    const blockData = Blocks.buildBlockData({ type, value: [block] });
+    Blocks.insertBlock(editor, type, { focus: true, blockData });
+  };
+
+  const onPaste = (e: ClipboardEvent) => {
+    const items = e.clipboardData.items;
+    for (const item of items) {
+      const file = item.getAsFile();
+      if (!file) continue;
+      addImageOrVideoFromClipboard(file);
+    }
+  };
+
+  const onDrop = (e: DragEvent) => {
+    const items = e.dataTransfer?.files;
+    if (!items) return;
+    for (const file of items) {
+      if (!file) continue;
+      addImageOrVideoFromClipboard(file);
+    }
+  };
+
   const editorStyles: CSSProperties = getEditorStyles({
     userSelect: selectionBox.selection ? 'none' : 'auto',
     pointerEvents: selectionBox.selection ? 'none' : 'auto',
@@ -322,6 +372,8 @@ const Editor = ({
       onBlur={onBlur}
       onCopy={onCopy}
       onCut={onCopy}
+      onPaste={onPaste}
+      onDrop={onDrop}
     >
       <RenderBlocks editor={editor} marks={marks} placeholder={placeholder} />
       {selectionBoxRoot !== false && (
diff --git a/packages/core/editor/src/parsers/getClipboardImage.ts b/packages/core/editor/src/parsers/getClipboardImage.ts
deleted file mode 100644
index 4dd22f7cc..000000000
--- a/packages/core/editor/src/parsers/getClipboardImage.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { generateId } from '../utils/generateId';
-import { YooEditor, YooptaBlockData } from '../editor/types';
-
-const buildBlockData = (imageURL: string) => {
-  const blockData = {
-    id: generateId(),
-    type: 'Image',
-    value: [
-      {
-        id: generateId(),
-        type: 'image',
-        children: [{ text: '' }],
-        props: {
-          nodeType: 'void',
-          src: imageURL,
-          alt: 'pasted image',
-          srcSet: null,
-          fit: 'contain',
-        },
-      },
-    ],
-    meta: {
-      order: 0,
-      depth: 0,
-      align: 'left',
-    },
-  };
-  return blockData as YooptaBlockData;
-};
-
-export const pasteClipboardImage = (editor: YooEditor, image: DataTransferItem) => {
-  const blob = image.getAsFile();
-  if (!blob) return;
-  const reader = new FileReader();
-  reader.onload = (e) => {
-    if (!e.target) return;
-    const blockData = buildBlockData(e.target.result as string);
-    editor.insertBlock(blockData, { at: editor.selection, focus: true });
-  };
-  reader.readAsDataURL(blob);
-};
diff --git a/packages/core/editor/src/plugins/SlateEditorComponent.tsx b/packages/core/editor/src/plugins/SlateEditorComponent.tsx
index 4ad242162..1c494724a 100644
--- a/packages/core/editor/src/plugins/SlateEditorComponent.tsx
+++ b/packages/core/editor/src/plugins/SlateEditorComponent.tsx
@@ -11,7 +11,6 @@ import { TextLeaf } from '../components/TextLeaf/TextLeaf';
 
 import { IS_FOCUSED_EDITOR } from '../utils/weakMaps';
 import { deserializeHTML } from '../parsers/deserializeHTML';
-import { pasteClipboardImage } from '../parsers/getClipboardImage';
 import { useEventHandlers, useSlateEditor } from './hooks';
 import { SlateElement } from '../editor/types';
 import { Paths } from '../editor/paths';
@@ -163,9 +162,9 @@ const SlateEditorComponent = <TElementMap extends Record<string, SlateElement>,
 
       const data = event.clipboardData;
       const html = data.getData('text/html');
-      const clipboardItem = data.items[0];
 
       const parsedHTML = new DOMParser().parseFromString(html, 'text/html');
+
       if (parsedHTML.body.childNodes.length > 0) {
         const blocks = deserializeHTML(editor, parsedHTML.body);
 
@@ -212,11 +211,6 @@ const SlateEditorComponent = <TElementMap extends Record<string, SlateElement>,
           return;
         }
       }
-      const isImageInClipboard = clipboardItem?.type?.startsWith('image/');
-      if (isImageInClipboard) {
-        event.preventDefault();
-        pasteClipboardImage(editor, clipboardItem);
-      }
     },
     [eventHandlers.onPaste, editor.readOnly],
   );
diff --git a/packages/plugins/image/src/plugin/index.tsx b/packages/plugins/image/src/plugin/index.tsx
index b5397e446..e7cda79c7 100644
--- a/packages/plugins/image/src/plugin/index.tsx
+++ b/packages/plugins/image/src/plugin/index.tsx
@@ -35,6 +35,7 @@ const Image = new YooptaPlugin<ImageElementMap, ImagePluginOptions>({
     onUpload: () => Promise.resolve({ src: null, alt: null }),
     accept: 'image/png, image/jpeg, image/gif, image/webp',
     maxSizes: { maxWidth: 650, maxHeight: 550 },
+    enableFromClipboard: true,
   },
   parsers: {
     html: {
diff --git a/packages/plugins/image/src/types.ts b/packages/plugins/image/src/types.ts
index db17df3db..51895af7e 100644
--- a/packages/plugins/image/src/types.ts
+++ b/packages/plugins/image/src/types.ts
@@ -32,6 +32,7 @@ export type ImagePluginOptions = {
     maxWidth?: number;
     maxHeight?: number;
   };
+  enableFromClipboard?: boolean;
 };
 
 export type ImageElementMap = {
diff --git a/packages/plugins/video/src/plugin/index.tsx b/packages/plugins/video/src/plugin/index.tsx
index 1c21de845..350f21633 100644
--- a/packages/plugins/video/src/plugin/index.tsx
+++ b/packages/plugins/video/src/plugin/index.tsx
@@ -43,6 +43,7 @@ const Video = new YooptaPlugin<VideoElementMap, VideoPluginOptions>({
       title: 'Video',
       description: 'Upload from device, embed from Youtube, Vimeo',
     },
+    enableFromClipboard: true,
   },
   commands: VideoCommands,
   parsers: {
diff --git a/packages/plugins/video/src/types.ts b/packages/plugins/video/src/types.ts
index 6f365e64c..a34bdc2e6 100644
--- a/packages/plugins/video/src/types.ts
+++ b/packages/plugins/video/src/types.ts
@@ -43,6 +43,7 @@ export type VideoPluginOptions = {
     maxWidth?: number;
     maxHeight?: number;
   };
+  enableFromClipboard?: boolean;
 };
 
 export type VideoElementMap = {

From 5e0845fcdf529411a1e37517d0960ff501d61c29 Mon Sep 17 00:00:00 2001
From: Md Saban <md.saban@atlan.com>
Date: Tue, 12 Nov 2024 22:46:01 +0530
Subject: [PATCH 3/6] fix: remove plugin logic from core

---
 .../editor/src/components/Editor/Editor.tsx   | 45 +++++++------------
 .../editor/src/plugins/createYooptaPlugin.tsx |  2 +
 packages/core/editor/src/plugins/types.ts     |  1 +
 packages/plugins/image/src/commands/index.ts  |  4 +-
 packages/plugins/image/src/plugin/index.tsx   |  9 +++-
 packages/plugins/image/src/types.ts           |  1 -
 packages/plugins/video/src/commands/index.ts  |  4 +-
 packages/plugins/video/src/plugin/index.tsx   |  9 +++-
 packages/plugins/video/src/types.ts           |  1 -
 9 files changed, 38 insertions(+), 38 deletions(-)

diff --git a/packages/core/editor/src/components/Editor/Editor.tsx b/packages/core/editor/src/components/Editor/Editor.tsx
index 84c3af8c6..b398d8f6d 100644
--- a/packages/core/editor/src/components/Editor/Editor.tsx
+++ b/packages/core/editor/src/components/Editor/Editor.tsx
@@ -306,36 +306,21 @@ const Editor = ({
   };
 
   const addImageOrVideoFromClipboard = async (file: File) => {
-    const ImagePlugin = {
-      plugin: editor.plugins.Image,
-      type: 'Image',
-    };
-    const VideoPlugin = {
-      plugin: editor.plugins.Video,
-      type: 'Video',
-    };
-
-    const isImage = file.type.startsWith('image/');
-    const { plugin, type } = isImage ? ImagePlugin : VideoPlugin;
-
-    if (!plugin?.options) return;
-
-    if (!plugin.options.enableFromClipboard) return;
-
-    const mimeTypes = plugin.options.accept;
-    if (isImage && !mimeTypes.includes(file.type)) return;
-    if (!file.type.includes('video')) return;
-
-    const element = await plugin.options.onUpload(file);
-    let block;
-    if (type === 'Image') {
-      block = plugin.commands?.buildImageElements(editor, { props: element });
-    }
-    if (type === 'Video') {
-      block = plugin.commands?.buildVideoElements(editor, { props: element });
-    }
-    const blockData = Blocks.buildBlockData({ type, value: [block] });
-    Blocks.insertBlock(editor, type, { focus: true, blockData });
+    const plugin = Object.keys(editor.plugins).find((plugin) => {
+      const pluginInstance = editor.plugins[plugin];
+      const mimeTypes = pluginInstance.clipboardPasteOrDropRules?.mimeTypes;
+      if (!mimeTypes) return false;
+      return mimeTypes.includes(file.type);
+    });
+
+    if (!plugin) return;
+
+    const pluginInstance = editor.plugins[plugin];
+    const block = await pluginInstance.clipboardPasteOrDropRules?.handler(file);
+    if (!block) return;
+
+    const blockData = Blocks.buildBlockData({ type: pluginInstance.type, value: [block] });
+    Blocks.insertBlock(editor, pluginInstance.type, { focus: true, blockData });
   };
 
   const onPaste = (e: ClipboardEvent) => {
diff --git a/packages/core/editor/src/plugins/createYooptaPlugin.tsx b/packages/core/editor/src/plugins/createYooptaPlugin.tsx
index ed926514f..c282121df 100644
--- a/packages/core/editor/src/plugins/createYooptaPlugin.tsx
+++ b/packages/core/editor/src/plugins/createYooptaPlugin.tsx
@@ -38,6 +38,7 @@ export class YooptaPlugin<TElementMap extends Record<string, SlateElement>, TOpt
 
     const extendedOptions = { ...this.plugin.options, ...options };
     const elements = { ...this.plugin.elements };
+    const clipboardPasteOrDropRules = { ...this.plugin.clipboardPasteOrDropRules };
 
     if (renders) {
       Object.keys(renders).forEach((elementType) => {
@@ -84,6 +85,7 @@ export class YooptaPlugin<TElementMap extends Record<string, SlateElement>, TOpt
       ...this.plugin,
       elements: elements,
       options: extendedOptions as PluginOptions<TOptions>,
+      clipboardPasteOrDropRules: clipboardPasteOrDropRules,
     });
   }
 }
diff --git a/packages/core/editor/src/plugins/types.ts b/packages/core/editor/src/plugins/types.ts
index cfcc3c7bd..ae3118915 100644
--- a/packages/core/editor/src/plugins/types.ts
+++ b/packages/core/editor/src/plugins/types.ts
@@ -89,6 +89,7 @@ export type Plugin<TElementMap extends Record<string, SlateElement>, TPluginOpti
   events?: PluginEvents;
   options?: PluginOptions<TPluginOptions>;
   parsers?: Partial<Record<PluginParserTypes, PluginParsers>>;
+  clipboardPasteOrDropRules?: Record<string, any>;
 };
 
 export type PluginParsers = {
diff --git a/packages/plugins/image/src/commands/index.ts b/packages/plugins/image/src/commands/index.ts
index 4b39abceb..166d9a9d2 100644
--- a/packages/plugins/image/src/commands/index.ts
+++ b/packages/plugins/image/src/commands/index.ts
@@ -11,14 +11,14 @@ type InsertImageOptions = ImageElementOptions & {
 };
 
 export type ImageCommands = {
-  buildImageElements: (editor: YooEditor, options?: Partial<ImageElementOptions>) => ImageElement;
+  buildImageElements: (editor?: YooEditor, options?: Partial<ImageElementOptions>) => ImageElement;
   insertImage: (editor: YooEditor, options?: Partial<InsertImageOptions>) => void;
   deleteImage: (editor: YooEditor, blockId: string) => void;
   updateImage: (editor: YooEditor, blockId: string, props: Partial<ImageElementProps>) => void;
 };
 
 export const ImageCommands: ImageCommands = {
-  buildImageElements: (editor: YooEditor, options = {}) => {
+  buildImageElements: (editor?: YooEditor, options = {}) => {
     const imageProps = { ...options.props, nodeType: 'void' };
     return { id: generateId(), type: 'image', children: [{ text: '' }], props: imageProps as ImageElementProps };
   },
diff --git a/packages/plugins/image/src/plugin/index.tsx b/packages/plugins/image/src/plugin/index.tsx
index e7cda79c7..1069cb4ed 100644
--- a/packages/plugins/image/src/plugin/index.tsx
+++ b/packages/plugins/image/src/plugin/index.tsx
@@ -35,7 +35,14 @@ const Image = new YooptaPlugin<ImageElementMap, ImagePluginOptions>({
     onUpload: () => Promise.resolve({ src: null, alt: null }),
     accept: 'image/png, image/jpeg, image/gif, image/webp',
     maxSizes: { maxWidth: 650, maxHeight: 550 },
-    enableFromClipboard: true,
+  },
+  clipboardPasteOrDropRules: {
+    mimeTypes: ['image/png', 'image/jpeg', 'image/gif', 'image/webp'],
+    handler: async (file: File) => {
+      const data = await Image.getPlugin.options.onUpload(file);
+      const block = ImageCommands.buildImageElements(undefined, { props: data });
+      return block;
+    },
   },
   parsers: {
     html: {
diff --git a/packages/plugins/image/src/types.ts b/packages/plugins/image/src/types.ts
index 51895af7e..db17df3db 100644
--- a/packages/plugins/image/src/types.ts
+++ b/packages/plugins/image/src/types.ts
@@ -32,7 +32,6 @@ export type ImagePluginOptions = {
     maxWidth?: number;
     maxHeight?: number;
   };
-  enableFromClipboard?: boolean;
 };
 
 export type ImageElementMap = {
diff --git a/packages/plugins/video/src/commands/index.ts b/packages/plugins/video/src/commands/index.ts
index 5849c9ab9..4a9a6079e 100644
--- a/packages/plugins/video/src/commands/index.ts
+++ b/packages/plugins/video/src/commands/index.ts
@@ -11,14 +11,14 @@ type InsertVideoOptions = VideoElementOptions & {
 };
 
 export type VideoCommands = {
-  buildVideoElements: (editor: YooEditor, options?: Partial<VideoElementOptions>) => VideoElement;
+  buildVideoElements: (editor?: YooEditor, options?: Partial<VideoElementOptions>) => VideoElement;
   insertVideo: (editor: YooEditor, options?: Partial<InsertVideoOptions>) => void;
   deleteVideo: (editor: YooEditor, blockId: string) => void;
   updateVideo: (editor: YooEditor, blockId: string, props: Partial<VideoElementProps>) => void;
 };
 
 export const VideoCommands: VideoCommands = {
-  buildVideoElements: (editor: YooEditor, options = {}) => {
+  buildVideoElements: (editor?: YooEditor, options = {}) => {
     const videoProps = { ...options.props, nodeType: 'void' };
     return { id: generateId(), type: 'video', children: [{ text: '' }], props: videoProps as VideoElementProps };
   },
diff --git a/packages/plugins/video/src/plugin/index.tsx b/packages/plugins/video/src/plugin/index.tsx
index 350f21633..71ca61604 100644
--- a/packages/plugins/video/src/plugin/index.tsx
+++ b/packages/plugins/video/src/plugin/index.tsx
@@ -43,7 +43,14 @@ const Video = new YooptaPlugin<VideoElementMap, VideoPluginOptions>({
       title: 'Video',
       description: 'Upload from device, embed from Youtube, Vimeo',
     },
-    enableFromClipboard: true,
+  },
+  clipboardPasteOrDropRules: {
+    mimeTypes: ['video/mp4', 'video/webm', 'video/ogg', 'video/quicktime'],
+    handler: async (file: File) => {
+      const data = await Video.getPlugin.options.onUpload(file);
+      const block = VideoCommands.buildVideoElements(undefined, { props: data });
+      return block;
+    },
   },
   commands: VideoCommands,
   parsers: {
diff --git a/packages/plugins/video/src/types.ts b/packages/plugins/video/src/types.ts
index a34bdc2e6..6f365e64c 100644
--- a/packages/plugins/video/src/types.ts
+++ b/packages/plugins/video/src/types.ts
@@ -43,7 +43,6 @@ export type VideoPluginOptions = {
     maxWidth?: number;
     maxHeight?: number;
   };
-  enableFromClipboard?: boolean;
 };
 
 export type VideoElementMap = {

From 6a4ea4bc3beee6f87d0b3c382bc7114dfd323e5c Mon Sep 17 00:00:00 2001
From: Md Saban <md.saban@atlan.com>
Date: Wed, 13 Nov 2024 09:08:21 +0530
Subject: [PATCH 4/6] fix: use onUpload in editor's context

---
 packages/core/editor/src/components/Editor/Editor.tsx | 8 ++++----
 packages/core/editor/src/plugins/types.ts             | 7 ++++++-
 packages/plugins/image/src/plugin/index.tsx           | 7 ++++---
 packages/plugins/video/src/plugin/index.tsx           | 7 ++++---
 4 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/packages/core/editor/src/components/Editor/Editor.tsx b/packages/core/editor/src/components/Editor/Editor.tsx
index b398d8f6d..989c06c56 100644
--- a/packages/core/editor/src/components/Editor/Editor.tsx
+++ b/packages/core/editor/src/components/Editor/Editor.tsx
@@ -305,7 +305,7 @@ const Editor = ({
     }
   };
 
-  const addImageOrVideoFromClipboard = async (file: File) => {
+  const handleClipboardContent = async (file: File) => {
     const plugin = Object.keys(editor.plugins).find((plugin) => {
       const pluginInstance = editor.plugins[plugin];
       const mimeTypes = pluginInstance.clipboardPasteOrDropRules?.mimeTypes;
@@ -316,7 +316,7 @@ const Editor = ({
     if (!plugin) return;
 
     const pluginInstance = editor.plugins[plugin];
-    const block = await pluginInstance.clipboardPasteOrDropRules?.handler(file);
+    const block = await pluginInstance.clipboardPasteOrDropRules?.handler(file, editor);
     if (!block) return;
 
     const blockData = Blocks.buildBlockData({ type: pluginInstance.type, value: [block] });
@@ -328,7 +328,7 @@ const Editor = ({
     for (const item of items) {
       const file = item.getAsFile();
       if (!file) continue;
-      addImageOrVideoFromClipboard(file);
+      handleClipboardContent(file);
     }
   };
 
@@ -337,7 +337,7 @@ const Editor = ({
     if (!items) return;
     for (const file of items) {
       if (!file) continue;
-      addImageOrVideoFromClipboard(file);
+      handleClipboardContent(file);
     }
   };
 
diff --git a/packages/core/editor/src/plugins/types.ts b/packages/core/editor/src/plugins/types.ts
index ae3118915..67ca16062 100644
--- a/packages/core/editor/src/plugins/types.ts
+++ b/packages/core/editor/src/plugins/types.ts
@@ -64,6 +64,11 @@ export type EventHandlers = {
   ) => EditorEventHandlers[key] | void;
 };
 
+export type PluginClipboardPasteOrDropRules = {
+  mimeTypes: string[];
+  handler: (file: File, editor: YooEditor) => Promise<SlateElement>;
+};
+
 export type PluginEventHandlerOptions = {
   hotkeys: HOTKEYS_TYPE;
   defaultBlock: YooptaBlockData;
@@ -89,7 +94,7 @@ export type Plugin<TElementMap extends Record<string, SlateElement>, TPluginOpti
   events?: PluginEvents;
   options?: PluginOptions<TPluginOptions>;
   parsers?: Partial<Record<PluginParserTypes, PluginParsers>>;
-  clipboardPasteOrDropRules?: Record<string, any>;
+  clipboardPasteOrDropRules?: PluginClipboardPasteOrDropRules;
 };
 
 export type PluginParsers = {
diff --git a/packages/plugins/image/src/plugin/index.tsx b/packages/plugins/image/src/plugin/index.tsx
index 1069cb4ed..30d8e2983 100644
--- a/packages/plugins/image/src/plugin/index.tsx
+++ b/packages/plugins/image/src/plugin/index.tsx
@@ -1,4 +1,4 @@
-import { generateId, SlateElement, YooptaPlugin } from '@yoopta/editor';
+import { generateId, SlateElement, YooptaPlugin, YooEditor } from '@yoopta/editor';
 import { ImageCommands } from '../commands';
 import { ImageElementMap, ImageElementProps, ImagePluginElements, ImagePluginOptions } from '../types';
 import { ImageRender } from '../ui/Image';
@@ -38,8 +38,9 @@ const Image = new YooptaPlugin<ImageElementMap, ImagePluginOptions>({
   },
   clipboardPasteOrDropRules: {
     mimeTypes: ['image/png', 'image/jpeg', 'image/gif', 'image/webp'],
-    handler: async (file: File) => {
-      const data = await Image.getPlugin.options.onUpload(file);
+    handler: async (file: File, editor: YooEditor) => {
+      const pluginOptions = editor.plugins.Image.options as ImagePluginOptions;
+      const data = await pluginOptions.onUpload(file);
       const block = ImageCommands.buildImageElements(undefined, { props: data });
       return block;
     },
diff --git a/packages/plugins/video/src/plugin/index.tsx b/packages/plugins/video/src/plugin/index.tsx
index 71ca61604..3ce0be585 100644
--- a/packages/plugins/video/src/plugin/index.tsx
+++ b/packages/plugins/video/src/plugin/index.tsx
@@ -1,4 +1,4 @@
-import { generateId, YooptaPlugin } from '@yoopta/editor';
+import { generateId, YooptaPlugin, YooEditor } from '@yoopta/editor';
 import { VideoCommands } from '../commands';
 import { VideoElementMap, VideoPluginOptions } from '../types';
 import { VideoRender } from '../ui/Video';
@@ -46,8 +46,9 @@ const Video = new YooptaPlugin<VideoElementMap, VideoPluginOptions>({
   },
   clipboardPasteOrDropRules: {
     mimeTypes: ['video/mp4', 'video/webm', 'video/ogg', 'video/quicktime'],
-    handler: async (file: File) => {
-      const data = await Video.getPlugin.options.onUpload(file);
+    handler: async (file: File, editor: YooEditor) => {
+      const pluginOptions = editor.plugins.Video.options as VideoPluginOptions;
+      const data = await pluginOptions.onUpload(file);
       const block = VideoCommands.buildVideoElements(undefined, { props: data });
       return block;
     },

From e79ea2de560338b4ad60fcfec78331afe5239147 Mon Sep 17 00:00:00 2001
From: Alexandru Golovatenco <38139664+5andu@users.noreply.github.com>
Date: Tue, 3 Dec 2024 21:39:26 +0100
Subject: [PATCH 5/6] update email examples (#391)

## Description

Added the ability to add Loom & Wistia videos in the Video plugin. Note that I'm not used to Typescrpt at all, so I might need some help with this if you see issues.

Fixes # (issue)

## Type of change

Please tick the relevant option.

- [ ] Bug fix (non-breaking change which fixes an issue)
- [x ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
- [ ] This change requires a documentation update

## Checklist:

- [ ] I have performed a self-review of my own code
- [ ] I have commented on my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have checked my code and corrected any misspellings
---
 packages/plugins/embed/src/providers/Loom.tsx | 38 +++++++++++
 .../plugins/embed/src/providers/Wistia.tsx    | 43 ++++++++++++
 packages/plugins/embed/src/types.ts           |  2 +
 .../plugins/embed/src/ui/EmbedComponent.tsx   |  2 +
 packages/plugins/embed/src/utils/providers.ts | 16 +++++
 packages/plugins/video/src/plugin/index.tsx   |  2 +-
 packages/plugins/video/src/types.ts           |  2 +-
 .../plugins/video/src/ui/EmbedUploader.tsx    |  2 +-
 packages/plugins/video/src/ui/LoomPlayer.tsx  | 66 +++++++++++++++++++
 .../plugins/video/src/ui/VideoComponent.tsx   |  4 ++
 .../plugins/video/src/ui/WistiaPlayer.tsx     | 52 +++++++++++++++
 packages/plugins/video/src/utils/providers.ts | 33 ++++++++++
 12 files changed, 259 insertions(+), 3 deletions(-)
 create mode 100644 packages/plugins/embed/src/providers/Loom.tsx
 create mode 100644 packages/plugins/embed/src/providers/Wistia.tsx
 create mode 100644 packages/plugins/video/src/ui/LoomPlayer.tsx
 create mode 100644 packages/plugins/video/src/ui/WistiaPlayer.tsx

diff --git a/packages/plugins/embed/src/providers/Loom.tsx b/packages/plugins/embed/src/providers/Loom.tsx
new file mode 100644
index 000000000..8003e21a9
--- /dev/null
+++ b/packages/plugins/embed/src/providers/Loom.tsx
@@ -0,0 +1,38 @@
+import { useRef, useState } from 'react';
+import { useIntersectionObserver } from '../hooks/useIntersectionObserver';
+import { ProviderRenderProps } from '../types';
+
+function Loom({ provider, attributes, children }: ProviderRenderProps) {
+  const loomRootRef = useRef(null);
+  const [isFrameLoaded, setFrameLoaded] = useState(false);
+
+  const { isIntersecting: isInViewport } = useIntersectionObserver(loomRootRef, {
+    freezeOnceVisible: true,
+    rootMargin: '50%',
+  });
+
+  const onRef = (node) => {
+    loomRootRef.current = node;
+    attributes.ref(node);
+  };
+
+  return (
+    <div {...attributes} ref={onRef} className="yoo-embed-relative" style={{ paddingBottom: '53.90625%' }}>
+      {isInViewport && (
+        <iframe
+          title="Loom Video Player"
+          src={`https://www.loom.com/embed/${provider.id}?hide_owner=true&hide_share=true&hide_title=true&hideEmbedTopBar=true`}
+          frameBorder="0"
+          allowFullScreen
+          webkitallowfullscreen="true"
+          mozallowfullscreen="true"
+          onLoad={() => setFrameLoaded(true)}
+          className="yoo-embed-absolute yoo-embed-top-0 yoo-embed-left-0 yoo-embed-w-full yoo-embed-h-full"
+        />
+      )}
+      {children}
+    </div>
+  );
+}
+
+export { Loom };
diff --git a/packages/plugins/embed/src/providers/Wistia.tsx b/packages/plugins/embed/src/providers/Wistia.tsx
new file mode 100644
index 000000000..12f0c9375
--- /dev/null
+++ b/packages/plugins/embed/src/providers/Wistia.tsx
@@ -0,0 +1,43 @@
+import { useRef, useState } from 'react';
+import { useIntersectionObserver } from '../hooks/useIntersectionObserver';
+import { ProviderRenderProps } from '../types';
+
+function Wistia({ provider, attributes, children }: ProviderRenderProps) {
+  const wistiaRootRef = useRef(null);
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  const { isIntersecting: isInViewport } = useIntersectionObserver(wistiaRootRef, {
+    freezeOnceVisible: true,
+    rootMargin: '50%',
+  });
+
+  const onRef = (node) => {
+    wistiaRootRef.current = node;
+    attributes.ref(node);
+  };
+
+  return (
+    <div {...attributes} ref={onRef} className="yoo-embed-relative" style={{ paddingBottom: '56.25%' }}>
+      {isInViewport && (
+        <>
+          <script src={`https://fast.wistia.com/embed/medias/${provider.id}.jsonp`} async />
+          <script src="https://fast.wistia.com/assets/external/E-v1.js" async />
+          <div className="wistia_responsive_padding" style={{ padding: '56.25% 0 0 0', position: 'relative' }}>
+            <div
+              className="wistia_responsive_wrapper"
+              style={{ height: '100%', left: 0, position: 'absolute', top: 0, width: '100%' }}
+            >
+              <div
+                className={`wistia_embed wistia_async_${provider.id} videoFoam=true`}
+                style={{ height: '100%', position: 'relative', width: '100%' }}
+              />
+            </div>
+          </div>
+        </>
+      )}
+      {children}
+    </div>
+  );
+}
+
+export { Wistia };
diff --git a/packages/plugins/embed/src/types.ts b/packages/plugins/embed/src/types.ts
index 1fa2c852e..1d6ca8b0f 100644
--- a/packages/plugins/embed/src/types.ts
+++ b/packages/plugins/embed/src/types.ts
@@ -10,6 +10,8 @@ export type EmbedProviderTypes =
   | 'youtube'
   | 'vimeo'
   | 'dailymotion'
+  | 'wistia'
+  | 'loom'
   | 'twitter'
   | 'figma'
   | 'instagram'
diff --git a/packages/plugins/embed/src/ui/EmbedComponent.tsx b/packages/plugins/embed/src/ui/EmbedComponent.tsx
index 3602783bf..22bf49269 100644
--- a/packages/plugins/embed/src/ui/EmbedComponent.tsx
+++ b/packages/plugins/embed/src/ui/EmbedComponent.tsx
@@ -5,6 +5,8 @@ import Instagram from '../providers/Instagram';
 import Twitter from '../providers/Twitter';
 import { Vimeo } from '../providers/Vimeo';
 import { YouTube } from '../providers/Youtube';
+import { Loom } from '../providers/Loom';
+import { Wistia } from '../providers/Wistia';
 import { EmbedElementProps } from '../types';
 
 type EmbedComponentProps = Omit<EmbedElementProps, 'sizes'> & {
diff --git a/packages/plugins/embed/src/utils/providers.ts b/packages/plugins/embed/src/utils/providers.ts
index 24ad06c0f..f65da2961 100644
--- a/packages/plugins/embed/src/utils/providers.ts
+++ b/packages/plugins/embed/src/utils/providers.ts
@@ -24,6 +24,16 @@ export const getDailymotionId = (url: string) => {
   return null;
 };
 
+export const getWistiaId = (url: string) => {
+  const match = url.match(/(?:https?:\/\/)?(?:www\.)?wistia\.com\/medias\/(.+)/);
+  return match ? match[1] : null;
+};
+
+export const getLoomId = (url: string) => {
+  const match = url.match(/(?:https?:\/\/)?(?:www\.)?loom\.com\/share\/(.+)/);
+  return match ? match[1] : null;
+};
+
 export function getInstagramId(url: string) {
   const regex = /(?:https?:\/\/)?(?:www\.)?instagram\.com(?:\/p\/|\/reel\/|\/tv\/)([^\/?#&]+).*$/;
   const match = url.match(regex);
@@ -37,6 +47,10 @@ export function getProvider(url: string): EmbedProviderTypes | null {
     return 'vimeo';
   } else if (url.includes('dailymotion.com') || url.includes('dai.ly')) {
     return 'dailymotion';
+  } else if (url.includes('loom.com')) {
+    return 'loom';
+  } else if (url.includes('wistia.com')) {
+    return 'wistia';
   } else if (url.includes('twitter') || url.includes('https://x.com')) {
     return 'twitter';
   } else if (url.includes('figma')) {
@@ -70,6 +84,8 @@ export const ProviderGetters = {
   youtube: getYoutubeId,
   vimeo: getVimeoId,
   dailymotion: getDailymotionId,
+  wistia: getWistiaId,
+  loom: getLoomId,
   twitter: getTwitterEmbedId,
   figma: getFigmaUrl,
   instagram: getInstagramId,
diff --git a/packages/plugins/video/src/plugin/index.tsx b/packages/plugins/video/src/plugin/index.tsx
index 364e6de87..622090660 100644
--- a/packages/plugins/video/src/plugin/index.tsx
+++ b/packages/plugins/video/src/plugin/index.tsx
@@ -42,7 +42,7 @@ const Video = new YooptaPlugin<VideoElementMap, VideoPluginOptions>({
     onUpload: async () => Promise.resolve({ src: '' }),
     display: {
       title: 'Video',
-      description: 'Upload from device, embed from Youtube, Vimeo',
+      description: 'Upload from device, embed from Youtube, Vimeo, DailyMotion, Loom, Wistia',
     },
   },
   commands: VideoCommands,
diff --git a/packages/plugins/video/src/types.ts b/packages/plugins/video/src/types.ts
index 5a1e5653c..a40c6a3b8 100644
--- a/packages/plugins/video/src/types.ts
+++ b/packages/plugins/video/src/types.ts
@@ -12,7 +12,7 @@ export type VideoElementSettings = {
   autoPlay?: boolean;
 };
 
-export type VideoProviderTypes = 'youtube' | 'vimeo' | 'dailymotion' | string | null;
+export type VideoProviderTypes = 'youtube' | 'vimeo' | 'dailymotion' | 'loom' | 'wistia' | string | null;
 export type VideoProvider = {
   type: VideoProviderTypes;
   id: string;
diff --git a/packages/plugins/video/src/ui/EmbedUploader.tsx b/packages/plugins/video/src/ui/EmbedUploader.tsx
index 013e95ce0..6f1054095 100644
--- a/packages/plugins/video/src/ui/EmbedUploader.tsx
+++ b/packages/plugins/video/src/ui/EmbedUploader.tsx
@@ -15,7 +15,7 @@ const EmbedUploader = ({ blockId, onClose }) => {
     const providerType = getProvider(value);
     const videoId = providerType ? ProviderGetters[providerType]?.(value) : null;
 
-    if (!providerType || !videoId) return console.warn('Unsopperted video provider or video id is not found.');
+    if (!providerType || !videoId) return console.warn('Unsupported video provider or video id is not found.');
 
     Elements.updateElement<VideoPluginElements, VideoElementProps>(editor, blockId, {
       type: 'video',
diff --git a/packages/plugins/video/src/ui/LoomPlayer.tsx b/packages/plugins/video/src/ui/LoomPlayer.tsx
new file mode 100644
index 000000000..e4f23c407
--- /dev/null
+++ b/packages/plugins/video/src/ui/LoomPlayer.tsx
@@ -0,0 +1,66 @@
+import { useRef, useState, useEffect } from 'react';
+import { useIntersectionObserver } from '../hooks/useIntersectionObserver';
+
+function LoomPlayer({ videoId, children, attributes, width, height, ...other }) {
+  const loomRootRef = useRef(null);
+  const [isFrameLoaded, setFrameLoaded] = useState(false);
+  const [iframeKey, setIframeKey] = useState(0); // Add key to force re-render
+
+  const { isIntersecting: isInViewport } = useIntersectionObserver(loomRootRef, {
+    freezeOnceVisible: true,
+    rootMargin: '50%',
+  });
+
+  const onRef = (el) => {
+    loomRootRef.current = el;
+    attributes.ref(el);
+  };
+
+  // Force iframe reload when it becomes visible
+  useEffect(() => {
+    if (isInViewport) {
+      setIframeKey((prev) => prev + 1);
+    }
+  }, [isInViewport]);
+
+  return (
+    <div {...attributes} ref={onRef} className="yoo-video-relative" style={{ width, height }}>
+      <div
+        style={{
+          position: 'relative',
+          width: '100%',
+          height: '100%',
+        }}
+      >
+        {isInViewport && (
+          <iframe
+            key={iframeKey}
+            title="Loom Video Player"
+            src={`https://www.loom.com/embed/${videoId}?hide_owner=true&hide_share=true&hide_title=true&hideEmbedTopBar=true`}
+            frameBorder="0"
+            webkitallowfullscreen="true"
+            mozallowfullscreen="true"
+            allowFullScreen
+            onLoad={() => {
+              console.log('Loom iframe loaded');
+              setFrameLoaded(true);
+            }}
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: '100%',
+              border: 'none',
+              borderRadius: '4px',
+            }}
+            {...other}
+          />
+        )}
+      </div>
+      {children}
+    </div>
+  );
+}
+
+export default LoomPlayer;
diff --git a/packages/plugins/video/src/ui/VideoComponent.tsx b/packages/plugins/video/src/ui/VideoComponent.tsx
index f150ae476..b6ecbce6e 100644
--- a/packages/plugins/video/src/ui/VideoComponent.tsx
+++ b/packages/plugins/video/src/ui/VideoComponent.tsx
@@ -4,6 +4,8 @@ import { VideoElementProps } from '../types';
 import DailyMotion from './DailyMotionPlayer';
 import VimeoPlayer from './VimeoPlayer';
 import YouTubePlayer from './YoutubePlayer';
+import LoomPlayer from './LoomPlayer';
+import WistiaPlayer from './WistiaPlayer';
 
 type VideoComponentProps = Omit<VideoElementProps, 'sizes'> & {
   width: number | string;
@@ -14,6 +16,8 @@ const PROVIDERS = {
   vimeo: VimeoPlayer,
   youtube: YouTubePlayer,
   dailymotion: DailyMotion,
+  loom: LoomPlayer,
+  wistia: WistiaPlayer,
 };
 
 const VideoComponent = ({
diff --git a/packages/plugins/video/src/ui/WistiaPlayer.tsx b/packages/plugins/video/src/ui/WistiaPlayer.tsx
new file mode 100644
index 000000000..653609f92
--- /dev/null
+++ b/packages/plugins/video/src/ui/WistiaPlayer.tsx
@@ -0,0 +1,52 @@
+import { useRef, useState } from 'react';
+import { useIntersectionObserver } from '../hooks/useIntersectionObserver';
+
+function WistiaPlayer({ videoId, children, attributes, width, height, ...other }) {
+  const wistiaRootRef = useRef(null);
+  const [isFrameLoaded, setFrameLoaded] = useState(false);
+
+  const { isIntersecting: isInViewport } = useIntersectionObserver(wistiaRootRef, {
+    freezeOnceVisible: true,
+    rootMargin: '50%',
+  });
+
+  const onRef = (el) => {
+    wistiaRootRef.current = el;
+    attributes.ref(el);
+  };
+
+  return (
+    <div {...attributes} ref={onRef} className="yoo-video-relative" style={{ width, height }}>
+      <div
+        style={{
+          position: 'relative',
+          width: '100%',
+          height: '100%',
+        }}
+      >
+        {isInViewport && (
+          <iframe
+            src={`https://fast.wistia.net/embed/iframe/${videoId}?videoFoam=true`}
+            title="Wistia Video Player"
+            frameBorder="0"
+            allowFullScreen
+            onLoad={() => setFrameLoaded(true)}
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: '100%',
+              border: 'none',
+              borderRadius: '4px',
+            }}
+            {...other}
+          />
+        )}
+      </div>
+      {children}
+    </div>
+  );
+}
+
+export default WistiaPlayer;
diff --git a/packages/plugins/video/src/utils/providers.ts b/packages/plugins/video/src/utils/providers.ts
index 2e3b2aef7..5285760c9 100644
--- a/packages/plugins/video/src/utils/providers.ts
+++ b/packages/plugins/video/src/utils/providers.ts
@@ -24,6 +24,33 @@ export const getDailymotionId = (url: string) => {
   return null;
 };
 
+export const getWistiaId = (url: string) => {
+  try {
+    // Handle iframe embed URLs
+    const iframeMatch = url.match(/(?:https?:\/\/)?(?:fast\.)?wistia\.(?:com|net)\/embed\/iframe\/([a-zA-Z0-9]+)/);
+    if (iframeMatch) return iframeMatch[1];
+
+    // Handle medias URLs
+    const mediasMatch = url.match(/(?:https?:\/\/)?(?:www\.)?wistia\.com\/medias\/([a-zA-Z0-9]+)/);
+    if (mediasMatch) return mediasMatch[1];
+
+    return null;
+  } catch (error) {
+    console.error('Error extracting Wistia ID:', error);
+    return null;
+  }
+};
+
+export const getLoomId = (url: string) => {
+  try {
+    const match = url.match(/(?:https?:\/\/)?(?:www\.)?loom\.com\/share\/([a-zA-Z0-9]+)/);
+    return match ? match[1] : null;
+  } catch (error) {
+    console.error('Error extracting Loom ID:', error);
+    return null;
+  }
+};
+
 export function getProvider(url: string): VideoProviderTypes | null {
   if (url.includes('youtube.com') || url.includes('youtu.be')) {
     return 'youtube';
@@ -31,6 +58,10 @@ export function getProvider(url: string): VideoProviderTypes | null {
     return 'vimeo';
   } else if (url.includes('dailymotion.com') || url.includes('dai.ly')) {
     return 'dailymotion';
+  } else if (url.includes('loom.com')) {
+    return 'loom';
+  } else if (url.includes('wistia.com')) {
+    return 'wistia';
   }
   // } else if (url.includes('twitch.tv')) {
   //   return 'Twitch';
@@ -44,4 +75,6 @@ export const ProviderGetters = {
   youtube: getYoutubeId,
   vimeo: getVimeoId,
   dailymotion: getDailymotionId,
+  loom: getLoomId,
+  wistia: getWistiaId,
 };

From 10e11b7c1cbf33fa98ad1e69b2556f9222652a2d Mon Sep 17 00:00:00 2001
From: Akhmed Ibragimov <devopsbanda@gmail.com>
Date: Tue, 3 Dec 2024 21:50:10 +0100
Subject: [PATCH 6/6] Improvements for loom and wistia videos (#402)

* update email examples
## Description

Added the ability to add Loom & Wistia videos in the Video plugin. Note that I'm not used to Typescrpt at all, so I might need some help with this if you see issues.

Fixes # (issue)

## Type of change

Please tick the relevant option.

- [ ] Bug fix (non-breaking change which fixes an issue)
- [x ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
- [ ] This change requires a documentation update

## Checklist:

- [ ] I have performed a self-review of my own code
- [ ] I have commented on my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have checked my code and corrected any misspellings

* fixes for loom and wistia providers

---------

Co-authored-by: 5andu <sandugolovatenco@gmail.com>
---
 packages/plugins/embed/src/plugin/index.tsx   | 13 ++--
 packages/plugins/embed/src/providers/Loom.tsx | 64 +++++++++++++------
 .../plugins/embed/src/providers/Wistia.tsx    | 49 ++++++++------
 .../plugins/embed/src/ui/EmbedComponent.tsx   |  3 +
 packages/plugins/embed/src/utils/providers.ts | 27 ++++++--
 packages/plugins/file/src/plugin/index.tsx    |  2 +-
 packages/plugins/image/src/plugin/index.tsx   |  2 +-
 packages/plugins/video/src/plugin/index.tsx   |  2 +-
 packages/plugins/video/src/ui/LoomPlayer.tsx  |  2 -
 .../video/src/ui/VideoBlockOptions.tsx        |  2 +-
 .../plugins/video/src/ui/WistiaPlayer.tsx     |  2 +-
 packages/plugins/video/src/utils/providers.ts |  2 +-
 12 files changed, 110 insertions(+), 60 deletions(-)

diff --git a/packages/plugins/embed/src/plugin/index.tsx b/packages/plugins/embed/src/plugin/index.tsx
index 8229ebb77..b68e80ddb 100644
--- a/packages/plugins/embed/src/plugin/index.tsx
+++ b/packages/plugins/embed/src/plugin/index.tsx
@@ -1,12 +1,6 @@
 import { generateId, YooptaPlugin } from '@yoopta/editor';
 import { EmbedCommands } from '../commands';
-import {
-  EmbedElementMap,
-  EmbedElementProps,
-  EmbedPluginElements,
-  EmbedPluginOptions,
-  EmbedProviderTypes,
-} from '../types';
+import { EmbedElementMap, EmbedPluginOptions } from '../types';
 import { EmbedRender } from '../ui/Embed';
 
 const ALIGNS_TO_JUSTIFY = {
@@ -70,6 +64,11 @@ const Embed = new YooptaPlugin<EmbedElementMap, EmbedPluginOptions>({
           vimeo: (id: string) => `https://player.vimeo.com/embed/${id}`,
           dailymotion: (id: string) => `https://www.dailymotion.com/embed/embed/${id}`,
           figma: (id: string) => `https://www.figma.com/embed?embed_host=share&url=${id}`,
+          loom: (id: string) =>
+            `https://www.loom.com/embed/${id}?hide_owner=true&hide_share=true&hide_title=true&hideEmbedTopBar=true`,
+          instagram: (id: string) => `https://www.instagram.com/p/${id}/embed`,
+          wistia: (id: string) => `https://fast.wistia.net/embed/iframe/${id}?videoFoam=false`,
+          twitter: (id: string) => `https://platform.twitter.com/widgets/tweet.html?id=${id}`,
         };
 
         let url = element.props.provider.url;
diff --git a/packages/plugins/embed/src/providers/Loom.tsx b/packages/plugins/embed/src/providers/Loom.tsx
index 8003e21a9..2d22d7b19 100644
--- a/packages/plugins/embed/src/providers/Loom.tsx
+++ b/packages/plugins/embed/src/providers/Loom.tsx
@@ -1,38 +1,62 @@
-import { useRef, useState } from 'react';
+import { useRef, useState, useEffect } from 'react';
 import { useIntersectionObserver } from '../hooks/useIntersectionObserver';
 import { ProviderRenderProps } from '../types';
 
-function Loom({ provider, attributes, children }: ProviderRenderProps) {
+export function Loom({ provider, attributes, children, width, height }: ProviderRenderProps) {
   const loomRootRef = useRef(null);
   const [isFrameLoaded, setFrameLoaded] = useState(false);
+  const [iframeKey, setIframeKey] = useState(0); // Add key to force re-render
 
   const { isIntersecting: isInViewport } = useIntersectionObserver(loomRootRef, {
     freezeOnceVisible: true,
     rootMargin: '50%',
   });
 
-  const onRef = (node) => {
-    loomRootRef.current = node;
-    attributes.ref(node);
+  const onRef = (el) => {
+    loomRootRef.current = el;
+    attributes.ref(el);
   };
 
+  // Force iframe reload when it becomes visible
+  useEffect(() => {
+    if (isInViewport) {
+      setIframeKey((prev) => prev + 1);
+    }
+  }, [isInViewport]);
+
   return (
-    <div {...attributes} ref={onRef} className="yoo-embed-relative" style={{ paddingBottom: '53.90625%' }}>
-      {isInViewport && (
-        <iframe
-          title="Loom Video Player"
-          src={`https://www.loom.com/embed/${provider.id}?hide_owner=true&hide_share=true&hide_title=true&hideEmbedTopBar=true`}
-          frameBorder="0"
-          allowFullScreen
-          webkitallowfullscreen="true"
-          mozallowfullscreen="true"
-          onLoad={() => setFrameLoaded(true)}
-          className="yoo-embed-absolute yoo-embed-top-0 yoo-embed-left-0 yoo-embed-w-full yoo-embed-h-full"
-        />
-      )}
+    <div {...attributes} ref={onRef} className="yoo-video-relative" style={{ width, height }}>
+      <div
+        style={{
+          position: 'relative',
+          width: '100%',
+          height: '100%',
+        }}
+      >
+        {isInViewport && (
+          <iframe
+            key={iframeKey}
+            title="Loom Video Player"
+            src={`https://www.loom.com/embed/${provider.id}?hide_owner=true&hide_share=true&hide_title=true&hideEmbedTopBar=true`}
+            frameBorder="0"
+            allowFullScreen
+            onLoad={() => {
+              console.log('Loom iframe loaded');
+              setFrameLoaded(true);
+            }}
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: '100%',
+              border: 'none',
+              borderRadius: '4px',
+            }}
+          />
+        )}
+      </div>
       {children}
     </div>
   );
 }
-
-export { Loom };
diff --git a/packages/plugins/embed/src/providers/Wistia.tsx b/packages/plugins/embed/src/providers/Wistia.tsx
index 12f0c9375..12830e402 100644
--- a/packages/plugins/embed/src/providers/Wistia.tsx
+++ b/packages/plugins/embed/src/providers/Wistia.tsx
@@ -2,9 +2,9 @@ import { useRef, useState } from 'react';
 import { useIntersectionObserver } from '../hooks/useIntersectionObserver';
 import { ProviderRenderProps } from '../types';
 
-function Wistia({ provider, attributes, children }: ProviderRenderProps) {
+function Wistia({ provider, attributes, children, width, height }: ProviderRenderProps) {
   const wistiaRootRef = useRef(null);
-  const [isLoaded, setIsLoaded] = useState(false);
+  const [isFrameLoaded, setFrameLoaded] = useState(false);
 
   const { isIntersecting: isInViewport } = useIntersectionObserver(wistiaRootRef, {
     freezeOnceVisible: true,
@@ -17,24 +17,33 @@ function Wistia({ provider, attributes, children }: ProviderRenderProps) {
   };
 
   return (
-    <div {...attributes} ref={onRef} className="yoo-embed-relative" style={{ paddingBottom: '56.25%' }}>
-      {isInViewport && (
-        <>
-          <script src={`https://fast.wistia.com/embed/medias/${provider.id}.jsonp`} async />
-          <script src="https://fast.wistia.com/assets/external/E-v1.js" async />
-          <div className="wistia_responsive_padding" style={{ padding: '56.25% 0 0 0', position: 'relative' }}>
-            <div
-              className="wistia_responsive_wrapper"
-              style={{ height: '100%', left: 0, position: 'absolute', top: 0, width: '100%' }}
-            >
-              <div
-                className={`wistia_embed wistia_async_${provider.id} videoFoam=true`}
-                style={{ height: '100%', position: 'relative', width: '100%' }}
-              />
-            </div>
-          </div>
-        </>
-      )}
+    <div {...attributes} ref={onRef} className="yoo-video-relative" style={{ width, height }}>
+      <div
+        style={{
+          position: 'relative',
+          width: '100%',
+          height: '100%',
+        }}
+      >
+        {isInViewport && (
+          <iframe
+            src={`https://fast.wistia.net/embed/iframe/${provider.id}?videoFoam=false`}
+            title="Wistia Video Player"
+            frameBorder="0"
+            allowFullScreen
+            onLoad={() => setFrameLoaded(true)}
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: '100%',
+              border: 'none',
+              borderRadius: '4px',
+            }}
+          />
+        )}
+      </div>
       {children}
     </div>
   );
diff --git a/packages/plugins/embed/src/ui/EmbedComponent.tsx b/packages/plugins/embed/src/ui/EmbedComponent.tsx
index 22bf49269..40c19eb22 100644
--- a/packages/plugins/embed/src/ui/EmbedComponent.tsx
+++ b/packages/plugins/embed/src/ui/EmbedComponent.tsx
@@ -22,6 +22,8 @@ const PROVIDERS = {
   figma: Figma,
   twitter: Twitter,
   instagram: Instagram,
+  loom: Loom,
+  wistia: Wistia,
 };
 
 const EmbedComponent = ({ width, height, provider, blockId, attributes, children }: EmbedComponentProps) => {
@@ -29,6 +31,7 @@ const EmbedComponent = ({ width, height, provider, blockId, attributes, children
 
   if (provider && provider.id && provider.type && PROVIDERS[provider.type]) {
     const Provider = PROVIDERS[provider.type];
+
     return (
       <Provider provider={provider} width={width} height={height} blockId={blockId} attributes={attributes}>
         {children}
diff --git a/packages/plugins/embed/src/utils/providers.ts b/packages/plugins/embed/src/utils/providers.ts
index f65da2961..380320dff 100644
--- a/packages/plugins/embed/src/utils/providers.ts
+++ b/packages/plugins/embed/src/utils/providers.ts
@@ -25,13 +25,30 @@ export const getDailymotionId = (url: string) => {
 };
 
 export const getWistiaId = (url: string) => {
-  const match = url.match(/(?:https?:\/\/)?(?:www\.)?wistia\.com\/medias\/(.+)/);
-  return match ? match[1] : null;
+  try {
+    // Handle iframe embed URLs
+    const iframeMatch = url.match(/(?:https?:\/\/)?(?:fast\.)?wistia\.(?:com|net)\/embed\/iframe\/([a-zA-Z0-9]+)/);
+    if (iframeMatch) return iframeMatch[1];
+
+    // Handle medias URLs
+    const mediasMatch = url.match(/(?:https?:\/\/)?(?:www\.)?wistia\.com\/medias\/([a-zA-Z0-9]+)/);
+    if (mediasMatch) return mediasMatch[1];
+
+    return null;
+  } catch (error) {
+    console.error('Error extracting Wistia ID:', error);
+    return null;
+  }
 };
 
 export const getLoomId = (url: string) => {
-  const match = url.match(/(?:https?:\/\/)?(?:www\.)?loom\.com\/share\/(.+)/);
-  return match ? match[1] : null;
+  try {
+    const match = url.match(/(?:https?:\/\/)?(?:www\.)?loom\.com\/share\/([a-zA-Z0-9]+)/);
+    return match ? match[1] : null;
+  } catch (error) {
+    console.error('Error extracting Loom ID:', error);
+    return null;
+  }
 };
 
 export function getInstagramId(url: string) {
@@ -49,7 +66,7 @@ export function getProvider(url: string): EmbedProviderTypes | null {
     return 'dailymotion';
   } else if (url.includes('loom.com')) {
     return 'loom';
-  } else if (url.includes('wistia.com')) {
+  } else if (url.includes('wistia.com') || url.includes('wistia.net')) {
     return 'wistia';
   } else if (url.includes('twitter') || url.includes('https://x.com')) {
     return 'twitter';
diff --git a/packages/plugins/file/src/plugin/index.tsx b/packages/plugins/file/src/plugin/index.tsx
index b738b5d11..598034886 100644
--- a/packages/plugins/file/src/plugin/index.tsx
+++ b/packages/plugins/file/src/plugin/index.tsx
@@ -27,7 +27,7 @@ const File = new YooptaPlugin<FileElementMap, FilePluginOptions>({
   options: {
     display: {
       title: 'File',
-      description: 'For file videos, google maps and more',
+      description: 'For files and more',
     },
     accept: '',
     // onUpload: async () => Promise.resolve({ src: '' }),
diff --git a/packages/plugins/image/src/plugin/index.tsx b/packages/plugins/image/src/plugin/index.tsx
index 44291210b..bc6c15627 100644
--- a/packages/plugins/image/src/plugin/index.tsx
+++ b/packages/plugins/image/src/plugin/index.tsx
@@ -31,7 +31,7 @@ const Image = new YooptaPlugin<ImageElementMap, ImagePluginOptions>({
   options: {
     display: {
       title: 'Image',
-      description: 'Upload from device or embed with link',
+      description: 'Upload from device or insert with link',
     },
     onUpload: () => Promise.resolve({ src: null, alt: null }),
     accept: 'image/png, image/jpeg, image/gif, image/webp',
diff --git a/packages/plugins/video/src/plugin/index.tsx b/packages/plugins/video/src/plugin/index.tsx
index 622090660..63505cacd 100644
--- a/packages/plugins/video/src/plugin/index.tsx
+++ b/packages/plugins/video/src/plugin/index.tsx
@@ -42,7 +42,7 @@ const Video = new YooptaPlugin<VideoElementMap, VideoPluginOptions>({
     onUpload: async () => Promise.resolve({ src: '' }),
     display: {
       title: 'Video',
-      description: 'Upload from device, embed from Youtube, Vimeo, DailyMotion, Loom, Wistia',
+      description: 'Upload from device, insert from Youtube, Vimeo, DailyMotion, Loom, Wistia',
     },
   },
   commands: VideoCommands,
diff --git a/packages/plugins/video/src/ui/LoomPlayer.tsx b/packages/plugins/video/src/ui/LoomPlayer.tsx
index e4f23c407..7a74e1656 100644
--- a/packages/plugins/video/src/ui/LoomPlayer.tsx
+++ b/packages/plugins/video/src/ui/LoomPlayer.tsx
@@ -38,8 +38,6 @@ function LoomPlayer({ videoId, children, attributes, width, height, ...other })
             title="Loom Video Player"
             src={`https://www.loom.com/embed/${videoId}?hide_owner=true&hide_share=true&hide_title=true&hideEmbedTopBar=true`}
             frameBorder="0"
-            webkitallowfullscreen="true"
-            mozallowfullscreen="true"
             allowFullScreen
             onLoad={() => {
               console.log('Loom iframe loaded');
diff --git a/packages/plugins/video/src/ui/VideoBlockOptions.tsx b/packages/plugins/video/src/ui/VideoBlockOptions.tsx
index 71e8f2b00..7f264e943 100644
--- a/packages/plugins/video/src/ui/VideoBlockOptions.tsx
+++ b/packages/plugins/video/src/ui/VideoBlockOptions.tsx
@@ -213,7 +213,7 @@ const VideoBlockOptions = ({ editor, block, props: videoProps }: Props) => {
         </>
       )}
       <BlockOptionsMenuGroup>
-        {options.onUploadPoster && (
+        {options.onUploadPoster && !isExternalVideo && (
           <BlockOptionsMenuItem>
             <label
               htmlFor="video-poster-uploader"
diff --git a/packages/plugins/video/src/ui/WistiaPlayer.tsx b/packages/plugins/video/src/ui/WistiaPlayer.tsx
index 653609f92..0a975b7a3 100644
--- a/packages/plugins/video/src/ui/WistiaPlayer.tsx
+++ b/packages/plugins/video/src/ui/WistiaPlayer.tsx
@@ -26,7 +26,7 @@ function WistiaPlayer({ videoId, children, attributes, width, height, ...other }
       >
         {isInViewport && (
           <iframe
-            src={`https://fast.wistia.net/embed/iframe/${videoId}?videoFoam=true`}
+            src={`https://fast.wistia.net/embed/iframe/${videoId}?videoFoam=true&videoHeight=${height}&videoWidth=${width}`}
             title="Wistia Video Player"
             frameBorder="0"
             allowFullScreen
diff --git a/packages/plugins/video/src/utils/providers.ts b/packages/plugins/video/src/utils/providers.ts
index 5285760c9..b46ccedf2 100644
--- a/packages/plugins/video/src/utils/providers.ts
+++ b/packages/plugins/video/src/utils/providers.ts
@@ -60,7 +60,7 @@ export function getProvider(url: string): VideoProviderTypes | null {
     return 'dailymotion';
   } else if (url.includes('loom.com')) {
     return 'loom';
-  } else if (url.includes('wistia.com')) {
+  } else if (url.includes('wistia.com') || url.includes('wistia.net')) {
     return 'wistia';
   }
   // } else if (url.includes('twitch.tv')) {