How to remove Decorations without StateField?

v6
1

I am trying to remove decorations I have made, but I don’t want to do it with StateField, as I am using ViewPlugin to create an extension, and StateField may not be optimal. I am guessing I need to use some kind of filter to remove such decorations, but I am just not sure how to. This example does remove decoration, but uses StateField: How to remove a decoration mark from state - discuss.CodeMirror

Heres the snippet of the code I am using, it creates a mark decoration at the header:

function headers(view) { 
    let headersList = []

    for (let {from, to} of view.visibleRanges) {
      syntaxTree(view.state).iterate({
        from, to,
        enter: (type, from, to) => {
          if (type.name == "ATXHeading1") { 
            let deco1 = header1.range(from,to)
            headersList.push(deco1)
          }
        }
      })
    }
    return Decoration.set(headersList, true)

}

export const header1Plugin = ViewPlugin.fromClass(class { // this is imported onto extentions in EditorState in another file
    
      constructor(view) {
        this.decorations = headers(view)
      }
    
      update(update) {
        if (update.docChanged || update.viewportChanged)
          this.decorations = headers(update.view)
      }
    }, {
        decorations: v => v.decorations,
    })

How can I remove the decoration without StateField? And is there a better way to remove decoration which I am missing?

2

When do you need to remove decoration. You mention “such decorations”, but unclear what you’re referring to.

If you don’t want to show any decorations, you have to supply an empty decoration set to decorations. E.g. this.decorations = Decoration.none

3

Ah, I found a solution earlier, I meant I wanted to remove specific decorations which are made with-in a ViewPlugin, i.g. header1 would be some sort of mark, replace, etc decoration, for me I went about it with a function in update(update), which uses the filter property of decorations, to filter decorations, whom I set class name to the name I want to remove.

In the function it went something like this:

decorations = decorations.update({
    filter: (f, t, value) => {
        // value.spec.class comes from Decoration.mark({ class: "remove-deco" }).
        if (value.spec.class == "remove-deco") {
            return false;
        } else return true;
    },
    // limit the range for filter
    filterFrom: from,
    filterTo: to,
});

Though it works, and I am certain to some point its optimal code, as long as filterFrom, filterTo, and class is set to their optimal values, if there is a better way to do, please do say so.

And I realised what you meant, now that I see, the code I send is incomplete, I will edit it right after this comment. I forgot to define header1, which is a mark decoration.

Thanks a lot!

Edit: Welp, I can’t edit it anymore :<