Special management for mixed HTML attributes and CSS properties

The RichText component applies context-aware processing for attributes and CSS properties that can function as both HTML attributes and CSS styles. This approach preserves correct HTML semantics while ensuring compatibility with React.

Dual-purpose properties

Some properties exist in both HTML and CSS domains. The component uses context-aware logic to determine the correct handling.

• width and height – The component treats these as HTML attributes for tables and images, and as CSS properties for other elements.
• border – The component treats this as an HTML attribute for tables, and as a CSS property for other elements.

Table-specific attributes

For table-related elements, the RichText component preserves certain attributes as HTML attributes rather than converting them to styles.

// 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>

This behavior ensures consistent rendering across browsers and maintains expected table semantics.

Style object conversion

When the component detects CSS properties, it converts them from kebab-case to camelCase and moves them into a React style object.

// 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>

This conversion ensures that inline styles render correctly without triggering invalid DOM property warnings.

Unsupported CSS properties

To balance performance and maintainability, the RichText component does not automatically process certain CSS features.

Print-Specific Properties

• page-break-before, page-break-after, and page-break-inside.
• orphans and widows.

Advanced Layout Features

• Multi-column layout properties (columns, column-count, and so on).
• CSS Masking properties (mask, mask-image, and so on).
• Ruby text properties (ruby-align, ruby-position, and so on).

Logical Properties

• margin-inline-start,margin-block-end, and so on.
• border-inline-start, border-block-end, and so on.

CSS Custom Properties

The component does not automatically detect CSS variables (--custom-property).

Extend support for unsupported properties

If you encounter unsupported properties in your CMS content, you can handle them by providing custom element components:

📘

Note

You can extend the component rather than modify it. Use custom element components for application-specific handling of unsupported properties

// 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,
  }}
/>;

Technical implementation example

The following code example shows how the attribute processing works in practice with a real Slate.js node structure:

// 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 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.