✨(odt) add generic helper and style callout block for odt export

create odtRegisterParagraphStyleForBlock and apply background/padding styles

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

Author: Ovgodd

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to
 
 - ✨(frontend) create skeleton component for DocEditor #1491
 - ✨(frontend) add an EmojiPicker in the document tree and title #1381
+- ✨(frontend) enable ODT export for documents #1524
 
 ### Changed
 

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

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { odtRegisterParagraphStyleForBlock } from '../utils';
 import { DocsExporterODT } from '../types';
 
 export const blockMappingCalloutODT: DocsExporterODT['mappings']['blockMapping']['callout'] =
@@ -10,19 +11,20 @@ export const blockMappingCalloutODT: DocsExporterODT['mappings']['blockMapping']
     // 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';
+    // Resolve background and alignment → create a dedicated paragraph style
+    const styleName = odtRegisterParagraphStyleForBlock(
+      exporter,
+      {
+        backgroundColor: block.props.backgroundColor,
+        textAlignment: block.props.textAlignment,
+      },
+      { paddingCm: 0.42 },
+    );
 
-    // 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,
+        'text:style-name': styleName,
       },
       `${emoji} `,
       ...inlineContent,

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import {
   COLORS_DEFAULT,
   DefaultProps,
@@ -98,3 +99,58 @@ export function docxBlockPropsToStyles(
                 })(),
   };
 }
+
+// ODT helpers
+export function odtRegisterParagraphStyleForBlock(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  exporter: any,
+  props: Partial<DefaultProps>,
+  options?: { paddingCm?: number },
+) {
+  const colors = exporter?.options?.colors as typeof COLORS_DEFAULT | undefined;
+
+  const bgColorHex =
+    props.backgroundColor && props.backgroundColor !== 'default' && colors
+      ? colors[props.backgroundColor].background
+      : undefined;
+
+  const textColorHex =
+    props.textColor && props.textColor !== 'default' && colors
+      ? colors[props.textColor].text
+      : undefined;
+
+  const foTextAlign =
+    !props.textAlignment || props.textAlignment === 'left'
+      ? 'start'
+      : props.textAlignment === 'center'
+        ? 'center'
+        : props.textAlignment === 'right'
+          ? 'end'
+          : 'justify';
+
+  const paddingCm = options?.paddingCm ?? 0.42; // ~1rem (16px)
+
+  // registerStyle is available on ODT exporter; call through with React elements
+  const styleName = (
+    exporter as unknown as {
+      registerStyle: (fn: (name: string) => React.ReactNode) => string;
+    }
+  ).registerStyle((name: string) =>
+    React.createElement(
+      'style:style',
+      { 'style:name': name, 'style:family': 'paragraph' },
+      React.createElement('style:paragraph-properties', {
+        'fo:text-align': foTextAlign,
+        'fo:padding': `${paddingCm}cm`,
+        ...(bgColorHex ? { 'fo:background-color': bgColorHex } : {}),
+      }),
+      textColorHex
+        ? React.createElement('style:text-properties', {
+            'fo:color': textColorHex,
+          })
+        : undefined,
+    ),
+  );
+
+  return styleName;
+}