`fieldTransforms` not working when using `resolveFields`
Description
If you use fieldTransforms with fields defined only within resolveFields, then fieldTransforms does not run for those fields.
This occurs both within plugins and when using the overrides and fieldTransforms props. It also happens with custom field types as well as built-in Puck field types.
Environment
- Puck version: 0.20.0
Replication steps
- Define a field transform:
const fieldTransforms = {
text: ({ value }) => (
<span>Field transform: {value}</span>
),
};
- Define a component that uses that field within
resolveFields(e.g.,Typography.content):
const config = {
components: {
Typography: {
// This applies the transform as expected:
// fields: { content: { type: "text" } },
// This does not:
resolveFields: (data, { fields }) => {
const content = { type: "text" };
return { content };
},
defaultProps: {
content: "Enter your text here...",
},
render: ({ content }) => <p>{content}</p>,
},
},
};
- Navigate to the editor.
- Drag and drop the component that uses
resolveFields(Typography).
What happens
The component renders the resolved field value in the canvas, but does not apply the transform.
What I expect to happen
The component should render the transformed field value in the canvas when a fieldTransforms entry is defined for it, regardless of whether the field was defined using fields or resolveFields.
I can confirm I can replicate this. I also edited the issue to follow our template.
I can confirm I can replicate this. I also edited the issue to follow our template.
Sorry about that 😅
It's all good!
This is actually related to https://github.com/puckeditor/puck/issues/1034. The current resolveFields API needs reworking, as it is currently transient and only gets called at render-time of the fields.
I've opened https://github.com/puckeditor/puck/issues/1299 to track this centralised blocker.
Issue #1325 also noted that contentEditable does not work when it is defined only inside resolve fields. This is due to the same underlying issue, since contentEditable fields rely on field transforms.