How to highlight a keyword appearing in a document?

[adaboese]

I need to highlight a specific keyword in a document. Where do I start? Just looking for high level guidance.

[adaboese]

@Saul-Mirone any pointers here? I've spent way too many hours on this 😓 This feels like something that should be relatively simple, but I need some directions. I've tried replicating logic in a few other plugins, but their requirements are quite different, since my use case does not depend on any markup, but rather presence of text.

[allan-maeots]

Do you mean a highlight you can turn on or off (like making text bold), or something else?

[adaboese]

The most basic definition of the requirement would be that I provide a list of words that I want to highlight, and I can render them with special markup.

Here is a screenshot of my app:

I basically want to highlight the keywords in the document, and if user hovers over them, provide additional context about them in a tooltip.

The part that I cannot get figured out is how to intercept the part that renders text in various contests (like paragraph or list) and when it contains a keyword, amend it so that it renders with a custom markup that includes my HTML.

[allan-maeots]

I guess you could create custom tags and then use regex to find your keywords in the raw markdown before it's sent to the editor, add those tags around the keywords and then you can use the tooltip plugin to display the information.

Or maybe annotation plugins can offer more inspiration, a basic demo at https://prosemirror.net/examples/collab/#edit-Example and a more advanced one by Remirror https://remirror.io/docs/extensions/annotation-extension/

--

Why do you want to use the additional context popups in the editor tho? If they are meant for the reader (read only view), you could probably use better tools for that (rendering and intercepting), like Marked.

[adaboese]

Why do you want to use the additional context popups in the editor tho? If they are meant for the reader (read only view), you could probably use better tools for that (rendering and intercepting), like Marked.

They are meant for the writer.

RE ProseMirror example, I found this https://gist.github.com/marijnh/cee01b30b1890a5947c0

But the problem is that I cannot figure out how to convert that to MilkDown.

[allan-maeots]

An absolutely terrible example as a proof of concept. It adds <mark> tags with a property "data-id" around matched words that you can then use to show a popup on mouseover etc.

In the real world, you would probably need to use something like prosemirrors 'descendants' to find actual positions of words, inspiration maybe in https://github.com/mattberkowitz/prosemirror-find-replace or highlighter plugins.

import { Plugin, PluginKey } from "@milkdown/prose/state";
import { $prose } from "@milkdown/utils";
import { Decoration, DecorationSet } from "@milkdown/prose/view";

const highlightKey = new PluginKey("MilkdownHighlights")

export const highlightPlugin = $prose((ctx) => {
  return new Plugin({
    key: highlightKey,
    props: {
      decorations(state) {
        return highlightKey.getState(state).decorations;
      }
    },
    state: {
      init() {
        return {
          decorations: DecorationSet.empty,
        };
      },
      apply(tr, value, prevState, state) {
        // The array of all active decorations
        const highlights = [];
        // List of words to look for
        const lookFor = [
          {
            text: 'similique',
            id: '123ABC',
          }, {
            text: 'tellus',
            id: '345DEF',
          }];
        //
        state.doc.nodesBetween(null, state.doc.nodeSize - 2, (node, path) => {
          lookFor.forEach((keyword) => {
            [...node.textContent.matchAll(keyword.text)].forEach((match) => {
              highlights.push(Decoration.inline(path + match.index + 1, path + match.index + match[0].length, {
                nodeName: 'mark',
                'data-id': keyword.id,
              }));
            });
          });
        });
        // Nothing to highlight
        if (!highlights.length) return {
          decorations: DecorationSet.empty,
        };
        // Highlight it all!
        return {
          decorations: DecorationSet.create(state.doc, highlights),
        };
      }
    }
  })
});

Edit: using nodesBetween instead of raw markdown.

[adaboese]

Thank you so much! This is exactly what I was trying to figure out. ❤️

[adaboese]

My requirements slightly changed, but this is what I ended up with. Sharing to help others.

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

const highlightKey = new PluginKey('Highlight');

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

const rules = [
  {
    id: 'keyword',
    rule: /(?:mention|quote|link):/u,
    style: 'background-color: #E9D2FD',
  },
  {
    id: 'instructions',
    rule: /\{\{(.+?)\}\}/u,
    style: 'background-color: #FFE8CE',
  },
];

const highlight = (document: Node) => {
  const decorations: Decoration[] = [];

  document.descendants((node, position) => {
    if (!node.isText || !node.text) {
      return;
    }

    for (const rule of rules) {
      const match = rule.rule.exec(node.text);

      if (!match) {
        continue;
      }

      const from = position + match.index;
      const to = position + match.index + match[0].length;

      decorations.push(
        Decoration.inline(from, to, {
          nodeName: 'mark',
          style: rule.style,
        }),
      );
    }
  });

  return DecorationSet.create(document, decorations);
};

const plugin = $prose(() => {
  return new Plugin({
    key: highlightKey,
    props: {
      decorations(state) {
        return highlightKey.getState(state).decorations;
      },
    },
    state: {
      apply(tr, value, previousState, state) {
        return {
          decorations: highlight(state.doc),
        };
      },
      init(config, instance) {
        return {
          decorations: highlight(instance.doc),
        };
      },
    },
  });
});

export const highlightPlugin = [highlightContext, plugin];