'How to change property of SlateJS node element onChange?
How to change Node element property in SlateJS OnChange method?
I have an initial element like before, notice the 'id' property? In OnChange, I want dynamically set the id property. See below for implementation, more or less just SlateJs's basic react setup
const initialValue: Descendant[] = [
{
type: 'paragraph',
id: '',
children: [
{
text:
'This is editable plain text, just like a <textarea>!',
},
],
},
]
Slate React Component
<Slate
editor={editor}
value={textContent}
onChange={currTextContent => {
// Logic for newlines
if (currTextContent.length > textContent.length) {
// Same example from slatejs on how to save content
const isAstChange = editor.operations.some(
op => 'set_selection' !== op.type,
)
if (isAstChange) {
// Set id property of new line
currTextContent[0].id = 'test'
}
}
settextContent(currTextContent)
}}>
<Editable
placeholder="Enter some rich text…"
spellCheck
autoFocus
/>
</Slate>
However, it says the .id property is readonly. The same story happens if I were to try and set the entire object. It's readonly. Adding new properties via currTextContent[0].newID also gives an error, object is not extensible
currTextContent[0] = {
type: 'paragraph',
id: '',
children: [
{
text:
'This is editable plain text, just like a <textarea>!',
},
],
}
How can I change (or add) SlateJS Node's element property in the onChange method? Is there some function to do this in the Editor class?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
