Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Let the message body be rendered with the rich-text directive

Browse Source
This commit is contained in:
JC Brand 2021-03-24 11:27:19 +01:00
parent 41d82a54b6
commit 65efe5ad43
3 changed files with 19 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/shared/chat/message-body.js
View File

@ -1,8 +1,8 @@
import 'shared/registry.js';
import ImageModal from 'modals/image.js';
import renderRichText from 'shared/directives/rich-text.js';
import { CustomElement } from 'components/element.js';
import { api } from "@converse/headless/core";
import { renderBodyText } from 'templates/directives/body';
export default class MessageBody extends CustomElement {
@ -15,13 +15,27 @@ export default class MessageBody extends CustomElement {
}
}
showImageModal (ev) { // eslint-disable-line class-methods-use-this
onImgClick (ev) { // eslint-disable-line class-methods-use-this
ev.preventDefault();
api.modal.create(ImageModal, {'src': ev.target.src}, ev).show(ev);
}
onImgLoad () {
this.dispatchEvent(new CustomEvent('imageLoaded', { detail: this, 'bubbles': true }));
}
render () {
return renderBodyText(this);
const callback = () => this.model.collection?.trigger('rendered', this.model);
const offset = 0;
const mentions = this.model.get('references');
const options = {
'nick': this.model.collection.chatbox.get('nick'),
'onImgClick': this.onImgClick,
'onImgLoad': () => this.onImgLoad(),
'render_styling': !this.model.get('is_unstyled') && api.settings.get('allow_message_styling'),
'show_images': api.settings.get('show_images_inline'),
}
return renderRichText(this.text, offset, mentions, options, callback);
}
}

3
src/shared/directives/rich-text.js
View File

@ -24,9 +24,10 @@ class RichTextRenderer {
}
const renderRichText = directive((text, offset, mentions, options) => part => {
const renderRichText = directive((text, offset, mentions, options, callback) => part => {
const renderer = new RichTextRenderer(text, offset, mentions, options);
part.setValue(renderer.render());
callback();
});
export default renderRichText;

50
src/templates/directives/body.js
View File

@ -1,50 +0,0 @@
import { MessageText } from '../../shared/message/text.js';
import { api } from "@converse/headless/core";
import { directive, html } from "lit-html";
import { until } from 'lit-html/directives/until.js';
class MessageBodyRenderer {
constructor (component) {
this.model = component.model;
this.component = component;
this.text = this.model.getMessageText();
}
onImageLoaded () {
this.component.dispatchEvent(new CustomEvent('imageLoaded', { detail: this.component, 'bubbles': true }));
}
async transform () {
const show_images = api.settings.get('show_images_inline');
const render_styling = !this.model.get('is_unstyled') && api.settings.get('allow_message_styling');
const offset = 0;
const text = new MessageText(
this.text,
offset,
this.model.get('references'),
{
'nick': this.model.collection.chatbox.get('nick'),
'onImgClick': () => this.onImageLoaded(),
'onImgLoad': ev => this.component.showImageModal(ev),
render_styling,
show_images,
}
);
await text.addTemplates();
return text.payload;
}
render () {
return html`${until(this.transform(), html`${this.text}`)}`;
}
}
export const renderBodyText = directive(component => part => {
const renderer = new MessageBodyRenderer(component);
part.setValue(renderer.render());
const model = component.model;
model.collection?.trigger('rendered', model);
});