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

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

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";
     }