How to re-run plugin when $ctx value changes?

[adaboese]

So I have this plugin (Thanks to @allan-maeots):

import { createPhraseRegex } from '@/utilities/createPhraseRegex';
import { Plugin, PluginKey } from '@milkdown/prose/state';
import { Decoration, DecorationSet } from '@milkdown/prose/view';
import { $ctx, $prose } from '@milkdown/utils';

const highlightKey = new PluginKey('MilkdownKeywords');

export const keywordsContext = $ctx([], 'keywordsContext');

const plugin = $prose((context) => {
  return new Plugin({
    key: highlightKey,
    props: {
      decorations(state) {
        return highlightKey.getState(state).decorations;
      },
    },
    state: {
      apply(tr, value, previousState, state) {
        console.log(
          'context.get(keywordsContext)',
          context.get('keywordsContext'),
        );

        const highlights: Decoration[] = [];
        const needles: Array<{ id: string; text: RegExp }> = [
          {
            id: '123ABC',
            text: createPhraseRegex('ice'),
          },
        ];
        state.doc.nodesBetween(0, state.doc.nodeSize - 2, (node, path) => {
          for (const needle of needles) {
            for (const match of node.textContent.matchAll(needle.text)) {
              if (match.index === undefined) {
                throw new Error('match.index is undefined');
              }

              highlights.push(
                Decoration.inline(
                  path + match.index + 1,
                  path + match.index + match[0].length,
                  {
                    'data-id': needle.id,
                    nodeName: 'mark',
                    style: 'background-color: #EFCAFF',
                  },
                ),
              );
            }
          }
        });
        if (!highlights.length)
          return {
            decorations: DecorationSet.empty,
          };

        return {
          decorations: DecorationSet.create(state.doc, highlights),
        };
      },
      init() {
        return {
          decorations: DecorationSet.empty,
        };
      },
    },
  });
});

export const milkdownKeywords = [keywordsContext, plugin];

and I need to re-apply the plugin login whenever context.get('keywordsContext') gets new value.

I would expect that I can change this value doing something like this:

useEffect(() => {
  const timeoutId = setInterval(() => {
    console.log('???', editor.get()?.ctx);

    editor.get()?.ctx.set('keywordsContext', [Date.now()]);
  }, 1_000);

  return () => {
    clearInterval(timeoutId);
  };
}, [editor]);

I am not clear how to trigger re-apply.

[allan-maeots]

Maybe https://github.com/Milkdown/examples/blob/main/vanilla-openai/src/copilotPlugin.ts will help -- in my example everything is done in the apply section, but in reality you could use a separate function that sets the list of keywords via "tr.setMeta(PluginKey, [Keywords])" .. which you could trigger manually.