How do I select mark and delete it ?

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.

[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.

[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 🙂