set pill avatar through css variables to set on psuedo-element

this way it won't interfere with editor selection/caret

res/css/views/elements/_MessageEditor.scss

@@ -45,8 +45,23 @@ limitations under the License.
             display: inline-block;
             color: $primary-fg-color;
             background-color: $other-user-pill-bg-color;
-            padding-left: 5px;
+            padding-left: 21px;
             padding-right: 5px;
+            position: relative;
+
+            &::before {
+                position: absolute;
+                left: 2px;
+                top: 2px;
+                content: var(--avatar-letter);
+                width: 16px;
+                height: 16px;
+                background: var(--avatar-background);    //set on parent by JS
+                color: var(--avatar-color);
+                background-repeat: no-repeat;
+                background-size: 16px;
+                border-radius: 8px;
+            }
         }
     }
 

src/editor/parts.js

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import AutocompleteWrapperModel from "./autocomplete";
+import Avatar from "../Avatar";
 
 class BasePart {
     constructor(text = "") {
@@ -232,6 +233,20 @@ export class UserPillPart extends PillPart {
         this._member = member;
     }
 
+    toDOMNode() {
+        const pill = super.toDOMNode();
+        const avatarUrl = Avatar.avatarUrlForMember(this._member, 16, 16);
+        if (avatarUrl) {
+            pill.style.setProperty("--avatar-background", `url('${avatarUrl}')`);
+            pill.style.setProperty("--avatar-letter", "''");
+        } else {
+            pill.style.setProperty("--avatar-background", `green`);
+            pill.style.setProperty("--avatar-color", `white`);
+            pill.style.setProperty("--avatar-letter", `'${this.text[0].toUpperCase()}'`);
+        }
+        return pill;
+    }
+
     get type() {
         return "user-pill";
     }