如何改变SlateJS节点元素onChange的属性？

Question

如何在SlateJS OnChange方法中更改节点元素属性？

我有一个像以前一样的初始元素，注意到'id‘属性了吗？在OnChange中，我希望动态设置id属性。请参阅下面的实现，或多或少只是SlateJs的基本反应设置

const initialValue: Descendant[] = [
    {
        type: 'paragraph',
        id: '',
        children: [
            {
                text:
                    'This is editable plain text, just like a <textarea>!',
            },
        ],
    },
]

板岩反应组分

        <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>

但是，它说.id属性是只读的。如果我尝试设置整个对象，也会发生同样的情况。这是只读的。通过currTextContent.newID添加新属性也会导致错误，对象是不可扩展的。

                    currTextContent[0] = {
                        type: 'paragraph',
                        id: '',
                        children: [
                            {
                                text:
                                    'This is editable plain text, just like a <textarea>!',
                            },
                        ],
                    }

如何在SlateJS方法中更改(或添加) onChange节点的元素属性？在Editor类中有这样做的函数吗？

Answer 1

因此，您实际上不能更改onChange中的节点，因为它们是只读的。相反，您需要使用Slate转换，以插入或添加如下所示的新属性。

    Transforms.setNodes(
        editor,
        {
            id: '123',
        },
        { at: [0] },
    )

这将将id = 123的属性插入节点。