CMS-46481 Enhance RichText component documentation with detailed attribute and CSS property support, including conversion rules and examples for React compatibility.

Author: TRomesh

docs/6.1-richtext-component-react.md

@@ -26,7 +26,7 @@ function Article({ content }) {
 >
 > When rich text content is created through Optimizely's Integration API (REST API) rather than the CMS editor interface, certain features may not function correctly:
 >
-> - **Inline styles** will not be processed or rendered
+> - **Inline styles** - Some inline CSS properties might not work as expected. See [Attribute and CSS Property Support](#attribute-and-css-property-support) for details on supported CSS properties
 > - **HTML validation** is bypassed, which can result in malformed or invalid HTML that causes rendering issues
 > - **Advanced formatting** that relies on TinyMCE editor processing may be missing
 > - **Custom attributes or props** might not be mapped properly from raw HTML to React components
@@ -425,6 +425,300 @@ function Article({ content }) {
 }
 ```
 
+## Attribute and CSS Property Support
+
+The RichText component provides comprehensive support for HTML attributes and CSS properties, automatically converting them to React-compatible formats and handling styling appropriately.
+
+### HTML Attributes (Converted to React Props)
+
+The following HTML attributes are automatically converted to React props with proper camelCase naming:
+
+#### **Form & Input Attributes**
+
+- `class` → `className`
+- `for` → `htmlFor`
+- `tabindex`, `tab-index` → `tabIndex`
+- `readonly` → `readOnly`
+- `maxlength` → `maxLength`
+- `minlength` → `minLength`
+- `autocomplete` → `autoComplete`
+- `autofocus` → `autoFocus`
+- `autoplay` → `autoPlay`
+- `contenteditable`, `content-editable` → `contentEditable`
+
+#### **Table Attributes**
+
+- `colspan` → `colSpan`
+- `rowspan` → `rowSpan`
+- `cellpadding` → `cellPadding`
+- `cellspacing` → `cellSpacing`
+
+#### **Media Attributes**
+
+- `crossorigin` → `crossOrigin`
+- `usemap` → `useMap`
+- `playsinline` → `playsInline`
+- `allowfullscreen` → `allowFullScreen`
+- `frameborder` → `frameBorder`
+
+#### **Meta Attributes**
+
+- `accept-charset` → `acceptCharset`
+- `http-equiv` → `httpEquiv`
+- `charset` → `charSet`
+- `datetime` → `dateTime`
+- `hreflang` → `hrefLang`
+
+#### **Accessibility Attributes (Preserved as-is)**
+
+All ARIA attributes are preserved in their original kebab-case format as required by React:
+
+- `aria-label`
+- `aria-labelledby`
+- `aria-describedby`
+- `aria-hidden`
+- `aria-expanded`
+- `aria-*` (all ARIA attributes)
+
+#### **Data Attributes (Preserved as-is)**
+
+- `data-*` (all data attributes are preserved in kebab-case)
+
+### CSS Properties (Moved to Style Object)
+
+CSS properties are automatically detected and moved to the React `style` object with camelCase conversion:
+
+#### **Layout & Sizing**
+
+- `min-width` → `style.minWidth`
+- `max-width` → `style.maxWidth`
+- `min-height` → `style.minHeight`
+- `max-height` → `style.maxHeight`
+
+#### **Spacing**
+
+- `margin`, `margin-top`, `margin-right`, `margin-bottom`, `margin-left`
+- `padding`, `padding-top`, `padding-right`, `padding-bottom`, `padding-left`
+
+#### **Typography**
+
+- `font`, `font-family`, `font-size`, `font-weight`, `font-style`, `font-variant`
+- `line-height`, `letter-spacing`, `word-spacing`
+- `text-align`, `text-decoration`, `text-transform`, `text-indent`, `text-shadow`
+- `vertical-align`
+
+#### **Colors & Backgrounds**
+
+- `color`
+- `background`, `background-color`, `background-image`, `background-repeat`
+- `background-position`, `background-size`, `background-attachment`
+- `background-clip`, `background-origin`
+
+#### **Borders**
+
+- `border-width`, `border-style`, `border-color`, `border-radius`
+- `border-top`, `border-right`, `border-bottom`, `border-left`
+- `border-*-width`, `border-*-style`, `border-*-color` (all directional variants)
+- `border-*-radius` (all corner variants)
+
+#### **Positioning**
+
+- `position`, `top`, `right`, `bottom`, `left`, `z-index`
+- `float`, `clear`
+
+#### **Display & Visibility**
+
+- `display`, `visibility`, `opacity`
+- `overflow`, `overflow-x`, `overflow-y`
+- `clip`, `clip-path`
+
+#### **Flexbox**
+
+- `flex`, `flex-direction`, `flex-wrap`, `flex-flow`
+- `justify-content`, `align-items`, `align-content`, `align-self`
+- `flex-grow`, `flex-shrink`, `flex-basis`
+
+#### **Grid Layout**
+
+- `grid`, `grid-template`, `grid-template-rows`, `grid-template-columns`
+- `grid-template-areas`, `grid-area`, `grid-row`, `grid-column`
+- `grid-gap`, `gap`, `row-gap`, `column-gap`
+
+#### **Text & Content**
+
+- `white-space`, `word-wrap`, `word-break`, `overflow-wrap`
+- `hyphens`, `text-overflow`, `direction`, `unicode-bidi`, `writing-mode`
+
+#### **Visual Effects**
+
+- `box-shadow`, `text-shadow`
+- `filter`, `backdrop-filter`
+- `transform`, `transform-origin`
+- `perspective`, `perspective-origin`
+
+#### **Animation & Transitions**
+
+- `transition`, `transition-property`, `transition-duration`
+- `transition-timing-function`, `transition-delay`
+- `animation`, `animation-name`, `animation-duration`
+- `animation-timing-function`, `animation-delay`
+- `animation-iteration-count`, `animation-direction`
+- `animation-fill-mode`, `animation-play-state`
+
+#### **Interaction**
+
+- `cursor`, `pointer-events`, `user-select`, `resize`
+
+#### **Modern CSS**
+
+- `aspect-ratio`, `object-fit`, `object-position`
+- `scroll-behavior`, `overscroll-behavior`
+- `scroll-snap-type`, `scroll-snap-align`
+- `scroll-margin`, `scroll-padding`
+
+### Special Handling
+
+#### **HTML Attributes vs CSS Properties**
+
+Some properties can be both HTML attributes and CSS properties. The component intelligently handles these:
+
+- **`width`, `height`**: Treated as HTML attributes for tables and images, CSS properties for other elements
+- **`border`**: Treated as HTML attribute for tables, CSS property for other elements
+
+#### **Table-Specific Attributes**
+
+Table elements receive special handling for HTML attributes:
+
+```tsx
+// These remain as HTML attributes for tables
+<table border="1" cellpadding="5" cellspacing="0" width="100%">
+  <tr>
+    <td colspan="2" rowspan="1">
+      Content
+    </td>
+  </tr>
+</table>
+```
+
+#### **Style Object Conversion**
+
+CSS properties are automatically converted to React style objects:
+
+```tsx
+// Input: Slate.js node with CSS properties as attributes
+{
+  type: 'div',
+  'font-size': '16px',
+  'background-color': 'blue',
+  'margin-top': '10px',
+  children: [{ text: 'Styled content' }]
+}
+
+// Output: React element with style object
+<div style={{
+  fontSize: '16px',
+  backgroundColor: 'blue',
+  marginTop: '10px'
+}}>
+  Styled content
+</div>
+```
+
+### Unsupported CSS Properties
+
+While comprehensive, some advanced CSS properties are not included in the automatic detection:
+
+#### **Print-Specific Properties**
+
+- `page-break-before`, `page-break-after`, `page-break-inside`
+- `orphans`, `widows`
+
+#### **Advanced Layout Features**
+
+- Multi-column layout properties (`columns`, `column-count`, etc.)
+- CSS Masking properties (`mask`, `mask-image`, etc.)
+- Ruby text properties (`ruby-align`, `ruby-position`, etc.)
+
+#### **Logical Properties**
+
+- `margin-inline-start`, `margin-block-end`, etc.
+- `border-inline-start`, `border-block-end`, etc.
+
+#### **CSS Custom Properties**
+
+- CSS variables (`--custom-property`) are not automatically detected
+
+### Extending Support
+
+You can extend attribute and CSS property support by:
+
+1. **Adding to CSS_PROPERTIES set** for CSS properties
+2. **Adding to HTML_TO_REACT_ATTRS mapping** for HTML attributes
+3. **Using custom element components** to handle specific cases
+
+```tsx
+// Custom handling for unsupported properties
+const CustomDiv = ({ children, element, attributes }: ElementProps) => {
+  const customStyle = {
+    // Handle unsupported CSS properties manually
+    '--custom-property': attributes['--custom-property'],
+    columnCount: attributes['column-count'],
+  };
+
+  return <div style={customStyle}>{children}</div>;
+};
+
+<RichText
+  content={content}
+  elements={{
+    div: CustomDiv,
+  }}
+/>;
+```
+
+### Example: Complete Attribute Handling
+
+```tsx
+// Rich text content in Slate.js format with mixed attributes
+const richTextContent = {
+  type: 'richText',
+  children: [
+    {
+      type: 'div',
+      class: 'content-block',
+      'data-testid': 'rich-content',
+      'aria-label': 'Article content',
+      width: '100%', // HTML attribute for some elements
+      'font-size': '16px', // CSS property → style.fontSize
+      'background-color': 'lightblue', // CSS property → style.backgroundColor
+      'margin-top': '20px', // CSS property → style.marginTop
+      border: '1px solid #ccc', // CSS property → style.border
+      children: [
+        { text: 'This content has mixed HTML attributes and CSS properties' },
+      ],
+    },
+  ],
+};
+
+// Rendered as:
+<div
+  className="content-block"
+  data-testid="rich-content"
+  aria-label="Article content"
+  width="100%"
+  style={{
+    fontSize: '16px',
+    backgroundColor: 'lightblue',
+    marginTop: '20px',
+    border: '1px solid #ccc',
+  }}
+>
+  This content has mixed HTML attributes and CSS properties
+</div>;
+```
+
+This comprehensive attribute and CSS property support ensures that rich text content from Optimizely CMS renders correctly in React applications while maintaining proper HTML semantics and React compatibility.
+
 ## Best Practices
 
 1. **Performance**: Only override elements/leafs you need to customize