From bd79f84e070ebb42212859be1bbd7229c0ecbba2 Mon Sep 17 00:00:00 2001
From: ZouicheOmar <zouiche.dev.omar@gmail.com>
Date: Fri, 18 Apr 2025 17:21:41 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20adapt=20export=20to=20cal?=
 =?UTF-8?q?lout=20block?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adapt modal export to include PDF and Docx export
for the callout block.
---
 .../doc-export/blocks-mapping/calloutDocx.tsx | 24 +++++++++++++
 .../doc-export/blocks-mapping/calloutPDF.tsx  | 35 +++++++++++++++++++
 .../docs/doc-export/blocks-mapping/index.ts   |  2 ++
 .../features/docs/doc-export/mappingDocx.tsx  |  2 ++
 .../features/docs/doc-export/mappingPDF.tsx   |  2 ++
 5 files changed, 65 insertions(+)
 create mode 100644 src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/calloutDocx.tsx
 create mode 100644 src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/calloutPDF.tsx

diff --git a/src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/calloutDocx.tsx b/src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/calloutDocx.tsx
new file mode 100644
index 00000000..779b7c48
--- /dev/null
+++ b/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,
+        }),
+      ],
+    });
+  };
diff --git a/src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/calloutPDF.tsx b/src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/calloutPDF.tsx
new file mode 100644
index 00000000..e4deb235
--- /dev/null
+++ b/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>
+    );
+  };
diff --git a/src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/index.ts b/src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/index.ts
index 5cfbb48f..e3e766db 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/index.ts
+++ b/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';
diff --git a/src/frontend/apps/impress/src/features/docs/doc-export/mappingDocx.tsx b/src/frontend/apps/impress/src/features/docs/doc-export/mappingDocx.tsx
index 44944692..434daa99 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-export/mappingDocx.tsx
+++ b/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,
diff --git a/src/frontend/apps/impress/src/features/docs/doc-export/mappingPDF.tsx b/src/frontend/apps/impress/src/features/docs/doc-export/mappingPDF.tsx
index 380e2f1a..4224045d 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-export/mappingPDF.tsx
+++ b/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,