@pega/sdk 0.0.3 → 0.0.5

package/templates/react-sdk-reference/.ai-common/skills/field-skills/Phone.md

@@ -0,0 +1,210 @@
+# Skill: Phone
+
+Telephone input field with country code selector, binds to a Pega case property.
+
+> **Prerequisite skill:** [`field-components.md`](../field-components.md) — covers architecture, props interface, display modes, event handling, and registration patterns common to ALL field components.
+
+---
+
+## Component Purpose
+
+Renders a telephone number input with an integrated country code selector (flag + dial code). Stores the phone number in E.164 format (e.g., `+15551234567`). Uses a specialized phone input library for the country picker. Separate handling for read-only mode (keeps country picker but sets input as read-only).
+
+## Pega Metadata
+
+- **Pega Name:** `Phone`
+- **Type / Subtype:** `Field` / `Text-Phone`
+- **Registration key:** `Phone` (in `component-map.ts`)
+
+## Props (component-specific)
+
+No props beyond `PConnFieldProps`. Import type as:
+
+```typescript
+import type { PConnFieldProps } from '@pega/sdk-react';
+```
+
+## Component Skeleton
+
+Follow this exact structure. Replace `<PhoneInputWidget>` with equivalents from your chosen design system / phone library.
+
+```typescript
+import { useEffect, useState } from 'react';
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import type { PConnFieldProps } from '@pega/sdk-react';
+import handleEvent from '../../helpers/event-utils';
+
+interface PhoneProps extends PConnFieldProps {}
+
+export default function Phone(props: PhoneProps) {
+  // 1. Registry lookup
+  const FieldValueList = getComponentFromRegistry('FieldValueList');
+
+  // 2. Destructure props — note: onChange is used in readOnly mode
+  const {
+    getPConnect, label, required, disabled, value = '',
+    validatemessage, status, onChange, readOnly, testId,
+    helperText, displayMode, hideLabel, placeholder,
+  } = props;
+
+  // 3. PConnect setup
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
+
+  // 4. State + sync
+  const [inputValue, setInputValue] = useState(value);
+  useEffect(() => setInputValue(value), [value]);
+
+  // 5. Derived values
+  const helperTextToDisplay = validatemessage || helperText;
+  let testProp = { 'data-test-id': testId };
+
+  // 6. Display mode returns
+  if (displayMode === 'DISPLAY_ONLY') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+  }
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant="stacked" />;
+  }
+
+  // 7. Read-only return — keeps phone widget but disables dropdown + sets input readOnly
+  //    Uses onChange from PROPS (not local handler), value from PROPS (not state)
+  if (readOnly) {
+    return (
+      <div>
+        <PhoneInputWidget
+          defaultCountry="US" value={value} onChange={onChange}
+          disableDropdown={true}
+          slotProps={{ input: { readOnly: true, ...testProp } }}
+          /* + label, helperText, required, disabled, error, size, placeholder */
+        />
+      </div>
+    );
+  }
+
+  // 8. Editable handlers
+  const handleChange = (inputVal) => { setInputValue(inputVal); };
+  const handleBlur = (event) => {
+    const phoneValue = event?.target?.value;
+    let phoneNumber = phoneValue.split(' ').slice(1).join();
+    phoneNumber = phoneNumber ? `+${phoneValue.replace(/\\D+/g, '')}` : '';
+    handleEvent(actions, 'changeNblur', propName, phoneNumber);
+  };
+
+  // 9. Main render — phone input with country selector
+  //    Key props:
+  //    - fullWidth, variant: 'outlined', size: 'small'
+  //    - defaultCountry: 'US'
+  //    - value: inputValue, onChange: handleChange
+  //    - onBlur: !readOnly ? handleBlur : undefined
+  //    - label, helperText: helperTextToDisplay, placeholder: placeholder ?? ''
+  //    - required, disabled, error: status === 'error'
+  //    - slotProps: { input: { ...testProp } }
+  return <PhoneInputWidget ... />;
+}
+```
+
+## Behavioral Contract
+
+1. **Local state:** Maintain `inputValue` (string). Initialize from `value` prop. `useEffect` watching `value` → `setInputValue(value)`.
+2. **Default country:** `'US'` — the country code selector defaults to United States.
+3. **On change (editable):** Update local `inputValue` state with the formatted phone string from the library callback.
+4. **On blur (editable):** Extract and normalize the phone number to E.164 format:
+   ```
+   const phoneValue = event?.target?.value
+   let phoneNumber = phoneValue.split(' ').slice(1).join()  // remove country code prefix
+   phoneNumber = phoneNumber ? `+${phoneValue.replace(/\D+/g, '')}` : ''
+   handleEvent(actions, 'changeNblur', propName, phoneNumber)
+   ```
+5. **Read-only:** Render the phone input with `readOnly: true` on the input element and `disableDropdown: true` (country picker dropdown disabled). Keep the country flag/code visible but non-interactive. `onBlur` and `onChange` are NOT committed — use the `onChange` prop from the component itself but disable dropdown.
+6. **testId:** Pass as attribute on the input element.
+
+## Display Mode Rendering
+
+- **`DISPLAY_ONLY`:** `<FieldValueList name={hideLabel ? '' : label} value={value} />` — raw phone string.
+- **`STACKED_LARGE_VAL`:** `<FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />`.
+
+## Read-Only Rendering
+
+Render phone input with `readOnly: true` and `disableDropdown: true` on the country picker. The `onChange` prop is `onChange` from `PConnFieldProps` (passed through). Wrapped in a `<div>`.
+
+```
+<div>
+  <PhoneInput
+    readOnly: true on input
+    disableDropdown={true}
+    onChange={onChange}  // from props — not local handler
+    value={value}
+    defaultCountry='US'
+  />
+</div>
+```
+
+## Visual Specifications
+
+| Property         | Editable                       | Read-only                                 |
+| ---------------- | ------------------------------ | ----------------------------------------- |
+| Width            | 100%                           | 100%                                      |
+| Size             | Small                          | Small                                     |
+| Variant          | Outlined                       | Outlined (same, with readOnly input)      |
+| Country selector | Dropdown with flag + dial code | Flag + dial code shown, dropdown disabled |
+| Default country  | US (`+1`)                      | US (`+1`)                                 |
+| Error state      | Red border + red helper text   | —                                         |
+| Helper text      | Below input                    | Below input                               |
+
+**CSS-only notes:**
+For a CSS-only implementation, create a two-part input:
+
+```css
+.phone-input-wrapper {
+  display: flex;
+  border: 1px solid rgba(0, 0, 0, 0.23);
+  border-radius: 4px;
+  overflow: hidden;
+}
+.phone-country-select {
+  border: none;
+  border-right: 1px solid rgba(0, 0, 0, 0.23);
+  padding: 0 8px;
+  background: none;
+}
+.phone-number-input {
+  flex: 1;
+  border: none;
+  padding: 8px 12px;
+  font-size: 0.875rem;
+  outline: none;
+}
+```
+
+## Edge Cases & Special Logic
+
+- **E.164 normalization on blur:** Strip all non-digit chars from the full value (including country code), then prepend `+`. If the result after stripping the country part is empty, store `''`.
+- **Read-only uses `onChange` from props** (not the local `handleChange`) — this is the platform-wired handler, not our local state updater. Do NOT call `handleEvent` in read-only mode.
+- `disableDropdown: true` in read-only — prevents country switching.
+- The library provides the formatted display value (e.g., `+1 (555) 123-4567`) in the callback; we normalize it to E.164 only on blur.
+
+## Dependencies
+
+- A phone input library with country code selector and E.164 formatting support (e.g., `mui-tel-input`).
+- `handleEvent` from `../../helpers/event-utils`.
+- `getComponentFromRegistry('FieldValueList')` for display modes.
+
+**For CSS-only / non-library implementations:**
+
+- Use a `<select>` for country code + a text `<input>` for the number.
+- On blur, combine dial code + number and strip non-digits, then format as `+{digits}`.
+
+## Design System Mapping
+
+**UI control type:** Telephone input with integrated country code selector.
+
+Listed design systems are examples only.
+
+| Design System      | Recommended Component                              |
+| ------------------ | -------------------------------------------------- |
+| Default (CSS only) | `<select>` (country) + `<input type="tel">`        |
+| MUI                | `<MuiTelInput>` from `mui-tel-input`               |
+| Ant Design         | `<Input addonBefore={countrySelect}>`              |
+| Chakra UI          | `<InputGroup>` with `<InputLeftAddon>` for country |

package/templates/react-sdk-reference/.ai-common/skills/field-skills/RadioButtons.md

@@ -0,0 +1,260 @@
+# Skill: RadioButtons
+
+Radio button group field with optional card-style variant and localized option labels.
+
+> **Prerequisite skill:** [`field-components.md`](../field-components.md) — covers architecture, props interface, display modes, event handling, and registration patterns common to ALL field components.
+
+---
+
+## Component Purpose
+
+Renders a group of radio buttons for single-selection from a list of options. Supports standard radio button layout (inline or stacked) and a card-style visual variant. Option labels are localized. Commits value immediately on selection.
+
+## Pega Metadata
+
+- **Pega Name:** `RadioButtons`
+- **Type / Subtype:** `Field` / `Picklist-Radio`
+- **Registration key:** `RadioButtons` (in `component-map.ts`)
+
+## Props (component-specific)
+
+| Prop                   | Type                 | Description                                                                     |
+| ---------------------- | -------------------- | ------------------------------------------------------------------------------- |
+| `inline`               | `boolean`            | If `true`, render radio buttons in a horizontal row; if `false`, vertical stack |
+| `fieldMetadata`        | `any` (optional)     | For localization context (tableType, datasource name, display text property)    |
+| `variant`              | `string` (optional)  | `'card'` — renders options as selectable cards instead of radio buttons         |
+| `hideFieldLabels`      | `boolean` (optional) | Hide field labels inside card variant                                           |
+| `additionalProps`      | `any` (optional)     | Extra props passed to `SelectableCard` in card variant                          |
+| `imagePosition`        | `string` (optional)  | Card image position: `'inline-start'`, `'inline-end'`, or block                 |
+| `imageSize`            | `string` (optional)  | Card image size                                                                 |
+| `showImageDescription` | `boolean` (optional) | Whether to show image description in cards                                      |
+| `datasource`           | `any` (optional)     | Datasource for card variant                                                     |
+
+## Component Skeleton
+
+Follow this exact structure. Includes localization metadata derivation (same pattern as Dropdown).
+
+```typescript
+import { useState, useEffect } from 'react';
+import Utils from '../../helpers/utils';
+import handleEvent from '../../helpers/event-utils';
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import type { PConnFieldProps } from '@pega/sdk-react';
+
+interface RadioButtonsProps extends PConnFieldProps {
+  inline: boolean;
+  fieldMetadata?: any;
+  variant?: string;
+  hideFieldLabels?: boolean;
+  additionalProps?: any;
+  imagePosition?: string;
+  imageSize?: string;
+  showImageDescription?: boolean;
+  datasource?: any;
+}
+
+export default function RadioButtons(props: RadioButtonsProps) {
+  // 1. Registry lookups
+  const FieldValueList = getComponentFromRegistry('FieldValueList');
+  const SelectableCard = getComponentFromRegistry('SelectableCard');
+
+  // 2. Destructure props
+  const {
+    getPConnect, label, value = '', readOnly, validatemessage,
+    helperText, status, required, inline, displayMode, hideLabel,
+    fieldMetadata, variant, hideFieldLabels, additionalProps,
+    datasource, imagePosition, imageSize, showImageDescription,
+  } = props;
+
+  // 3. State
+  const [theSelectedButton, setSelectedButton] = useState(value);
+
+  // 4. PConnect setup
+  const thePConn = getPConnect();
+  const theConfigProps = thePConn.getConfigProps();
+  const actionsApi = thePConn.getActionsApi();
+  const propName = (thePConn.getStateProps() as any).value;
+  const helperTextToDisplay = validatemessage || helperText;
+  const className = thePConn.getCaseInfo().getClassName();
+
+  // 5. Localization keys (same pattern as Dropdown)
+  let configProperty = (thePConn.getRawMetadata() as any)?.config?.value || '';
+  configProperty = configProperty.startsWith('@P') ? configProperty.substring(3) : configProperty;
+  configProperty = configProperty.startsWith('.') ? configProperty.substring(1) : configProperty;
+  const metaData = Array.isArray(fieldMetadata)
+    ? fieldMetadata.filter(f => f?.classID === className)[0] : fieldMetadata;
+  let displayName = metaData?.datasource?.propertyForDisplayText;
+  displayName = displayName?.slice(displayName.lastIndexOf('.') + 1);
+  const localeContext = metaData?.datasource?.tableType === 'DataPage' ? 'datapage' : 'associated';
+  const localeClass = localeContext === 'datapage' ? '@baseclass' : className;
+  const localeName = localeContext === 'datapage' ? metaData?.datasource?.name : configProperty;
+  const localePath = localeContext === 'datapage' ? displayName : localeName;
+
+  // 6. Load options (synchronous)
+  const theOptions = Utils.getOptionList(theConfigProps, thePConn.getDataObject(''));
+
+  // 7. useEffect: sync selected from value — deps: [value]
+  useEffect(() => { setSelectedButton(value); }, [value]);
+
+  // 8. Display mode returns (with localization)
+  if (displayMode === 'DISPLAY_ONLY') {
+    return <FieldValueList name={hideLabel ? '' : label}
+      value={thePConn.getLocalizedValue(value, localePath,
+        thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))} />;
+  }
+  if (displayMode === 'STACKED_LARGE_VAL') { /* same with variant="stacked" */ }
+
+  // 9. Event handlers
+  const handleChange = (event) => {
+    handleEvent(actionsApi, 'changeNblur', propName, event.target.value);
+  };
+  const handleBlur = (event) => {
+    thePConn.getValidationApi().validate(event.target.value, '');
+  };
+
+  // 10. Card variant return (variant === 'card')
+  //     → heading + grid + SelectableCard with type='radio'
+
+  // 11. Standard variant return
+  //     FormControl > FormLabel > RadioGroup(row={inline}) >
+  //       FormControlLabel per option (localized label) >
+  //     FormHelperText
+  return <RadioGroupWidget ... />;
+}
+```
+
+## Behavioral Contract
+
+1. **Local state:** Maintain `theSelectedButton` (string). Initialize from `value` prop. `useEffect` watching `value` → `setSelectedButton(value)`.
+2. **Options:** Load options from `Utils.getOptionList(theConfigProps, pConn.getDataObject(''))` — returns `Array<{key: string, value: string}>`.
+3. **On change:** Commit via `handleEvent(actionsApi, 'changeNblur', propName, event.target.value)`.
+4. **On blur:** Validate via `pConn.getValidationApi().validate(event.target.value, '')`. Second arg is empty string (optional parameter).
+5. **Inline layout:** Use `row={inline}` on the radio group — horizontal when `inline=true`.
+6. **Read-only:** Disable radio inputs (set `disabled` to `readOnly` value) — do NOT use a separate read-only component.
+7. **Localization:** Option labels are localized via `pConn.getLocalizedValue(option.value, localePath, localeRuleName)`.
+8. **Localization keys derivation:**
+   - Strip `@P ` prefix and leading `.` from `configProperty` (from `pConn.getRawMetadata()`).
+   - `localeContext`: `'datapage'` if `fieldMetadata.datasource.tableType === 'DataPage'`, else `'associated'`.
+   - `localeClass`: `'@baseclass'` for datapage, else `className`.
+   - `localeName`: datapage name or property name.
+   - `localePath`: display text property or localeName.
+
+### Variant: Standard (default)
+
+Render a radio group with `FormControl > FormLabel > RadioGroup > FormControlLabel (Radio)` pattern:
+
+- `FormLabel`: the `label` prop
+- `RadioGroup`: `value={theSelectedButton}`, `onChange={handleChange}`, `onBlur`, `row={inline}`
+- Each `FormControlLabel`: `value={option.key}`, `label={localizedLabel}`, `control={<Radio color='primary' disabled={readOnly} />}`
+- Wrap in `FormHelperText` for `helperTextToDisplay`
+- `error={status === 'error'}` on `FormControl`
+
+### Variant: Card (`variant === 'card'`)
+
+Render a heading (`<h4>`) with the `label`, then delegate to `SelectableCard` component:
+
+```
+<div>
+  <h4 style={{ marginTop: 0, marginBottom: 0 }}>{label}</h4>
+  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(200px, 100%), 1fr))', gap: '1rem' }}>
+    <SelectableCard
+      type='radio'
+      dataSource={datasource}
+      recordKey={stateProps.value?.split('.').pop()}
+      cardLabel={stateProps.primaryField?.split('.').pop()}
+      radioBtnValue={value}
+      onChange={handleChange}
+      image={{ imagePosition, imageSize, showImageDescription, imageField, imageDescription }}
+      setIsRadioCardSelected={displayMode !== 'DISPLAY_ONLY' ? setSelectedButton : undefined}
+      hideFieldLabels={hideFieldLabels}
+      additionalProps={additionalProps}
+      getPConnect={getPConnect}
+    />
+  </div>
+</div>
+```
+
+- `imageField`: `stateProps.image?.split('.').pop()`
+- `imageDescription`: `stateProps.imageDescription?.split('.').pop()`
+
+## Display Mode Rendering
+
+Both modes render the localized display label of the selected option:
+
+- **`DISPLAY_ONLY`:** `<FieldValueList name={hideLabel ? '' : label} value={localizedValue} />`
+- **`STACKED_LARGE_VAL`:** `<FieldValueList name={hideLabel ? '' : label} value={localizedValue} variant='stacked' />`
+
+Where `localizedValue = pConn.getLocalizedValue(value, localePath, localeRuleName)`.
+
+## Visual Specifications
+
+### Standard Variant
+
+| Property            | Value                                                                |
+| ------------------- | -------------------------------------------------------------------- |
+| Layout              | Vertical stack (or horizontal row when `inline=true`)                |
+| Radio indicator     | Circle button with filled inner circle when selected                 |
+| Label               | Label text to the right of the radio button (`labelPlacement='end'`) |
+| Group label         | `<legend>` / `<FormLabel>` above the group                           |
+| Error state         | Group border or text in red                                          |
+| Helper text         | Below the group                                                      |
+| Disabled (readOnly) | Greyed-out radio buttons, not-allowed cursor                         |
+
+**CSS-only notes:**
+
+```css
+.radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.radio-group.inline {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.radio-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+}
+input[type='radio']:disabled {
+  opacity: 0.38;
+  cursor: default;
+}
+```
+
+### Card Variant
+
+| Property | Value                                                                   |
+| -------- | ----------------------------------------------------------------------- |
+| Layout   | CSS Grid: `repeat(auto-fit, minmax(min(200px, 100%), 1fr))`, gap `1rem` |
+| Card     | Elevated card with click handler that activates the radio               |
+| Heading  | `<h4>` with `marginTop: 0, marginBottom: 0` above grid                  |
+
+## Edge Cases & Special Logic
+
+- `theOptions` is loaded synchronously from `Utils.getOptionList()` on every render — no async fetching.
+- `theSelectedButton` tracks the selected key locally and syncs from `value` prop via `useEffect`.
+- Card variant uses `setIsRadioCardSelected` callback to inform parent when a radio card is selected.
+
+## Dependencies
+
+- `Utils.getOptionList()` from `../../helpers/utils`.
+- `handleEvent` from `../../helpers/event-utils`.
+- `getComponentFromRegistry('FieldValueList')` for display modes.
+- `getComponentFromRegistry('SelectableCard')` for card variant.
+
+## Design System Mapping
+
+**UI control type:** Radio button group (single selection).
+
+Listed design systems are examples only.
+
+| Design System      | Recommended Component                                        |
+| ------------------ | ------------------------------------------------------------ |
+| Default (CSS only) | `<input type="radio">` with `<label>` per option             |
+| MUI                | `<RadioGroup>` with `<FormControlLabel control={<Radio />}>` |
+| Ant Design         | `<Radio.Group>` with `<Radio>` options                       |
+| Chakra UI          | `<RadioGroup>` with `<Radio>` items                          |

package/templates/react-sdk-reference/{.cursor/rules/skills/field-skills/RichText.mdrules → .ai-common/skills/field-skills/RichText.md}

@@ -1,8 +1,3 @@
----
-description: Field component skill: RichText
-alwaysApply: false
----
-
 # Skill: RichText
 
 Rich text editor field with HTML content support, binds to a Pega case property.
@@ -23,10 +18,95 @@ Renders a rich text (WYSIWYG) editor for HTML content. Uses a registry-resolved
 
 ## Props (component-specific)
 
-| Prop | Type | Description |
-|------|------|-------------|
+| Prop              | Type                | Description                                   |
+| ----------------- | ------------------- | --------------------------------------------- |
 | `additionalProps` | `object` (optional) | Extra props forwarded to the `RichTextEditor` |
 
+## Component Skeleton
+
+Follow this exact structure. The `RichTextEditor` is resolved from the registry — it wraps whatever WYSIWYG library you choose.
+
+```typescript
+import { useRef } from 'react';
+import handleEvent from '../../helpers/event-utils';
+import { getComponentFromRegistry } from '@pega/sdk-react';
+import type { PConnFieldProps } from '@pega/sdk-react';
+import './RichText.css';
+
+interface RichTextProps extends PConnFieldProps {
+  additionalProps?: object;
+}
+
+export default function RichText(props: RichTextProps) {
+  // 1. Registry lookups
+  const FieldValueList = getComponentFromRegistry('FieldValueList');
+  const RichTextEditor = getComponentFromRegistry('RichTextEditor');
+
+  // 2. Destructure props
+  const {
+    getPConnect, value, placeholder, validatemessage,
+    label, hideLabel, helperText, testId, displayMode, additionalProps,
+  } = props;
+  const pConn = getPConnect();
+  const editorRef: any = useRef(null);
+
+  // 3. Props coercion — Pega may pass 'true'/'false' strings
+  let { readOnly, required, disabled } = props;
+  [readOnly, required, disabled] = [readOnly, required, disabled].map(
+    (prop) => prop === true || (typeof prop === 'string' && prop === 'true'),
+  );
+
+  // 4. Derived
+  const helperTextToDisplay = validatemessage || helperText;
+
+  // 5. Display mode returns — note isHtml prop
+  if (displayMode === 'DISPLAY_ONLY') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} isHtml />;
+  }
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} isHtml variant="stacked" />;
+  }
+
+  // 6. Read-only render — no onChange/onBlur
+  if (readOnly) {
+    return (
+      <RichTextEditor {...additionalProps}
+        label={label} labelHidden={hideLabel} defaultValue={value}
+        testId={testId} info={helperTextToDisplay} ref={editorRef} readOnly />
+    );
+  }
+
+  // 7. Editable handlers
+  const actionsApi = pConn.getActionsApi();
+  let status = '';
+  if (validatemessage !== '') status = 'error';
+
+  const handleChange = () => {
+    if (status === 'error') {
+      const property = (pConn.getStateProps() as any).value;
+      pConn.clearErrorMessages({ property, category: '', context: '' });
+    }
+  };
+  const handleBlur = () => {
+    if (editorRef.current) {
+      const editorValue = editorRef.current.getContent({ format: 'html' });
+      const property = (pConn.getStateProps() as any).value;
+      handleEvent(actionsApi, 'changeNblur', property, editorValue);
+    }
+  };
+
+  // 8. Editable render
+  return (
+    <RichTextEditor {...additionalProps}
+      label={label} labelHidden={hideLabel} info={helperTextToDisplay}
+      defaultValue={value} placeholder={placeholder}
+      disabled={disabled} required={required} testId={testId}
+      ref={editorRef} error={status === 'error'}
+      onBlur={handleBlur} onChange={handleChange} />
+  );
+}
+```
+
 ## Behavioral Contract
 
 1. **Editor ref:** Maintain an `editorRef` (via `useRef`) — the editor exposes its content via `editorRef.current.getContent({ format: 'html' })`.
@@ -34,8 +114,8 @@ Renders a rich text (WYSIWYG) editor for HTML content. Uses a registry-resolved
 3. **Props coercion:** `readOnly`, `required`, `disabled` must be coerced to booleans:
    ```typescript
    [readOnly, required, disabled] = [readOnly, required, disabled].map(
-     prop => prop === true || (typeof prop === 'string' && prop === 'true')
-   )
+     (prop) => prop === true || (typeof prop === 'string' && prop === 'true'),
+   );
    ```
 4. **Editable mode:**
    - Track `status` for error state.
@@ -52,6 +132,7 @@ Renders a rich text (WYSIWYG) editor for HTML content. Uses a registry-resolved
 6. **`RichTextEditor` component:** Resolved via `getComponentFromRegistry('RichTextEditor')`. This is a design-system extension component that wraps the actual WYSIWYG library (e.g., TinyMCE).
 
 ### Editable RichTextEditor props
+
 ```
 label, labelHidden={hideLabel}, info={helperTextToDisplay}, defaultValue={value},
 placeholder, disabled, required, testId, ref={editorRef},
@@ -59,6 +140,7 @@ error={status === 'error'}, onBlur={handleBlur}, onChange={handleChange}
 ```
 
 ### Read-only RichTextEditor props
+
 ```
 label, labelHidden={hideLabel}, defaultValue={value}, testId, info={helperTextToDisplay},
 ref={editorRef}, readOnly
@@ -67,6 +149,7 @@ ref={editorRef}, readOnly
 ## Display Mode Rendering
 
 Display modes pass `isHtml={true}` to render HTML content safely:
+
 - **`DISPLAY_ONLY`:** `<FieldValueList name={hideLabel ? '' : label} value={value} isHtml />`
 - **`STACKED_LARGE_VAL`:** `<FieldValueList name={hideLabel ? '' : label} value={value} isHtml variant='stacked' />`
 
@@ -80,9 +163,15 @@ The visual appearance of the rich text editor depends on the underlying `RichTex
 
 ```css
 /* RichText.css — must be imported */
-.tox .tox-toolbar { background-color: var(--app-background-color) !important; }
-.tox .tox-toolbar__primary { background-color: var(--app-background-color) !important; }
-.tox .tox-toolbar__button { color: var(--app-text-color) !important; }
+.tox .tox-toolbar {
+  background-color: var(--app-background-color) !important;
+}
+.tox .tox-toolbar__primary {
+  background-color: var(--app-background-color) !important;
+}
+.tox .tox-toolbar__button {
+  color: var(--app-text-color) !important;
+}
 .tox .tox-toolbar__button--enabled {
   background: var(--app-primary-color) !important;
   color: #fff !important;
@@ -105,6 +194,7 @@ The visual appearance of the rich text editor depends on the underlying `RichTex
 **Note:** Import `./RichText.css` in the component file. The CSS variables (`--app-background-color`, `--app-text-color`, etc.) are set by the application theme.
 
 When implementing with a different design system:
+
 - Custom CSS for toolbar theming may be needed
 - The editor container should be full-width
 - Minimum height: ~200px for a usable editing area
@@ -126,6 +216,7 @@ When implementing with a different design system:
 - `useRef` from React.
 
 **For other rich text editors:**
+
 - Any WYSIWYG editor that exposes `ref.current.getContent()` or equivalent.
 - Examples: Quill, Draft.js, Slate.js, CKEditor.
 
@@ -135,9 +226,9 @@ When implementing with a different design system:
 
 Listed design systems are examples only.
 
-| Design System | Recommended Component |
-|---|---|
+| Design System      | Recommended Component                             |
+| ------------------ | ------------------------------------------------- |
 | Default (CSS only) | `contenteditable` div + custom toolbar OR TinyMCE |
-| MUI | `RichTextEditor` custom extension (TinyMCE) |
-| Ant Design | Quill or TinyMCE with Ant styling |
-| Chakra UI | Quill or TipTap with Chakra styling |
+| MUI                | `RichTextEditor` custom extension (TinyMCE)       |
+| Ant Design         | Quill or TinyMCE with Ant styling                 |
+| Chakra UI          | Quill or TipTap with Chakra styling               |