✨(frontend) new custom block "embed"

We introduce a new custom block called "embed" that
allows users to embed external content into their
documents. This block can be used to include
videos, interactive widgets, or other web content
directly within the document editor.
It is a powerfull custom block that can make
your document much more interactive.

Author: AntoLC

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

@@ -12,6 +12,7 @@ import * as localesBN from '@blocknote/core/locales';
 import { BlockNoteView } from '@blocknote/mantine';
 import '@blocknote/mantine/style.css';
 import {
+  FilePanelController,
   FloatingComposerController,
   FloatingThreadController,
   ThreadsSidebar,
@@ -53,7 +54,13 @@ import { randomColor, sanitizeColor } from '../utils';
 import BlockNoteAI from './AI';
 import { BlockNoteSuggestionMenu } from './BlockNoteSuggestionMenu';
 import { BlockNoteToolbar } from './BlockNoteToolBar/BlockNoteToolbar';
-import { CalloutBlock, PdfBlock, UploadLoaderBlock } from './custom-blocks';
+import {
+  CalloutBlock,
+  DocsFilePanel,
+  EmbedBlock,
+  PdfBlock,
+  UploadLoaderBlock,
+} from './custom-blocks';
 const AIMenu = BlockNoteAI?.AIMenu;
 const AIMenuController = BlockNoteAI?.AIMenuController;
 const useAI = BlockNoteAI?.useAI;
@@ -70,6 +77,7 @@ const baseBlockNoteSchema = withPageBreak(
       ...defaultBlockSpecs,
       callout: CalloutBlock(),
       codeBlock: createCodeBlockSpec(codeBlockOptions),
+      embed: EmbedBlock(),
       pdf: PdfBlock(),
       uploadLoader: UploadLoaderBlock(),
     },
@@ -292,6 +300,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
         editor={editor}
         formattingToolbar={false}
         slashMenu={false}
+        filePanel={false}
         theme="light"
         comments={false}
         aria-label={t('Document editor')}
@@ -303,6 +312,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
         )}
         <BlockNoteSuggestionMenu aiAllowed={aiBlockNoteAllowed} />
         <BlockNoteToolbar aiAllowed={aiBlockNoteAllowed} />
+        <FilePanelController filePanel={DocsFilePanel} />
         {showComments && <FloatingComposerController />}
         {showComments && !isCommentSideBarOpen && <FloatingThreadController />}
         {threadsSidebarTarget &&

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

@@ -20,6 +20,7 @@ import {
 import BlockNoteAI from './AI';
 import {
   getCalloutReactSlashMenuItems,
+  getEmbedReactSlashMenuItems,
   getPdfReactSlashMenuItems,
 } from './custom-blocks';
 import { useGetInterlinkingMenuItems } from './custom-inline-content';
@@ -56,6 +57,7 @@ export const BlockNoteSuggestionMenu = ({
       getPageBreakReactSlashMenuItems(editor),
       getMultiColumnSlashMenuItems?.(editor) || [],
       getPdfReactSlashMenuItems(editor, t, fileBlocksName),
+      getEmbedReactSlashMenuItems(editor, t, fileBlocksName),
       getCalloutReactSlashMenuItems(editor, t, basicBlocksName),
       aiAllowed && getAISlashMenuItems ? getAISlashMenuItems(editor) : [],
     );

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

@@ -0,0 +1,81 @@
+/**
+ * Copy of Blocknote's default FilePanel, restricted to hide the "Upload" tab
+ * for blocks whose props explicitly set `uploadDisabled: true` (e.g. the
+ * "embed" block, which only supports embedding an existing URL).
+ *
+ * Original source:
+ * https://github.com/TypeCellOS/BlockNote/blob/main/packages/react/src/components/FilePanel/FilePanel.tsx
+ */
+import {
+  EmbedTab,
+  FilePanelProps,
+  UploadTab,
+  useBlockNoteEditor,
+  useComponentsContext,
+  useDictionary,
+} from '@blocknote/react';
+import { useState } from 'react';
+
+import {
+  DocsBlockSchema,
+  DocsInlineContentSchema,
+  DocsStyleSchema,
+} from '../../types';
+
+export const DocsFilePanel = (
+  props: FilePanelProps & Partial<{ defaultOpenTab: string }>,
+) => {
+  const Components = useComponentsContext();
+  const dict = useDictionary();
+
+  const editor = useBlockNoteEditor<
+    DocsBlockSchema,
+    DocsInlineContentSchema,
+    DocsStyleSchema
+  >();
+
+  const [loading, setLoading] = useState<boolean>(false);
+
+  const block = editor.getBlock(props.blockId);
+  const uploadDisabled =
+    !!block &&
+    'uploadDisabled' in block.props &&
+    block.props.uploadDisabled === true;
+  const allowUpload = editor.uploadFile !== undefined && !uploadDisabled;
+
+  const tabs = [
+    ...(allowUpload
+      ? [
+          {
+            name: dict.file_panel.upload.title,
+            tabPanel: (
+              <UploadTab blockId={props.blockId} setLoading={setLoading} />
+            ),
+          },
+        ]
+      : []),
+    {
+      name: dict.file_panel.embed.title,
+      tabPanel: <EmbedTab blockId={props.blockId} />,
+    },
+  ];
+
+  const [openTab, setOpenTab] = useState<string>(
+    props.defaultOpenTab || tabs[0].name,
+  );
+
+  if (!Components) {
+    return null;
+  }
+
+  return (
+    <Components.FilePanel.Root
+      className="bn-panel"
+      defaultOpenTab={openTab}
+      openTab={openTab}
+      setOpenTab={setOpenTab}
+      tabs={tabs}
+      loading={loading}
+    />
+  );
+};

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

@@ -0,0 +1,181 @@
+import {
+  BlockConfig,
+  BlockNoDefaults,
+  BlockNoteEditor,
+  InlineContentSchema,
+  StyleSchema,
+} from '@blocknote/core';
+import { insertOrUpdateBlockForSlashMenu } from '@blocknote/core/extensions';
+import * as locales from '@blocknote/core/locales';
+import {
+  AddFileButton,
+  ResizableFileBlockWrapper,
+  createReactBlockSpec,
+} from '@blocknote/react';
+import { TFunction } from 'i18next';
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { createGlobalStyle } from 'styled-components';
+
+import { Box, Icon } from '@/components';
+import { isSafeUrl } from '@/utils/url';
+
+import Warning from '../../assets/warning.svg';
+import { DocsBlockNoteEditor } from '../../types';
+
+const EmbedBlockStyle = createGlobalStyle`
+  .bn-block-content[data-content-type="embed"] .bn-file-block-content-wrapper {
+    width: fit-content;
+  }
+  .bn-block-content[data-content-type="embed"] .bn-file-block-content-wrapper[style*="fit-content"] {
+    width: 100% !important;
+  }
+`;
+
+type FileBlockEditor = Parameters<typeof AddFileButton>[0]['editor'];
+type FileBlockBlock = Parameters<typeof AddFileButton>[0]['block'];
+
+const isSameOriginUrl = (url: string): boolean => {
+  try {
+    return (
+      new URL(url, window.location.origin).origin === window.location.origin
+    );
+  } catch {
+    return true;
+  }
+};
+
+type CreateEmbedBlockConfig = BlockConfig<
+  'embed',
+  {
+    backgroundColor: { default: 'default' };
+    caption: { default: '' };
+    name: { default: '' };
+    previewWidth: { default: undefined; type: 'number' };
+    showPreview: { default: true };
+    textAlignment: { default: 'left' };
+    uploadDisabled: { default: true };
+    url: { default: '' };
+  },
+  'none'
+>;
+
+interface EmbedBlockComponentProps {
+  block: BlockNoDefaults<
+    Record<'embed', CreateEmbedBlockConfig>,
+    InlineContentSchema,
+    StyleSchema
+  >;
+  editor: BlockNoteEditor<
+    Record<'embed', CreateEmbedBlockConfig>,
+    InlineContentSchema,
+    StyleSchema
+  >;
+}
+
+const EmbedBlockComponent = ({ editor, block }: EmbedBlockComponentProps) => {
+  const embedUrl = block.props.url;
+  const { i18n, t } = useTranslation();
+  const lang = i18n.resolvedLanguage;
+
+  useEffect(() => {
+    if (lang && locales[lang as keyof typeof locales]) {
+      locales[lang as keyof typeof locales].file_blocks.add_button_text[
+        'embed'
+      ] = t('Add embed');
+      (
+        locales[lang as keyof typeof locales].file_panel.embed
+          .embed_button as Record<string, string>
+      )['embed'] = t('Embed');
+    }
+  }, [lang, t]);
+
+  const isInvalidEmbed =
+    !!embedUrl && (!isSafeUrl(embedUrl) || isSameOriginUrl(embedUrl));
+
+  if (isInvalidEmbed) {
+    return (
+      <Box
+        $direction="row"
+        $gap="0.5rem"
+        $width="inherit"
+        $css="pointer-events: none;"
+        contentEditable={false}
+        draggable={false}
+      >
+        <Warning />
+        {t('Invalid or unsafe URL.')}
+      </Box>
+    );
+  }
+
+  return (
+    <>
+      <EmbedBlockStyle />
+      <ResizableFileBlockWrapper
+        buttonIcon={
+          <Icon iconName="public" $size="24px" $css="line-height: normal;" />
+        }
+        block={block as unknown as FileBlockBlock}
+        editor={editor as unknown as FileBlockEditor}
+      >
+        {!!embedUrl && (
+          <Box
+            as="iframe"
+            className="bn-visual-media"
+            role="presentation"
+            $width="100%"
+            $height="450px"
+            src={embedUrl}
+            title={block.props.name || t('Embedded content')}
+            sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-forms"
+            referrerPolicy="no-referrer"
+            loading="lazy"
+            contentEditable={false}
+            draggable={false}
+          />
+        )}
+      </ResizableFileBlockWrapper>
+    </>
+  );
+};
+
+export const EmbedBlock = createReactBlockSpec(
+  {
+    type: 'embed',
+    content: 'none',
+    propSchema: {
+      backgroundColor: { default: 'default' as const },
+      caption: { default: '' as const },
+      name: { default: '' as const },
+      previewWidth: { default: undefined, type: 'number' },
+      showPreview: { default: true },
+      textAlignment: { default: 'left' as const },
+      uploadDisabled: { default: true },
+      url: { default: '' as const },
+    },
+  },
+  {
+    meta: {
+      fileBlockAccept: [],
+    },
+    render: (props) => <EmbedBlockComponent {...props} />,
+  },
+);
+
+export const getEmbedReactSlashMenuItems = (
+  editor: DocsBlockNoteEditor,
+  t: TFunction<'translation', undefined>,
+  group: string,
+) => [
+  {
+    title: t('Embed'),
+    onItemClick: () => {
+      insertOrUpdateBlockForSlashMenu(editor, { type: 'embed' });
+    },
+    aliases: [t('embed'), t('iframe'), t('website'), t('link')],
+    group,
+    icon: <Icon iconName="public" $size="18px" />,
+    subtext: t('Embed a web page'),
+  },
+];

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/index.ts

@@ -1,3 +1,5 @@
 export * from './CalloutBlock';
+export * from './DocsFilePanel';
+export * from './EmbedBlock';
 export * from './PdfBlock';
 export * from './UploadLoaderBlock';

src/frontend/apps/impress/src/features/docs/doc-export/mappingDocx.tsx

@@ -14,10 +14,12 @@ export const docxDocsSchemaMappings: DocsExporterDocx['mappings'] = {
   blockMapping: {
     ...docxDefaultSchemaMappings.blockMapping,
     callout: blockMappingCalloutDocx,
-    // We're reusing the file block mapping for PDF blocks; both share the same
+    // We're reusing the file block mapping for PDF/embed blocks; both share the same
     // implementation signature, so we can reuse the handler directly.
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     pdf: docxDefaultSchemaMappings.blockMapping.file as any,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    embed: docxDefaultSchemaMappings.blockMapping.file as any,
     quote: blockMappingQuoteDocx,
     image: blockMappingImageDocx,
     uploadLoader: blockMappingUploadLoaderDocx,

src/frontend/apps/impress/src/features/docs/doc-export/mappingODT.ts

@@ -18,10 +18,12 @@ export const odtDocsSchemaMappings: DocsExporterODT['mappings'] = {
     ...odtDefaultSchemaMappings.blockMapping,
     callout: blockMappingCalloutODT,
     image: blockMappingImageODT,
-    // We're reusing the file block mapping for PDF blocks
+    // We're reusing the file block mapping for PDF/embed blocks
     // The types don't match exactly but the implementation is compatible
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     pdf: odtDefaultSchemaMappings.blockMapping.file as any,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    embed: odtDefaultSchemaMappings.blockMapping.file as any,
     uploadLoader: blockMappingUploadLoaderODT,
   },
 

src/frontend/apps/impress/src/features/docs/doc-export/mappingPDF.tsx

@@ -22,10 +22,12 @@ export const pdfDocsSchemaMappings: DocsExporterPDF['mappings'] = {
     paragraph: blockMappingParagraphPDF,
     quote: blockMappingQuotePDF,
     table: blockMappingTablePDF,
-    // We're using the file block mapping for PDF blocks
+    // We're using the file block mapping for PDF/embed blocks
     // The types don't match exactly but the implementation is compatible
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     pdf: pdfDefaultSchemaMappings.blockMapping.file as any,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    embed: pdfDefaultSchemaMappings.blockMapping.file as any,
     uploadLoader: blockMappingUploadLoaderPDF,
   },
   inlineContentMapping: {