How to modify the preview with javascript?

Dev
1

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

2

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

1 Like
3

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.

4

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
5

Thanks! I will definitely check that out.

1 Like