Can't get MatchDecorator to work

v6
1

I have the following code. Based upon the console.log statement in decorate, the values are all what I want them to be. But the class “highlight-text” is never added around the from and to characters.
What am I doing wrong?

export const matchDecorator = new MatchDecorator({
  regexp: /(conditon:|and)/g,

  decorate: (add, from, to, match) => {
    console.log("decorate", match, from, to);
    add(
      from,
      to,
      Decoration.mark({
        class: "highlight-text",
      })
    );
  },
});

export const syntaxHighlightView = ViewPlugin.fromClass(
  class {
    public decoration: DecorationSet = Decoration.none;

    constructor(view: EditorView) {
      this.decoration = matchDecorator.createDeco(view);
    }
    update(update: ViewUpdate) {
      this.decoration = matchDecorator.updateDeco(update, this.decoration);
    }
  }
);

export const decorationExtensions: Extension = [
  syntaxHighlightView.extension,
  EditorView.theme({
    ".highlight-text": {
      backgroundColor: "yellow",
    },
  }),
];
2

Looks like you’re not wiring up your decoration field to be used as decoration. See the decorations option that you can pass in the second arg to fromClass.

3

Thanks! That works.