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).

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.

How to modify the preview with javascript?

Development

Falco (Falco) March 8, 2021, 10:43pm 2

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

Topic		Replies	Views
How to decorate a post before it's cooked? Development	4	1084	March 5, 2021
Interaction among theme component, theme javascript, and "previews" Development	4	990	May 14, 2021
Missing refresh of preview area with add-on Feature	2	813	November 2, 2016
Trying to replace / auto-format strings in user posts Development	3	585	November 13, 2023
How to correctly listen on post-stream update Development	6	1173	December 10, 2025

How to modify the preview with javascript?

Related topics