84 lines
3.3 KiB
JavaScript
84 lines
3.3 KiB
JavaScript
import renderRichText from 'shared/directives/rich-text.js';
|
|
import { CustomElement } from 'shared/components/element.js';
|
|
import { api } from "@converse/headless/core";
|
|
|
|
import './styles/rich-text.scss';
|
|
|
|
/**
|
|
* The RichText custom element allows you to parse transform text into rich DOM elements.
|
|
* @example <converse-rich-text text="*_hello_ world!*"></converse-rich-text>
|
|
*/
|
|
export default class RichText extends CustomElement {
|
|
|
|
static get properties () {
|
|
/**
|
|
* @typedef { Object } RichTextComponentProperties
|
|
* @property { Boolean } embed_audio
|
|
* Whether URLs that point to audio files should render as audio players.
|
|
* @property { Boolean } embed_videos
|
|
* Whether URLs that point to video files should render as video players.
|
|
* @property { Array } mentions - An array of objects representing chat mentions
|
|
* @property { String } nick - The current user's nickname, relevant for mentions
|
|
* @property { Number } offset - The text offset, in case this is a nested RichText element.
|
|
* @property { Function } onImgClick
|
|
* @property { Function } onImgLoad
|
|
* @property { Boolean } render_styling
|
|
* Whether XEP-0393 message styling hints should be rendered
|
|
* @property { Boolean } show_images
|
|
* Whether URLs that point to image files should render as images
|
|
* @property { Boolean } hide_media_urls
|
|
* If media URLs are rendered as media, then this option determines
|
|
* whether the original URL is also still shown or not.
|
|
* Only relevant in conjunction with `show_images`, `embed_audio` and `embed_videos`.
|
|
* @property { Boolean } show_me_message
|
|
* Whether text that starts with /me should be rendered in the 3rd person.
|
|
* @property { String } text - The text that will get transformed.
|
|
*/
|
|
return {
|
|
embed_audio: { type: Boolean },
|
|
embed_videos: { type: Boolean },
|
|
mentions: { type: Array },
|
|
nick: { type: String },
|
|
offset: { type: Number },
|
|
onImgClick: { type: Function },
|
|
onImgLoad: { type: Function },
|
|
render_styling: { type: Boolean },
|
|
show_images: { type: Boolean },
|
|
hide_media_urls: { type: Boolean },
|
|
show_me_message: { type: Boolean },
|
|
text: { type: String },
|
|
}
|
|
}
|
|
|
|
constructor () {
|
|
super();
|
|
this.embed_audio = false;
|
|
this.embed_videos = false;
|
|
this.hide_media_urls = false;
|
|
this.mentions = [];
|
|
this.offset = 0;
|
|
this.render_styling = false;
|
|
this.show_image_urls = true;
|
|
this.show_images = false;
|
|
this.show_me_message = false;
|
|
}
|
|
|
|
render () {
|
|
const options = {
|
|
embed_audio: this.embed_audio,
|
|
embed_videos: this.embed_videos,
|
|
hide_media_urls: this.hide_media_urls,
|
|
mentions: this.mentions,
|
|
nick: this.nick,
|
|
onImgClick: this.onImgClick,
|
|
onImgLoad: this.onImgLoad,
|
|
render_styling: this.render_styling,
|
|
show_images: this.show_images,
|
|
show_me_message: this.show_me_message,
|
|
}
|
|
return renderRichText(this.text, this.offset, options);
|
|
}
|
|
}
|
|
|
|
api.elements.define('converse-rich-text', RichText);
|