Slatejs how to make one specific node non-editable?

Question

I want to set one specific node non-editable by

Transforms.setNodes(editor,{at:[1]},{voids:true})

But it seems not working. Does anyone know how to do it? Thanks!

Answer 1

You need to make your element render with contentEditable prop to false contentEditable={false} can also add style={{ userSelect: "none" }} to make it non selectable. You can make it dynamic base on the node props and set them them with the trasnformer.

Answer 2

export default function (props: any) {
    const { attributes, children, element } = props;
    const selected = useSelected()
    const focused = useFocused()
    return (
        <span
            {...attributes}
            contentEditable={false}
            style={{ userSelect: "none" }}
        >
            {
                element.content
                    ?
                    `【${element.content}】`
                    : null
            }
            {children}
        </span>
    )
}