Slatejs how to make one specific node non- editable ?

In SlateJS, you can make a specific node uneditable by defining a custom Editable component or by setting the readOnly attribute on the node. However, note that SlateJS does not provide a direct readOnly attribute on nodes; instead, we control editability using the editor's isReadOnly property.

To set a specific node as uneditable, you typically use a custom Element or Leaf rendering component during rendering, and decide how to handle editability within that component. Below is a basic implementation method:

jsx
import { useSlateStatic, ReactEditor } from 'slate-react';
import { Transforms } from 'slate';

const CustomElement = props => {
  const editor = useSlateStatic();
  const { attributes, children, element } = props;

  // Determine if the node should be uneditable based on specific attributes of the element
  const readOnly = element.type === 'read-only';

  // Prevent editing behavior when attempting to edit this node
  const preventDefault = (event) => {
    if (readOnly) {
      event.preventDefault();
    }
  };

  // Use your custom attributes to render the component
  return (
    <div {...attributes} onDrop={preventDefault} onDragStart={preventDefault} onClick={preventDefault}>
      {readOnly ? <div contentEditable={false}>{children}</div> : children}
    </div>
  );
};

In the above example, if the node's type attribute is 'read-only', the node will be rendered as uneditable.

Next, you need to use this custom CustomElement component in the SlateJS editor's rendering function to render the node:

jsx
import { Slate, Editable } from 'slate-react';
import { createEditor } from 'slate';

const MyEditorComponent = () => {
  const editor = createEditor();

  // ... Slate editor setup and state

  return (
    <Slate editor={editor} value={editorState} onChange={setEditorState}>
      <Editable
        renderElement={props => <CustomElement {...props} />}
        // ... other props
      />
    </Slate>
  );
};

Thus, when rendering nodes, CustomElement determines if the node is editable and renders it accordingly as editable or read-only.

Please note that SlateJS is a highly flexible framework, and the above method is one implementation approach; you may need to adjust and extend this basic example based on your specific requirements.