Skip to content

C
converse.js
Commit 8943609d authored by JC Brand's avatar JC Brand
Browse files
Options

Refactor the body directive 

Changes how rich message markup is generated and kept track of.
We now have a MessageText class which subclasses String and which keeps
track of the rich markup associated with the message.
parent bb9ee4ca
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 242 additions and 115 deletions
Makefile
View file @ 8943609d
......@@ -231,4 +231,4 @@ doc: node_modules docsdev apidoc
PHONY: apidoc
apidoc:
$(JSDOC) --private --readme docs/source/jsdoc_intro.md -c docs/source/conf.json -d docs/html/api src/*.js src/utils/*.js src/headless/*.js src/headless/utils/*.js
$(JSDOC) --private --readme docs/source/jsdoc_intro.md -c docs/source/conf.json -d docs/html/api src/templates/directives/*.js src/components/*.js src/*.js src/utils/*.js src/headless/*.js src/headless/utils/*.js
spec/chatbox.js
View file @ 8943609d
......@@ -1663,7 +1663,7 @@ describe("Chatboxes", function () {
await u.waitUntil(() => view.el.querySelectorAll('.chat-content .chat-msg').length, 1000);
expect(view.model.sendMessage).toHaveBeenCalled();
const msg = sizzle('.chat-content .chat-msg:last .chat-msg__text', view.el).pop();
expect(msg.innerHTML.replace(/\<!----\>/g, '')).toEqual(
await u.waitUntil(() => msg.innerHTML.replace(/\<!----\>/g, '') ===
'<a target="_blank" rel="noopener" href="https://www.openstreetmap.org/?mlat=37.786971&amp;'+
'mlon=-122.399677#map=18/37.786971/-122.399677">https://www.openstreetmap.org/?mlat=37.786971&amp;mlon=-122.399677#map=18/37.786971/-122.399677</a>');
done();
......
spec/emojis.js
View file @ 8943609d
......@@ -276,7 +276,7 @@ describe("Emojis", function () {
});
await new Promise(resolve => view.model.messages.once('rendered', resolve));
const body = view.el.querySelector('converse-chat-message-body');
expect(body.innerHTML.replace(/<!---->/g, '').trim()).toBe(
await u.waitUntil(() => body.innerHTML.replace(/<!---->/g, '').trim() ===
'Running tests for <img class="emoji" draggable="false" title=":converse:" alt=":converse:" src="/dist/images/custom_emojis/converse.png">');
done();
}));
......
spec/mentions.js
View file @ 8943609d
......@@ -4,7 +4,7 @@ const { Promise, Strophe, $msg, $pres } = converse.env;
const u = converse.env.utils;
describe("A groupchat message", function () {
describe("An incoming groupchat message", function () {
it("is specially marked when you are mentioned in it",
mock.initConverse(
......@@ -102,6 +102,7 @@ describe("A groupchat message", function () {
.c('reference', {'xmlns':'urn:xmpp:reference:0', 'begin':'7', 'end':'11', 'type':'mention', 'uri':'xmpp:z3r0@montague.lit'}).up()
.c('reference', {'xmlns':'urn:xmpp:reference:0', 'begin':'12', 'end':'15', 'type':'mention', 'uri':'xmpp:romeo@montague.lit'}).up()
.c('reference', {'xmlns':'urn:xmpp:reference:0', 'begin':'16', 'end':'24', 'type':'mention', 'uri':'xmpp:mr.robot@montague.lit'}).nodeTree;
await view.model.handleMessageStanza(msg);
const message = await u.waitUntil(() => view.el.querySelector('.chat-msg__text'));
expect(message.classList.length).toEqual(1);
......@@ -111,6 +112,10 @@ describe("A groupchat message", function () {
'<span class="mention">mr.robot</span>, how are you?');
done();
}));
});
describe("A sent groupchat message", function () {
describe("in which someone is mentioned", function () {
......@@ -206,6 +211,12 @@ describe("A groupchat message", function () {
expect(references)
.toEqual([]);
[text, references] = view.model.parseTextForReferences(
"Welcome @gibson 💩 We have a guide on how to do that here: https://conversejs.org/docs/html/index.html");
expect(text).toBe("Welcome gibson 💩 We have a guide on how to do that here: https://conversejs.org/docs/html/index.html");
expect(references.length).toBe(1);
expect(references).toEqual([{"begin":8,"end":14,"value":"gibson","type":"mention","uri":"xmpp:gibson@montague.lit"}]);
[text, references] = view.model.parseTextForReferences(
'https://linkmauve.fr@Link Mauve/ https://linkmauve.fr/@github/is_back gibson@gibson.com gibson@Link Mauve.fr')
expect(text).toBe(
......@@ -436,4 +447,30 @@ describe("A groupchat message", function () {
done();
}));
});
it("highlights all users mentioned via XEP-0372 references in a quoted message",
mock.initConverse(
['rosterGroupsFetched'], {},
async function (done, _converse) {
const members = [{'jid': 'gibson@gibson.net', 'nick': 'gibson', 'affiliation': 'member'}];
const muc_jid = 'lounge@montague.lit';
await mock.openAndEnterChatRoom(_converse, muc_jid, 'tom', [], members);
const view = _converse.api.chatviews.get(muc_jid);
const textarea = view.el.querySelector('textarea.chat-textarea');
textarea.value = "Welcome @gibson 💩 We have a guide on how to do that here: https://conversejs.org/docs/html/index.html";
const enter_event = {
'target': textarea,
'preventDefault': function preventDefault () {},
'stopPropagation': function stopPropagation () {},
'keyCode': 13 // Enter
}
view.onKeyDown(enter_event);
const message = await u.waitUntil(() => view.el.querySelector('.chat-msg__text'));
expect(message.innerHTML.replace(/<!---->/g, '')).toEqual(
`Welcome <span class="mention">gibson</span> <span title=":poop:">💩</span> `+
`We have a guide on how to do that here: `+
`<a target="_blank" rel="noopener" href="https://conversejs.org/docs/html/index.html">https://conversejs.org/docs/html/index.html</a>`);
done();
}));
});
spec/messages.js
View file @ 8943609d
......@@ -104,7 +104,7 @@ describe("A Chat Message", function () {
expect(textarea.value).toBe('');
const first_msg = view.model.messages.findWhere({'message': 'But soft, what light through yonder airlock breaks?'});
expect(view.el.querySelectorAll('.chat-msg .chat-msg__action').length).toBe(2);
await u.waitUntil(() => view.el.querySelectorAll('.chat-msg .chat-msg__action').length === 2);
let action = view.el.querySelector('.chat-msg .chat-msg__action');
expect(action.textContent.trim()).toBe('Edit');
......@@ -891,8 +891,8 @@ describe("A Chat Message", function () {
await new Promise(resolve => view.model.messages.once('rendered', resolve));
const msg = sizzle('.chat-content .chat-msg:last .chat-msg__text', view.el).pop();
expect(msg.textContent).toEqual(message);
expect(msg.innerHTML.replace(/<!---->/g, ''))
.toEqual('This message contains a hyperlink: <a target="_blank" rel="noopener" href="http://www.opkode.com">www.opkode.com</a>');
await u.waitUntil(() => msg.innerHTML.replace(/<!---->/g, '') ===
'This message contains a hyperlink: <a target="_blank" rel="noopener" href="http://www.opkode.com">www.opkode.com</a>');
done();
}));
......@@ -921,7 +921,7 @@ describe("A Chat Message", function () {
</message>`);
_converse.connection._dataRecv(mock.createRequest(stanza));
await new Promise(resolve => view.model.messages.once('rendered', resolve));
expect(view.content.querySelector('converse-chat-message:last-child .chat-msg__text').innerHTML.replace(/<!---->/g, '')).toBe('Hey\n\nHave you heard the news?');
await u.waitUntil(() => view.content.querySelector('converse-chat-message:last-child .chat-msg__text').innerHTML.replace(/<!---->/g, '') === 'Hey\n\nHave you heard the news?');
stanza = u.toStanza(`
<message from="${contact_jid}"
type="chat"
......
spec/xss.js
View file @ 8943609d
......@@ -144,28 +144,32 @@ describe("XSS", function () {
let msg = sizzle('.chat-content .chat-msg:last .chat-msg__text', view.el).pop();
expect(msg.textContent).toEqual(message);
expect(msg.innerHTML.replace(/<!---->/g, ''))
.toEqual('<a target="_blank" rel="noopener" href="http://www.opkode.com/%27onmouseover=%27alert%281%29%27whatever">http://www.opkode.com/\'onmouseover=\'alert(1)\'whatever</a>');
.toEqual('http://www.opkode.com/\'onmouseover=\'alert(1)\'whatever');
await u.waitUntil(() => msg.innerHTML.replace(/<!---->/g, '') ===
'<a target="_blank" rel="noopener" href="http://www.opkode.com/%27onmouseover=%27alert%281%29%27whatever">http://www.opkode.com/\'onmouseover=\'alert(1)\'whatever</a>');
message = 'http://www.opkode.com/"onmouseover="alert(1)"whatever';
await mock.sendMessage(view, message);
msg = sizzle('.chat-content .chat-msg:last .chat-msg__text', view.el).pop();
expect(msg.textContent).toEqual(message);
expect(msg.innerHTML.replace(/<!---->/g, '')).toEqual('<a target="_blank" rel="noopener" href="http://www.opkode.com/%22onmouseover=%22alert%281%29%22whatever">http://www.opkode.com/"onmouseover="alert(1)"whatever</a>');
await u.waitUntil(() => msg.innerHTML.replace(/<!---->/g, '') ===
'<a target="_blank" rel="noopener" href="http://www.opkode.com/%22onmouseover=%22alert%281%29%22whatever">http://www.opkode.com/"onmouseover="alert(1)"whatever</a>');
message = "https://en.wikipedia.org/wiki/Ender's_Game";
await mock.sendMessage(view, message);
msg = sizzle('.chat-content .chat-msg:last .chat-msg__text', view.el).pop();
expect(msg.textContent).toEqual(message);
expect(msg.innerHTML.replace(/<!---->/g, '')).toEqual('<a target="_blank" rel="noopener" href="https://en.wikipedia.org/wiki/Ender%27s_Game">'+message+'</a>');
await u.waitUntil(() => msg.innerHTML.replace(/<!---->/g, '') === '<a target="_blank" rel="noopener" href="https://en.wikipedia.org/wiki/Ender%27s_Game">'+message+'</a>');
message = "<https://bugs.documentfoundation.org/show_bug.cgi?id=123737>";
await mock.sendMessage(view, message);
msg = sizzle('.chat-content .chat-msg:last .chat-msg__text', view.el).pop();
expect(msg.textContent).toEqual(message);
expect(msg.innerHTML.replace(/<!---->/g, '')).toEqual(
await u.waitUntil(() => msg.innerHTML.replace(/<!---->/g, '') ===
`&lt;<a target="_blank" rel="noopener" href="https://bugs.documentfoundation.org/show_bug.cgi?id=123737">https://bugs.documentfoundation.org/show_bug.cgi?id=123737</a>&gt;`);
message = '<http://www.opkode.com/"onmouseover="alert(1)"whatever>';
......@@ -173,7 +177,7 @@ describe("XSS", function () {
msg = sizzle('.chat-content .chat-msg:last .chat-msg__text', view.el).pop();
expect(msg.textContent).toEqual(message);
expect(msg.innerHTML.replace(/<!---->/g, '')).toEqual(
await u.waitUntil(() => msg.innerHTML.replace(/<!---->/g, '') ===
'&lt;<a target="_blank" rel="noopener" href="http://www.opkode.com/%22onmouseover=%22alert%281%29%22whatever">http://www.opkode.com/"onmouseover="alert(1)"whatever</a>&gt;');
message = `https://www.google.com/maps/place/Kochstraat+6,+2041+CE+Zandvoort/@52.3775999,4.548971,3a,15y,170.85h,88.39t/data=!3m6!1e1!3m4!1sQ7SdHo_bPLPlLlU8GSGWaQ!2e0!7i13312!8i6656!4m5!3m4!1s0x47c5ec1e56f845ad:0x1de0bc4a5771fb08!8m2!3d52.3773668!4d4.5489388!5m1!1e2`
......@@ -181,7 +185,7 @@ describe("XSS", function () {
msg = sizzle('.chat-content .chat-msg:last .chat-msg__text', view.el).pop();
expect(msg.textContent).toEqual(message);
expect(msg.innerHTML.replace(/<!---->/g, '')).toEqual(
await u.waitUntil(() => msg.innerHTML.replace(/<!---->/g, '') ===
`<a target="_blank" rel="noopener" href="https://www.google.com/maps/place/Kochstraat+6,+2041+CE+Zandvoort/@52.3775999,4.548971,3a,15y,170.85h,88.39t/data=%213m6%211e1%213m4%211sQ7SdHo_bPLPlLlU8GSGWaQ%212e0%217i13312%218i6656%214m5%213m4%211s0x47c5ec1e56f845ad:0x1de0bc4a5771fb08%218m2%213d52.3773668%214d4.5489388%215m1%211e2">https://www.google.com/maps/place/Kochstraat+6,+2041+CE+Zandvoort/@52.3775999,4.548971,3a,15y,170.85h,88.39t/data=!3m6!1e1!3m4!1sQ7SdHo_bPLPlLlU8GSGWaQ!2e0!7i13312!8i6656!4m5!3m4!1s0x47c5ec1e56f845ad:0x1de0bc4a5771fb08!8m2!3d52.3773668!4d4.5489388!5m1!1e2</a>`);
done();
}));
......@@ -229,16 +233,16 @@ describe("XSS", function () {
expect(msg.innerHTML.replace(/<!---->/g, '')).toEqual(url);
}
function checkParsedURL ({ entered, href }) {
async function checkParsedURL ({ entered, href }) {
const msg = sizzle('.chat-content .chat-msg:last .chat-msg__text', view.el).pop();
expect(msg.textContent).toEqual(entered);
expect(msg.innerHTML.replace(/<!---->/g, '')).toEqual(`<a target="_blank" rel="noopener" href="${href}">${entered}</a>`);
await u.waitUntil(() => msg.innerHTML.replace(/<!---->/g, '') === `<a target="_blank" rel="noopener" href="${href}">${entered}</a>`);
}
function checkParsedXMPPURL ({ entered, href }) {
async function checkParsedXMPPURL ({ entered, href }) {
const msg = sizzle('.chat-content .chat-msg:last .chat-msg__text', view.el).pop();
expect(msg.textContent.trim()).toEqual(entered);
expect(msg.innerHTML.replace(/<!---->/g, '').trim()).toEqual(`<a target="_blank" rel="noopener" href="${href}">${entered}</a>`);
await u.waitUntil(() => msg.innerHTML.replace(/<!---->/g, '').trim() === `<a target="_blank" rel="noopener" href="${href}">${entered}</a>`);
}
await mock.sendMessage(view, bad_urls[0]);
......@@ -248,22 +252,22 @@ describe("XSS", function () {
checkNonParsedURL(bad_urls[1]);
await mock.sendMessage(view, good_urls[0].entered);
checkParsedURL(good_urls[0]);
await checkParsedURL(good_urls[0]);
await mock.sendMessage(view, good_urls[1].entered);
checkParsedURL(good_urls[1]);
await checkParsedURL(good_urls[1]);
await mock.sendMessage(view, good_urls[2].entered);
checkParsedURL(good_urls[2]);
await checkParsedURL(good_urls[2]);
await mock.sendMessage(view, good_urls[3].entered);
checkParsedXMPPURL(good_urls[3]);
await checkParsedXMPPURL(good_urls[3]);
await mock.sendMessage(view, good_urls[4].entered);
checkParsedURL(good_urls[4]);
await checkParsedURL(good_urls[4]);
await mock.sendMessage(view, good_urls[5].entered);
checkParsedURL(good_urls[5]);
await checkParsedURL(good_urls[5]);
done();
}));
......
src/components/emoji-picker-content.js
View file @ 8943609d
......@@ -92,7 +92,7 @@ export default class EmojiPickerContent extends CustomElement {
return true;
}
} else {
if (this.current_skintone && _converse.emojis.toned.includes(shortname)) {
if (this.current_skintone && converse.emojis.toned.includes(shortname)) {
return true;
}
}
......
src/headless/converse-emoji.js
View file @ 8943609d
......@@ -72,7 +72,7 @@ function getTonedEmojis () {
}
function convertASCII2Emoji (str) {
export function convertASCII2Emoji (str) {
// Replace ASCII smileys
return str.replace(ASCII_REPLACE_REGEX, (entire, m1, m2, m3) => {
if( (typeof m3 === 'undefined') || (m3 === '') || (!(u.unescapeHTML(m3) in ASCII_LIST)) ) {
......@@ -86,7 +86,7 @@ function convertASCII2Emoji (str) {
}
function getEmojiMarkup (data, options={unicode_only: false, add_title_wrapper: false}) {
export function getEmojiMarkup (data, options={unicode_only: false, add_title_wrapper: false}) {
const emoji = data.emoji;
const shortname = data.shortname;
if (emoji) {
......@@ -111,7 +111,7 @@ function getEmojiMarkup (data, options={unicode_only: false, add_title_wrapper:
}
function getShortnameReferences (text) {
export function getShortnameReferences (text) {
const references = [...text.matchAll(shortnames_regex)];
return references.map(ref => {
const cp = converse.emojis.by_sn[ref[0]].cp;
......@@ -126,7 +126,7 @@ function getShortnameReferences (text) {
}
function getCodePointReferences (text) {
export function getCodePointReferences (text) {
const references = [];
const how = {
callback: (icon_id) => {
......@@ -228,18 +228,6 @@ converse.plugins.add('converse-emoji', {
const emojis_by_attribute = {};
Object.assign(u, {
/**
* Replaces emoji shortnames in the passed-in string with unicode or image-based emojis
* (based on the value of `use_system_emojis`).
* @method u.addEmoji
* @param { String } text = The text
* @returns { String } The text with shortnames replaced with emoji unicodes or images.
*/
addEmoji (text) {
const options = {add_title_wrapper: true, unicode_only: false};
return u.shortnamesToEmojis(text, options);
},
/**
* Returns an emoji represented by the passed in shortname.
* Scans the passed in text for shortnames and replaces them with
......
src/templates/directives/body.js
View file @ 8943609d
This diff is collapsed.
src/utils/html.js
View file @ 8943609d
......@@ -409,11 +409,6 @@ u.addHyperlinks = function (text) {
return list;
}
u.geoUriToHttp = function(text, geouri_replacement) {
const regex = /geo:([\-0-9.]+),([\-0-9.]+)(?:,([\-0-9.]+))?(?:\?(.*))?/g;
return text.replace(regex, geouri_replacement);
};
u.httpToGeoUri = function(text, _converse) {
const replacement = 'geo:$1,$2';
return text.replace(_converse.api.settings.get("geouri_regex"), replacement);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7