Add support for XEP-0393 message styling

Fixes #1083

Directives are rendered as templates and their bodies are MessageText instances.
We thereby achieve the necessary nesting of directives (and other rich
elements inside directives) by letting each directive
body render itself similarly to how the whole message body is rendered.

.eslintrc.json

@@ -97,7 +97,7 @@
         ],
         "lines-around-comment": "off",
         "lines-around-directive": "off",
-        "max-depth": "error",
+        "max-depth": "off",
         "max-len": "off",
         "max-lines": "off",
         "max-nested-callbacks": "off",
@@ -192,7 +192,7 @@
         "no-undef-init": "error",
         "no-undefined": "off",
         "no-underscore-dangle": "off",
-        "no-unmodified-loop-condition": "error",
+        "no-unmodified-loop-condition": "off",
         "no-unneeded-ternary": "off",
         "no-unused-vars": "error",
         "no-unused-expressions": "off",

CHANGES.md

@@ -19,6 +19,8 @@
 configuration settings should now be accessed via `_converse.api.settings.get` and not directly on the `_converse` object.
 Soon we'll deprecate the latter, so prepare now.
 
+- #515 Add support for XEP-0050 Ad-Hoc commands
+- #1083 Add support for XEP-0393 Message Styling
 - #2231: add sort_by_query and remove sort_by_length
 - #1313: Stylistic improvements to the send button
 - #1481: MUC OMEMO: Error No record for device
@@ -28,7 +30,6 @@ Soon we'll deprecate the latter, so prepare now.
 - #1793: Send button doesn't appear in Firefox in 1:1 chats
 - #1820: Set focus on jid field after controlbox is loaded
 - #1822: Don't log error if user has no bookmarks
-- #515 Add support for XEP-0050 Ad-Hoc commands
 - #1823: New config options [muc_roomid_policy](https://conversejs.org/docs/html/configuration.html#muc-roomid-policy)
     and [muc_roomid_policy_hint](https://conversejs.org/docs/html/configuration.html#muc-roomid-policy-hint)
 - #1826: A user can now add himself as a contact

README.md

@@ -101,6 +101,7 @@ In embedded mode, Converse can be embedded into an element in the DOM.
 - [XEP-0372](https://xmpp.org/extensions/xep-0372.html) References
 - [XEP-0382](https://xmpp.org/extensions/xep-0382.html) Spoiler messages
 - [XEP-0384](https://xmpp.org/extensions/xep-0384.html) OMEMO Encryption
+- [XEP-0393](https://xmpp.org/extensions/xep-0393.html) Message styling
 - [XEP-0422](https://xmpp.org/extensions/xep-0422.html) Message Fastening (limited support)
 - [XEP-0424](https://xmpp.org/extensions/xep-0424.html) Message Retractions
 - [XEP-0425](https://xmpp.org/extensions/xep-0425.html) Message Moderation

index.html

@@ -197,6 +197,7 @@ <h2>Features</h2>
                         <li>Hidden messages (aka Spoilers) (<a href="https://xmpp.org/extensions/xep-0382.html" target="_blank" rel="noopener">XEP 382</a>)</li>
                         <li>Client state indication (<a href="https://xmpp.org/extensions/xep-0352.html" target="_blank" rel="noopener">XEP 352</a>)</li>
                         <li>OMEMO encrypted messaging (<a href="https://xmpp.org/extensions/xep-0384.html" target="_blank" rel="noopener">XEP 384</a>)</li>
+                        <li>Message Styling (<a href="https://xmpp.org/extensions/xep-0384.html" target="_blank" rel="noopener">XEP 393</a>)</li>
                         <li>Anonymous logins, see the <a href="/demo/anonymous.html" target="_blank" rel="noopener">anonymous login demo</a></li>
                         <li>Message corrections, retractions and moderation</li>
                         <li>Translated into over 30 languages</li>

karma.conf.js

@@ -47,6 +47,7 @@ module.exports = function(config) {
       { pattern: "spec/user-details-modal.js", type: 'module' },
       { pattern: "spec/messages.js", type: 'module' },
       { pattern: "spec/corrections.js", type: 'module' },
+      { pattern: "spec/message-styling.js", type: 'module' },
       { pattern: "spec/receipts.js", type: 'module' },
       { pattern: "spec/muc_messages.js", type: 'module' },
       { pattern: "spec/me-messages.js", type: 'module' },

sass/_messages.scss

@@ -1,10 +1,25 @@
 #conversejs {
+    .styling-directive {
+        color: var(--subdued-color);
+    }
+
     .older-msg {
         time {
             font-weight: bold;
         }
     }
     .message {
+        blockquote {
+            margin-left: 0.5em;
+            margin-bottom: 0.25em;
+            padding-right: 1em;
+            color: var(--subdued-color);
+            border-left: 0.3em solid var(--subdued-color);
+            padding-left: 0.5em;
+        }
+        code {
+            font-family: monospace;
+        }
         .mention {
             font-weight: bold;
         }

spec/me-messages.js

@@ -4,7 +4,7 @@ const { u, sizzle, $msg } = converse.env;
 
 describe("A Groupchat Message", function () {
 
-    fit("supports the /me command",
+    it("supports the /me command",
         mock.initConverse(
             ['rosterGroupsFetched'], {},
             async function (done, _converse) {

spec/mentions.js

@@ -107,9 +107,7 @@ describe("An incoming groupchat message", function () {
         const message = await u.waitUntil(() => view.el.querySelector('.chat-msg__text'));
         expect(message.classList.length).toEqual(1);
         expect(message.innerHTML.replace(/<!---->/g, '')).toBe(
-            '&gt;hello <span class="mention">z3r0</span> '+
-            '<span class="mention mention--self badge badge-info">tom</span> '+
-            '<span class="mention">mr.robot</span>, how are you?');
+            '<blockquote>hello <span class="mention">z3r0</span> <span class="mention mention--self badge badge-info">tom</span> <span class="mention">mr.robot</span>, how are you?</blockquote>');
         done();
     }));
 });