Integrate embedded block into docs (Panographix - HackDays 2025)

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx

@@ -27,14 +27,15 @@ 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({
     blockSpecs: {
       ...defaultBlockSpecs,
       callout: CalloutBlock,
       divider: DividerBlock,
+      embed: ReactEmbedBlock,
     },
   }),
 );

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteSuggestionMenu.tsx

@@ -14,12 +14,14 @@ import { DocsBlockSchema } from '../types';
 import {
   getCalloutReactSlashMenuItems,
   getDividerReactSlashMenuItems,
+  getEmbedReactSlashMenuItems,
 } from './custom-blocks';
 
 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) =>
@@ -30,6 +32,7 @@ export const BlockNoteSuggestionMenu = () => {
             getPageBreakReactSlashMenuItems(editor),
             getCalloutReactSlashMenuItems(editor, t, basicBlocksName),
             getDividerReactSlashMenuItems(editor, t, basicBlocksName),
+            getEmbedReactSlashMenuItems(editor, t, advancedBlocksName),
           ),
           query,
         ),

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

@@ -0,0 +1,215 @@
+import {
+  FileBlockConfig,
+  InlineContentSchema,
+  PropSchema,
+  StyleSchema,
+  insertOrUpdateBlock,
+} from '@blocknote/core';
+import {
+  BlockTypeSelectItem,
+  ReactCustomBlockRenderProps,
+  ResizableFileBlockWrapper,
+  createReactBlockSpec,
+} from '@blocknote/react';
+import { TFunction } from 'i18next';
+import React, { useEffect, useRef, 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: { default: 500 },
+};
+
+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 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',
+        width: '100%',
+        paddingTop: `${100 / aspectRatio}%`, // padding-top sets height relative to width
+      }}
+    >
+      <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)}
+      />
+      {isResizing && (
+        <div
+          style={{
+            position: 'absolute',
+            inset: 0,
+            backgroundColor: 'transparent',
+            pointerEvents: 'all',
+            zIndex: 10,
+          }}
+        />
+      )}
+    </div>
+  ) : (
+    <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="Add an embedded block"
+      buttonIcon={<Icon iconName="link" $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', 'link', 'integration', 'lien'],
+    group,
+    icon: <Icon iconName="language" $size="18px" />,
+    subtext: t('Add an embedded website'),
+  },
+];
+
+export const getEmbedFormattingToolbarItems = (
+  t: TFunction<'translation', undefined>,
+): BlockTypeSelectItem => ({
+  name: t('Add an embedded website'),
+  type: 'embed',
+  icon: () => <Icon iconName="link" $size="16px" />,
+  isSelected: (block: { type: string }) => block.type === 'embed',
+});

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';

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({});
+  };

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 />;
+  };

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,
   },
 };

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,
   },
 };

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",