You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
> For comprehensive documentation on the RichText component including all props, advanced customization options, fallback handling, and TypeScript support, see the [RichText Component Reference](./6.1-richtext-component-react.md).
70
+
> For complete documentation on the RichText component including all props, advanced customization options, fallback handling, and TypeScript support, see the [RichText Component Reference](./6.1-richtext-component-react.md).
Copy file name to clipboardExpand all lines: docs/6.1-richtext-component-react.md
+336-8Lines changed: 336 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -26,11 +26,11 @@ function Article({ content }) {
26
26
>
27
27
> 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:
28
28
>
29
-
> -**Inline styles**will not be processed or rendered
30
-
> -**HTML validation** is bypassed, which can result in malformed or invalid HTML that causes rendering issues
31
-
> -**Advanced formatting** that relies on TinyMCE editor processing may be missing
32
-
> -**Custom attributes or props** might not be mapped properly from raw HTML to React components
33
-
> -**Security sanitization** performed by the editor may not occur
29
+
> -**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.
30
+
> -**HTML validation** is bypassed, which can result in malformed or invalid HTML that causes rendering issues.
31
+
> -**Advanced formatting** that relies on TinyMCE editor processing may be missing.
32
+
> -**Custom attributes or props** might not be mapped properly from raw HTML to React components.
33
+
> -**Security sanitization** performed by the editor may not occur.
34
34
>
35
35
> For full feature compatibility and optimal rendering, create rich text content using the CMS's built-in TinyMCE editor interface.
36
36
@@ -425,11 +425,339 @@ function Article({ content }) {
425
425
}
426
426
```
427
427
428
+
## Attribute and CSS Property Support
429
+
430
+
Under the hood, the RichText component performs sophisticated attribute and CSS property processing to ensure React compatibility. Here's how it handles the technical challenges of converting CMS content to proper React elements.
431
+
432
+
> **🔧 Technical Deep Dive:** The component normalizes HTML attributes to camelCase React props and moves CSS properties to React's `style` object, preventing warnings and ensuring proper rendering.
433
+
434
+
### HTML Attributes (Converted to React Props)
435
+
436
+
The component automatically normalizes HTML attributes to React-compatible prop names. This conversion happens through a predefined mapping table that handles common naming conflicts between HTML and React.
437
+
438
+
> **⚠️ React Compatibility:** React requires camelCase prop names for DOM attributes, but HTML uses kebab-case. Our mapping system handles this conversion automatically to prevent console warnings.
> **🚀 Performance Optimization:** Many HTML attributes work directly in React without conversion, so they're not included in our mapping table for better performance.
-`data-*` (all data attributes are preserved in kebab-case)
518
+
519
+
### CSS Properties (Moved to Style Object)
520
+
521
+
CSS properties are automatically detected using a curated set of known CSS property names and moved to React's `style` object with proper camelCase conversion.
522
+
523
+
> **🎨 Style Processing:** React requires CSS properties to be in a style object with camelCase keys. Properties like `background-color` become `style.backgroundColor`. This system prevents invalid DOM property warnings.
The component performs real-time CSS property conversion using kebab-to-camelCase transformation:
640
+
641
+
```tsx
642
+
// Input: Slate.js node with CSS properties as attributes
643
+
{
644
+
type: 'div',
645
+
'font-size': '16px',
646
+
'background-color': 'blue',
647
+
'margin-top': '10px',
648
+
children: [{ text: 'Styled content' }]
649
+
}
650
+
651
+
// Output: React element with style object
652
+
<divstyle={{
653
+
fontSize: '16px',
654
+
backgroundColor: 'blue',
655
+
marginTop: '10px'
656
+
}}>
657
+
Styled content
658
+
</div>
659
+
```
660
+
661
+
### Unsupported CSS Properties
662
+
663
+
While our CSS property detection covers most real-world use cases, some advanced CSS features are intentionally excluded to maintain performance and simplicity:
- Ruby text properties (`ruby-align`, `ruby-position`, etc.)
675
+
676
+
#### **Logical Properties**
677
+
678
+
-`margin-inline-start`, `margin-block-end`, etc.
679
+
-`border-inline-start`, `border-block-end`, etc.
680
+
681
+
#### **CSS Custom Properties**
682
+
683
+
- CSS variables (`--custom-property`) are not automatically detected
684
+
685
+
### Extending Support
686
+
687
+
If you encounter unsupported properties in your CMS content, you can handle them by providing custom element components:
688
+
689
+
> **🔧 Extensibility:** The component is designed to be extended rather than modified. Use custom element components for application-specific handling of unsupported properties.
{ text: 'This content has mixed HTML attributes and CSS properties' },
732
+
],
733
+
},
734
+
],
735
+
};
736
+
737
+
// Rendered as:
738
+
<div
739
+
className="content-block"
740
+
data-testid="rich-content"
741
+
aria-label="Article content"
742
+
width="100%"
743
+
style={{
744
+
fontSize: '16px',
745
+
backgroundColor: 'lightblue',
746
+
marginTop: '20px',
747
+
border: '1px solid #ccc',
748
+
}}
749
+
>
750
+
This content has mixed HTML attributes and CSS properties
751
+
</div>;
752
+
```
753
+
754
+
This attribute and CSS property processing ensures that rich text content from Optimizely CMS renders correctly in React applications while maintaining proper HTML semantics and React compatibility.
755
+
428
756
## Best Practices
429
757
430
-
1.**Performance**: Only override elements/leafs you need to customize
431
-
2.**Accessibility**: Maintain semantic HTML structure in custom components
432
-
3.**Type Safety**: Use TypeScript interfaces for better development experience
758
+
1.**Performance**: Only override elements/leafs you need to customize - the default implementations are optimized
759
+
2.**Accessibility**: Maintain semantic HTML structure in custom components - screen readers depend on proper markup
760
+
3.**Type Safety**: Use TypeScript interfaces for better development experience and catch errors at compile time
433
761
4.**Unknown Elements**: The default `<span>` fallback handles unknown elements safely - no configuration needed
0 commit comments