Expose the `InlineTextField` component
Description
Currently, the only way to use inline text editing is through the contentEditable property, which is simple but doesn’t cover all use cases, such as enabling inline text editing on a nested key inside a custom object field.
For example:
const componentConfig = {
fields: {
customObject: {
type: "custom",
render: ({ value, onChange }) => {
// There's no way to support inline text editing out of the box for this field
return (
<div>
<input
value={value}
onChange={(e) =>
onChange({ ...value, inline: e.target.value })
}
/>
</div>
);
},
},
},
};
While it’s currently possible to work around this by implementing custom inline editing logic, that approach can lead to inconsistencies with Puck's implementation. It’s also difficult to trigger data resolvers when an inline field changes, since we don’t have access to resolveComponentData, and InlineTextField always handles that internally.
Exposing the InlineTextField component would make this less cumbersome, and consistent with the rest of the Puck logic.
Considerations
- If #1249 gets implemented and
resolveComponentDatais exposed, we should consider whether we still want to always run data resolvers internally.
What's the link between this and resolveComponentData?
That if you update the field value from your own implementation you won't be able to run resolveData, which is inconsistent with all other fields.
Added a clarification and a consideration about it to better describe the link.