Special handling 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, 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

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

Extend support for unsupported properties

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

📘

Note

The component is designed to be extended rather than modified. 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

Here's 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.