🐛(frontend) embed-block: fixed drag-and-drop over iframe

Author: ThomasMetzger

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/EmbedBlock.tsx

@@ -12,7 +12,7 @@ import {
   createReactBlockSpec,
 } from '@blocknote/react';
 import { TFunction } from 'i18next';
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { css } from 'styled-components';
 
 import { Box, Icon } from '@/components';
@@ -53,15 +53,48 @@ export const IFrameViewer = (
   const aspectRatio = props.block.props.aspectRatio || 16 / 9;
 
   const [iframeError, setIframeError] = useState(false);
+  const containerRef = useRef(null);
+  const [isResizing, setIsResizing] = useState(false);
+
+  useEffect(() => {
+    if (!containerRef.current) {
+      return;
+    }
+
+    const currentEl = containerRef.current as HTMLElement;
+    const wrapperEl = currentEl.closest('.bn-file-block-content-wrapper');
+    if (!wrapperEl) {
+      return;
+    }
+
+    const startResizing = () => {
+      setIsResizing(true);
+    };
+    const stopResizing = () => {
+      setIsResizing(false);
+    };
+
+    wrapperEl.addEventListener('pointerdown', startResizing);
+    document.addEventListener('pointerup', stopResizing);
+
+    return () => {
+      wrapperEl.removeEventListener('pointerdown', startResizing);
+      document.removeEventListener('pointerdown', stopResizing);
+    };
+  }, []);
+
   if (!url) {
     return <Box>No URL provided for embed.</Box>;
   }
 
   return !iframeError ? (
     <div
+      ref={containerRef}
       style={{
         position: 'relative',
+        padding: '10px',
         width: '100%',
+        background: '#ff0000',
         paddingTop: `${100 / aspectRatio}%`, // padding-top sets height relative to width
       }}
     >
@@ -80,6 +113,17 @@ export const IFrameViewer = (
         title="Embedded content"
         onError={() => setIframeError(true)}
       />
+      {isResizing && (
+        <div
+          style={{
+            position: 'absolute',
+            inset: 0,
+            backgroundColor: 'transparent',
+            pointerEvents: 'all',
+            zIndex: 10,
+          }}
+        />
+      )}
     </div>
   ) : (
     <Box