How to modify the preview with javascript?

AI-generated summary

Heddson is seeking the best way to modify the preview in a theme component using JavaScript. They would like to update both the preview and the submitted post without saving the modifications. Falco asked if Heddson wants to update just the preview or also affect the submitted post, and Heddson confirmed they want to update both. However, Falco explained that a plugin is needed to modify the submitted post, as it will be cooked again on the server, and provided a link to a relevant topic: https://meta.discourse.org/t/repackaging-a-markdown-it-extension-as-a-discourse-plugin/84614?u=falco.

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?

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

Thanks! I will definitely check that out.