fixup! ✨(frontend) enable ODT export for documents

Author: Ovgodd

CHANGELOG.md

@@ -6,6 +6,10 @@ and this project adheres to
 
 ## [Unreleased]
 
+### Added
+
+- ✨(frontend) enable ODT export for documents #1524
+
 ### Fixed
 
 - ♿(frontend) improve accessibility:
@@ -22,7 +26,6 @@ and this project adheres to
 - ✨(frontend) create skeleton component for DocEditor #1491
 - ✨(frontend) add an EmojiPicker in the document tree and title #1381
 - ✨(frontend) ajustable left panel #1456
-- ✨(frontend) enable ODT export for documents #1524
 
 ### Changed
 

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { DocsExporterODT } from '../types';
-import { convertSvgToPng } from '../utils';
+import { convertSvgToPng, odtRegisterParagraphStyleForBlock } from '../utils';
 
 const MAX_WIDTH = 600;
 
@@ -64,6 +64,17 @@ export const blockMappingImageODT: DocsExporterODT['mappings']['blockMapping']['
       const finalWidth = previewWidth || width;
       const finalHeight = ((previewWidth || width) / width) * height;
 
+      const baseParagraphProps = {
+        backgroundColor: block.props.backgroundColor,
+        textAlignment: block.props.textAlignment,
+      };
+
+      const paragraphStyleName = odtRegisterParagraphStyleForBlock(
+        exporter,
+        baseParagraphProps,
+        { paddingCm: 0 },
+      );
+
       // Convert pixels to cm (ODT uses cm for dimensions)
       const widthCm = finalWidth / 37.795275591;
       const heightCm = finalHeight / 37.795275591;
@@ -72,18 +83,13 @@ export const blockMappingImageODT: DocsExporterODT['mappings']['blockMapping']['
       const frame = React.createElement(
         'text:p',
         {
-          'text:style-name':
-            block.props.textAlignment === 'center'
-              ? 'center'
-              : block.props.textAlignment === 'right'
-                ? 'right'
-                : 'left',
+          'text:style-name': paragraphStyleName,
         },
         React.createElement(
           'draw:frame',
           {
             'draw:name': `Image${Date.now()}`,
-            'text:anchor-type': 'paragraph',
+            'text:anchor-type': 'as-char',
             'svg:width': `${widthCm}cm`,
             'svg:height': `${heightCm}cm`,
           },
@@ -101,11 +107,17 @@ export const blockMappingImageODT: DocsExporterODT['mappings']['blockMapping']['
 
       // Add caption if present
       if (block.props.caption) {
+        const captionStyleName = odtRegisterParagraphStyleForBlock(
+          exporter,
+          baseParagraphProps,
+          { paddingCm: 0, parentStyleName: 'Caption' },
+        );
+
         return [
           frame,
           React.createElement(
             'text:p',
-            { 'text:style-name': 'Caption' },
+            { 'text:style-name': captionStyleName },
             block.props.caption,
           ),
         ];

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

@@ -116,7 +116,7 @@ function isOdtExporterLike(value: unknown): value is OdtExporterLike {
 export function odtRegisterParagraphStyleForBlock(
   exporter: unknown,
   props: Partial<DefaultProps>,
-  options?: { paddingCm?: number },
+  options?: { paddingCm?: number; parentStyleName?: string },
 ) {
   if (!isOdtExporterLike(exporter)) {
     throw new Error('Invalid ODT exporter: missing registerStyle');
@@ -144,12 +144,19 @@ export function odtRegisterParagraphStyleForBlock(
           : 'justify';
 
   const paddingCm = options?.paddingCm ?? 0.42; // ~1rem (16px)
+  const parentStyleName = options?.parentStyleName;
 
   // registerStyle is available on ODT exporter; call through with React elements
   const styleName = exporter.registerStyle((name: string) =>
     React.createElement(
       'style:style',
-      { 'style:name': name, 'style:family': 'paragraph' },
+      {
+        'style:name': name,
+        'style:family': 'paragraph',
+        ...(parentStyleName
+          ? { 'style:parent-style-name': parentStyleName }
+          : {}),
+      },
       React.createElement('style:paragraph-properties', {
         'fo:text-align': foTextAlign,
         'fo:padding': `${paddingCm}cm`,