CMS-46481 Enhance dual-purpose attribute handling in toReactProps function

Author: TRomesh

packages/optimizely-cms-sdk/src/react/__test__/dual-purpose-attributes.test.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { describe, it, expect } from 'vitest';
+import '@testing-library/jest-dom';
+
+import { toReactProps } from '../richText/lib.js';
+
+describe('Dual-purpose attribute handling', () => {
+  it('should handle border as HTML attribute for table elements', () => {
+    const tableProps = toReactProps({ border: '1' }, 'table');
+    expect(tableProps.border).toBe('1');
+    expect(tableProps.style).toBeUndefined();
+  });
+
+  it('should handle border as CSS property for non-table elements', () => {
+    const divProps = toReactProps({ border: '1px solid black' }, 'div');
+    expect(divProps.border).toBeUndefined();
+    expect((divProps.style as any)?.border).toBe('1px solid black');
+  });
+
+  it('should handle width as HTML attribute for img elements', () => {
+    const imgProps = toReactProps({ width: '100' }, 'img');
+    expect(imgProps.width).toBe('100');
+    expect(imgProps.style).toBeUndefined();
+  });
+
+  it('should handle width as CSS property for div elements', () => {
+    const divProps = toReactProps({ width: '100px' }, 'div');
+    expect(divProps.width).toBeUndefined();
+    expect((divProps.style as any)?.width).toBe('100px');
+  });
+
+  it('should handle height as HTML attribute for canvas elements', () => {
+    const canvasProps = toReactProps({ height: '200' }, 'canvas');
+    expect(canvasProps.height).toBe('200');
+    expect(canvasProps.style).toBeUndefined();
+  });
+
+  it('should handle height as CSS property for paragraph elements', () => {
+    const pProps = toReactProps({ height: '50px' }, 'p');
+    expect(pProps.height).toBeUndefined();
+    expect((pProps.style as any)?.height).toBe('50px');
+  });
+});

packages/optimizely-cms-sdk/src/react/richText/lib.ts

@@ -398,18 +398,44 @@ function kebabToCamelCase(str: string): string {
   return str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
 }
 
+/**
+ * Properties that can be either HTML attributes or CSS properties depending on context
+ */
+const DUAL_PURPOSE_PROPERTIES = new Set(['border', 'width', 'height']);
+
+/**
+ * Element types that should treat dual-purpose properties as HTML attributes
+ */
+const HTML_ATTRIBUTE_ELEMENTS = new Set(['table', 'img', 'input', 'canvas']);
+
 /**
  * Converts framework-agnostic attributes to React props
  * Handles HTML attribute to React JSX attribute conversion and CSS properties
  */
-function toReactProps(
-  attributes: Record<string, unknown>
+export function toReactProps(
+  attributes: Record<string, unknown>,
+  elementType?: string
 ): Record<string, unknown> {
   const reactProps: Record<string, unknown> = {};
   const styleProps: Record<string, string> = {};
 
   for (const [key, value] of Object.entries(attributes)) {
-    // Handle CSS properties - move them to style object
+    // Handle dual-purpose properties based on element context
+    if (DUAL_PURPOSE_PROPERTIES.has(key.toLowerCase())) {
+      if (elementType && HTML_ATTRIBUTE_ELEMENTS.has(elementType)) {
+        // Treat as HTML attribute for specific elements
+        const reactKey = HTML_TO_REACT_ATTRS[key.toLowerCase()] || key;
+        reactProps[reactKey] = value;
+        continue;
+      } else {
+        // Treat as CSS property for other elements
+        const camelKey = kebabToCamelCase(key);
+        styleProps[camelKey] = String(value);
+        continue;
+      }
+    }
+
+    // Handle other CSS properties - move them to style object
     if (CSS_PROPERTIES.has(key.toLowerCase())) {
       const camelKey = kebabToCamelCase(key);
       styleProps[camelKey] = String(value);
@@ -480,8 +506,8 @@ export function createHtmlComponent<T extends keyof JSX.IntrinsicElements>(
   config: HtmlComponentConfig = {}
 ): ElementRenderer {
   const Component: ElementRenderer = ({ children, attributes, element }) => {
-    // Convert to React props and merge with config
-    const reactProps = toReactProps(attributes || {});
+    // Convert to React props and merge with config, passing element type for context
+    const reactProps = toReactProps(attributes || {}, tag as string);
     const mergedProps = {
       ...reactProps,
       ...config.attributes,
@@ -515,7 +541,7 @@ export function createLinkComponent<T extends keyof JSX.IntrinsicElements>(
     element,
   }) => {
     // Convert to React props and merge with config
-    const reactProps = toReactProps(attributes || {});
+    const reactProps = toReactProps(attributes || {}, tag as string);
 
     // Type-safe access to link properties
     const linkProps = {
@@ -554,7 +580,7 @@ export function createImageComponent<T extends keyof JSX.IntrinsicElements>(
     element,
   }) => {
     // Convert to React props and merge with config
-    const reactProps = toReactProps(attributes || {});
+    const reactProps = toReactProps(attributes || {}, tag as string);
 
     // Type-safe access to image properties
     const imageProps = {
@@ -596,7 +622,7 @@ export function createTableComponent<T extends keyof JSX.IntrinsicElements>(
     element,
   }) => {
     // Convert to React props and merge with config
-    const reactProps = toReactProps(attributes || {});
+    const reactProps = toReactProps(attributes || {}, tag as string);
 
     const mergedProps = {
       ...reactProps,