fixes

Author: YousefED

packages/xl-odt-exporter/src/odt/defaultSchema/blocks.tsx

@@ -7,7 +7,7 @@ import { ODTExporter } from "../odtExporter.js";
 import {
   DrawFrame,
   DrawImage,
-  StyleBackgroundFill,
+  LoextGraphicProperties,
   StyleParagraphProperties,
   StyleStyle,
   StyleTableCellProperties,
@@ -32,7 +32,8 @@ const createParagraphStyle = (
   parentStyleName?: string
 ) => {
   const styles: Record<string, string> = {};
-  const children: React.ReactNode[] = [];
+  const styleChildren: React.ReactNode[] = [];
+  const paragraphChildren: React.ReactNode[] = [];
 
   if (props.textAlignment && props.textAlignment !== "left") {
     const alignmentMap = {
@@ -50,7 +51,12 @@ const createParagraphStyle = (
       exporter.options.colors[
         props.backgroundColor as keyof typeof exporter.options.colors
       ].background;
-    children.push(<StyleBackgroundFill color={color} />);
+    styleChildren.push(
+      <>
+        <LoextGraphicProperties draw:fill="solid" draw:fill-color={color} />
+        <StyleParagraphProperties fo:background-color={color} />
+      </>
+    );
   }
 
   if (props.textColor && props.textColor !== "default") {
@@ -61,7 +67,11 @@ const createParagraphStyle = (
     styles["fo:color"] = color;
   }
 
-  if (Object.keys(styles).length === 0 && children.length === 0) {
+  if (
+    Object.keys(styles).length === 0 &&
+    styleChildren.length === 0
+    // && paragraphChildren.length === 0
+  ) {
     return parentStyleName;
   }
 
@@ -70,9 +80,13 @@ const createParagraphStyle = (
       style:family="paragraph"
       style:name={name}
       style:parent-style-name={parentStyleName}>
-      <StyleParagraphProperties {...styles}>
-        {children}
-      </StyleParagraphProperties>
+      {styleChildren}
+      {paragraphChildren.length > 0 ||
+        (Object.keys(styles).length > 0 && (
+          <StyleParagraphProperties {...styles}>
+            {paragraphChildren}
+          </StyleParagraphProperties>
+        ))}
     </StyleStyle>
   ));
 };
@@ -118,7 +132,7 @@ export const odtBlockMappingForDefaultSchema: BlockMapping<
     const customStyleName = createParagraphStyle(
       exporter as ODTExporter<any, any, any>,
       block.props,
-      "Heading" + block.props.level
+      "Heading_20_" + block.props.level
     );
     const styleName = customStyleName;
 
@@ -131,15 +145,15 @@ export const odtBlockMappingForDefaultSchema: BlockMapping<
   },
 
   bulletListItem: (block, exporter) => (
-    <TextList text:style-name="LFO1">
+    <TextList text:style-name="WWNum1">
       <TextListItem>
         <TextP>{exporter.transformInlineContent(block.content)}</TextP>
       </TextListItem>
     </TextList>
   ),
 
   numberedListItem: (block, exporter) => (
-    <TextList text:style-name="LFO3">
+    <TextList text:style-name="No_20_List">
       <TextListItem>
         <TextP>{exporter.transformInlineContent(block.content)}</TextP>
       </TextListItem>
@@ -163,10 +177,35 @@ export const odtBlockMappingForDefaultSchema: BlockMapping<
   },
 
   table: (block, exporter) => {
-    const styleName = createTableStyle(exporter as ODTExporter<any, any, any>);
+    const ex = exporter as ODTExporter<any, any, any>;
+    const styleName = createTableStyle(ex);
 
     return (
       <Table>
+        {block.content.rows[0]?.cells.map((el, i) => {
+          let width: any = block.content.columnWidths[i];
+
+          if (!width) {
+            // width = "3in";
+          } else {
+            width = "5in";
+          }
+          if (width) {
+            const style = ex.registerStyle((name) => (
+              <StyleStyle style:name={name} style:family="table-column">
+                <style:table-column-properties style:column-width={width} />
+              </StyleStyle>
+            ));
+            return <table:table-column table:style-name={style} />;
+          } else {
+            const style = ex.registerStyle((name) => (
+              <StyleStyle style:name={name} style:family="table-column">
+                <style:table-column-properties style:use-optimal-column-width="true" />
+              </StyleStyle>
+            ));
+            return <table:table-column table:style-name={style} />;
+          }
+        })}
         {block.content.rows.map((row) => (
           <TableRow>
             {row.cells.map((cell) => (

packages/xl-odt-exporter/src/odt/odtExporter.tsx

@@ -90,7 +90,7 @@ export class ODTExporter<
       return styledText.text;
     }
 
-    const styleName = `T${++this.styleCounter}`;
+    const styleName = `BN_T${++this.styleCounter}`;
 
     // Store the complete style element
     this.automaticStyles.set(
@@ -183,7 +183,7 @@ export class ODTExporter<
   }
 
   public registerStyle(style: (name: string) => React.ReactNode): string {
-    const styleName = `S${++this.styleCounter}`;
+    const styleName = `BN_S${++this.styleCounter}`;
     this.automaticStyles.set(styleName, style(styleName));
     return styleName;
   }

packages/xl-odt-exporter/src/odt/util/components.ts

@@ -17,6 +17,8 @@ export const OfficeDocument = ({ children, ...props }: Props) =>
       "xmlns:xlink": "http://www.w3.org/1999/xlink",
       "xmlns:style": "urn:oasis:names:tc:opendocument:xmlns:style:1.0",
       "xmlns:fo": "urn:oasis:names:tc:opendocument:xmlns:xsl-fo-compatible:1.0",
+      "xmlns:loext":
+        "urn:org:documentfoundation:names:experimental:office:xmlns:loext:1.0",
       ...props,
     },
     children
@@ -117,8 +119,8 @@ export const StyleBackgroundFill = ({
 export const StyleParagraphProperties = ({ children, ...props }: Props) =>
   createElement("style:paragraph-properties", props, children);
 
-export const StyleTableProperties = ({ children, ...props }: Props) =>
-  createElement("style:table-properties", props, children);
+export const LoextGraphicProperties = ({ children, ...props }: Props) =>
+  createElement("loext:graphic-properties", props, children);
 
 export const StyleTableCellProperties = ({ children, ...props }: Props) =>
   createElement("style:table-cell-properties", props, children);

shared/testDocument.ts

@@ -15,7 +15,7 @@ export const testDocument = partialBlocksToBlocksForTesting(
       content: [
         {
           type: "text",
-          text: "Welcome to this",
+          text: "Welcome to this ",
           styles: {
             italic: true,
           },