From 5d184b3f77ec8df59355422b981ef1b238f4d7e5 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Tue, 21 May 2019 12:19:35 +0200
Subject: [PATCH] reuse mx_Pill styles for editor pills to avoid style
 duplication

the avatar style code is still different though,
as it's implemented differently

This also prevents updating the css variables when not needed,
which caused the avatar to flicker when updating the editor.
---
 res/css/views/elements/_MessageEditor.scss | 25 ++-------------
 src/editor/parts.js                        | 36 ++++++++++++++++------
 2 files changed, 29 insertions(+), 32 deletions(-)

diff --git a/res/css/views/elements/_MessageEditor.scss b/res/css/views/elements/_MessageEditor.scss
index 15f60f5922..7cf96afb11 100644
--- a/res/css/views/elements/_MessageEditor.scss
+++ b/res/css/views/elements/_MessageEditor.scss
@@ -34,32 +34,11 @@ limitations under the License.
         max-height: 200px;
         overflow-x: auto;
 
-        span {
-            display: inline-block;
-            padding: 0 5px;
-            border-radius: 4px;
-            color: white;
-        }
-
-        span.room-pill {
-            color: $accent-fg-color;
-            background-color: $rte-room-pill-color;
-        }
-
-        span.user-pill {
-            color: $primary-fg-color;
-            background-color: $other-user-pill-bg-color;
-        }
-
-        span.user-pill, span.room-pill {
-            height: 20px;
-            line-height: 20px;
-            border-radius: 16px;
-            display: inline-block;
+        span.mx_UserPill, span.mx_RoomPill {
             padding-left: 21px;
-            padding-right: 5px;
             position: relative;
 
+            // avatar psuedo element
             &::before {
                 position: absolute;
                 left: 2px;
diff --git a/src/editor/parts.js b/src/editor/parts.js
index 62127ca54c..59b62a21d5 100644
--- a/src/editor/parts.js
+++ b/src/editor/parts.js
@@ -154,7 +154,7 @@ class PillPart extends BasePart {
 
     toDOMNode() {
         const container = document.createElement("span");
-        container.className = this.type;
+        container.className = this.className;
         container.appendChild(document.createTextNode(this.text));
         this.setAvatar(container);
         return container;
@@ -163,12 +163,10 @@ class PillPart extends BasePart {
     updateDOMNode(node) {
         const textNode = node.childNodes[0];
         if (textNode.textContent !== this.text) {
-            // console.log("changing pill text from", textNode.textContent, "to", this.text);
             textNode.textContent = this.text;
         }
-        if (node.className !== this.type) {
-            // console.log("turning", node.className, "into", this.type);
-            node.className = this.type;
+        if (node.className !== this.className) {
+            node.className = this.className;
         }
         this.setAvatar(node);
     }
@@ -180,6 +178,20 @@ class PillPart extends BasePart {
                node.childNodes[0].nodeType === Node.TEXT_NODE;
     }
 
+    // helper method for subclasses
+    _setAvatarVars(node, avatarUrl, initialLetter) {
+        const avatarBackground = `url('${avatarUrl}')`;
+        const avatarLetter = `'${initialLetter}'`;
+        // check if the value is changing,
+        // otherwise the avatars flicker on every keystroke while updating.
+        if (node.style.getPropertyValue("--avatar-background") !== avatarBackground) {
+            node.style.setProperty("--avatar-background", avatarBackground);
+        }
+        if (node.style.getPropertyValue("--avatar-letter") !== avatarLetter) {
+            node.style.setProperty("--avatar-letter", avatarLetter);
+        }
+    }
+
     get canEdit() {
         return false;
     }
@@ -245,13 +257,16 @@ export class RoomPillPart extends PillPart {
             initialLetter = Avatar.getInitialLetter(this._room.name);
             avatarUrl = `../../${Avatar.defaultAvatarUrlForString(this._room.roomId)}`;
         }
-        node.style.setProperty("--avatar-background", `url('${avatarUrl}')`);
-        node.style.setProperty("--avatar-letter", `'${initialLetter}'`);
+        this._setAvatarVars(node, avatarUrl, initialLetter);
     }
 
     get type() {
         return "room-pill";
     }
+
+    get className() {
+        return "mx_RoomPill mx_Pill";
+    }
 }
 
 export class UserPillPart extends PillPart {
@@ -273,13 +288,16 @@ export class UserPillPart extends PillPart {
             avatarUrl = `../../${avatarUrl}`;
             initialLetter = Avatar.getInitialLetter(name);
         }
-        node.style.setProperty("--avatar-background", `url('${avatarUrl}')`);
-        node.style.setProperty("--avatar-letter", `'${initialLetter}'`);
+        this._setAvatarVars(node, avatarUrl, initialLetter);
     }
 
     get type() {
         return "user-pill";
     }
+
+    get className() {
+        return "mx_UserPill mx_Pill";
+    }
 }