Setup custom plugin that colors text based on regex match

[samballa07]

Hello, I have a use case that I think will require a custom plugin, but am having trouble setting it up.
I need the editor to dynamically change text color depending on if it matches a regex and only the text that matches the regex should be colored. It seems the Lexical dom is wiping out any html modifications I make to the editor html. To be clear, this is purely for user visualization as they edit content in the editor and i dont need custom markdown for colors. Could someone help point me in the right direction to get this solution

[samballa07]

Got this custom plugin to work for me:

import { realmPlugin, createActiveEditorSubscription$ } from '@mdxeditor/editor';

const HANDLEBARS_REGEX = /\{\{[^{}]*\}\}/g;

// Plugin to highlight Handlebars syntax using CSS highlights
export const handlebarsHighlightPlugin = realmPlugin({
  init: realm => {
    // Subscribe to editor updates
    realm.pub(createActiveEditorSubscription$, editor => {
      return editor.registerUpdateListener(({ editorState }) => {
        editorState.read(() => {
          highlightHandlebars();
        });
      });
    });

    const highlightHandlebars = () => {
      try {
        if (typeof CSS !== 'undefined' && CSS.highlights) {
          const editorElements = document.querySelectorAll('.mdxeditor [contenteditable="true"]');

          if (editorElements.length === 0) return;

          const ranges: Range[] = [];

          editorElements.forEach(editorElement => {
            const walker = document.createTreeWalker(editorElement, NodeFilter.SHOW_TEXT, null);

            let textNode: Text | null;
            while ((textNode = walker.nextNode() as Text)) {
              const text = textNode.textContent || '';
              const matches = [...text.matchAll(HANDLEBARS_REGEX)];

              matches.forEach(match => {
                if (match.index !== undefined && textNode) {
                  try {
                    const range = document.createRange();
                    range.setStart(textNode, match.index);
                    range.setEnd(textNode, match.index + match[0].length);
                    ranges.push(range);
                  } catch {
                    // Ignore range errors during DOM updates
                  }
                }
              });
            }
          });

          CSS.highlights.delete('handlebars-syntax');
          if (ranges.length > 0) {
            CSS.highlights.set('handlebars-syntax', new Highlight(...ranges));
          }
        }
      } catch (error) {
        console.warn('Error highlighting handlebars syntax:', error);
      }
    };

    highlightHandlebars();

    return {
      cleanup: () => {
        if (typeof CSS !== 'undefined' && CSS.highlights) {
          CSS.highlights.delete('handlebars-syntax');
        }
      },
    };
  },
});