Support edits

src/js/Timeline.js

@@ -40,6 +40,7 @@ class Event extends ElemJS {
 		this.class("c-message")
 		this.data = null
 		this.group = null
+		this.editedAt = null
 		this.update(data)
 	}
 
@@ -55,6 +56,11 @@ class Event extends ElemJS {
 		this.group = group
 	}
 
+	setEdited(time) {
+		this.editedAt = time
+		this.render()
+	}
+
 	update(data) {
 		this.data = data
 		this.render()
@@ -78,6 +84,9 @@ class Event extends ElemJS {
 		} else {
 			this.child(ejs("i").text(`Unsupported event type ${this.data.type}`))
 		}
+		if (this.editedAt) {
+			this.child(ejs("span").class("c-message__edited").text("(edited)").attribute("title", "at " + dateFormatter.format(this.editedAt)))
+		}
 	}
 }
 
@@ -269,6 +278,21 @@ class Timeline extends Subscribable {
 					if (this.map.has(eventData.redacts)) this.map.get(eventData.redacts).removeEvent()
 					continue
 				}
+				// handle edits
+				if (eventData.type === "m.room.message" && eventData.content["m.relates_to"] && eventData.content["m.relates_to"].rel_type === "m.replace") {
+					const replaces = eventData.content["m.relates_to"].event_id
+					if (this.map.has(replaces)) {
+						console.log(eventData)
+						const event = this.map.get(replaces)
+						event.data.content = eventData.content["m.new_content"]
+						event.setEdited(eventData.origin_server_ts)
+						event.update(event.data)
+						continue
+					} else {
+						// uhhhhhhh
+						console.error(`want to replace event ${replaces} with ${eventData.id} but replaced event not found`)
+					}
+				}
 				// add new event
 				const event = new Event(eventData)
 				this.map.set(id, event)

src/sass/components/messages.sass

@@ -52,6 +52,20 @@
   &--pending
     opacity: 0.5
 
+  &__edited
+    margin-left: 4px
+    padding: 1px 3px 1px 2px
+    font-size: 12px
+    font-style: italic
+    line-height: 1
+    color: c.$muted
+    cursor: default
+    border-radius: 4px
+    transition: background-color 0.15s ease-out
+
+    &:hover
+      background-color: c.$darker
+
 .c-message-event
   padding-top: 10px
   padding-left: 6px