I use Slate editor in my React app. I've created the custom inline tool called 'company'. Once 'company' button is clicked current Company name is pasted on the current position; Everything perfect there. I get the following JSON data saved to DB.
[
{
"type": "paragraph",
"children": [
{
"type": "company",
"children": [
{
"text": "My Company"
}
]
}
]
}
]
BUT I want to get actual company name each time when Editor is loaded. So, My company name was updated to 'My Updated Company' but I still see old name loaded from DB (initial data). I've tried to implement the following approach:
export function Element(props: ElementProps) {
const { removeLink } = useEditorLink();
const { orgName } = useAuth(); // <-- there is my actual company name
const { attributes, children, element } = props;
const editor = useSlateStatic();
const selected = useSelected();
const focused = useFocused();
switch (element.type) {
...
case 'company':
children[0].props.text.text = orgName; // <--- there I pass orgName to replace value from initial data
return <Company>{children}</Company>;
default:
return <p {...attributes}>{children}</p>;
}
}
I works well in 'readOnly' mode. Once I click 'Edit' and 'readOnly' becomes: false, I get error
TypeError: Cannot assign to read only property 'text' of object '#<Object>'
Well, I've tried to make this object writable but no luck...
Object.defineProperty(children[0].props.text, 'text', {
configurable: true,
value: orgName
})
In this case I get error Cannot redefine property: text
.
Guys, can I re-define element's text somehow with Slate instruments or how I can modify children
object and pass it?
Thanks.