Commit 01ee9429 authored by JC Brand's avatar JC Brand

Styling fixes

* Calculate proper length for :geo URI matches
* Don't strip out line-break after quotes, instead use CSS `display: inline-block`
parent 21dfd8a3
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
- #1083: Add support for XEP-0393 Message Styling - #1083: Add support for XEP-0393 Message Styling
- #2275: Allow punctuation to immediately precede a mention - #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 - 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) - New configuration setting: [show_tab_notifications](https://conversejs.org/docs/html/configuration.html#show-tab-notifications)
......
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
color: var(--subdued-color); color: var(--subdued-color);
border-left: 0.3em solid var(--subdued-color); border-left: 0.3em solid var(--subdued-color);
padding-left: 0.5em; padding-left: 0.5em;
display: inline-block;
} }
code { code {
font-family: monospace; font-family: monospace;
......
...@@ -256,7 +256,7 @@ describe("An incoming chat Message", function () { ...@@ -256,7 +256,7 @@ describe("An incoming chat Message", function () {
msg_el = Array.from(view.el.querySelectorAll('converse-chat-message-body')).pop(); msg_el = Array.from(view.el.querySelectorAll('converse-chat-message-body')).pop();
expect(msg_el.innerText).toBe(msg_text); expect(msg_el.innerText).toBe(msg_text);
await u.waitUntil(() => msg_el.innerHTML.replace(/<!---->/g, '') === 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_text = `> This is *quoted* text\n>This is \`also _quoted_\`\nThis is not quoted`;
msg = mock.createChatMessage(_converse, contact_jid, msg_text) msg = mock.createChatMessage(_converse, contact_jid, msg_text)
...@@ -266,7 +266,7 @@ describe("An incoming chat Message", function () { ...@@ -266,7 +266,7 @@ describe("An incoming chat Message", function () {
expect(msg_el.innerText).toBe(msg_text); expect(msg_el.innerText).toBe(msg_text);
await u.waitUntil(() => msg_el.innerHTML.replace(/<!---->/g, '') === 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'+ '<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'); 'This is not quoted');
msg_text = `> > This is doubly quoted text`; msg_text = `> > This is doubly quoted text`;
...@@ -298,7 +298,7 @@ describe("An incoming chat Message", function () { ...@@ -298,7 +298,7 @@ describe("An incoming chat Message", function () {
msg_el = Array.from(view.el.querySelectorAll('converse-chat-message-body')).pop(); msg_el = Array.from(view.el.querySelectorAll('converse-chat-message-body')).pop();
expect(msg_el.innerText).toBe(msg_text); expect(msg_el.innerText).toBe(msg_text);
await u.waitUntil(() => msg_el.innerHTML.replace(/<!---->/g, '') === 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!'); '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' 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 () { ...@@ -308,7 +308,7 @@ describe("An incoming chat Message", function () {
msg_el = Array.from(view.el.querySelectorAll('converse-chat-message-body')).pop(); msg_el = Array.from(view.el.querySelectorAll('converse-chat-message-body')).pop();
expect(msg_el.innerText).toBe(msg_text); expect(msg_el.innerText).toBe(msg_text);
await u.waitUntil(() => msg_el.innerHTML.replace(/<!---->/g, '') === 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>'); '<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'; msg_text = '> Where is it located?\ngeo:37.786971,-122.399677';
...@@ -318,7 +318,7 @@ describe("An incoming chat Message", function () { ...@@ -318,7 +318,7 @@ describe("An incoming chat Message", function () {
msg_el = Array.from(view.el.querySelectorAll('converse-chat-message-body')).pop(); msg_el = Array.from(view.el.querySelectorAll('converse-chat-message-body')).pop();
expect(msg_el.innerText).toBe(msg_text); expect(msg_el.innerText).toBe(msg_text);
await u.waitUntil(() => msg_el.innerHTML.replace(/<!---->/g, '') === 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" '+ '<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>'); '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 () { ...@@ -329,7 +329,16 @@ describe("An incoming chat Message", function () {
msg_el = Array.from(view.el.querySelectorAll('converse-chat-message-body')).pop(); msg_el = Array.from(view.el.querySelectorAll('converse-chat-message-body')).pop();
expect(msg_el.innerText).toBe(msg_text); expect(msg_el.innerText).toBe(msg_text);
await u.waitUntil(() => msg_el.innerHTML.replace(/<!---->/g, '') === 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(); done();
})); }));
}); });
......
...@@ -100,8 +100,8 @@ export class MessageText extends String { ...@@ -100,8 +100,8 @@ export class MessageText extends String {
for (const m of matches) { for (const m of matches) {
this.addTemplateResult( this.addTemplateResult(
m.index+offset, m.index+offset,
m.index+m.input.length+offset, m.index+m[0].length+offset,
u.convertUrlToHyperlink(m.input.replace(regex, _converse.geouri_replacement)) u.convertUrlToHyperlink(m[0].replace(regex, _converse.geouri_replacement))
); );
} }
} }
...@@ -169,7 +169,7 @@ export class MessageText extends String { ...@@ -169,7 +169,7 @@ export class MessageText extends String {
const { d, length } = getDirectiveAndLength(this, i); const { d, length } = getDirectiveAndLength(this, i);
if (d && length) { if (d && length) {
const begin = d === '```' ? i+d.length+1 : i+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; const slice_end = isQuoteDirective(d) ? end : end-d.length;
references.push({ references.push({
'begin': i, 'begin': i,
......
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