Slate: How do I select mark and delete it ?

[eromoe]

The docs only show the example of using onKeyDown: https://docs.slatejs.org/walkthroughs/using-plugins

Now, I read the mark from database, and show mark at startup.

The flow:

1. use external buttons(not keyCode) to add marks （I have done this, but there is a bug, if I use two different marker button to mark same selection, slate would broken ,I don't know if it is relate to slate）

2. save mark info to db

3. When I meet this page again, read data from db, and rebuild marks.

4. How do I delete marks ????

currently I have to do as below

select the exactly text, and click the same mark button again to delete it.
the selection not show in my mark too, really not a good way.
I prefer click this mark, press Delete key to delete it. But have no idea.

[ppvolto]

Current you can only Delete a Marker from a Selection how i found out, since you can have multiple markers on a element. What you can do is to convert the Marker that you like to Delete into a Selection and remove the marker that way but thats a other Question...

[eromoe]

I have seen removeMarkAtRange and deleteAtRange in https://docs.slatejs.org/slate-core/change#removemarkatrange

But I have to select the same range by corsor again .

PS: when I click middle of a mark, corsor always be front of the it ..

[YurkaninRyan]

You really need to add a jsfiddle showing your problem to get any help here. There's many different ways you could handle this situation

[schneidmaster]

I'm going to go ahead and close this issue since it's gone stale. Feel free to follow up with a jsfiddle if you're still stuck 🙂

[allesklarbeidir]

Hey, I've also had this problem and it took me some time to get it working.
I looked up the source code and found that removeMark is using removeMarkAtRange and value.selection as range.
The problem is, like you have described, that if you just have your cursor within the mark and calling removeMark would not change anything because the value.selection is not expanded to the whole mark.

I solved the problem by going one by one to the left until there is no mark anymore in the current selection and then one by one to the right untill there is no mark anymore. Save the startPosition and endPosition in a var, select the range and call removeMark.

Here's a snippet:

this.props.editor.change( (change) => {

        let ch = change;

        let startPos = ch.value.selection.startOffset;            
        while(ch.value.document.getMarksAtRange(ch.value.selection).some(mark => mark.type === "MARK_TYPE_TO_REMOVE")){
                 ch = ch.move(-1);
                 startPos--;
         }

        ch = ch.move(1);
        let endPos = startPos;

        while(ch.value.document.getMarksAtRange(ch.value.selection).some(mark => mark.type === "MARK_TYPE_TO_REMOVE")){
                ch = ch.move(1);
                endPos++;
         }

        ch.select({
            anchorOffset: startPos,
            focusOffset: endPos,
            isFocused: true,
            isBackward: false,
        })
        .removeMark({
            type: "MARK_TYPE_TO_REMOVE"
        });

});

But, I agree, it should be easier to do.