✨(frontend) enable ODT export for documents

provides ODT export with support for callout, upload, interlinking and tests

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

✨(frontend) add image and interlinking support for odt export

Added image mapping with SVG conversion and clickable document links.

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

✅(e2e) add e2e tests for odt export and interlinking features

covers odt document export and cross-section interlinking use cases

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

✨(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/e2e/__tests__/app-impress/doc-export.spec.ts

@@ -32,7 +32,7 @@ test.describe('Doc Export', () => {
 
     await expect(page.getByTestId('modal-export-title')).toBeVisible();
     await expect(
-      page.getByText('Download your document in a .docx or .pdf format.'),
+      page.getByText('Download your document in a .docx, .odt or .pdf format.'),
     ).toBeVisible();
     await expect(
       page.getByRole('combobox', { name: 'Template' }),
@@ -138,6 +138,51 @@ test.describe('Doc Export', () => {
     expect(download.suggestedFilename()).toBe(`${randomDoc}.docx`);
   });
 
+  test('it exports the doc to odt', async ({ page, browserName }) => {
+    const [randomDoc] = await createDoc(page, 'doc-editor-odt', browserName, 1);
+
+    await verifyDocName(page, randomDoc);
+
+    await page.locator('.ProseMirror.bn-editor').click();
+    await page.locator('.ProseMirror.bn-editor').fill('Hello World ODT');
+
+    await page.keyboard.press('Enter');
+    await page.locator('.bn-block-outer').last().fill('/');
+    await page.getByText('Resizable image with caption').click();
+
+    const fileChooserPromise = page.waitForEvent('filechooser');
+    await page.getByText('Upload image').click();
+
+    const fileChooser = await fileChooserPromise;
+    await fileChooser.setFiles(path.join(__dirname, 'assets/test.svg'));
+
+    const image = page
+      .locator('.--docs--editor-container img.bn-visual-media')
+      .first();
+
+    await expect(image).toBeVisible();
+
+    await page
+      .getByRole('button', {
+        name: 'Export the document',
+      })
+      .click();
+
+    await page.getByRole('combobox', { name: 'Format' }).click();
+    await page.getByRole('option', { name: 'Odt' }).click();
+
+    await expect(page.getByTestId('doc-export-download-button')).toBeVisible();
+
+    const downloadPromise = page.waitForEvent('download', (download) => {
+      return download.suggestedFilename().includes(`${randomDoc}.odt`);
+    });
+
+    void page.getByTestId('doc-export-download-button').click();
+
+    const download = await downloadPromise;
+    expect(download.suggestedFilename()).toBe(`${randomDoc}.odt`);
+  });
+
   /**
    * This test tell us that the export to pdf is working with images
    * but it does not tell us if the images are being displayed correctly
@@ -451,4 +496,68 @@ test.describe('Doc Export', () => {
 
     expect(pdfData.text).toContain(randomDoc);
   });
+
+  test('it exports the doc with interlinking to odt', async ({
+    page,
+    browserName,
+  }) => {
+    const [randomDoc] = await createDoc(
+      page,
+      'export-interlinking-odt',
+      browserName,
+      1,
+    );
+
+    await verifyDocName(page, randomDoc);
+
+    const { name: docChild } = await createRootSubPage(
+      page,
+      browserName,
+      'export-interlink-child-odt',
+    );
+
+    await verifyDocName(page, docChild);
+
+    await page.locator('.bn-block-outer').last().fill('/');
+    await page.getByText('Link a doc').first().click();
+
+    const input = page.locator(
+      "span[data-inline-content-type='interlinkingSearchInline'] input",
+    );
+    const searchContainer = page.locator('.quick-search-container');
+
+    await input.fill('export-interlink');
+
+    await expect(searchContainer).toBeVisible();
+    await expect(searchContainer.getByText(randomDoc)).toBeVisible();
+
+    // We are in docChild, we want to create a link to randomDoc (parent)
+    await searchContainer.getByText(randomDoc).click();
+
+    // Search the interlinking link in the editor (not in the document tree)
+    const editor = page.locator('.ProseMirror.bn-editor');
+    const interlink = editor.getByRole('button', {
+      name: randomDoc,
+    });
+
+    await expect(interlink).toBeVisible();
+
+    await page
+      .getByRole('button', {
+        name: 'Export the document',
+      })
+      .click();
+
+    await page.getByRole('combobox', { name: 'Format' }).click();
+    await page.getByRole('option', { name: 'Odt' }).click();
+
+    const downloadPromise = page.waitForEvent('download', (download) => {
+      return download.suggestedFilename().includes(`${docChild}.odt`);
+    });
+
+    void page.getByTestId('doc-export-download-button').click();
+
+    const download = await downloadPromise;
+    expect(download.suggestedFilename()).toBe(`${docChild}.odt`);
+  });
 });

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,32 @@
+import React from 'react';
+
+import { odtRegisterParagraphStyleForBlock } from '../utils';
+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);
+
+    // Resolve background and alignment → create a dedicated paragraph style
+    const styleName = odtRegisterParagraphStyleForBlock(
+      exporter,
+      {
+        backgroundColor: block.props.backgroundColor,
+        textAlignment: block.props.textAlignment,
+      },
+      { paddingCm: 0.42 },
+    );
+
+    return React.createElement(
+      'text:p',
+      {
+        'text:style-name': styleName,
+      },
+      `${emoji} `,
+      ...inlineContent,
+    );
+  };

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

@@ -0,0 +1,128 @@
+import React from 'react';
+
+import { DocsExporterODT } from '../types';
+import { convertSvgToPng } from '../utils';
+
+const MAX_WIDTH = 600;
+
+export const blockMappingImageODT: DocsExporterODT['mappings']['blockMapping']['image'] =
+  async (block, exporter) => {
+    try {
+      const blob = await exporter.resolveFile(block.props.url);
+
+      if (!blob || !blob.type) {
+        console.warn(`Failed to resolve image: ${block.props.url}`);
+        return null;
+      }
+
+      let pngConverted: string | undefined;
+      let dimensions: { width: number; height: number } | undefined;
+      let previewWidth = block.props.previewWidth || undefined;
+
+      if (!blob.type.includes('image')) {
+        console.warn(`Not an image type: ${blob.type}`);
+        return null;
+      }
+
+      if (blob.type.includes('svg')) {
+        const svgText = await blob.text();
+        const FALLBACK_SIZE = 536;
+        previewWidth = previewWidth || blob.size || FALLBACK_SIZE;
+        pngConverted = await convertSvgToPng(svgText, previewWidth);
+        const img = new Image();
+        img.src = pngConverted;
+        await new Promise((resolve) => {
+          img.onload = () => {
+            dimensions = { width: img.width, height: img.height };
+            resolve(null);
+          };
+        });
+      } else {
+        dimensions = await getImageDimensions(blob);
+      }
+
+      if (!dimensions) {
+        return null;
+      }
+
+      const { width, height } = dimensions;
+
+      if (previewWidth && previewWidth > MAX_WIDTH) {
+        previewWidth = MAX_WIDTH;
+      }
+
+      // Convert image to base64 for ODT embedding
+      const arrayBuffer = pngConverted
+        ? await (await fetch(pngConverted)).arrayBuffer()
+        : await blob.arrayBuffer();
+      const base64 = btoa(
+        Array.from(new Uint8Array(arrayBuffer))
+          .map((byte) => String.fromCharCode(byte))
+          .join(''),
+      );
+
+      const finalWidth = previewWidth || width;
+      const finalHeight = ((previewWidth || width) / width) * height;
+
+      // Convert pixels to cm (ODT uses cm for dimensions)
+      const widthCm = finalWidth / 37.795275591;
+      const heightCm = finalHeight / 37.795275591;
+
+      // Create ODT image structure using React.createElement
+      const frame = React.createElement(
+        'text:p',
+        {
+          'text:style-name':
+            block.props.textAlignment === 'center'
+              ? 'center'
+              : block.props.textAlignment === 'right'
+                ? 'right'
+                : 'left',
+        },
+        React.createElement(
+          'draw:frame',
+          {
+            'draw:name': `Image${Date.now()}`,
+            'text:anchor-type': 'paragraph',
+            'svg:width': `${widthCm}cm`,
+            'svg:height': `${heightCm}cm`,
+          },
+          React.createElement(
+            'draw:image',
+            {
+              'xlink:type': 'simple',
+              'xlink:show': 'embed',
+              'xlink:actuate': 'onLoad',
+            },
+            React.createElement('office:binary-data', {}, base64),
+          ),
+        ),
+      );
+
+      // Add caption if present
+      if (block.props.caption) {
+        return [
+          frame,
+          React.createElement(
+            'text:p',
+            { 'text:style-name': 'Caption' },
+            block.props.caption,
+          ),
+        ];
+      }
+
+      return frame;
+    } catch (error) {
+      console.error(`Error processing image for ODT export:`, error);
+      return null;
+    }
+  };
+
+async function getImageDimensions(blob: Blob) {
+  if (typeof window !== 'undefined') {
+    const bmp = await createImageBitmap(blob);
+    const { width, height } = bmp;
+    bmp.close();
+    return { width, height };
+  }
+}

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

@@ -1,11 +1,14 @@
 export * from './calloutDocx';
+export * from './calloutODT';
 export * from './calloutPDF';
 export * from './headingPDF';
 export * from './imageDocx';
+export * from './imageODT';
 export * from './imagePDF';
 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}`,
+    );
+  };