How to modify the preview with javascript?

This is kind of related to my last question. But made a new topic since it’s a new question.

What is the best way to modify the preview (that you see when composing a post) with javascript in a theme component?

I know I can modify the DOM (after it’s cooked) in decorateCookedElement, but would be nice to have something like addPostTransformCallback where you can modify the cooked post as a string (with t.cooked). But addPostTransformCallback doesn’t get called when the preview is updated (only when you first open to edit a post).

Do you want to update just the preview or you want to also affect how a submitted post will look?

1 Like

I’m interested in updating both the preview and the submitted post (but don’t want to save the modifications :slightly_smiling_face:).

Worried that if I make my modifications to the DOM (with decorateCookedElement) it will be too slow. Although I need to make some tests to see if that’s really the case.

The submitted post will be cooked again in the server, so in order for the modification to work, you will need a plugin, not a theme-component.

This post here covers this topic: Repackaging a markdown.it extension as a Discourse plugin

5 Likes

Thanks! I will definitely check that out.

1 Like