RichText attribute and style normalization

The RichText component performs automatic normalization of HTML attributes and CSS properties to ensure compatibility with React. When rendering rich text content from Optimizely CMS (SaaS), the component converts CMS-authored markup into valid React props and styles, preventing runtime warnings and ensuring consistent rendering.

📘
Note
The component automatically processes content. The component requires no additional configuration when rendering CMS-authored rich text.

Attribute normalization explained

React enforces camelCase prop names and structured style objects, while HTML content authored in CMS (SaaS) typically uses kebab-case attributes and inline CSS. The RichText component resolves these differences during rendering.

📘
Note
Without normalization, React would emit warnings for invalid DOM attributes and ignore unsupported properties.

HTML attribute conversion

The component normalizes HTML attributes to their React-compatible equivalents using an internal mapping table.

Reserved keywords

You must map these attributes to avoid conflicts with JavaScript or React internals.

HTML attribute	React prop
`class`	`className`
`for`	`htmlFor`

Table attributes

HTML attribute	React prop
`colspan`	`colSpan`
`rowspan`	`rowSpan`
`cellpadding`	`cellPadding`
`cellspacing`	`cellSpacing`

Form and input attributes

The component automatically normalizes the following attributes:

tabindex, tab-index –> tabIndex
readonly –> readOnly
maxlength –> maxLength
minlength –> minLength
autocomplete –> autoComplete
autofocus –> autoFocus
autoplay –> autoPlay
contenteditable, content-editable –> contentEditable
spellcheck –> spellCheck
novalidate –> noValidate

Media attributes

crossorigin –> crossOrigin
usemap –> useMap
allowfullscreen –> allowFullScreen
frameborder –> frameBorder
playsinline –> playsInline
srcset –> srcSet
srcdoc –> srcDoc
srclang –> srcLang

Meta and form attributes

accept-charset –> acceptCharset
http-equiv –> httpEquiv
charset –> charSet
datetime –> dateTime
hreflang –> hrefLang
accesskey –> accessKey
autocapitalize –> autoCapitalize
referrerpolicy –> referrerPolicy
formaction –> formAction
formenctype –> formEnctype
formmethod –> formMethod
formnovalidate –> formNoValidate
formtarget –> formTarget
enctype –> encType.

Attributes preserved without conversion

Many HTML attributes are already valid React props, and the component passes them through without modification.

Examples

Basic – id, name, value, type, href, src, alt, title.
Form – disabled, checked, selected, multiple, required, placeholder.
Interactive – hidden, draggable, lang, dir, role.
Media – width, height, controls, loop, muted.
Security – nonce, sandbox, download.

📘
Note
Skipping unnecessary conversions improves rendering performance.

Special attribute handling

ARIA attributes

The component preserves all Accessible Rich Internet Applications (ARIA) attributes in kebab-case, as React requires.

Examples

aria-label.
aria-labelledby.
aria-describedby.
aria-hidden.
aria-expanded.

Data attributes

The component preserves all data-* attributes as-is and passes them directly to the rendered element.

CSS property normalization

The component automatically moves inline CSS properties authored in CMS (SaaS) into React's style object.

The component converts kebab-case property names to camelCase.
The component groups properties under a single style prop.
The component avoids invalid DOM property warnings

For example, background-color becomes style.backgroundColor.

Supported CSS property categories

The component recognizes and normalizes a curated set of commonly used CSS properties.

Layout and sizing

min-width, max-width.
min-height, max-height.

Spacing

margin, padding (including directional variants).

Typography

font-family, font-size, font-weight.
line-height, letter-spacing.
text-align, text-transform, text-decoration.

Colors and backgrounds

color.
background-color, background-image, background-size.

Borders

border, border-radius.
Directional border variants.

Positioning and display

position, top, right, bottom, left.
display, visibility, opacity.
overflow, z-index.

Flexbox and grid

flex, justify-content, align-items.
grid-template-columns, gap, row-gap.

Effects and animation

box-shadow, filter, transform.
transition, animation.

Interaction and modern CSS

cursor, pointer-events, user-select.
aspect-ratio, object-fit.
scroll-behavior, scroll-snap-type.

End result

After processing

All attributes comply with React DOM requirements.
Inline styles render correctly without warnings.
ARIA and data attributes remain intact.
Content authored in CMS (SaaS) renders safely and predictably in React.