✨(frontend) embed-block: added url embed block

Author: ThomasMetzger

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

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',
+});

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