✨(frontend) add odt export for callout and upload loader blocks

Added ODT mappings for callout with emoji and upload loader with icons.

Signed-off-by: Cyril <c.gromoff@gmail.com>

Author: Ovgodd

src/frontend/apps/impress/package.json

@@ -25,6 +25,7 @@
     "@blocknote/react": "0.41.1",
     "@blocknote/xl-docx-exporter": "0.41.1",
     "@blocknote/xl-multi-column": "0.41.1",
+    "@blocknote/xl-odt-exporter": "^0.41.1",
     "@blocknote/xl-pdf-exporter": "0.41.1",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/modifiers": "9.0.0",

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

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { DocsExporterODT } from '../types';
+
+export const blockMappingCalloutODT: DocsExporterODT['mappings']['blockMapping']['callout'] =
+  (block, exporter) => {
+    // Map callout to paragraph with emoji prefix
+    const emoji = block.props.emoji || '💡';
+
+    // Transform inline content (text, bold, links, etc.)
+    const inlineContent = exporter.transformInlineContent(block.content);
+
+    const textAlignment =
+      block.props.textAlignment === 'center'
+        ? 'center'
+        : block.props.textAlignment === 'right'
+          ? 'right'
+          : 'left';
+
+    // Simple paragraph with emoji - ODT background colors are complex to implement
+    // and not well supported across different ODT readers
+    return React.createElement(
+      'text:p',
+      {
+        'text:style-name': textAlignment,
+      },
+      `${emoji} `,
+      ...inlineContent,
+    );
+  };

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

@@ -1,4 +1,5 @@
 export * from './calloutDocx';
+export * from './calloutODT';
 export * from './calloutPDF';
 export * from './headingPDF';
 export * from './imageDocx';
@@ -7,5 +8,6 @@ export * from './paragraphPDF';
 export * from './quoteDocx';
 export * from './quotePDF';
 export * from './tablePDF';
-export * from './uploadLoaderPDF';
 export * from './uploadLoaderDocx';
+export * from './uploadLoaderODT';
+export * from './uploadLoaderPDF';

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

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { DocsExporterODT } from '../types';
+
+export const blockMappingUploadLoaderODT: DocsExporterODT['mappings']['blockMapping']['uploadLoader'] =
+  (block) => {
+    // Map uploadLoader to paragraph with information text
+    const information = block.props.information || '';
+    const type = block.props.type || 'loading';
+    const prefix = type === 'warning' ? '⚠️ ' : '⏳ ';
+
+    return React.createElement(
+      'text:p',
+      { 'text:style-name': 'Text_20_body' },
+      `${prefix}${information}`,
+    );
+  };

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

@@ -0,0 +1,29 @@
+import { odtDefaultSchemaMappings } from '@blocknote/xl-odt-exporter';
+
+import {
+  blockMappingCalloutODT,
+  blockMappingImageODT,
+  blockMappingUploadLoaderODT,
+} from './blocks-mapping';
+
+// Note: Using `as any` due to strict typing constraints in @blocknote/xl-odt-exporter
+// when extending with custom block mappings. The mappings are functionally correct.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const odtDocsSchemaMappings: any = {
+  ...odtDefaultSchemaMappings,
+  blockMapping: {
+    ...odtDefaultSchemaMappings.blockMapping,
+    // Custom mappings for our custom blocks
+    callout: blockMappingCalloutODT,
+    image: blockMappingImageODT,
+    // We're reusing the file block mapping for PDF blocks
+    pdf: odtDefaultSchemaMappings.blockMapping.file,
+    uploadLoader: blockMappingUploadLoaderODT,
+  },
+  inlineContentMapping: {
+    ...odtDefaultSchemaMappings.inlineContentMapping,
+  },
+  styleMapping: {
+    ...odtDefaultSchemaMappings.styleMapping,
+  },
+};