Inline Editing of Components

[JosXa]

In the CraftJS demo, you're able to edit the text of displayed components directly in the WYSIWYG editor:

vivaldi_ihNX2Usyt2.mp4

Meaning the elements appear to have contenteditable enabled.

Judging from the RekaJS demo at https://reka.js.org, this doesn't seem to be possible. You can apparently only change the text by editing the props in the sidebar. Is this simply an oversight and enabling WYSIWYG editing would be as simple as setting a configuration value, or is it actually not a feature in Reka?

We're comparing providers right now, and editing text inline is one of our requirements.

[prevwong]

To clarify, Craft itself isn't a page editor so it doesn't actually support things like WYSIWYG out of the box - it just provides some abstractions that makes it really easy to build your own page editor.

In the Craft demo, the Text component uses a contenteditable and when the value changes, we just update the component's value in Craft's EditorState, see here: https://github.com/prevwong/craft.js/blob/main/examples/landing/components/selectors/Text/index.tsx#L39

So similarly, the same could be done with Reka:

reka.change(() => {
   const template = ... // get the template node for the Text element/component you're editing
   template.props.value = t.literal({ value: newValue });
});

It's not implemented in the Reka demo, since Reka is just the new state management layer for Craft and is intended to be integrated into Craft's future version - see here: prevwong/craft.js#507

[JosXa]

Thank you, Craft & Reka it is for our project! :)