✨(frontend) adapt export to callout block

Adapt modal export to include PDF and Docx export
for the callout block.

Author: ZouicheOmar

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

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

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

@@ -0,0 +1,35 @@
+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 blockMappingCalloutPDF: DocsExporterPDF['mappings']['blockMapping']['callout'] =
+  (block, exporter) => {
+    return (
+      <View wrap={false} style={styles.wrapper}>
+        <Text debug={false} style={styles.emoji}>
+          {block.props.emoji}
+        </Text>
+        <Text debug={false} style={styles.text}>
+          {' '}
+          {exporter.transformInlineContent(block.content)}{' '}
+        </Text>
+      </View>
+    );
+  };

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

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

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

@@ -1,6 +1,7 @@
 import { docxDefaultSchemaMappings } from '@blocknote/xl-docx-exporter';
 
 import {
+  blockMappingCalloutDocx,
   blockMappingDividerDocx,
   blockMappingImageDocx,
   blockMappingQuoteDocx,
@@ -11,6 +12,7 @@ export const docxDocsSchemaMappings: DocsExporterDocx['mappings'] = {
   ...docxDefaultSchemaMappings,
   blockMapping: {
     ...docxDefaultSchemaMappings.blockMapping,
+    callout: blockMappingCalloutDocx,
     divider: blockMappingDividerDocx,
     quote: blockMappingQuoteDocx,
     image: blockMappingImageDocx,

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

@@ -1,6 +1,7 @@
 import { pdfDefaultSchemaMappings } from '@blocknote/xl-pdf-exporter';
 
 import {
+  blockMappingCalloutPDF,
   blockMappingDividerPDF,
   blockMappingHeadingPDF,
   blockMappingImagePDF,
@@ -14,6 +15,7 @@ export const pdfDocsSchemaMappings: DocsExporterPDF['mappings'] = {
   ...pdfDefaultSchemaMappings,
   blockMapping: {
     ...pdfDefaultSchemaMappings.blockMapping,
+    callout: blockMappingCalloutPDF,
     heading: blockMappingHeadingPDF,
     image: blockMappingImagePDF,
     paragraph: blockMappingParagraphPDF,