block props basics

Author: YousefED

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

@@ -1,7 +1,11 @@
 import { BlockMapping, DefaultBlockSchema } from "@blocknote/core";
+import { ODTExporter } from "../odtExporter.js";
 import {
   DrawFrame,
   DrawImage,
+  StyleBackgroundFill,
+  StyleParagraphProperties,
+  StyleStyle,
   Table,
   TableCell,
   TableRow,
@@ -17,28 +21,72 @@ export const getTabs = (nestingLevel: number) => {
   return Array.from({ length: nestingLevel }, () => <TextTab />);
 };
 
+const createParagraphStyle = (
+  exporter: ODTExporter<any, any, any>,
+  props: Record<string, any>
+) => {
+  const styles: Record<string, string> = {};
+  const children: React.ReactNode[] = [];
+
+  if (props.textAlignment !== "default") {
+    styles["fo:text-align"] = props.textAlignment;
+  }
+
+  if (props.backgroundColor && props.backgroundColor !== "default") {
+    const color =
+      exporter.options.colors[
+        props.backgroundColor as keyof typeof exporter.options.colors
+      ].background;
+    children.push(<StyleBackgroundFill color={color} />);
+  }
+
+  if (Object.keys(styles).length === 0 && children.length === 0) {
+    return undefined;
+  }
+
+  return exporter.registerStyle((name) => (
+    <StyleStyle style:family="paragraph" style:name={name}>
+      <StyleParagraphProperties {...styles}>
+        {children}
+      </StyleParagraphProperties>
+    </StyleStyle>
+  ));
+};
+
 export const odtBlockMappingForDefaultSchema: BlockMapping<
   DefaultBlockSchema,
   any,
   any,
   React.ReactNode,
   React.ReactNode
 > = {
-  paragraph: (block, exporter, nestingLevel) => (
-    <TextP>
-      {getTabs(nestingLevel)}
-      {exporter.transformInlineContent(block.content)}
-    </TextP>
-  ),
+  paragraph: (block, exporter, nestingLevel) => {
+    const styleName = createParagraphStyle(
+      exporter as ODTExporter<any, any, any>,
+      block.props
+    );
+    return (
+      <TextP text:style-name={styleName}>
+        {getTabs(nestingLevel)}
+        {exporter.transformInlineContent(block.content)}
+      </TextP>
+    );
+  },
 
-  heading: (block, exporter, nestingLevel) => (
-    <TextH
-      level={block.props.level}
-      text:style-name={`Heading${block.props.level}`}>
-      {getTabs(nestingLevel)}
-      {exporter.transformInlineContent(block.content)}
-    </TextH>
-  ),
+  heading: (block, exporter, nestingLevel) => {
+    const customStyleName = createParagraphStyle(
+      exporter as ODTExporter<any, any, any>,
+      block.props
+    );
+    const styleName = customStyleName;
+
+    return (
+      <TextH level={block.props.level} text:style-name={styleName}>
+        {getTabs(nestingLevel)}
+        {exporter.transformInlineContent(block.content)}
+      </TextH>
+    );
+  },
 
   bulletListItem: (block, exporter) => (
     <TextList text:style-name="List_1">

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

@@ -62,6 +62,44 @@ export class ODTExporter<
     this.options = { ...defaults, ...options };
   }
 
+  private blockPropsToStyles(
+    props: Record<string, any>
+  ): Record<string, string> {
+    const styles: Record<string, string> = {};
+
+    if (props.textAlignment) {
+      styles["fo:text-align"] = props.textAlignment;
+    }
+
+    if (props.backgroundColor && props.backgroundColor !== "default") {
+      const color =
+        this.options.colors[
+          props.backgroundColor as keyof typeof this.options.colors
+        ].background;
+      styles["fo:background-fill"] = color;
+    }
+
+    return styles;
+  }
+
+  private getBlockStyleName(props: Record<string, any>): string | undefined {
+    const styles = this.blockPropsToStyles(props);
+    if (Object.keys(styles).length === 0) {
+      return undefined;
+    }
+
+    const styleName = `P${++this.styleCounter}`;
+
+    this.automaticStyles.set(
+      styleName,
+      <StyleStyle style:name={styleName} style:family="paragraph">
+        <style:paragraph-properties {...styles} />
+      </StyleStyle>
+    );
+
+    return styleName;
+  }
+
   public transformStyledText(styledText: StyledText<S>): React.ReactNode {
     const stylesArray = this.mapStyles(styledText.styles);
     const styles = Object.assign({}, ...stylesArray);
@@ -101,8 +139,9 @@ export class ODTExporter<
         block.children,
         nestingLevel + 1
       );
+
       const content = await this.mapBlock(
-        block as any,
+        block,
         nestingLevel,
         numberedListIndex
       );
@@ -160,4 +199,10 @@ export class ODTExporter<
       type: "application/vnd.oasis.opendocument.text",
     });
   }
+
+  public registerStyle(style: (name: string) => React.ReactNode): string {
+    const styleName = `S${++this.styleCounter}`;
+    this.automaticStyles.set(styleName, style(styleName));
+    return styleName;
+  }
 }

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

@@ -103,3 +103,16 @@ export const StyleStyle = ({ children, ...props }: Props) =>
 
 export const StyleTextProperties = ({ children, ...props }: Props) =>
   createElement("style:text-properties", props, children);
+
+export const StyleBackgroundFill = ({
+  color,
+  ...props
+}: Props & { color: string }) =>
+  createElement("style:background-fill", {
+    "draw:fill": "solid",
+    "draw:fill-color": color,
+    ...props,
+  });
+
+export const StyleParagraphProperties = ({ children, ...props }: Props) =>
+  createElement("style:paragraph-properties", props, children);

packages/xl-odt-exporter/src/odt/util/jsx.d.ts

@@ -19,12 +19,17 @@ declare namespace JSX {
     "table:table-cell": any;
     "manifest:manifest": any;
     "manifest:file-entry": any;
+    "style:paragraph-properties": any;
+    "style:background-fill": any;
   }
 
   interface IntrinsicAttributes {
     "text:style-name"?: string;
     "style:style-name"?: string;
     "style:name"?: string;
     "style:family"?: string;
+    "style:background-fill"?: string;
+    "draw:fill"?: string;
+    "draw:fill-color"?: string;
   }
 }