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:
+1
@@ -2,6 +2,7 @@ import { registerEnumType } from '@nestjs/graphql';
|
||||
|
||||
export enum FieldDisplayMode {
|
||||
CARD = 'CARD',
|
||||
EDITOR = 'EDITOR',
|
||||
FIELD = 'FIELD',
|
||||
VIEW = 'VIEW',
|
||||
}
|
||||
|
||||
+5
-3
@@ -2,6 +2,7 @@ import { isNotEmptyObject, type ValidationError } from 'class-validator';
|
||||
|
||||
import { AggregateChartConfigurationDTO } from 'src/engine/metadata-modules/page-layout-widget/dtos/aggregate-chart-configuration.dto';
|
||||
import { BarChartConfigurationDTO } from 'src/engine/metadata-modules/page-layout-widget/dtos/bar-chart-configuration.dto';
|
||||
import { FieldConfigurationDTO } from 'src/engine/metadata-modules/page-layout-widget/dtos/field-configuration.dto';
|
||||
import { FrontComponentConfigurationDTO } from 'src/engine/metadata-modules/page-layout-widget/dtos/front-component-configuration.dto';
|
||||
import { GaugeChartConfigurationDTO } from 'src/engine/metadata-modules/page-layout-widget/dtos/gauge-chart-configuration.dto';
|
||||
import { IframeConfigurationDTO } from 'src/engine/metadata-modules/page-layout-widget/dtos/iframe-configuration.dto';
|
||||
@@ -133,10 +134,11 @@ export const validateWidgetConfigurationInput = ({
|
||||
PageLayoutWidgetExceptionCode.INVALID_PAGE_LAYOUT_WIDGET_DATA,
|
||||
);
|
||||
case WidgetConfigurationType.FIELD:
|
||||
throw new PageLayoutWidgetException(
|
||||
'Field configuration is not supported yet',
|
||||
PageLayoutWidgetExceptionCode.INVALID_PAGE_LAYOUT_WIDGET_DATA,
|
||||
errors = validateWidgetConfigurationByDto(
|
||||
FieldConfigurationDTO,
|
||||
configuration,
|
||||
);
|
||||
break;
|
||||
case WidgetConfigurationType.FIELDS:
|
||||
throw new PageLayoutWidgetException(
|
||||
'Fields configuration is not supported yet',
|
||||
|
||||
Reference in New Issue
Block a user