Way to make stateful custom react components.

[parthrc]

Codepen

I have made a custom react component, where I a have a text input, how do I:

1. pass model properties as a prop in this component, I have tried using functions, but cannot get the value.

domc.addType("sample-component", { isComponent: (el) => el.tagName === "DIV" && el.classList.contains("sample-component"), extend: "text", model: { ...coreReactModel, defaults: { component: (props) => { const content = props?.attributes?.content; console.log("content in model", content); return <SampleComponent content={content} />; }, tagName: "div", draggable: true, droppable: true, editable: true, attributes: { class: "sample-component" }, traits: [ { label: "Content", type: "text", name: "content", changeProp: 1, }, ], content: "Hello", props() { // Define additional props dynamically return { content: this.get("content") }; }, }, init() { this.on("change:content", this.handleContentChange); }, handleContentChange() { const newContent = this.get("content"); console.log("Content changed to:", newContent); }, }, view: coreReactView, });

2. when i type something in the text inpuy, after I drag or change its position in the canvas, the data is lost, how can I persist the data just like how the text component of grapesjs does. I tried using setting traits but failed.