Add rich-text field widget (#19512)

## Context
- Extend the FIELD widget to support RICH_TEXT fields alongside existing
RELATION/MORPH_RELATION fields
- Add EDITOR display mode that renders a full rich text editor, and
FIELD display mode that shows a compact single-line preview
- Enforce mutual exclusivity: EDITOR is only available for RICH_TEXT,
CARD only for RELATION, FIELD for both
- Refactor widget configuration into a centralized FIELD_WIDGET_CONFIG
constant and shared useFieldWidgetEligibleFields hook for better
scalability. Later we might use discriminative union from graphql
scehma)

<details>
<summary>
EDITOR mode
</summary>
<img width="1095" height="731" alt="Screenshot 2026-04-09 at 17 31 41"
src="https://github.com/user-attachments/assets/cebffd0e-07ea-4f74-a3dc-ef987daa17ea"
/>
</details>
<details>
<summary>
FIELD mode
</summary>
<img width="986" height="378" alt="Screenshot 2026-04-09 at 17 35 00"
src="https://github.com/user-attachments/assets/c90a8046-fdd0-4321-8ba6-f47d89e9d42a"
/>
</details>
<details>
<summary>
Open FIELD mode
</summary>
<img width="758" height="480" alt="Screenshot 2026-04-09 at 17 35 04"
src="https://github.com/user-attachments/assets/c53cc120-0b6f-47a0-808c-27b26f9f53ec"
/>
</details>
This commit is contained in:
Weiko
2026-04-09 18:52:30 +02:00
committed by GitHub
parent 77498d2f73
commit afdd914b83
19 changed files with 287 additions and 57 deletions
@@ -11,6 +11,7 @@ export const createDefaultFieldWidget = ({
pageLayoutTabId,
title,
fieldMetadataId,
fieldDisplayMode = FieldDisplayMode.CARD,
objectMetadataId,
positionIndex,
}: {
@@ -18,6 +19,7 @@ export const createDefaultFieldWidget = ({
pageLayoutTabId: string;
title: string;
fieldMetadataId: string;
fieldDisplayMode?: FieldDisplayMode;
objectMetadataId: string;
positionIndex: number;
}): PageLayoutWidget => {
@@ -31,7 +33,7 @@ export const createDefaultFieldWidget = ({
__typename: 'FieldConfiguration',
configurationType: WidgetConfigurationType.FIELD,
fieldMetadataId,
fieldDisplayMode: FieldDisplayMode.CARD,
fieldDisplayMode,
},
gridPosition: {
__typename: 'GridPosition',