🚧 create block

Author: anaisberg

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to
 ### Added
 
 - ✨(frontend) add customization for translations #857
+- ✨(frontend) Add a custom database block to the editor #1053
 
 ## [3.3.0] - 2025-05-06
 
@@ -37,21 +38,20 @@ and this project adheres to
 - ⬆️(docker) upgrade node images to alpine 3.21 #973
 
 ### Fixed
+
 - 🐛(y-provider) increase JSON size limits for transcription conversion #989
 
 ### Removed
 
 - 🔥(back) remove footer endpoint #948
 
-
 ## [3.2.1] - 2025-05-06
 
 ## Fixed
 
 - 🐛(frontend) fix list copy paste #943
 - 📝(doc) update contributing policy (commit signatures are now mandatory) #895
 
-
 ## [3.2.0] - 2025-05-05
 
 ## Added
@@ -62,7 +62,7 @@ and this project adheres to
 - ✨(settings) Allow configuring PKCE for the SSO #886
 - 🌐(i18n) activate chinese and spanish languages #884
 - 🔧(backend) allow overwriting the data directory #893
-- ➕(backend) add  `django-lasuite` dependency #839
+- ➕(backend) add `django-lasuite` dependency #839
 - ✨(frontend) advanced table features #908
 
 ## Changed
@@ -113,7 +113,6 @@ and this project adheres to
 - 🐛(backend) compute ancestor_links in get_abilities if needed #725
 - 🔒️(back) restrict access to document accesses #801
 
-
 ## [2.6.0] - 2025-03-21
 
 ## Added
@@ -132,7 +131,6 @@ and this project adheres to
 - 🔒️(back) throttle user list endpoint #636
 - 🔒️(back) remove pagination and limit to 5 for user list endpoint #636
 
-
 ## [2.5.0] - 2025-03-18
 
 ## Added
@@ -155,15 +153,14 @@ and this project adheres to
 ## Fixed
 
 - 🐛(frontend) SVG export #706
-- 🐛(frontend) remove scroll listener table content  #688
+- 🐛(frontend) remove scroll listener table content #688
 - 🔒️(back) restrict access to favorite_list endpoint #690
-- 🐛(backend) refactor to fix filtering on children 
-    and descendants views #695
+- 🐛(backend) refactor to fix filtering on children
+  and descendants views #695
 - 🐛(action) fix notify-argocd workflow #713
 - 🚨(helm) fix helmfile lint #736
 - 🚚(frontend) redirect to 401 page when 401 error #759
 
-
 ## [2.4.0] - 2025-03-06
 
 ## Added
@@ -178,7 +175,6 @@ and this project adheres to
 
 - 🐛(frontend) fix collaboration error #684
 
-
 ## [2.3.0] - 2025-03-03
 
 ## Added

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

@@ -27,13 +27,14 @@ import { randomColor } from '../utils';
 
 import { BlockNoteSuggestionMenu } from './BlockNoteSuggestionMenu';
 import { BlockNoteToolbar } from './BlockNoteToolBar/BlockNoteToolbar';
-import { CalloutBlock, DividerBlock } from './custom-blocks';
+import { CalloutBlock, DatabaseBlock, DividerBlock } from './custom-blocks';
 
 export const blockNoteSchema = withPageBreak(
   BlockNoteSchema.create({
     blockSpecs: {
       ...defaultBlockSpecs,
       callout: CalloutBlock,
+      database: DatabaseBlock,
       divider: DividerBlock,
     },
   }),

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

@@ -13,6 +13,7 @@ import { DocsBlockSchema } from '../types';
 
 import {
   getCalloutReactSlashMenuItems,
+  getDatabaseReactSlashMenuItems,
   getDividerReactSlashMenuItems,
 } from './custom-blocks';
 
@@ -29,6 +30,7 @@ export const BlockNoteSuggestionMenu = () => {
             getDefaultReactSlashMenuItems(editor),
             getPageBreakReactSlashMenuItems(editor),
             getCalloutReactSlashMenuItems(editor, t, basicBlocksName),
+            getDatabaseReactSlashMenuItems(editor, t, basicBlocksName),
             getDividerReactSlashMenuItems(editor, t, basicBlocksName),
           ),
           query,

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

@@ -0,0 +1,67 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { defaultProps, insertOrUpdateBlock } from '@blocknote/core';
+import { createReactBlockSpec } from '@blocknote/react';
+import { TFunction } from 'i18next';
+import React, { useEffect } from 'react';
+
+import { Box, Icon } from '@/components';
+
+import { DocsBlockNoteEditor } from '../../types';
+
+export const DatabaseBlock = createReactBlockSpec(
+  {
+    type: 'database',
+    propSchema: {
+      textAlignment: defaultProps.textAlignment,
+      backgroundColor: defaultProps.backgroundColor,
+    },
+    content: 'inline',
+  },
+  {
+    render: ({ block, editor }) => {
+      // Temporary: sets a orange background color to a database block when added by
+      // the user, while keeping the colors menu on the drag handler usable for
+      // this custom block.
+      useEffect(() => {
+        if (
+          !block.content.length &&
+          block.props.backgroundColor === 'default'
+        ) {
+          editor.updateBlock(block, { props: { backgroundColor: 'orange' } });
+        }
+      }, [block, editor]);
+
+      return (
+        <Box
+          $padding="1rem"
+          $gap="0.625rem"
+          style={{
+            flexGrow: 1,
+            flexDirection: 'row',
+          }}
+        >
+          <Box as="p">🏗️ Database block is in development</Box>{' '}
+        </Box>
+      );
+    },
+  },
+);
+
+export const getDatabaseReactSlashMenuItems = (
+  editor: DocsBlockNoteEditor,
+  t: TFunction<'translation', undefined>,
+  group: string,
+) => [
+  {
+    title: t('Database'),
+    onItemClick: () => {
+      insertOrUpdateBlock(editor, {
+        type: 'database',
+      });
+    },
+    aliases: ['database', 'encadré', 'hervorhebung', 'benadrukken'],
+    group,
+    icon: <Icon iconName="lightbulb" $size="18px" />,
+    subtext: t('Add a database block'),
+  },
+];

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 './DatabaseBlock';

src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/databaseDocx.tsx

@@ -0,0 +1,22 @@
+import { Paragraph, TextRun } from 'docx';
+
+import { DocsExporterDocx } from '../types';
+import { docxBlockPropsToStyles } from '../utils';
+
+export const blockMappingDatabaseDocx: DocsExporterDocx['mappings']['blockMapping']['database'] =
+  (block, exporter) => {
+    return new Paragraph({
+      ...docxBlockPropsToStyles({}, exporter.options.colors),
+      spacing: { before: 10, after: 10 },
+      children: [
+        new TextRun({
+          text: ' ',
+          break: 1,
+        }),
+        new TextRun({
+          text: ' ',
+          break: 1,
+        }),
+      ],
+    });
+  };

src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/databasePDF.tsx

@@ -0,0 +1,31 @@
+import { StyleSheet, Text, View } from '@react-pdf/renderer';
+
+import { DocsExporterPDF } from '../types';
+
+const styles = StyleSheet.create({
+  wrapper: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    padding: 8,
+    gap: 4,
+  },
+  emoji: {
+    fontSize: 16,
+  },
+  text: {
+    maxWidth: '94%',
+    paddingTop: 2,
+  },
+});
+
+export const blockMappingDatabasePDF: DocsExporterPDF['mappings']['blockMapping']['database'] =
+  () => {
+    return (
+      <View wrap={false} style={styles.wrapper}>
+        <Text debug={false} style={styles.text}>
+          {' '}
+        </Text>
+      </View>
+    );
+  };

src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/index.ts

@@ -1,5 +1,7 @@
 export * from './calloutDocx';
 export * from './calloutPDF';
+export * from './databaseDocx';
+export * from './databasePDF';
 export * from './dividerDocx';
 export * from './dividerPDF';
 export * from './headingPDF';

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

@@ -1,7 +1,9 @@
+import { BlockMapping } from '@blocknote/core';
 import { docxDefaultSchemaMappings } from '@blocknote/xl-docx-exporter';
 
 import {
   blockMappingCalloutDocx,
+  blockMappingDatabaseDocx,
   blockMappingDividerDocx,
   blockMappingImageDocx,
   blockMappingQuoteDocx,
@@ -14,7 +16,8 @@ export const docxDocsSchemaMappings: DocsExporterDocx['mappings'] = {
     ...docxDefaultSchemaMappings.blockMapping,
     callout: blockMappingCalloutDocx,
     divider: blockMappingDividerDocx,
+    database: blockMappingDatabaseDocx,
     quote: blockMappingQuoteDocx,
     image: blockMappingImageDocx,
-  },
+  } as BlockMapping<any, any, any, any, any>, // eslint-disable-line @typescript-eslint/no-explicit-any
 };

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

@@ -1,7 +1,9 @@
+import { BlockMapping } from '@blocknote/core';
 import { pdfDefaultSchemaMappings } from '@blocknote/xl-pdf-exporter';
 
 import {
   blockMappingCalloutPDF,
+  blockMappingDatabasePDF,
   blockMappingDividerPDF,
   blockMappingHeadingPDF,
   blockMappingImagePDF,
@@ -16,11 +18,12 @@ export const pdfDocsSchemaMappings: DocsExporterPDF['mappings'] = {
   blockMapping: {
     ...pdfDefaultSchemaMappings.blockMapping,
     callout: blockMappingCalloutPDF,
+    database: blockMappingDatabasePDF, // TODO: create Db block
     heading: blockMappingHeadingPDF,
     image: blockMappingImagePDF,
     paragraph: blockMappingParagraphPDF,
     divider: blockMappingDividerPDF,
     quote: blockMappingQuotePDF,
     table: blockMappingTablePDF,
-  },
+  } as BlockMapping<any, any, any, any, any>, // eslint-disable-line @typescript-eslint/no-explicit-any
 };