I am working on an extension that produces its own event posts. The content of this event post uses an HTML-string provided by an external library. To do that I extend EventPost.js:
import EventPost from 'flarum/components/EventPost';
import usernameHelper from 'flarum/helpers/username';
import htmlString from '.../htmlString';
...
export default class MyEventPost extends EventPost {
content() {
const discussion = this.props.post.discussion();
const actor = this.props.post.user();
const actorname = usernameHelper(actor);
const myHtmlString = htmlString();
const data = Object.assign(this.descriptionData(), {
actor,
actorname: actor
? <a className="EventPost-user" href={app.route.user(actor)} config={m.route}>{actorname}</a>
: actorname,
myHtmlString
});
return [
icon('...', {className: 'EventPost-icon'}),
<div class="EventPost-info">
<p>{this.description(data)}</p>
</div>
];
}
descriptionKey() {
return '... .forum.post_stream.my_event_post_text'
}
}
This is not working as intended. Instead of including an interpreted HTML object (DOM node) in the event post, it only includes the html string itself.
How can I include the output of htmlString() into the event post, so that it is interpreted as a DOM node and not as a literal text?