How do I get a GreaseMonkey/UserScript to interact with the Live Preview?

Question

I've converted a script that I hope to get embedded on a StackExchange site (Lego Answers) to a GreaseMonkey/Userscript but I'd like to get it interacting with the live preview when creating or editing questions and answers.

At the moment the script runs once the page is loaded and looks for our custom tags (for example [part:3700:4]) and when it finds one, calls a webservice to retrieve the part name and image details and then replaces the tag with the image.

However, this doesn't work with either inline editing or creating a question as the preview updates on the fly.

Has anyone else hooked a userscript or similar into the preview for this sort of feature?

The script can be seen here:

BrickJax: Brick Image Replacement

Answer 1

There's a few ways to do it, but at first glance the simplest way would be to hook into the wmdrefresh event that will get called when the preview area is updated:

$(document).bind('wmdrefresh', function (event) {
    // Make your changes to event.target's content
});

Keep in mind that the preview update fires many, many times, so be sure to cache the responses to your web service requests to avoid spamming the services or hanging the client.