I couldn’t reproduce this. here’s my examples. I used Alt + 0174 for the registered icon
I then have my heading defined as this
We use a re-usable component for headings and descriptions on all of our modules
```js
import PropTypes from ‘prop-types’;
import React from ‘react’;
import { getTextAlignClass, getTextColorClass } from ‘../../utilities/styleHelpers.js’;
const DynamicHeading = ({ headings }) => {
return (
<div data-testid=“dynamicheading-container” id=“dynamicheading-div-1-1”>
{headings?.map((item, index) => (
<div
className={`${getTextAlignClass(item.heading_align)} ${getTextColorClass(
item.heading_color,
)}`}
key={item.heading}
data-testid={`dynamicheading-item-${index}`}
id={`dynamicheading-div-2-2-${index}`}
>
{React.createElement(item.heading_size, {}, item.heading)}
</div>
))}
</div>
);
};
DynamicHeading.displayName = ‘DynamicHeading’;
DynamicHeading.propTypes = {
headings: PropTypes.arrayOf(
PropTypes.shape({
heading: PropTypes.string.isRequired,
heading_align: PropTypes.string,
heading_color: PropTypes.string,
heading_size: PropTypes.string.isRequired,
}),
).isRequired,
};
export default DynamicHeading;
```
this is inside of the fields file that is exported by my island, or rather the module that holds the island
```js
export const featureAuthoringGroup = {
type: ‘group’,
name: ‘featureAuthoringGroup’,
label: ‘Feature authoring form’,
expanded: true,
children: [
getDynamicHeadingField(‘featureAuthoring’),
getDynamicDescriptionField(‘featureAuthoring’),
],
};
```
then I have this helper function to get around issues with having the same field definitions within a single module. eg I can have headings and descriptions on a component, and then if there’s say a modal, I can give the modal it’s own heading and description
```js
/**
* Generates a HubSpot field group configuration for a dynamic heading component.
* This group allows content editors to specify the heading text, size (H1-H6, P), color, and alignment.
*
* @param {string} [headingIdPrefix=‘’] - An optional prefix to prepend to the IDs of the fields within the group.
* Useful for ensuring uniqueness when this group is nested or repeated.
* @returns {object} A HubSpot field group definition object.
*/
export const getDynamicHeadingField = (headingIdPrefix = ‘’) => {
let prefix = headingIdPrefix;
if (prefix.length > 0) {
prefix += ‘.’;
}
return {
children: [
{
allow_new_line: false,
default: ‘Enhanced User Experience’,
display_width: null,
id: `${prefix}heading.heading`,
label: ‘Heading’,
locked: false,
name: ‘heading’,
required: false,
show_emoji_picker: false,
type: ‘text’,
validation_regex: ‘’,
},
{
choices: [
[‘h1’, ‘H1’],
[‘h2’, ‘H2’],
[‘h3’, ‘H3’],
[‘h4’, ‘H4’],
[‘h5’, ‘H5’],
[‘h6’, ‘H6’],
[‘p’, ‘P’],
],
default: ‘h2’,
display: ‘select’,
display_width: ‘half_width’,
help_text: ‘HTML heading size’,
id: `${prefix}heading.heading_size`,
label: ‘Size’,
locked: false,
multiple: false,
name: ‘heading_size’,
preset: null,
reordering_enabled: true,
required: true,
type: ‘choice’,
},
{
choices: colourChoices,
default: ‘primary’,
display: ‘select’,
display_width: null,
id: `${prefix}heading.heading_color`,
label: ‘Color’,
locked: false,
multiple: false,
name: ‘heading_color’,
preset: null,
reordering_enabled: true,
required: true,
type: ‘choice’,
},
{
choices: [
[‘auto’, ‘Auto’],
[‘left’, ‘Left’],
[‘center’, ‘Center’],
[‘right’, ‘Right’],
],
default: ‘auto’,
display: ‘select’,
display_width: null,
id: `${prefix}heading.heading_align`,
label: ‘Align’,
locked: false,
multiple: false,
name: ‘heading_align’,
preset: null,
reordering_enabled: true,
required: true,
type: ‘choice’,
},
],
display_width: null,
expanded: false,
group_occurrence_meta: null,
id: `${prefix}heading`,
label: ‘Heading’,
locked: false,
name: ‘heading’,
occurrence: {
default: 0,
min: 0,
},
required: false,
tab: ‘CONTENT’,
type: ‘group’,
};
};
```
