2021-03-24 11:59:09 +01:00
|
|
|
import URI from 'urijs';
|
|
|
|
import log from '@converse/headless/log';
|
2021-06-17 14:37:43 +02:00
|
|
|
import tpl_audio from 'templates/audio.js';
|
2021-06-17 12:31:38 +02:00
|
|
|
import tpl_image from 'templates/image.js';
|
2021-06-17 14:37:43 +02:00
|
|
|
import tpl_video from 'templates/video.js';
|
2021-06-17 12:31:38 +02:00
|
|
|
import { _converse, api } from '@converse/headless/core';
|
2021-03-24 11:59:09 +01:00
|
|
|
import { containsDirectives, getDirectiveAndLength, getDirectiveTemplate, isQuoteDirective } from './styling.js';
|
2021-06-17 12:31:38 +02:00
|
|
|
import {
|
|
|
|
convertASCII2Emoji,
|
|
|
|
getCodePointReferences,
|
|
|
|
getEmojiMarkup,
|
|
|
|
getShortnameReferences
|
|
|
|
} from '@converse/headless/plugins/emoji/index.js';
|
|
|
|
import {
|
|
|
|
filterQueryParamsFromURL,
|
|
|
|
getHyperlinkTemplate,
|
2021-06-17 14:37:43 +02:00
|
|
|
isAudioDomainAllowed,
|
|
|
|
isAudioURL,
|
2021-06-17 12:31:38 +02:00
|
|
|
isImageDomainAllowed,
|
2021-06-17 14:37:43 +02:00
|
|
|
isImageURL,
|
2021-06-17 12:31:38 +02:00
|
|
|
isVideoDomainAllowed,
|
|
|
|
isVideoURL
|
|
|
|
} from 'utils/html';
|
2021-04-14 22:56:59 +02:00
|
|
|
import { html } from 'lit';
|
2021-03-24 11:59:09 +01:00
|
|
|
|
2021-06-17 12:31:38 +02:00
|
|
|
const isString = s => typeof s === 'string';
|
2021-03-24 11:59:09 +01:00
|
|
|
|
|
|
|
// We don't render more than two line-breaks, replace extra line-breaks with
|
|
|
|
// the zero-width whitespace character
|
2021-06-17 12:31:38 +02:00
|
|
|
const collapseLineBreaks = text => text.replace(/\n\n+/g, m => `\n${'\u200B'.repeat(m.length - 2)}\n`);
|
2021-03-24 11:59:09 +01:00
|
|
|
|
2021-06-17 12:31:38 +02:00
|
|
|
const tpl_mention_with_nick = o => html`<span class="mention mention--self badge badge-info">${o.mention}</span>`;
|
|
|
|
const tpl_mention = o => html`<span class="mention">${o.mention}</span>`;
|
2021-03-24 11:59:09 +01:00
|
|
|
|
|
|
|
/**
|
|
|
|
* @class RichText
|
|
|
|
* A String subclass that is used to render rich text (i.e. text that contains
|
|
|
|
* hyperlinks, images, mentions, styling etc.).
|
|
|
|
*
|
2021-04-14 22:56:59 +02:00
|
|
|
* The "rich" parts of the text is represented by lit TemplateResult
|
2021-03-24 11:59:09 +01:00
|
|
|
* objects which are added via the {@link RichText.addTemplateResult}
|
|
|
|
* method and saved as metadata.
|
|
|
|
*
|
|
|
|
* By default Converse adds TemplateResults to support emojis, hyperlinks,
|
|
|
|
* images, map URIs and mentions.
|
|
|
|
*
|
|
|
|
* 3rd party plugins can listen for the `beforeMessageBodyTransformed`
|
|
|
|
* and/or `afterMessageBodyTransformed` events and then call
|
|
|
|
* `addTemplateResult` on the RichText instance in order to add their own
|
|
|
|
* rich features.
|
|
|
|
*/
|
|
|
|
export class RichText extends String {
|
|
|
|
/**
|
|
|
|
* Create a new {@link RichText} instance.
|
|
|
|
* @param { String } text - The text to be annotated
|
|
|
|
* @param { Integer } offset - The offset of this particular piece of text
|
|
|
|
* from the start of the original message text. This is necessary because
|
|
|
|
* RichText instances can be nested when templates call directives
|
|
|
|
* which create new RichText instances (as happens with XEP-393 styling directives).
|
|
|
|
* @param { Array } mentions - An array of mention references
|
|
|
|
* @param { Object } options
|
|
|
|
* @param { String } options.nick - The current user's nickname (only relevant if the message is in a XEP-0045 MUC)
|
|
|
|
* @param { Boolean } options.render_styling - Whether XEP-0393 message styling should be applied to the message
|
|
|
|
* @param { Boolean } options.show_images - Whether image URLs should be rendered as <img> tags.
|
2021-06-17 12:31:38 +02:00
|
|
|
* @param { Boolean } options.embed_videos - Whether video URLs should be rendered as <video> tags.
|
2021-03-24 11:59:09 +01:00
|
|
|
* @param { Boolean } options.show_me_message - Whether /me messages should be rendered differently
|
|
|
|
* @param { Function } options.onImgClick - Callback for when an inline rendered image has been clicked
|
|
|
|
* @param { Function } options.onImgLoad - Callback for when an inline rendered image has been loaded
|
|
|
|
*/
|
2021-06-17 12:31:38 +02:00
|
|
|
constructor (text, offset = 0, mentions = [], options = {}) {
|
2021-03-24 11:59:09 +01:00
|
|
|
super(text);
|
2021-06-17 14:37:43 +02:00
|
|
|
this.embed_audio = options?.embed_audio;
|
|
|
|
this.embed_videos = options?.embed_videos;
|
2021-03-24 11:59:09 +01:00
|
|
|
this.mentions = mentions;
|
|
|
|
this.nick = options?.nick;
|
|
|
|
this.offset = offset;
|
|
|
|
this.onImgClick = options?.onImgClick;
|
|
|
|
this.onImgLoad = options?.onImgLoad;
|
|
|
|
this.options = options;
|
|
|
|
this.payload = [];
|
|
|
|
this.references = [];
|
|
|
|
this.render_styling = options?.render_styling;
|
|
|
|
this.show_images = options?.show_images;
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Look for `http` URIs and return templates that render them as URL links
|
|
|
|
* @param { String } text
|
|
|
|
* @param { Integer } offset - The index of the passed in text relative to
|
|
|
|
* the start of the message body text.
|
|
|
|
*/
|
|
|
|
addHyperlinks (text, offset) {
|
|
|
|
const objs = [];
|
|
|
|
try {
|
|
|
|
const parse_options = { 'start': /\b(?:([a-z][a-z0-9.+-]*:\/\/)|xmpp:|mailto:|www\.)/gi };
|
2021-06-17 12:31:38 +02:00
|
|
|
URI.withinString(
|
|
|
|
text,
|
|
|
|
(url, start, end) => {
|
|
|
|
objs.push({ url, start, end });
|
|
|
|
return url;
|
|
|
|
},
|
|
|
|
parse_options
|
|
|
|
);
|
2021-03-24 11:59:09 +01:00
|
|
|
} catch (error) {
|
|
|
|
log.debug(error);
|
|
|
|
return;
|
2021-03-24 11:13:11 +01:00
|
|
|
}
|
2021-03-24 11:59:09 +01:00
|
|
|
objs.forEach(url_obj => {
|
|
|
|
const url_text = text.slice(url_obj.start, url_obj.end);
|
2021-06-17 12:31:38 +02:00
|
|
|
const filtered_url = filterQueryParamsFromURL(url_text);
|
|
|
|
|
|
|
|
let template;
|
|
|
|
if (this.show_images && isImageURL(url_text) && isImageDomainAllowed(url_text)) {
|
|
|
|
template = tpl_image({
|
|
|
|
'url': filtered_url,
|
2021-06-23 13:24:05 +02:00
|
|
|
'onClick': this.onImgClick,
|
|
|
|
'onLoad': this.onImgLoad
|
2021-06-17 12:31:38 +02:00
|
|
|
});
|
|
|
|
} else if (this.embed_videos && isVideoURL(url_text) && isVideoDomainAllowed(url_text)) {
|
2021-06-17 15:48:03 +02:00
|
|
|
template = tpl_video(filtered_url);
|
2021-06-17 14:37:43 +02:00
|
|
|
} else if (this.embed_audio && isAudioURL(url_text) && isAudioDomainAllowed(url_text)) {
|
|
|
|
template = tpl_audio(filtered_url);
|
2021-06-17 12:31:38 +02:00
|
|
|
} else {
|
|
|
|
template = getHyperlinkTemplate(filtered_url);
|
|
|
|
}
|
|
|
|
this.addTemplateResult(url_obj.start + offset, url_obj.end + offset, template);
|
2021-03-24 11:59:09 +01:00
|
|
|
});
|
2021-03-24 11:13:11 +01:00
|
|
|
}
|
|
|
|
|
2021-03-24 11:59:09 +01:00
|
|
|
/**
|
|
|
|
* Look for `geo` URIs and return templates that render them as URL links
|
|
|
|
* @param { String } text
|
|
|
|
* @param { Integer } offset - The index of the passed in text relative to
|
|
|
|
* the start of the message body text.
|
|
|
|
*/
|
|
|
|
addMapURLs (text, offset) {
|
|
|
|
const regex = /geo:([\-0-9.]+),([\-0-9.]+)(?:,([\-0-9.]+))?(?:\?(.*))?/g;
|
|
|
|
const matches = text.matchAll(regex);
|
|
|
|
for (const m of matches) {
|
|
|
|
this.addTemplateResult(
|
2021-06-17 12:31:38 +02:00
|
|
|
m.index + offset,
|
|
|
|
m.index + m[0].length + offset,
|
|
|
|
getHyperlinkTemplate(m[0].replace(regex, _converse.geouri_replacement))
|
2021-03-24 11:59:09 +01:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Look for emojis (shortnames or unicode) and add templates for rendering them.
|
|
|
|
* @param { String } text
|
|
|
|
* @param { Integer } offset - The index of the passed in text relative to
|
|
|
|
* the start of the message body text.
|
|
|
|
*/
|
|
|
|
addEmojis (text, offset) {
|
|
|
|
const references = [...getShortnameReferences(text.toString()), ...getCodePointReferences(text.toString())];
|
|
|
|
references.forEach(e => {
|
2021-06-17 12:31:38 +02:00
|
|
|
this.addTemplateResult(e.begin + offset, e.end + offset, getEmojiMarkup(e, { 'add_title_wrapper': true }));
|
2021-03-24 11:59:09 +01:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Look for mentions included as XEP-0372 references and add templates for
|
|
|
|
* rendering them.
|
|
|
|
* @param { String } text
|
|
|
|
* @param { Integer } local_offset - The index of the passed in text relative to
|
|
|
|
* the start of this RichText instance (which is not necessarily the same as the
|
|
|
|
* offset from the start of the original message stanza's body text).
|
|
|
|
*/
|
|
|
|
addMentions (text, local_offset) {
|
2021-06-17 12:31:38 +02:00
|
|
|
const full_offset = local_offset + this.offset;
|
2021-03-24 11:59:09 +01:00
|
|
|
this.mentions?.forEach(ref => {
|
2021-06-17 12:31:38 +02:00
|
|
|
const begin = Number(ref.begin) - full_offset;
|
|
|
|
if (begin < 0 || begin >= full_offset + text.length) {
|
2021-03-24 11:59:09 +01:00
|
|
|
return;
|
|
|
|
}
|
2021-06-17 12:31:38 +02:00
|
|
|
const end = Number(ref.end) - full_offset;
|
2021-03-24 11:59:09 +01:00
|
|
|
const mention = text.slice(begin, end);
|
|
|
|
if (mention === this.nick) {
|
2021-06-17 12:31:38 +02:00
|
|
|
this.addTemplateResult(begin + local_offset, end + local_offset, tpl_mention_with_nick({ mention }));
|
2021-03-24 11:59:09 +01:00
|
|
|
} else {
|
2021-06-17 12:31:38 +02:00
|
|
|
this.addTemplateResult(begin + local_offset, end + local_offset, tpl_mention({ mention }));
|
2021-03-24 11:59:09 +01:00
|
|
|
}
|
|
|
|
});
|
2021-03-24 11:38:54 +01:00
|
|
|
}
|
|
|
|
|
2021-03-24 11:59:09 +01:00
|
|
|
/**
|
|
|
|
* Look for XEP-0393 styling directives and add templates for rendering
|
|
|
|
* them.
|
|
|
|
*/
|
|
|
|
addStyling () {
|
|
|
|
const references = [];
|
2021-05-13 11:20:03 +02:00
|
|
|
if (containsDirectives(this, this.mentions)) {
|
2021-06-17 12:31:38 +02:00
|
|
|
const mention_ranges = this.mentions.map(m =>
|
|
|
|
Array.from({ 'length': Number(m.end) }, (v, i) => Number(m.begin) + i)
|
2021-05-13 11:20:03 +02:00
|
|
|
);
|
|
|
|
let i = 0;
|
2021-03-24 11:59:09 +01:00
|
|
|
while (i < this.length) {
|
2021-05-13 11:20:03 +02:00
|
|
|
if (mention_ranges.filter(r => r.includes(i)).length) { // eslint-disable-line no-loop-func
|
|
|
|
// Don't treat potential directives if they fall within a
|
|
|
|
// declared XEP-0372 reference
|
|
|
|
i++;
|
|
|
|
continue;
|
|
|
|
}
|
2021-03-24 11:59:09 +01:00
|
|
|
const { d, length } = getDirectiveAndLength(this, i);
|
|
|
|
if (d && length) {
|
|
|
|
const is_quote = isQuoteDirective(d);
|
2021-06-17 12:31:38 +02:00
|
|
|
const end = i + length;
|
|
|
|
const slice_end = is_quote ? end : end - d.length;
|
|
|
|
let slice_begin = d === '```' ? i + d.length + 1 : i + d.length;
|
2021-03-24 11:59:09 +01:00
|
|
|
if (is_quote && this[slice_begin] === ' ') {
|
|
|
|
// Trim leading space inside codeblock
|
|
|
|
slice_begin += 1;
|
|
|
|
}
|
|
|
|
const offset = slice_begin;
|
|
|
|
const text = this.slice(slice_begin, slice_end);
|
|
|
|
references.push({
|
|
|
|
'begin': i,
|
|
|
|
'template': getDirectiveTemplate(d, text, offset, this.mentions, this.options),
|
2021-06-17 12:31:38 +02:00
|
|
|
end
|
2021-03-24 11:59:09 +01:00
|
|
|
});
|
|
|
|
i = end;
|
|
|
|
}
|
|
|
|
i++;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
references.forEach(ref => this.addTemplateResult(ref.begin, ref.end, ref.template));
|
|
|
|
}
|
|
|
|
|
|
|
|
trimMeMessage () {
|
|
|
|
if (this.offset === 0) {
|
|
|
|
// Subtract `/me ` from 3rd person messages
|
|
|
|
if (this.isMeCommand()) {
|
|
|
|
this.payload[0] = this.payload[0].substring(4);
|
|
|
|
}
|
2021-03-24 11:13:11 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-03-24 11:59:09 +01:00
|
|
|
/**
|
|
|
|
* Look for plaintext (i.e. non-templated) sections of this RichText
|
|
|
|
* instance and add references via the passed in function.
|
|
|
|
* @param { Function } func
|
|
|
|
*/
|
|
|
|
addAnnotations (func) {
|
|
|
|
const payload = this.marshall();
|
|
|
|
let idx = 0; // The text index of the element in the payload
|
|
|
|
for (const text of payload) {
|
|
|
|
if (!text) {
|
2021-06-17 12:31:38 +02:00
|
|
|
continue;
|
2021-03-24 11:59:09 +01:00
|
|
|
} else if (isString(text)) {
|
|
|
|
func.call(this, text, idx);
|
|
|
|
idx += text.length;
|
|
|
|
} else {
|
|
|
|
idx = text.end;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Parse the text and add template references for rendering the "rich" parts.
|
|
|
|
*
|
|
|
|
* @param { RichText } text
|
|
|
|
* @param { Boolean } show_images - Should URLs of images be rendered as `<img>` tags?
|
|
|
|
* @param { Function } onImgLoad
|
|
|
|
* @param { Function } onImgClick
|
|
|
|
**/
|
2021-06-17 12:31:38 +02:00
|
|
|
async addTemplates () {
|
2021-03-24 11:59:09 +01:00
|
|
|
/**
|
|
|
|
* Synchronous event which provides a hook for transforming a chat message's body text
|
|
|
|
* before the default transformations have been applied.
|
|
|
|
* @event _converse#beforeMessageBodyTransformed
|
|
|
|
* @param { RichText } text - A {@link RichText } instance. You
|
|
|
|
* can call {@link RichText#addTemplateResult } on it in order to
|
|
|
|
* add TemplateResult objects meant to render rich parts of the message.
|
|
|
|
* @example _converse.api.listen.on('beforeMessageBodyTransformed', (view, text) => { ... });
|
|
|
|
*/
|
2021-06-17 12:31:38 +02:00
|
|
|
await api.trigger('beforeMessageBodyTransformed', this, { 'Synchronous': true });
|
2021-03-24 11:59:09 +01:00
|
|
|
|
|
|
|
this.render_styling && this.addStyling();
|
|
|
|
this.addAnnotations(this.addMentions);
|
|
|
|
this.addAnnotations(this.addHyperlinks);
|
|
|
|
this.addAnnotations(this.addMapURLs);
|
|
|
|
|
|
|
|
await api.emojis.initialize();
|
|
|
|
this.addAnnotations(this.addEmojis);
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Synchronous event which provides a hook for transforming a chat message's body text
|
|
|
|
* after the default transformations have been applied.
|
|
|
|
* @event _converse#afterMessageBodyTransformed
|
|
|
|
* @param { RichText } text - A {@link RichText } instance. You
|
|
|
|
* can call {@link RichText#addTemplateResult} on it in order to
|
|
|
|
* add TemplateResult objects meant to render rich parts of the message.
|
|
|
|
* @example _converse.api.listen.on('afterMessageBodyTransformed', (view, text) => { ... });
|
|
|
|
*/
|
2021-06-17 12:31:38 +02:00
|
|
|
await api.trigger('afterMessageBodyTransformed', this, { 'Synchronous': true });
|
2021-03-24 11:59:09 +01:00
|
|
|
|
|
|
|
this.payload = this.marshall();
|
|
|
|
this.options.show_me_message && this.trimMeMessage();
|
2021-06-17 12:31:38 +02:00
|
|
|
this.payload = this.payload.map(item => (isString(item) ? item : item.template));
|
2021-03-24 11:59:09 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
2021-04-14 22:56:59 +02:00
|
|
|
* The "rich" markup parts of a chat message are represented by lit
|
2021-03-24 11:59:09 +01:00
|
|
|
* TemplateResult objects.
|
|
|
|
*
|
|
|
|
* This method can be used to add new template results to this message's
|
|
|
|
* text.
|
|
|
|
*
|
|
|
|
* @method RichText.addTemplateResult
|
|
|
|
* @param { Number } begin - The starting index of the plain message text
|
|
|
|
* which is being replaced with markup.
|
|
|
|
* @param { Number } end - The ending index of the plain message text
|
|
|
|
* which is being replaced with markup.
|
2021-04-14 22:56:59 +02:00
|
|
|
* @param { Object } template - The lit TemplateResult instance
|
2021-03-24 11:59:09 +01:00
|
|
|
*/
|
|
|
|
addTemplateResult (begin, end, template) {
|
2021-06-17 12:31:38 +02:00
|
|
|
this.references.push({ begin, end, template });
|
2021-03-24 11:59:09 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
isMeCommand () {
|
|
|
|
const text = this.toString();
|
|
|
|
if (!text) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
return text.startsWith('/me ');
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Take the annotations and return an array of text and TemplateResult
|
|
|
|
* instances to be rendered to the DOM.
|
|
|
|
* @method RichText#marshall
|
|
|
|
*/
|
|
|
|
marshall () {
|
|
|
|
let list = [this.toString()];
|
|
|
|
this.references
|
|
|
|
.sort((a, b) => b.begin - a.begin)
|
|
|
|
.forEach(ref => {
|
|
|
|
const text = list.shift();
|
2021-06-17 12:31:38 +02:00
|
|
|
list = [text.slice(0, ref.begin), ref, text.slice(ref.end), ...list];
|
2021-03-24 11:59:09 +01:00
|
|
|
});
|
2021-06-17 12:31:38 +02:00
|
|
|
return list.reduce(
|
|
|
|
(acc, i) => (isString(i) ? [...acc, convertASCII2Emoji(collapseLineBreaks(i))] : [...acc, i]),
|
|
|
|
[]
|
|
|
|
);
|
2021-03-24 11:59:09 +01:00
|
|
|
}
|
|
|
|
}
|