✨(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>

Author: Ovgodd

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

@@ -3,6 +3,7 @@ export * from './calloutODT';
 export * from './calloutPDF';
 export * from './headingPDF';
 export * from './imageDocx';
+export * from './imageODT';
 export * from './imagePDF';
 export * from './paragraphPDF';
 export * from './quoteDocx';

src/frontend/apps/impress/src/features/docs/doc-export/components/ModalExport.tsx

@@ -1,5 +1,6 @@
 import { DOCXExporter } from '@blocknote/xl-docx-exporter';
 import { PDFExporter } from '@blocknote/xl-pdf-exporter';
+import { ODTExporter } from '@blocknote/xl-odt-exporter';
 import {
   Button,
   Loader,
@@ -24,11 +25,13 @@ import { exportCorsResolveFileUrl } from '../api/exportResolveFileUrl';
 import { TemplatesOrdering, useTemplates } from '../api/useTemplates';
 import { docxDocsSchemaMappings } from '../mappingDocx';
 import { pdfDocsSchemaMappings } from '../mappingPDF';
+import { odtDocsSchemaMappings } from '../mappingODT';
 import { downloadFile } from '../utils';
 
 enum DocDownloadFormat {
   PDF = 'pdf',
   DOCX = 'docx',
+  ODT = 'odt',
 }
 
 interface ModalExportProps {
@@ -124,7 +127,7 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
         : rawPdfDocument;
 
       blobExport = await pdf(pdfDocument).toBlob();
-    } else {
+    } else if (format === DocDownloadFormat.DOCX) {
       const exporter = new DOCXExporter(editor.schema, docxDocsSchemaMappings, {
         resolveFileUrl: async (url) => exportCorsResolveFileUrl(doc.id, url),
       });
@@ -133,6 +136,16 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
         documentOptions: { title: documentTitle },
         sectionOptions: {},
       });
+    } else if (format === DocDownloadFormat.ODT) {
+      const exporter = new ODTExporter(editor.schema, odtDocsSchemaMappings, {
+        resolveFileUrl: async (url) => exportCorsResolveFileUrl(doc.id, url),
+      });
+
+      blobExport = await exporter.toODTDocument(exportDocument);
+    } else {
+      toast(t('The export failed'), VariantType.ERROR);
+      setIsExporting(false);
+      return;
     }
 
     downloadFile(blobExport, `${filename}.${format}`);
@@ -213,7 +226,7 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
         className="--docs--modal-export-content"
       >
         <Text $variation="600" $size="sm" as="p">
-          {t('Download your document in a .docx or .pdf format.')}
+          {t('Download your document in a .docx, .odt or .pdf format.')}
         </Text>
         <Select
           clearable={false}
@@ -231,6 +244,7 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
           label={t('Format')}
           options={[
             { label: t('Docx'), value: DocDownloadFormat.DOCX },
+            { label: t('ODT'), value: DocDownloadFormat.ODT },
             { label: t('PDF'), value: DocDownloadFormat.PDF },
           ]}
           value={format}

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

@@ -1,2 +1,3 @@
 export * from './interlinkingLinkPDF';
 export * from './interlinkingLinkDocx';
+export * from './interlinkingLinkODT';

src/frontend/apps/impress/src/features/docs/doc-export/inline-content-mapping/interlinkingLinkODT.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { DocsExporterODT } from '../types';
+
+export const inlineContentMappingInterlinkingLinkODT: DocsExporterODT['mappings']['inlineContentMapping']['interlinkingLinkInline'] =
+  (inline) => {
+    const url = window.location.origin + inline.props.url;
+    const title = inline.props.title;
+
+    // Create ODT hyperlink using React.createElement to avoid TypeScript JSX namespace issues
+    // Uses the same structure as BlockNote's default link mapping
+    return React.createElement(
+      'text:a',
+      {
+        'xlink:type': 'simple',
+        'text:style-name': 'Internet_20_link',
+        'office:target-frame-name': '_top',
+        'xlink:show': 'replace',
+        'xlink:href': url,
+      },
+      `📄${title}`,
+    );
+  };

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

@@ -5,24 +5,27 @@ import {
   blockMappingImageODT,
   blockMappingUploadLoaderODT,
 } from './blocks-mapping';
+import { inlineContentMappingInterlinkingLinkODT } from './inline-content-mapping';
+import { DocsExporterODT } from './types';
 
-// 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 = {
+export const odtDocsSchemaMappings: DocsExporterODT['mappings'] = {
   ...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,
+    // The types don't match exactly but the implementation is compatible
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    pdf: odtDefaultSchemaMappings.blockMapping.file as any,
     uploadLoader: blockMappingUploadLoaderODT,
   },
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   inlineContentMapping: {
     ...odtDefaultSchemaMappings.inlineContentMapping,
-  },
+    interlinkingSearchInline: () => null,
+    interlinkingLinkInline: inlineContentMappingInterlinkingLinkODT,
+  } as any,
   styleMapping: {
     ...odtDefaultSchemaMappings.styleMapping,
   },

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

@@ -51,3 +51,13 @@ export type DocsExporterDocx = Exporter<
   IRunPropertiesOptions,
   TextRun
 >;
+
+export type DocsExporterODT = Exporter<
+  DocsBlockSchema,
+  DocsInlineContentSchema,
+  DocsStyleSchema,
+  React.ReactNode,
+  React.ReactNode,
+  Record<string, string>,
+  React.ReactNode
+>;