xmpp.chapril.org-conversejs/src/shared/components/rich-text.js

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);