The problem: I want users to be able to post as RPG characters. I would like for them to be able to insert a template into a post - something like the below:
And then use a script so that the image replaces the original avatar and the charactername topic link goes in front of the username. For example, if the post usually says “Username,” I want to replace that with “Character Name played by Username”.
(“Character Name” would include a link to a topic with the character’s sheet, hopefully just using the wikilinks theme component for ease of use.)
I pasted a post skeleton into a Codepen and I was able to write some javascript that would do exactly this. However, when it came to adding it into a post decorator and getting it working live with the API, I ran into a wall.
Here’s what I have in common>header right now:
<script type="text/discourse-plugin" version="0.8">
api.decorateCookedElement(
element => {
// find the characterpost tag within the post
const characterPost = element.querySelector('[data-wrap="characterpost"]');
// find the parent of the characterpost tag, which contains avatar and username
const characterPostParent = characterPost.closest('article');
// turn it red to see if it's working
characterPostParent.style.backgroundColor = "red";
},
{
id: 'render-character-post', onlyStream: true, afterAdopt: true
}
);
</script>
This has been throwing an error. Is it possible to access the “article” wrapper for posts using decorateCookedElement so that I can get to the username and avatar? If not, how can I go about this?
Good question! The tag name and its content is part of the post content; this might affect the search result.
I will try something cleaner, like using a modal and saving in custom fields instead.
EDIT: I think I’ve misunderstood if you’re talking about changes appearing in the search result, the answer is no (nor will the HTML appear).