search

prevwong / reka.js

💎 State management system to build any no-code editor
https://reka.js.org/
MIT License
599 stars 41 forks source link

Inline Editing of Components #159

Closed JosXa closed 2 months ago

JosXa commented 3 months ago

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

https://github.com/prevwong/reka.js/assets/7313176/afac2b71-2b16-4a9b-b93b-a3501f9eb6f4

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 commented 3 months ago

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: https://github.com/prevwong/craft.js/issues/507

JosXa commented 2 months ago

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