Skip to content

CMS-46781 Adding missing HTML elements: option, thead, tfoot, and caption. #164

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Nov 10, 2025
Merged

CMS-46781 Adding missing HTML elements: option, thead, tfoot, and caption. #164

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a2c4e18
CMS-46781 Adding missing HTML elements: option, thead, tfoot, and ca…
TRomesh Nov 7, 2025
0b5591c
Update RichText component documentation
TRomesh Nov 10, 2025
f66d67e
Fix formatting issues in RichText component doc
TRomesh Nov 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 10 additions & 18 deletions docs/6.1-richtext-component-react.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,12 +55,18 @@ Custom React components for rendering specific element types. Allows you to over

#### Available Element Types

All element types listed below are supported by default and can be customized with the `elements` prop:

- **Headings:** `heading-one`, `heading-two`, `heading-three`, `heading-four`, `heading-five`, `heading-six`
- **Text blocks:** `paragraph`, `quote`, `pre`, `div`
- **Text blocks:** `paragraph`, `quote`, `div`
- **Lists:** `bulleted-list`, `numbered-list`, `list-item`
- **Inline:** `link`, `code`, `mark`, `sup`, `sub`, `ins`, `del`, `br`
- **Tables:** `table`, `tbody`, `tr`, `th`, `td`
- **Media:** `image`
- **Text semantics (inline):** `span`, `mark`, `strong`, `em`, `u`, `s`, `i`, `b`, `small`, `sub`, `sup`, `ins`, `del`, `kbd`, `abbr`, `cite`, `dfn`, `q`, `data`, `bdo`, `bdi`
- **Code-related:** `code`, `pre`, `var`, `samp`
- **Links & Interactive:** `link`, `a`, `button`, `label`
- **Tables:** `table`, `thead`, `tbody`, `tfoot`, `caption`, `tr`, `th`, `td`
- **Media:** `image`, `img`, `svg`, `canvas`
- **Forms:** `input`, `select`, `option`, `textarea`
- **Other:** `br`, `wbr`

#### Example: Custom Elements

Expand Down Expand Up @@ -319,20 +325,6 @@ This ensures:
- **Known Text Marks**: Use their default tags (e.g., `bold` → `<strong>`, `italic` → `<em>`)
- **Unknown Text Marks**: Automatically become `<span>` tags

### Built-in Element Support

The component includes extensive built-in support for common HTML elements:

**Text semantics:** `span`, `mark`, `strong`, `em`, `u`, `s`, `i`, `b`, `small`, `sub`, `sup`, `ins`, `del`, `kbd`, `abbr`, `cite`, `dfn`, `q`, `time`, `data`, `bdo`, `bdi`, `var`, `samp`

**Interactive:** `a`, `button`, `label`

**Media:** `img`, `svg`, `canvas`

**Forms:** `input`, `select`, `textarea`

**Other:** `br`, `wbr`

### Custom Element Handling

If you encounter unknown HTML tags or elements not supported by the SDK, you can override them using the `elements` or `leafs` props to render custom React components.
Expand Down
4 changes: 4 additions & 0 deletions packages/optimizely-cms-sdk/src/components/richText/renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -500,6 +500,7 @@ export const defaultElementTypeMap: Record<
// Form elements
input: { tag: 'input', config: { selfClosing: true } },
select: { tag: 'select' },
option: { tag: 'option' },
textarea: { tag: 'textarea' },

// Other inline elements
Expand All @@ -508,7 +509,10 @@ export const defaultElementTypeMap: Record<

// Table
table: { tag: 'table' },
thead: { tag: 'thead' },
tbody: { tag: 'tbody' },
tfoot: { tag: 'tfoot' },
caption: { tag: 'caption' },
tr: { tag: 'tr' },
td: { tag: 'td' },
th: { tag: 'th' },
Expand Down