From 0ead87792b9c7a793a3d221e3184df9f97f038c3 Mon Sep 17 00:00:00 2001
From: Thomas Metzger <thomas.metzger@theodo.com>
Date: Mon, 2 Jun 2025 12:16:34 +0200
Subject: [PATCH 1/6] =?UTF-8?q?=E2=9C=A8(frontend)=20embed-block:=20added?=
 =?UTF-8?q?=20url=20embed=20block?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../doc-editor/components/BlockNoteEditor.tsx |   3 +-
 .../components/BlockNoteSuggestionMenu.tsx    |   2 +
 .../components/custom-blocks/EmbedBlock.tsx   | 159 ++++++++++++++++++
 .../components/custom-blocks/index.ts         |   1 +
 .../doc-export/blocks-mapping/embedDocx.tsx   |   8 +
 .../doc-export/blocks-mapping/embedPDF.tsx    |   8 +
 .../features/docs/doc-export/mappingDocx.tsx  |   2 +
 .../features/docs/doc-export/mappingPDF.tsx   |   2 +
 8 files changed, 184 insertions(+), 1 deletion(-)
 create mode 100644 src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/EmbedBlock.tsx
 create mode 100644 src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/embedDocx.tsx
 create mode 100644 src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/embedPDF.tsx

diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx
index 9a486b5864..0c874fd5ab 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx
@@ -27,7 +27,7 @@ import { randomColor } from '../utils';
 
 import { BlockNoteSuggestionMenu } from './BlockNoteSuggestionMenu';
 import { BlockNoteToolbar } from './BlockNoteToolBar/BlockNoteToolbar';
-import { CalloutBlock, DividerBlock } from './custom-blocks';
+import { CalloutBlock, DividerBlock, ReactEmbedBlock } from './custom-blocks';
 
 export const blockNoteSchema = withPageBreak(
   BlockNoteSchema.create({
@@ -35,6 +35,7 @@ export const blockNoteSchema = withPageBreak(
       ...defaultBlockSpecs,
       callout: CalloutBlock,
       divider: DividerBlock,
+      embed: ReactEmbedBlock,
     },
   }),
 );
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteSuggestionMenu.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteSuggestionMenu.tsx
index 3122b1c175..138d3f772d 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteSuggestionMenu.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteSuggestionMenu.tsx
@@ -14,6 +14,7 @@ import { DocsBlockSchema } from '../types';
 import {
   getCalloutReactSlashMenuItems,
   getDividerReactSlashMenuItems,
+  getEmbedReactSlashMenuItems,
 } from './custom-blocks';
 
 export const BlockNoteSuggestionMenu = () => {
@@ -30,6 +31,7 @@ export const BlockNoteSuggestionMenu = () => {
             getPageBreakReactSlashMenuItems(editor),
             getCalloutReactSlashMenuItems(editor, t, basicBlocksName),
             getDividerReactSlashMenuItems(editor, t, basicBlocksName),
+            getEmbedReactSlashMenuItems(editor, t, basicBlocksName),
           ),
           query,
         ),
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/EmbedBlock.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/EmbedBlock.tsx
new file mode 100644
index 0000000000..14d94cb587
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/EmbedBlock.tsx
@@ -0,0 +1,159 @@
+import {
+  FileBlockConfig,
+  InlineContentSchema,
+  PropSchema,
+  StyleSchema,
+  insertOrUpdateBlock,
+} from '@blocknote/core';
+import {
+  BlockTypeSelectItem,
+  ReactCustomBlockRenderProps,
+  ResizableFileBlockWrapper,
+  createReactBlockSpec,
+} from '@blocknote/react';
+import { TFunction } from 'i18next';
+import React, { useState } from 'react';
+import { css } from 'styled-components';
+
+import { Box, Icon } from '@/components';
+
+import { DocsBlockNoteEditor } from '../../types';
+
+export const iframePropSchema: PropSchema & {
+  caption: {
+    default: '';
+  };
+  name: {
+    default: '';
+  };
+} = {
+  url: { default: '' },
+  caption: { default: '' },
+  name: { default: '' },
+  showPreview: { default: true },
+  previewWidth: { type: 'number', default: undefined },
+};
+
+export const iframeBlockConfig = {
+  type: 'embed' as const,
+  propSchema: iframePropSchema,
+  content: 'none',
+  isFileBlock: true,
+  fileBlockAccept: ['image/png'],
+} satisfies FileBlockConfig;
+
+export const IFrameViewer = (
+  props: ReactCustomBlockRenderProps<
+    typeof iframeBlockConfig,
+    InlineContentSchema,
+    StyleSchema
+  >,
+) => {
+  const url = props.block.props.url;
+
+  const [iframeError, setIframeError] = useState(false);
+  if (!url) {
+    return <Box>No URL provided for embed.</Box>;
+  }
+
+  return !iframeError ? (
+    <iframe
+      src={url}
+      className="bn-visual-media"
+      style={{
+        height: '300px',
+      }}
+      allowFullScreen
+      title="Embedded content"
+      onError={() => setIframeError(true)}
+    />
+  ) : (
+    <Box
+      $css={css`
+        color: #d32f2f;
+        background: #fff3f3;
+        border: 1px solid #f8d7da;
+        border-radius: 6px;
+        padding: 1rem;
+      `}
+    >
+      <Icon iconName="error" $size="16px" /> This site cannot be embedded. It
+      may not allow embedding in an iframe.
+    </Box>
+  );
+};
+
+export const IframeToExternalHTML = (
+  props: ReactCustomBlockRenderProps<
+    typeof iframeBlockConfig,
+    InlineContentSchema,
+    StyleSchema
+  >,
+) => (
+  <iframe
+    src={props.block.props.url}
+    className="bn-visual-media"
+    style={{
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      border: 'none',
+    }}
+    allowFullScreen
+    title="Embedded content"
+  />
+);
+
+export const IframeBlock = (
+  props: ReactCustomBlockRenderProps<
+    typeof iframeBlockConfig,
+    InlineContentSchema,
+    StyleSchema
+  >,
+) => {
+  return (
+    <ResizableFileBlockWrapper
+      {...(props as any)} // eslint-disable-line @typescript-eslint/no-explicit-any
+      buttonText="Embed"
+      buttonIcon={<Icon iconName="language" $size="18px" />}
+    >
+      <IFrameViewer {...props} />
+    </ResizableFileBlockWrapper>
+  );
+};
+
+export const ReactEmbedBlock = createReactBlockSpec(iframeBlockConfig, {
+  render: IframeBlock,
+  parse: () => undefined,
+  toExternalHTML: IframeToExternalHTML,
+});
+
+export const getEmbedReactSlashMenuItems = (
+  editor: DocsBlockNoteEditor,
+  t: TFunction<'translation', undefined>,
+  group: string,
+) => [
+  {
+    title: t('Embed'),
+    onItemClick: () => {
+      insertOrUpdateBlock(editor, {
+        type: 'embed',
+      });
+    },
+    aliases: ['embed', 'iframe', 'link'],
+    group,
+    icon: <Icon iconName="link" $size="18px" />,
+    subtext: t('Add an embed block'),
+  },
+];
+
+export const getEmbedFormattingToolbarItems = (
+  t: TFunction<'translation', undefined>,
+): BlockTypeSelectItem => ({
+  name: t('Embed'),
+  type: 'embed',
+  icon: () => <Icon iconName="link" $size="16px" />,
+  isSelected: (block: any) => block.type === 'embed',
+});
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/index.ts b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/index.ts
index 34a8c459cb..f8673e8506 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/index.ts
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/index.ts
@@ -1,2 +1,3 @@
 export * from './CalloutBlock';
 export * from './DividerBlock';
+export * from './EmbedBlock';
diff --git a/src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/embedDocx.tsx b/src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/embedDocx.tsx
new file mode 100644
index 0000000000..eae5de0ac3
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/embedDocx.tsx
@@ -0,0 +1,8 @@
+import { Paragraph } from 'docx';
+
+import { DocsExporterDocx } from '../types';
+
+export const blockMappingEmbedDocx: DocsExporterDocx['mappings']['blockMapping']['embed'] =
+  () => {
+    return new Paragraph({});
+  };
diff --git a/src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/embedPDF.tsx b/src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/embedPDF.tsx
new file mode 100644
index 0000000000..2b048a77f8
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/embedPDF.tsx
@@ -0,0 +1,8 @@
+import { Text } from '@react-pdf/renderer';
+
+import { DocsExporterPDF } from '../types';
+
+export const blockMappingEmbedPDF: DocsExporterPDF['mappings']['blockMapping']['embed'] =
+  () => {
+    return <Text />;
+  };
diff --git a/src/frontend/apps/impress/src/features/docs/doc-export/mappingDocx.tsx b/src/frontend/apps/impress/src/features/docs/doc-export/mappingDocx.tsx
index 434daa995b..2f6d1e5ba0 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-export/mappingDocx.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-export/mappingDocx.tsx
@@ -7,6 +7,7 @@ import {
   blockMappingQuoteDocx,
 } from './blocks-mapping';
 import { DocsExporterDocx } from './types';
+import { blockMappingEmbedDocx } from './blocks-mapping/embedDocx';
 
 export const docxDocsSchemaMappings: DocsExporterDocx['mappings'] = {
   ...docxDefaultSchemaMappings,
@@ -16,5 +17,6 @@ export const docxDocsSchemaMappings: DocsExporterDocx['mappings'] = {
     divider: blockMappingDividerDocx,
     quote: blockMappingQuoteDocx,
     image: blockMappingImageDocx,
+    embed: blockMappingEmbedDocx,
   },
 };
diff --git a/src/frontend/apps/impress/src/features/docs/doc-export/mappingPDF.tsx b/src/frontend/apps/impress/src/features/docs/doc-export/mappingPDF.tsx
index 4224045d15..1817dd56b1 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-export/mappingPDF.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-export/mappingPDF.tsx
@@ -10,6 +10,7 @@ import {
   blockMappingTablePDF,
 } from './blocks-mapping';
 import { DocsExporterPDF } from './types';
+import { blockMappingEmbedPDF } from './blocks-mapping/embedPDF';
 
 export const pdfDocsSchemaMappings: DocsExporterPDF['mappings'] = {
   ...pdfDefaultSchemaMappings,
@@ -22,5 +23,6 @@ export const pdfDocsSchemaMappings: DocsExporterPDF['mappings'] = {
     divider: blockMappingDividerPDF,
     quote: blockMappingQuotePDF,
     table: blockMappingTablePDF,
+    embed: blockMappingEmbedPDF,
   },
 };

From c0f418a65c948d4a7d25a2cd07ef3944d320e6a1 Mon Sep 17 00:00:00 2001
From: Thomas Metzger <thomas.metzger@theodo.com>
Date: Mon, 2 Jun 2025 14:39:31 +0200
Subject: [PATCH 2/6] =?UTF-8?q?=F0=9F=9A=A7(frontend)=20embed-bloc:=20adde?=
 =?UTF-8?q?d=20bloc=20resizing?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../docs/doc-editor/components/custom-blocks/EmbedBlock.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/EmbedBlock.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/EmbedBlock.tsx
index 14d94cb587..8398c89ca3 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/EmbedBlock.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/EmbedBlock.tsx
@@ -142,9 +142,9 @@ export const getEmbedReactSlashMenuItems = (
         type: 'embed',
       });
     },
-    aliases: ['embed', 'iframe', 'link'],
+    aliases: ['newEmbed', 'iframeBN', 'linkBN'],
     group,
-    icon: <Icon iconName="link" $size="18px" />,
+    icon: <Icon iconName="language" $size="18px" />,
     subtext: t('Add an embed block'),
   },
 ];
@@ -155,5 +155,5 @@ export const getEmbedFormattingToolbarItems = (
   name: t('Embed'),
   type: 'embed',
   icon: () => <Icon iconName="link" $size="16px" />,
-  isSelected: (block: any) => block.type === 'embed',
+  isSelected: (block: { type: string }) => block.type === 'embed',
 });

From 4dafc5b61403641eb3ef4028481fc1d8ab13d127 Mon Sep 17 00:00:00 2001
From: Thomas Metzger <thomas.metzger@theodo.com>
Date: Mon, 2 Jun 2025 17:32:09 +0200
Subject: [PATCH 3/6] =?UTF-8?q?=F0=9F=92=84(frontend)=20embed-block:=20add?=
 =?UTF-8?q?=20aspect=20ratio=20constraint=20to=20resize?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/custom-blocks/EmbedBlock.tsx   | 30 ++++++++++++++-----
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/EmbedBlock.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/EmbedBlock.tsx
index 8398c89ca3..e82f44e7a8 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/EmbedBlock.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/EmbedBlock.tsx
@@ -50,6 +50,7 @@ export const IFrameViewer = (
   >,
 ) => {
   const url = props.block.props.url;
+  const aspectRatio = props.block.props.aspectRatio || 16 / 9;
 
   const [iframeError, setIframeError] = useState(false);
   if (!url) {
@@ -57,16 +58,29 @@ export const IFrameViewer = (
   }
 
   return !iframeError ? (
-    <iframe
-      src={url}
-      className="bn-visual-media"
+    <div
       style={{
-        height: '300px',
+        position: 'relative',
+        width: '100%',
+        paddingTop: `${100 / aspectRatio}%`, // padding-top sets height relative to width
       }}
-      allowFullScreen
-      title="Embedded content"
-      onError={() => setIframeError(true)}
-    />
+    >
+      <iframe
+        src={url}
+        className="bn-visual-media"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%',
+          border: 'none',
+        }}
+        allowFullScreen
+        title="Embedded content"
+        onError={() => setIframeError(true)}
+      />
+    </div>
   ) : (
     <Box
       $css={css`

From 9bb7abb6d0564ca7fcf68e1af6c9d300b4cfe3ea Mon Sep 17 00:00:00 2001
From: Thomas Metzger <thomas.metzger@theodo.com>
Date: Mon, 2 Jun 2025 15:15:37 +0200
Subject: [PATCH 4/6] =?UTF-8?q?=F0=9F=90=9B(frontend)=20embed-block:=20fix?=
 =?UTF-8?q?ed=20drag-and-drop=20over=20iframe?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/custom-blocks/EmbedBlock.tsx   | 46 ++++++++++++++++++-
 1 file changed, 45 insertions(+), 1 deletion(-)

diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/EmbedBlock.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/EmbedBlock.tsx
index e82f44e7a8..ee5306b4a8 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/EmbedBlock.tsx
+++ b/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

From ae53134171115dd6c947a67525b91b869865a9f6 Mon Sep 17 00:00:00 2001
From: Thomas Metzger <thomas.metzger@theodo.com>
Date: Mon, 2 Jun 2025 16:27:36 +0200
Subject: [PATCH 5/6] =?UTF-8?q?=F0=9F=8C=90(frontend)=20embed-block=20add?=
 =?UTF-8?q?=20some=20fr=20translations?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../doc-editor/components/BlockNoteSuggestionMenu.tsx  |  3 ++-
 .../doc-editor/components/custom-blocks/EmbedBlock.tsx | 10 +++++-----
 src/frontend/apps/impress/src/i18n/translations.json   |  2 ++
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteSuggestionMenu.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteSuggestionMenu.tsx
index 138d3f772d..eb37a9ec4e 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteSuggestionMenu.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteSuggestionMenu.tsx
@@ -21,6 +21,7 @@ export const BlockNoteSuggestionMenu = () => {
   const editor = useBlockNoteEditor<DocsBlockSchema>();
   const { t } = useTranslation();
   const basicBlocksName = useDictionary().slash_menu.page_break.group;
+  const advancedBlocksName = useDictionary().slash_menu.table.group;
 
   const getSlashMenuItems = useMemo(() => {
     return async (query: string) =>
@@ -31,7 +32,7 @@ export const BlockNoteSuggestionMenu = () => {
             getPageBreakReactSlashMenuItems(editor),
             getCalloutReactSlashMenuItems(editor, t, basicBlocksName),
             getDividerReactSlashMenuItems(editor, t, basicBlocksName),
-            getEmbedReactSlashMenuItems(editor, t, basicBlocksName),
+            getEmbedReactSlashMenuItems(editor, t, advancedBlocksName),
           ),
           query,
         ),
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/EmbedBlock.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/EmbedBlock.tsx
index ee5306b4a8..39e090398e 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/EmbedBlock.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/EmbedBlock.tsx
@@ -174,8 +174,8 @@ export const IframeBlock = (
   return (
     <ResizableFileBlockWrapper
       {...(props as any)} // eslint-disable-line @typescript-eslint/no-explicit-any
-      buttonText="Embed"
-      buttonIcon={<Icon iconName="language" $size="18px" />}
+      buttonText="Add an embedded block"
+      buttonIcon={<Icon iconName="link" $size="18px" />}
     >
       <IFrameViewer {...props} />
     </ResizableFileBlockWrapper>
@@ -200,17 +200,17 @@ export const getEmbedReactSlashMenuItems = (
         type: 'embed',
       });
     },
-    aliases: ['newEmbed', 'iframeBN', 'linkBN'],
+    aliases: ['embed', 'link', 'integration', 'lien'],
     group,
     icon: <Icon iconName="language" $size="18px" />,
-    subtext: t('Add an embed block'),
+    subtext: t('Add an embedded website'),
   },
 ];
 
 export const getEmbedFormattingToolbarItems = (
   t: TFunction<'translation', undefined>,
 ): BlockTypeSelectItem => ({
-  name: t('Embed'),
+  name: t('Add an embedded website'),
   type: 'embed',
   icon: () => <Icon iconName="link" $size="16px" />,
   isSelected: (block: { type: string }) => block.type === 'embed',
diff --git a/src/frontend/apps/impress/src/i18n/translations.json b/src/frontend/apps/impress/src/i18n/translations.json
index 24985d1b25..209ffc9cd8 100644
--- a/src/frontend/apps/impress/src/i18n/translations.json
+++ b/src/frontend/apps/impress/src/i18n/translations.json
@@ -421,6 +421,7 @@
       "Add": "Ajouter",
       "Add a callout block": "Ajouter un bloc d'alerte",
       "Add a horizontal line": "Ajouter une ligne horizontale",
+      "Add an embedded website": "Ajouter tous type de contenus web (graphique, site internet, table Grist, etc.)",
       "Administrator": "Administrateur",
       "All docs": "Tous les documents",
       "An uncompromising writing experience.": "Une expérience d'écriture sans compromis.",
@@ -435,6 +436,7 @@
       "Banner image": "Image de la bannière",
       "Beautify": "Embellir",
       "Callout": "Alerte",
+      "Embed": "Intégration site web",
       "Can't load this page, please check your internet connection.": "Impossible de charger cette page, veuillez vérifier votre connexion Internet.",
       "Cancel": "Annuler",
       "Close the modal": "Fermer la modale",

From b3fcec98a93bf93b02a0bb4a05a934ad786b0295 Mon Sep 17 00:00:00 2001
From: Thomas Metzger <thomas.metzger@theodo.com>
Date: Tue, 3 Jun 2025 14:30:06 +0200
Subject: [PATCH 6/6] =?UTF-8?q?=F0=9F=90=9B=20(frontend)=20embed-bloc:=20f?=
 =?UTF-8?q?ixed=20initial=20size=20is=20undefined?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../docs/doc-editor/components/custom-blocks/EmbedBlock.tsx   | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/EmbedBlock.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/EmbedBlock.tsx
index 39e090398e..24ee4f6884 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/EmbedBlock.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/EmbedBlock.tsx
@@ -31,7 +31,7 @@ export const iframePropSchema: PropSchema & {
   caption: { default: '' },
   name: { default: '' },
   showPreview: { default: true },
-  previewWidth: { type: 'number', default: undefined },
+  previewWidth: { default: 500 },
 };
 
 export const iframeBlockConfig = {
@@ -92,9 +92,7 @@ export const IFrameViewer = (
       ref={containerRef}
       style={{
         position: 'relative',
-        padding: '10px',
         width: '100%',
-        background: '#ff0000',
         paddingTop: `${100 / aspectRatio}%`, // padding-top sets height relative to width
       }}
     >