Removing a mark onClick instaed of selection

[Emiltayeb]

Hello everyone. I am very new to slate, but I am amazed by its capabilities.

I am currently building an interface that highlights a word when a user selects it, and when clicking on the word, it will remove the hilighting

While I've managed to do the hilighting on selection without any problems, the removing part on Click has proved more difficult.

When a user sleect a word, all ive done is simply

 editor.addMark("hilighting ",true)

now, for the custom component i did something like this

  const renderLeaf = React.useCallback((props)=>{
  // ... others
  
    if(props.leaf['hilighting']){
 return <span onClick={handelRemove}>
//  all the custom attributes..
</span>
}
  }

It Worked smoothly.
but how can i manager to remove the mark on Click?
my handelRemove simply calls

editor.removeMark("hilighting ")

but that dosent work. only if i Sellect the whole text it dose.
Any advice on how to approch this?
ive tried to make slate just select the node on click with transform.select but that diudnt work either

Any help will be appreciated

[TheSpyder]

editor.removeMark operates on the selection only. To control exactly what is removed, use Transforms.setNodes using the node's path for the at option. Setting the mark value to null will remove it.
https://docs.slatejs.org/concepts/04-transforms
https://docs.slatejs.org/api/transforms

[Emiltayeb]

I appreciate your quick response.

I saw this option, but I was not aware of how to locate the path to a specific node by clicking on it.

I searched in the docs, and saw findPath(editor: ReactEditor, node: Node)

but it required me to pass a node. which i dont know what to pass.
i saved the element the user clicked on with ref so i have acsesss to the dom element.

[TheSpyder]

I’m not sure how to find a path from a node, but I’m sure there is a way.

you could try editor.selection which is a range containing paths. That might give you the path you need - although it might also be too deep into the node tree to do exactly what you’re looking for. I guess you could get parent nodes using the path until you find one with the mark attribute you want to remove.