How to get a decorator to react to external data change?

[monks1975]

I'm trying to write an extension that updates a decoration when external data (in a vue component) changes. I've cobbled together a test extension that applies decorations based on regex. I seem to be able to update the data passed in via a command but don't know how to then kick off a new transaction to apply the new decoration? Would love some suggestions.

import { Extension } from 'tiptap';
import { Plugin } from 'prosemirror-state';
import { Decoration, DecorationSet } from 'prosemirror-view';
// import BadWordsPlugin from './PluginBadWords';

export default class ExtensionTest extends Extension {
  constructor(options = {}) {
    super(options);
    this.badWordRegex = /\b(time|aid)\b/gi;
  }

  get name() {
    return 'extensiontest';
  }

  get defaultOptions() {
    return {
      words: null,
    };
  }

  commands() {
    return {
      clearSearch: () => this.clear(),
    };
  }

  clear() {
    return (state, dispatch) => {
      this.badWordRegex = null;
      this.updateView(state, dispatch);
    };
  }

  updateView({ tr }, dispatch) {
    dispatch(tr);
  }

  lint(doc, regex) {
    let result = [];
    if (!regex) return result;

    doc.descendants((node, pos) => {
      if (node.isText) {
        let m;
        // eslint-disable-next-line no-cond-assign
        while ((m = regex.exec(node.text))) {
          result.push({
            from: pos + m.index,
            to: pos + m.index + m[0].length,
          });
        }
      }
    });

    return result;
  }

  lintDeco(doc) {
    let decorations = [];
    this.lint(doc, this.badWordRegex).forEach((prob) => {
      decorations.push(
        Decoration.inline(prob.from, prob.to, {
          nodeName: 'mark',
          class: 'spam-word',
        })
      );
    });
    return DecorationSet.create(doc, decorations);
  }

  get plugins() {
    return [
      new Plugin({
        state: {
          init: (_, { doc }) => {
            return this.lintDeco(doc);
          },
          apply: (tr, old) => {
            return tr.docChanged ? this.lintDeco(tr.doc) : old;
          },
        },
        props: {
          decorations(state) {
            return this.getState(state);
          },
        },
      }),
    ];
  }
}