Styling fixes

* Calculate proper length for :geo URI matches
* Don't strip out line-break after quotes, instead use CSS `display: inline-block`

CHANGES.md

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

sass/_messages.scss

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

spec/styling.js

@@ -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();
     }));
 });

src/shared/message/text.js

@@ -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,
+                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 {
                 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,