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

Styling fixes

Browse Source 
* Calculate proper length for :geo URI matches
* Don't strip out line-break after quotes, instead use CSS `display: inline-block`
This commit is contained in:
JC Brand 2020-12-01 10:21:21 +01:00
parent 21dfd8a325
commit 01ee942920
4 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGES.md
View File

@ -4,6 +4,7 @@
- #1083: Add support for XEP-0393 Message Styling
- #2275: Allow punctuation to immediately precede a mention
- Bugfix: Connection protocol not updated based on XEP-0156 connection methods
- Bugfix: `null` inserted by emoji picker and can't switch between skintones
- New configuration setting: [show_tab_notifications](https://conversejs.org/docs/html/configuration.html#show-tab-notifications)

1
sass/_messages.scss
View File

@ -16,6 +16,7 @@
color: var(--subdued-color);
border-left: 0.3em solid var(--subdued-color);
padding-left: 0.5em;
display: inline-block;
}
code {
font-family: monospace;

21
spec/styling.js
View File

@ -256,7 +256,7 @@ describe("An incoming chat Message", function () {
msg_el = Array.from(view.el.querySelectorAll('converse-chat-message-body')).pop();
expect(msg_el.innerText).toBe(msg_text);
await u.waitUntil(() => msg_el.innerHTML.replace(/<!---->/g, '') ===
'<blockquote> This is quoted text\nThis is also quoted</blockquote>This is not quoted');
'<blockquote> This is quoted text\nThis is also quoted</blockquote>\nThis is not quoted');
msg_text = `> This is *quoted* text\n>This is \`also _quoted_\`\nThis is not quoted`;
msg = mock.createChatMessage(_converse, contact_jid, msg_text)
@ -266,7 +266,7 @@ describe("An incoming chat Message", function () {
expect(msg_el.innerText).toBe(msg_text);
await u.waitUntil(() => msg_el.innerHTML.replace(/<!---->/g, '') ===
'<blockquote> This is <span class="styling-directive">*</span><b>quoted</b><span class="styling-directive">*</span> text\n'+
'This is <span class="styling-directive">`</span><code>also _quoted_</code><span class="styling-directive">`</span></blockquote>'+
'This is <span class="styling-directive">`</span><code>also _quoted_</code><span class="styling-directive">`</span></blockquote>\n'+
'This is not quoted');
msg_text = `> > This is doubly quoted text`;
@ -298,7 +298,7 @@ describe("An incoming chat Message", function () {
msg_el = Array.from(view.el.querySelectorAll('converse-chat-message-body')).pop();
expect(msg_el.innerText).toBe(msg_text);
await u.waitUntil(() => msg_el.innerHTML.replace(/<!---->/g, '') ===
'<blockquote> ```\n (println "Hello, world!")</blockquote>\n'+
'<blockquote> ```\n (println "Hello, world!")</blockquote>\n\n'+
'The entire blockquote is a preformatted text block, but this line is plaintext!');
msg_text = '> Also, icons.js is loaded from /dist, instead of dist.\nhttps://conversejs.org/docs/html/configuration.html#assets-path'
@ -308,7 +308,7 @@ describe("An incoming chat Message", function () {
msg_el = Array.from(view.el.querySelectorAll('converse-chat-message-body')).pop();
expect(msg_el.innerText).toBe(msg_text);
await u.waitUntil(() => msg_el.innerHTML.replace(/<!---->/g, '') ===
'<blockquote> Also, icons.js is loaded from /dist, instead of dist.</blockquote>'+
'<blockquote> Also, icons.js is loaded from /dist, instead of dist.</blockquote>\n'+
'<a target="_blank" rel="noopener" href="https://conversejs.org/docs/html/configuration.html#assets-path">https://conversejs.org/docs/html/configuration.html#assets-path</a>');
msg_text = '> Where is it located?\ngeo:37.786971,-122.399677';
@ -318,7 +318,7 @@ describe("An incoming chat Message", function () {
msg_el = Array.from(view.el.querySelectorAll('converse-chat-message-body')).pop();
expect(msg_el.innerText).toBe(msg_text);
await u.waitUntil(() => msg_el.innerHTML.replace(/<!---->/g, '') ===
'<blockquote> Where is it located?</blockquote>'+
'<blockquote> Where is it located?</blockquote>\n'+
'<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>');
@ -329,7 +329,16 @@ describe("An incoming chat Message", function () {
msg_el = Array.from(view.el.querySelectorAll('converse-chat-message-body')).pop();
expect(msg_el.innerText).toBe(msg_text);
await u.waitUntil(() => msg_el.innerHTML.replace(/<!---->/g, '') ===
'<blockquote> What do you think of it?</blockquote> <span title=":poop:">💩</span>');
'<blockquote> What do you think of it?</blockquote>\n <span title=":poop:">💩</span>');
msg_text = '> What do you think of it?\n~hello~';
msg = mock.createChatMessage(_converse, contact_jid, msg_text)
await _converse.handleMessageStanza(msg);
await new Promise(resolve => view.model.messages.once('rendered', resolve));
msg_el = Array.from(view.el.querySelectorAll('converse-chat-message-body')).pop();
expect(msg_el.innerText).toBe(msg_text);
await u.waitUntil(() => msg_el.innerHTML.replace(/<!---->/g, '') ===
'<blockquote> What do you think of it?</blockquote>\n<span class="styling-directive">~</span><del>hello</del><span class="styling-directive">~</span>');
done();
}));
});

6
src/shared/message/text.js
View File

@ -100,8 +100,8 @@ export class MessageText extends String {
for (const m of matches) {
this.addTemplateResult(
m.index+offset,
m.index+m.input.length+offset,
u.convertUrlToHyperlink(m.input.replace(regex, _converse.geouri_replacement))
m.index+m[0].length+offset,
u.convertUrlToHyperlink(m[0].replace(regex, _converse.geouri_replacement))
);
}
}
@ -169,7 +169,7 @@ export class MessageText extends String {
const { d, length } = getDirectiveAndLength(this, i);
if (d && length) {
const begin = d === '```' ? i+d.length+1 : i+d.length;
const end = isQuoteDirective(d) ? i+length+1 : i+length;
const end = i+length;
const slice_end = isQuoteDirective(d) ? end : end-d.length;
references.push({
'begin': i,