Slatejs how to make one specific node non-editable?

user_13534553 0
Viewed 1000

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!

slatejs
2 Answers

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.

user_67680500 
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>
    )
}
user_102139480
Related