diff --git a/src/js/Timeline.js b/src/js/Timeline.js index 6b2e26a..fa8f2e5 100644 --- a/src/js/Timeline.js +++ b/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) diff --git a/src/sass/components/messages.sass b/src/sass/components/messages.sass index 3b49265..7f56834 100644 --- a/src/sass/components/messages.sass +++ b/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