feat: message replacement

client/public/css/style.css

@@ -754,7 +754,8 @@ dialog {
 	overflow: hidden hidden;
 }
 
-.message-content.redacted {
+.message-content.redacted,
+.replaced-marker {
 	font-style: italic;
 	color: var(--text-muted);
 }

client/src/comps/ChatInput.ts

@@ -1,4 +1,4 @@
-import { MsgType } from "matrix-js-sdk"
+import { MatrixEvent, MsgType } from "matrix-js-sdk"
 import { matrix } from "../matrix"
 import Component from "./Component"
 import EmojiPicker from "./EmojiPicker"
@@ -9,6 +9,7 @@ import RoomView from "./views/RoomView"
 export default class ChatInput extends Component {
 	readonly emojiPicker: EmojiPicker
 	readonly input: HTMLDivElement
+	replacingEventId: string | null = null
 
 	constructor(view: PostView | RoomView) {
  super("div", { id: "chat-input-container" })
@@ -30,6 +31,7 @@ export default class ChatInput extends Component {
  this.input.setAttribute("placeholder", "Message #channel")
  this.input.addEventListener("keypress", e => {
  if (e.code == "Enter" && !e.shiftKey) {
+ const replacingEventId = this.replacingEventId
  e.preventDefault()
  const content = this.input.innerText.trim()
  if (content == "") return
@@ -52,14 +54,31 @@ export default class ChatInput extends Component {
  const room = view.getCurrentRoom()
  if (!room) return
 
- await matrix.sendMessage(room.roomId, {
- body: content,
- msgtype: MsgType.Text,
- })
+ if (!replacingEventId) {
+ await matrix.sendMessage(room.roomId, {
+ body: content,
+ msgtype: MsgType.Text,
+ })
+ } else {
+ await matrix.sendMessage(room.roomId, {
+ body: "* " + content,
+ msgtype: MsgType.Text,
+ "m.new_content": {
+ body: content,
+ msgtype: MsgType.Text,
+ },
+ // @ts-expect-error the matrix-js-sdk types are terrible
+ "m.relates_to": {
+ rel_type: "m.replace",
+ event_id: replacingEventId,
+ },
+ })
+ }
  }
 
  console.log("Send MSG:", this.input.innerText)
  void createMessage()
+ this.replacingEventId = null
  }
  })
  this.input.addEventListener("input", () => {
@@ -88,4 +107,15 @@ export default class ChatInput extends Component {
  this.element.appendChild(emojiButton)
  this.element.appendChild(this.emojiPicker.element)
 	}
+
+	startReplacement(event: MatrixEvent) {
+ this.replacingEventId = event.getId() || null
+ const content = event.getContent()
+ if (content.msgtype === MsgType.Text) {
+ if (this.input) {
+ this.input.textContent = content.body as string || ""
+ this.input.focus()
+ }
+ }
+	}
 }

client/src/comps/events/ChatMessageBase.ts

@@ -1,10 +1,12 @@
 import { twemojiParse } from "../../md"
-import { Direction, MatrixEvent } from "matrix-js-sdk"
+import { Direction, IContent, MatrixEvent } from "matrix-js-sdk"
 import { getMXUser, matrix } from "../../matrix"
 import EventBase from "./EventBase"
 import { relativeTimeFormat } from "../../intl"
 import ContextMenu, { ContextMenuItem } from "../ContextMenu"
 import ConfirmForm from "../forms/ConfirmForm"
+import { app } from "../../main"
+import RoomView from "../views/RoomView"
 
 export default class ChatMessageBase extends EventBase {
 	constructor(msg: MatrixEvent) {
@@ -24,8 +26,9 @@ export default class ChatMessageBase extends EventBase {
 
  const ctxMenu = new ContextMenu("message-menu", this.element)
  const ctxMenuItems: ContextMenuItem[] = []
+ const isMyEvent = this.message.getSender() === matrix.getUserId()
  const canRedact =
-this.message.getSender() === matrix.getUserId() ||
+isMyEvent ||
  room
  ?.getLiveTimeline()
  .getState(Direction.Forward)
@@ -53,13 +56,37 @@ export default class ChatMessageBase extends EventBase {
  },
  })
  }
+ if (isMyEvent) {
+ ctxMenuItems.push({
+ label: "Replace",
+ action: () => {
+ if (!this.message) return
+ const view = app.getCurrentView()
+ if (!(view instanceof RoomView)) return
+ view.chatInput.startReplacement(this.message)
+ }
+ })
+ }
 
  ctxMenu.reset(ctxMenuItems)
  this.element.appendChild(ctxMenu.element)
 
  void this.reset()
 	}
 
+	async replaceEvent(event: MatrixEvent) {
+ this.message = event
+ await this.reset()
+	}
+
+	getContent() {
+ const content = this.message.getContent()
+ if (content["m.relates_to"]?.rel_type === "m.replace") {
+ return content["m.new_content"] as IContent || content
+ }
+ return content
+	}
+
 	async reset() {
  const msg = this.message
  const { displayname } = await getMXUser(msg.getSender()!)
@@ -78,6 +105,15 @@ export default class ChatMessageBase extends EventBase {
  return
  }
 
+ console.log("Resetting message:", msg.getId(), msg.getContent())
+ if (msg.getContent()["m.relates_to"]?.rel_type === "m.replace" || msg.getOriginalContent() != msg.getContent()) {
+ const replacedMarker = document.createElement("span")
+ replacedMarker.className = "replaced-marker"
+ replacedMarker.textContent = " (replaced)"
+ this.contentElement.appendChild(replacedMarker)
+ return
+ }
+
  this.contentElement
  .querySelectorAll<HTMLSpanElement>("[data-mx-spoiler]")
  .forEach(el => {

client/src/comps/events/EventBase.ts

@@ -3,7 +3,7 @@ import Component from "../Component"
 import Avatar from "../Avatar"
 
 export default abstract class EventBase extends Component {
-readonly message: MatrixEvent
+	message: MatrixEvent
 	readonly mainElement: HTMLDivElement
 	readonly asideElement: HTMLDivElement
 	readonly contentElement: HTMLDivElement

client/src/comps/events/RoomAudioMessage.ts

@@ -11,7 +11,7 @@ export default class RoomAudioMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
  const blobUrl =
  typeof content.url == "string" ? await getMXCData(content.url) : null
 

client/src/comps/events/RoomEmoteMessage.ts

@@ -20,9 +20,9 @@ export default class RoomEmoteMessage extends ChatMessageBase {
  this.contentElement.appendChild(emote)
 
  const body = document.createElement("span")
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
 
- switch (this.message.getContent().format) {
+ switch (this.getContent().format) {
  case "org.matrix.custom.html":
  body.innerHTML = purifyHTML(content.formatted_body ?? "")
  break

client/src/comps/events/RoomFileMessage.ts

@@ -11,7 +11,7 @@ export default class RoomFileMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
  const blobUrl =
  typeof content.url == "string" ? await getMXCData(content.url) : null
 

client/src/comps/events/RoomImageMessage.ts

@@ -11,7 +11,7 @@ export default class RoomImageMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
  const mxcUrl = typeof content.url == "string" ? content.url : ""
 
  const img = new MXCImage(mxcUrl)

client/src/comps/events/RoomNoticeMessage.ts

@@ -10,9 +10,9 @@ export default class RoomNoticeMessage extends ChatMessageBase {
 	}
 
 	async reset(): Promise<void> {
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
 
- switch (this.message.getContent().format) {
+ switch (this.getContent().format) {
  case "org.matrix.custom.html":
  this.contentElement.innerHTML = purifyHTML(content.formatted_body || "")
  break

client/src/comps/events/RoomTextMessage.ts

@@ -10,9 +10,9 @@ export default class RoomTextMessage extends ChatMessageBase {
 	}
 
 	async reset(): Promise<void> {
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
 
- switch (this.message.getContent().format) {
+ switch (this.getContent().format) {
  case "org.matrix.custom.html":
  this.contentElement.innerHTML = purifyHTML(content.formatted_body || "")
  break

client/src/comps/events/RoomVideoMessage.ts

@@ -11,7 +11,7 @@ export default class RoomVideoMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
  const blobUrl =
  typeof content.url == "string" ? await getMXCData(content.url) : null
 

client/src/comps/views/RoomView.ts

@@ -1,10 +1,11 @@
 import View from "../views//View"
 import ChatInput from "../ChatInput"
 import EventList from "../EventList"
-import { MatrixEvent, Room, RoomEvent } from "matrix-js-sdk"
+import { MatrixEvent, MatrixEventEvent, Room, RoomEvent } from "matrix-js-sdk"
 import { matrix } from "../../matrix"
 import MemberList from "../MemberList"
 import { parseEventContent } from "../../events"
+import ChatMessageBase from "../events/ChatMessageBase"
 
 export default class RoomView extends View {
 	private currentRoom?: Room
@@ -40,7 +41,27 @@ export default class RoomView extends View {
 	onTimelineEvent(room: Room) {
  return (event: MatrixEvent) => {
  if (event.getRoomId() === room.roomId) {
+ if (event.getContent()["m.relates_to"]?.rel_type === "m.replace") {
+ const eventId = event.getContent()["m.relates_to"]?.event_id
+ if (!eventId) return
+ const comp = this.msgList.eventComponents.get(eventId)
+ if (!comp) return
+ if (!(comp instanceof ChatMessageBase)) return
+ void comp.replaceEvent(event)
+ this.msgList.eventComponents.set(event.getId()!, comp)
+ return
+ }
  this.msgList.pushMessage(event)
+ if (event.isSending()) {
+ const oldId = event.getId()
+ if (!oldId) return
+ event.once(MatrixEventEvent.LocalEventIdReplaced, (newEvent) => {
+ console.log("Event ID replaced:", oldId, "->", newEvent.getId())
+ const comp = this.msgList.eventComponents.get(oldId)
+ this.msgList.eventComponents.delete(oldId)
+ this.msgList.eventComponents.set(newEvent.getId()!, comp!)
+ })
+ }
  }
  }
 	}
@@ -65,7 +86,9 @@ export default class RoomView extends View {
  this.head.reset(room.name)
  await matrix.roomInitialSync(room.roomId, 20)
  const events = room.getLiveTimeline().getEvents()
- this.msgList.reset(events)
+ this.msgList.reset(events.filter(e => {
+ return e.getContent()["m.relates_to"]?.rel_type !== "m.replace"
+ }))
 
  if (this.timelineEventHandler)
  matrix.off(RoomEvent.Timeline, this.timelineEventHandler)

client/public/css/style.css

@@ -754,7 +754,8 @@ dialog {
 	overflow: hidden hidden;
 }
 
-.message-content.redacted {
+.message-content.redacted,
+.replaced-marker {
 	font-style: italic;
 	color: var(--text-muted);
 }

client/src/comps/ChatInput.ts

@@ -1,4 +1,4 @@
-import { MsgType } from "matrix-js-sdk"
+import { MatrixEvent, MsgType } from "matrix-js-sdk"
 import { matrix } from "../matrix"
 import Component from "./Component"
 import EmojiPicker from "./EmojiPicker"
@@ -9,6 +9,7 @@ import RoomView from "./views/RoomView"
 export default class ChatInput extends Component {
 	readonly emojiPicker: EmojiPicker
 	readonly input: HTMLDivElement
+	replacingEventId: string | null = null
 
 	constructor(view: PostView | RoomView) {
  super("div", { id: "chat-input-container" })
@@ -30,6 +31,7 @@ export default class ChatInput extends Component {
  this.input.setAttribute("placeholder", "Message #channel")
  this.input.addEventListener("keypress", e => {
  if (e.code == "Enter" && !e.shiftKey) {
+ const replacingEventId = this.replacingEventId
  e.preventDefault()
  const content = this.input.innerText.trim()
  if (content == "") return
@@ -52,14 +54,31 @@ export default class ChatInput extends Component {
  const room = view.getCurrentRoom()
  if (!room) return
 
- await matrix.sendMessage(room.roomId, {
- body: content,
- msgtype: MsgType.Text,
- })
+ if (!replacingEventId) {
+ await matrix.sendMessage(room.roomId, {
+ body: content,
+ msgtype: MsgType.Text,
+ })
+ } else {
+ await matrix.sendMessage(room.roomId, {
+ body: "* " + content,
+ msgtype: MsgType.Text,
+ "m.new_content": {
+ body: content,
+ msgtype: MsgType.Text,
+ },
+ // @ts-expect-error the matrix-js-sdk types are terrible
+ "m.relates_to": {
+ rel_type: "m.replace",
+ event_id: replacingEventId,
+ },
+ })
+ }
  }
 
  console.log("Send MSG:", this.input.innerText)
  void createMessage()
+ this.replacingEventId = null
  }
  })
  this.input.addEventListener("input", () => {
@@ -88,4 +107,15 @@ export default class ChatInput extends Component {
  this.element.appendChild(emojiButton)
  this.element.appendChild(this.emojiPicker.element)
 	}
+
+	startReplacement(event: MatrixEvent) {
+ this.replacingEventId = event.getId() || null
+ const content = event.getContent()
+ if (content.msgtype === MsgType.Text) {
+ if (this.input) {
+ this.input.textContent = content.body as string || ""
+ this.input.focus()
+ }
+ }
+	}
 }

client/src/comps/events/ChatMessageBase.ts

@@ -1,10 +1,12 @@
 import { twemojiParse } from "../../md"
-import { Direction, MatrixEvent } from "matrix-js-sdk"
+import { Direction, IContent, MatrixEvent } from "matrix-js-sdk"
 import { getMXUser, matrix } from "../../matrix"
 import EventBase from "./EventBase"
 import { relativeTimeFormat } from "../../intl"
 import ContextMenu, { ContextMenuItem } from "../ContextMenu"
 import ConfirmForm from "../forms/ConfirmForm"
+import { app } from "../../main"
+import RoomView from "../views/RoomView"
 
 export default class ChatMessageBase extends EventBase {
 	constructor(msg: MatrixEvent) {
@@ -24,8 +26,9 @@ export default class ChatMessageBase extends EventBase {
 
  const ctxMenu = new ContextMenu("message-menu", this.element)
  const ctxMenuItems: ContextMenuItem[] = []
+ const isMyEvent = this.message.getSender() === matrix.getUserId()
  const canRedact =
-this.message.getSender() === matrix.getUserId() ||
+isMyEvent ||
  room
  ?.getLiveTimeline()
  .getState(Direction.Forward)
@@ -53,13 +56,37 @@ export default class ChatMessageBase extends EventBase {
  },
  })
  }
+ if (isMyEvent) {
+ ctxMenuItems.push({
+ label: "Replace",
+ action: () => {
+ if (!this.message) return
+ const view = app.getCurrentView()
+ if (!(view instanceof RoomView)) return
+ view.chatInput.startReplacement(this.message)
+ }
+ })
+ }
 
  ctxMenu.reset(ctxMenuItems)
  this.element.appendChild(ctxMenu.element)
 
  void this.reset()
 	}
 
+	async replaceEvent(event: MatrixEvent) {
+ this.message = event
+ await this.reset()
+	}
+
+	getContent() {
+ const content = this.message.getContent()
+ if (content["m.relates_to"]?.rel_type === "m.replace") {
+ return content["m.new_content"] as IContent || content
+ }
+ return content
+	}
+
 	async reset() {
  const msg = this.message
  const { displayname } = await getMXUser(msg.getSender()!)
@@ -78,6 +105,15 @@ export default class ChatMessageBase extends EventBase {
  return
  }
 
+ console.log("Resetting message:", msg.getId(), msg.getContent())
+ if (msg.getContent()["m.relates_to"]?.rel_type === "m.replace" || msg.getOriginalContent() != msg.getContent()) {
+ const replacedMarker = document.createElement("span")
+ replacedMarker.className = "replaced-marker"
+ replacedMarker.textContent = " (replaced)"
+ this.contentElement.appendChild(replacedMarker)
+ return
+ }
+
  this.contentElement
  .querySelectorAll<HTMLSpanElement>("[data-mx-spoiler]")
  .forEach(el => {

client/src/comps/events/EventBase.ts

@@ -3,7 +3,7 @@ import Component from "../Component"
 import Avatar from "../Avatar"
 
 export default abstract class EventBase extends Component {
-readonly message: MatrixEvent
+	message: MatrixEvent
 	readonly mainElement: HTMLDivElement
 	readonly asideElement: HTMLDivElement
 	readonly contentElement: HTMLDivElement

client/src/comps/events/RoomAudioMessage.ts

@@ -11,7 +11,7 @@ export default class RoomAudioMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
  const blobUrl =
  typeof content.url == "string" ? await getMXCData(content.url) : null
 

client/src/comps/events/RoomEmoteMessage.ts

@@ -20,9 +20,9 @@ export default class RoomEmoteMessage extends ChatMessageBase {
  this.contentElement.appendChild(emote)
 
  const body = document.createElement("span")
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
 
- switch (this.message.getContent().format) {
+ switch (this.getContent().format) {
  case "org.matrix.custom.html":
  body.innerHTML = purifyHTML(content.formatted_body ?? "")
  break

client/src/comps/events/RoomFileMessage.ts

@@ -11,7 +11,7 @@ export default class RoomFileMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
  const blobUrl =
  typeof content.url == "string" ? await getMXCData(content.url) : null
 

client/src/comps/events/RoomImageMessage.ts

@@ -11,7 +11,7 @@ export default class RoomImageMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
  const mxcUrl = typeof content.url == "string" ? content.url : ""
 
  const img = new MXCImage(mxcUrl)

client/src/comps/events/RoomNoticeMessage.ts

@@ -10,9 +10,9 @@ export default class RoomNoticeMessage extends ChatMessageBase {
 	}
 
 	async reset(): Promise<void> {
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
 
- switch (this.message.getContent().format) {
+ switch (this.getContent().format) {
  case "org.matrix.custom.html":
  this.contentElement.innerHTML = purifyHTML(content.formatted_body || "")
  break

client/src/comps/events/RoomTextMessage.ts

@@ -10,9 +10,9 @@ export default class RoomTextMessage extends ChatMessageBase {
 	}
 
 	async reset(): Promise<void> {
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
 
- switch (this.message.getContent().format) {
+ switch (this.getContent().format) {
  case "org.matrix.custom.html":
  this.contentElement.innerHTML = purifyHTML(content.formatted_body || "")
  break

client/src/comps/events/RoomVideoMessage.ts

@@ -11,7 +11,7 @@ export default class RoomVideoMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
  const blobUrl =
  typeof content.url == "string" ? await getMXCData(content.url) : null
 

client/src/comps/views/RoomView.ts

@@ -1,10 +1,11 @@
 import View from "../views//View"
 import ChatInput from "../ChatInput"
 import EventList from "../EventList"
-import { MatrixEvent, Room, RoomEvent } from "matrix-js-sdk"
+import { MatrixEvent, MatrixEventEvent, Room, RoomEvent } from "matrix-js-sdk"
 import { matrix } from "../../matrix"
 import MemberList from "../MemberList"
 import { parseEventContent } from "../../events"
+import ChatMessageBase from "../events/ChatMessageBase"
 
 export default class RoomView extends View {
 	private currentRoom?: Room
@@ -40,7 +41,27 @@ export default class RoomView extends View {
 	onTimelineEvent(room: Room) {
  return (event: MatrixEvent) => {
  if (event.getRoomId() === room.roomId) {
+ if (event.getContent()["m.relates_to"]?.rel_type === "m.replace") {
+ const eventId = event.getContent()["m.relates_to"]?.event_id
+ if (!eventId) return
+ const comp = this.msgList.eventComponents.get(eventId)
+ if (!comp) return
+ if (!(comp instanceof ChatMessageBase)) return
+ void comp.replaceEvent(event)
+ this.msgList.eventComponents.set(event.getId()!, comp)
+ return
+ }
  this.msgList.pushMessage(event)
+ if (event.isSending()) {
+ const oldId = event.getId()
+ if (!oldId) return
+ event.once(MatrixEventEvent.LocalEventIdReplaced, (newEvent) => {
+ console.log("Event ID replaced:", oldId, "->", newEvent.getId())
+ const comp = this.msgList.eventComponents.get(oldId)
+ this.msgList.eventComponents.delete(oldId)
+ this.msgList.eventComponents.set(newEvent.getId()!, comp!)
+ })
+ }
  }
  }
 	}
@@ -65,7 +86,9 @@ export default class RoomView extends View {
  this.head.reset(room.name)
  await matrix.roomInitialSync(room.roomId, 20)
  const events = room.getLiveTimeline().getEvents()
- this.msgList.reset(events)
+ this.msgList.reset(events.filter(e => {
+ return e.getContent()["m.relates_to"]?.rel_type !== "m.replace"
+ }))
 
  if (this.timelineEventHandler)
  matrix.off(RoomEvent.Timeline, this.timelineEventHandler)

client/public/css/style.css

@@ -754,7 +754,8 @@ dialog {
 	overflow: hidden hidden;
 }
 
-.message-content.redacted {
+.message-content.redacted,
+.replaced-marker {
 	font-style: italic;
 	color: var(--text-muted);
 }

client/src/comps/ChatInput.ts

@@ -1,4 +1,4 @@
-import { MsgType } from "matrix-js-sdk"
+import { MatrixEvent, MsgType } from "matrix-js-sdk"
 import { matrix } from "../matrix"
 import Component from "./Component"
 import EmojiPicker from "./EmojiPicker"
@@ -9,6 +9,7 @@ import RoomView from "./views/RoomView"
 export default class ChatInput extends Component {
 	readonly emojiPicker: EmojiPicker
 	readonly input: HTMLDivElement
+	replacingEventId: string | null = null
 
 	constructor(view: PostView | RoomView) {
  super("div", { id: "chat-input-container" })
@@ -30,6 +31,7 @@ export default class ChatInput extends Component {
  this.input.setAttribute("placeholder", "Message #channel")
  this.input.addEventListener("keypress", e => {
  if (e.code == "Enter" && !e.shiftKey) {
+ const replacingEventId = this.replacingEventId
  e.preventDefault()
  const content = this.input.innerText.trim()
  if (content == "") return
@@ -52,14 +54,31 @@ export default class ChatInput extends Component {
  const room = view.getCurrentRoom()
  if (!room) return
 
- await matrix.sendMessage(room.roomId, {
- body: content,
- msgtype: MsgType.Text,
- })
+ if (!replacingEventId) {
+ await matrix.sendMessage(room.roomId, {
+ body: content,
+ msgtype: MsgType.Text,
+ })
+ } else {
+ await matrix.sendMessage(room.roomId, {
+ body: "* " + content,
+ msgtype: MsgType.Text,
+ "m.new_content": {
+ body: content,
+ msgtype: MsgType.Text,
+ },
+ // @ts-expect-error the matrix-js-sdk types are terrible
+ "m.relates_to": {
+ rel_type: "m.replace",
+ event_id: replacingEventId,
+ },
+ })
+ }
  }
 
  console.log("Send MSG:", this.input.innerText)
  void createMessage()
+ this.replacingEventId = null
  }
  })
  this.input.addEventListener("input", () => {
@@ -88,4 +107,15 @@ export default class ChatInput extends Component {
  this.element.appendChild(emojiButton)
  this.element.appendChild(this.emojiPicker.element)
 	}
+
+	startReplacement(event: MatrixEvent) {
+ this.replacingEventId = event.getId() || null
+ const content = event.getContent()
+ if (content.msgtype === MsgType.Text) {
+ if (this.input) {
+ this.input.textContent = content.body as string || ""
+ this.input.focus()
+ }
+ }
+	}
 }

client/src/comps/events/ChatMessageBase.ts

@@ -1,10 +1,12 @@
 import { twemojiParse } from "../../md"
-import { Direction, MatrixEvent } from "matrix-js-sdk"
+import { Direction, IContent, MatrixEvent } from "matrix-js-sdk"
 import { getMXUser, matrix } from "../../matrix"
 import EventBase from "./EventBase"
 import { relativeTimeFormat } from "../../intl"
 import ContextMenu, { ContextMenuItem } from "../ContextMenu"
 import ConfirmForm from "../forms/ConfirmForm"
+import { app } from "../../main"
+import RoomView from "../views/RoomView"
 
 export default class ChatMessageBase extends EventBase {
 	constructor(msg: MatrixEvent) {
@@ -24,8 +26,9 @@ export default class ChatMessageBase extends EventBase {
 
  const ctxMenu = new ContextMenu("message-menu", this.element)
  const ctxMenuItems: ContextMenuItem[] = []
+ const isMyEvent = this.message.getSender() === matrix.getUserId()
  const canRedact =
-this.message.getSender() === matrix.getUserId() ||
+isMyEvent ||
  room
  ?.getLiveTimeline()
  .getState(Direction.Forward)
@@ -53,13 +56,37 @@ export default class ChatMessageBase extends EventBase {
  },
  })
  }
+ if (isMyEvent) {
+ ctxMenuItems.push({
+ label: "Replace",
+ action: () => {
+ if (!this.message) return
+ const view = app.getCurrentView()
+ if (!(view instanceof RoomView)) return
+ view.chatInput.startReplacement(this.message)
+ }
+ })
+ }
 
  ctxMenu.reset(ctxMenuItems)
  this.element.appendChild(ctxMenu.element)
 
  void this.reset()
 	}
 
+	async replaceEvent(event: MatrixEvent) {
+ this.message = event
+ await this.reset()
+	}
+
+	getContent() {
+ const content = this.message.getContent()
+ if (content["m.relates_to"]?.rel_type === "m.replace") {
+ return content["m.new_content"] as IContent || content
+ }
+ return content
+	}
+
 	async reset() {
  const msg = this.message
  const { displayname } = await getMXUser(msg.getSender()!)
@@ -78,6 +105,15 @@ export default class ChatMessageBase extends EventBase {
  return
  }
 
+ console.log("Resetting message:", msg.getId(), msg.getContent())
+ if (msg.getContent()["m.relates_to"]?.rel_type === "m.replace" || msg.getOriginalContent() != msg.getContent()) {
+ const replacedMarker = document.createElement("span")
+ replacedMarker.className = "replaced-marker"
+ replacedMarker.textContent = " (replaced)"
+ this.contentElement.appendChild(replacedMarker)
+ return
+ }
+
  this.contentElement
  .querySelectorAll<HTMLSpanElement>("[data-mx-spoiler]")
  .forEach(el => {

client/src/comps/events/EventBase.ts

@@ -3,7 +3,7 @@ import Component from "../Component"
 import Avatar from "../Avatar"
 
 export default abstract class EventBase extends Component {
-readonly message: MatrixEvent
+	message: MatrixEvent
 	readonly mainElement: HTMLDivElement
 	readonly asideElement: HTMLDivElement
 	readonly contentElement: HTMLDivElement

client/src/comps/events/RoomAudioMessage.ts

@@ -11,7 +11,7 @@ export default class RoomAudioMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
  const blobUrl =
  typeof content.url == "string" ? await getMXCData(content.url) : null
 

client/src/comps/events/RoomEmoteMessage.ts

@@ -20,9 +20,9 @@ export default class RoomEmoteMessage extends ChatMessageBase {
  this.contentElement.appendChild(emote)
 
  const body = document.createElement("span")
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
 
- switch (this.message.getContent().format) {
+ switch (this.getContent().format) {
  case "org.matrix.custom.html":
  body.innerHTML = purifyHTML(content.formatted_body ?? "")
  break

client/src/comps/events/RoomFileMessage.ts

@@ -11,7 +11,7 @@ export default class RoomFileMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
  const blobUrl =
  typeof content.url == "string" ? await getMXCData(content.url) : null
 

client/src/comps/events/RoomImageMessage.ts

@@ -11,7 +11,7 @@ export default class RoomImageMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
  const mxcUrl = typeof content.url == "string" ? content.url : ""
 
  const img = new MXCImage(mxcUrl)

client/src/comps/events/RoomNoticeMessage.ts

@@ -10,9 +10,9 @@ export default class RoomNoticeMessage extends ChatMessageBase {
 	}
 
 	async reset(): Promise<void> {
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
 
- switch (this.message.getContent().format) {
+ switch (this.getContent().format) {
  case "org.matrix.custom.html":
  this.contentElement.innerHTML = purifyHTML(content.formatted_body || "")
  break

client/src/comps/events/RoomTextMessage.ts

@@ -10,9 +10,9 @@ export default class RoomTextMessage extends ChatMessageBase {
 	}
 
 	async reset(): Promise<void> {
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
 
- switch (this.message.getContent().format) {
+ switch (this.getContent().format) {
  case "org.matrix.custom.html":
  this.contentElement.innerHTML = purifyHTML(content.formatted_body || "")
  break

client/src/comps/events/RoomVideoMessage.ts

@@ -11,7 +11,7 @@ export default class RoomVideoMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
  const blobUrl =
  typeof content.url == "string" ? await getMXCData(content.url) : null
 

client/src/comps/views/RoomView.ts

@@ -1,10 +1,11 @@
 import View from "../views//View"
 import ChatInput from "../ChatInput"
 import EventList from "../EventList"
-import { MatrixEvent, Room, RoomEvent } from "matrix-js-sdk"
+import { MatrixEvent, MatrixEventEvent, Room, RoomEvent } from "matrix-js-sdk"
 import { matrix } from "../../matrix"
 import MemberList from "../MemberList"
 import { parseEventContent } from "../../events"
+import ChatMessageBase from "../events/ChatMessageBase"
 
 export default class RoomView extends View {
 	private currentRoom?: Room
@@ -40,7 +41,27 @@ export default class RoomView extends View {
 	onTimelineEvent(room: Room) {
  return (event: MatrixEvent) => {
  if (event.getRoomId() === room.roomId) {
+ if (event.getContent()["m.relates_to"]?.rel_type === "m.replace") {
+ const eventId = event.getContent()["m.relates_to"]?.event_id
+ if (!eventId) return
+ const comp = this.msgList.eventComponents.get(eventId)
+ if (!comp) return
+ if (!(comp instanceof ChatMessageBase)) return
+ void comp.replaceEvent(event)
+ this.msgList.eventComponents.set(event.getId()!, comp)
+ return
+ }
  this.msgList.pushMessage(event)
+ if (event.isSending()) {
+ const oldId = event.getId()
+ if (!oldId) return
+ event.once(MatrixEventEvent.LocalEventIdReplaced, (newEvent) => {
+ console.log("Event ID replaced:", oldId, "->", newEvent.getId())
+ const comp = this.msgList.eventComponents.get(oldId)
+ this.msgList.eventComponents.delete(oldId)
+ this.msgList.eventComponents.set(newEvent.getId()!, comp!)
+ })
+ }
  }
  }
 	}
@@ -65,7 +86,9 @@ export default class RoomView extends View {
  this.head.reset(room.name)
  await matrix.roomInitialSync(room.roomId, 20)
  const events = room.getLiveTimeline().getEvents()
- this.msgList.reset(events)
+ this.msgList.reset(events.filter(e => {
+ return e.getContent()["m.relates_to"]?.rel_type !== "m.replace"
+ }))
 
  if (this.timelineEventHandler)
  matrix.off(RoomEvent.Timeline, this.timelineEventHandler)

client/public/css/style.css

@@ -754,7 +754,8 @@ dialog {
 	overflow: hidden hidden;
 }
 
-.message-content.redacted {
+.message-content.redacted,
+.replaced-marker {
 	font-style: italic;
 	color: var(--text-muted);
 }

client/src/comps/ChatInput.ts

@@ -1,4 +1,4 @@
-import { MsgType } from "matrix-js-sdk"
+import { MatrixEvent, MsgType } from "matrix-js-sdk"
 import { matrix } from "../matrix"
 import Component from "./Component"
 import EmojiPicker from "./EmojiPicker"
@@ -9,6 +9,7 @@ import RoomView from "./views/RoomView"
 export default class ChatInput extends Component {
 	readonly emojiPicker: EmojiPicker
 	readonly input: HTMLDivElement
+	replacingEventId: string | null = null
 
 	constructor(view: PostView | RoomView) {
  super("div", { id: "chat-input-container" })
@@ -30,6 +31,7 @@ export default class ChatInput extends Component {
  this.input.setAttribute("placeholder", "Message #channel")
  this.input.addEventListener("keypress", e => {
  if (e.code == "Enter" && !e.shiftKey) {
+ const replacingEventId = this.replacingEventId
  e.preventDefault()
  const content = this.input.innerText.trim()
  if (content == "") return
@@ -52,14 +54,31 @@ export default class ChatInput extends Component {
  const room = view.getCurrentRoom()
  if (!room) return
 
- await matrix.sendMessage(room.roomId, {
- body: content,
- msgtype: MsgType.Text,
- })
+ if (!replacingEventId) {
+ await matrix.sendMessage(room.roomId, {
+ body: content,
+ msgtype: MsgType.Text,
+ })
+ } else {
+ await matrix.sendMessage(room.roomId, {
+ body: "* " + content,
+ msgtype: MsgType.Text,
+ "m.new_content": {
+ body: content,
+ msgtype: MsgType.Text,
+ },
+ // @ts-expect-error the matrix-js-sdk types are terrible
+ "m.relates_to": {
+ rel_type: "m.replace",
+ event_id: replacingEventId,
+ },
+ })
+ }
  }
 
  console.log("Send MSG:", this.input.innerText)
  void createMessage()
+ this.replacingEventId = null
  }
  })
  this.input.addEventListener("input", () => {
@@ -88,4 +107,15 @@ export default class ChatInput extends Component {
  this.element.appendChild(emojiButton)
  this.element.appendChild(this.emojiPicker.element)
 	}
+
+	startReplacement(event: MatrixEvent) {
+ this.replacingEventId = event.getId() || null
+ const content = event.getContent()
+ if (content.msgtype === MsgType.Text) {
+ if (this.input) {
+ this.input.textContent = content.body as string || ""
+ this.input.focus()
+ }
+ }
+	}
 }

client/src/comps/events/ChatMessageBase.ts

@@ -1,10 +1,12 @@
 import { twemojiParse } from "../../md"
-import { Direction, MatrixEvent } from "matrix-js-sdk"
+import { Direction, IContent, MatrixEvent } from "matrix-js-sdk"
 import { getMXUser, matrix } from "../../matrix"
 import EventBase from "./EventBase"
 import { relativeTimeFormat } from "../../intl"
 import ContextMenu, { ContextMenuItem } from "../ContextMenu"
 import ConfirmForm from "../forms/ConfirmForm"
+import { app } from "../../main"
+import RoomView from "../views/RoomView"
 
 export default class ChatMessageBase extends EventBase {
 	constructor(msg: MatrixEvent) {
@@ -24,8 +26,9 @@ export default class ChatMessageBase extends EventBase {
 
  const ctxMenu = new ContextMenu("message-menu", this.element)
  const ctxMenuItems: ContextMenuItem[] = []
+ const isMyEvent = this.message.getSender() === matrix.getUserId()
  const canRedact =
-this.message.getSender() === matrix.getUserId() ||
+isMyEvent ||
  room
  ?.getLiveTimeline()
  .getState(Direction.Forward)
@@ -53,13 +56,37 @@ export default class ChatMessageBase extends EventBase {
  },
  })
  }
+ if (isMyEvent) {
+ ctxMenuItems.push({
+ label: "Replace",
+ action: () => {
+ if (!this.message) return
+ const view = app.getCurrentView()
+ if (!(view instanceof RoomView)) return
+ view.chatInput.startReplacement(this.message)
+ }
+ })
+ }
 
  ctxMenu.reset(ctxMenuItems)
  this.element.appendChild(ctxMenu.element)
 
  void this.reset()
 	}
 
+	async replaceEvent(event: MatrixEvent) {
+ this.message = event
+ await this.reset()
+	}
+
+	getContent() {
+ const content = this.message.getContent()
+ if (content["m.relates_to"]?.rel_type === "m.replace") {
+ return content["m.new_content"] as IContent || content
+ }
+ return content
+	}
+
 	async reset() {
  const msg = this.message
  const { displayname } = await getMXUser(msg.getSender()!)
@@ -78,6 +105,15 @@ export default class ChatMessageBase extends EventBase {
  return
  }
 
+ console.log("Resetting message:", msg.getId(), msg.getContent())
+ if (msg.getContent()["m.relates_to"]?.rel_type === "m.replace" || msg.getOriginalContent() != msg.getContent()) {
+ const replacedMarker = document.createElement("span")
+ replacedMarker.className = "replaced-marker"
+ replacedMarker.textContent = " (replaced)"
+ this.contentElement.appendChild(replacedMarker)
+ return
+ }
+
  this.contentElement
  .querySelectorAll<HTMLSpanElement>("[data-mx-spoiler]")
  .forEach(el => {

client/src/comps/events/EventBase.ts

@@ -3,7 +3,7 @@ import Component from "../Component"
 import Avatar from "../Avatar"
 
 export default abstract class EventBase extends Component {
-readonly message: MatrixEvent
+	message: MatrixEvent
 	readonly mainElement: HTMLDivElement
 	readonly asideElement: HTMLDivElement
 	readonly contentElement: HTMLDivElement

client/src/comps/events/RoomAudioMessage.ts

@@ -11,7 +11,7 @@ export default class RoomAudioMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
  const blobUrl =
  typeof content.url == "string" ? await getMXCData(content.url) : null
 

client/src/comps/events/RoomEmoteMessage.ts

@@ -20,9 +20,9 @@ export default class RoomEmoteMessage extends ChatMessageBase {
  this.contentElement.appendChild(emote)
 
  const body = document.createElement("span")
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
 
- switch (this.message.getContent().format) {
+ switch (this.getContent().format) {
  case "org.matrix.custom.html":
  body.innerHTML = purifyHTML(content.formatted_body ?? "")
  break

client/src/comps/events/RoomFileMessage.ts

@@ -11,7 +11,7 @@ export default class RoomFileMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
  const blobUrl =
  typeof content.url == "string" ? await getMXCData(content.url) : null
 

client/src/comps/events/RoomImageMessage.ts

@@ -11,7 +11,7 @@ export default class RoomImageMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
  const mxcUrl = typeof content.url == "string" ? content.url : ""
 
  const img = new MXCImage(mxcUrl)

client/src/comps/events/RoomNoticeMessage.ts

@@ -10,9 +10,9 @@ export default class RoomNoticeMessage extends ChatMessageBase {
 	}
 
 	async reset(): Promise<void> {
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
 
- switch (this.message.getContent().format) {
+ switch (this.getContent().format) {
  case "org.matrix.custom.html":
  this.contentElement.innerHTML = purifyHTML(content.formatted_body || "")
  break

client/src/comps/events/RoomTextMessage.ts

@@ -10,9 +10,9 @@ export default class RoomTextMessage extends ChatMessageBase {
 	}
 
 	async reset(): Promise<void> {
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
 
- switch (this.message.getContent().format) {
+ switch (this.getContent().format) {
  case "org.matrix.custom.html":
  this.contentElement.innerHTML = purifyHTML(content.formatted_body || "")
  break

client/src/comps/events/RoomVideoMessage.ts

@@ -11,7 +11,7 @@ export default class RoomVideoMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
  const blobUrl =
  typeof content.url == "string" ? await getMXCData(content.url) : null
 

client/src/comps/views/RoomView.ts

@@ -1,10 +1,11 @@
 import View from "../views//View"
 import ChatInput from "../ChatInput"
 import EventList from "../EventList"
-import { MatrixEvent, Room, RoomEvent } from "matrix-js-sdk"
+import { MatrixEvent, MatrixEventEvent, Room, RoomEvent } from "matrix-js-sdk"
 import { matrix } from "../../matrix"
 import MemberList from "../MemberList"
 import { parseEventContent } from "../../events"
+import ChatMessageBase from "../events/ChatMessageBase"
 
 export default class RoomView extends View {
 	private currentRoom?: Room
@@ -40,7 +41,27 @@ export default class RoomView extends View {
 	onTimelineEvent(room: Room) {
  return (event: MatrixEvent) => {
  if (event.getRoomId() === room.roomId) {
+ if (event.getContent()["m.relates_to"]?.rel_type === "m.replace") {
+ const eventId = event.getContent()["m.relates_to"]?.event_id
+ if (!eventId) return
+ const comp = this.msgList.eventComponents.get(eventId)
+ if (!comp) return
+ if (!(comp instanceof ChatMessageBase)) return
+ void comp.replaceEvent(event)
+ this.msgList.eventComponents.set(event.getId()!, comp)
+ return
+ }
  this.msgList.pushMessage(event)
+ if (event.isSending()) {
+ const oldId = event.getId()
+ if (!oldId) return
+ event.once(MatrixEventEvent.LocalEventIdReplaced, (newEvent) => {
+ console.log("Event ID replaced:", oldId, "->", newEvent.getId())
+ const comp = this.msgList.eventComponents.get(oldId)
+ this.msgList.eventComponents.delete(oldId)
+ this.msgList.eventComponents.set(newEvent.getId()!, comp!)
+ })
+ }
  }
  }
 	}
@@ -65,7 +86,9 @@ export default class RoomView extends View {
  this.head.reset(room.name)
  await matrix.roomInitialSync(room.roomId, 20)
  const events = room.getLiveTimeline().getEvents()
- this.msgList.reset(events)
+ this.msgList.reset(events.filter(e => {
+ return e.getContent()["m.relates_to"]?.rel_type !== "m.replace"
+ }))
 
  if (this.timelineEventHandler)
  matrix.off(RoomEvent.Timeline, this.timelineEventHandler)

client/public/css/style.css

@@ -754,7 +754,8 @@ dialog {
 	overflow: hidden hidden;
 }
 
-.message-content.redacted {
+.message-content.redacted,
+.replaced-marker {
 	font-style: italic;
 	color: var(--text-muted);
 }

client/src/comps/ChatInput.ts

@@ -1,4 +1,4 @@
-import { MsgType } from "matrix-js-sdk"
+import { MatrixEvent, MsgType } from "matrix-js-sdk"
 import { matrix } from "../matrix"
 import Component from "./Component"
 import EmojiPicker from "./EmojiPicker"
@@ -9,6 +9,7 @@ import RoomView from "./views/RoomView"
 export default class ChatInput extends Component {
 	readonly emojiPicker: EmojiPicker
 	readonly input: HTMLDivElement
+	replacingEventId: string | null = null
 
 	constructor(view: PostView | RoomView) {
  super("div", { id: "chat-input-container" })
@@ -30,6 +31,7 @@ export default class ChatInput extends Component {
  this.input.setAttribute("placeholder", "Message #channel")
  this.input.addEventListener("keypress", e => {
  if (e.code == "Enter" && !e.shiftKey) {
+ const replacingEventId = this.replacingEventId
  e.preventDefault()
  const content = this.input.innerText.trim()
  if (content == "") return
@@ -52,14 +54,31 @@ export default class ChatInput extends Component {
  const room = view.getCurrentRoom()
  if (!room) return
 
- await matrix.sendMessage(room.roomId, {
- body: content,
- msgtype: MsgType.Text,
- })
+ if (!replacingEventId) {
+ await matrix.sendMessage(room.roomId, {
+ body: content,
+ msgtype: MsgType.Text,
+ })
+ } else {
+ await matrix.sendMessage(room.roomId, {
+ body: "* " + content,
+ msgtype: MsgType.Text,
+ "m.new_content": {
+ body: content,
+ msgtype: MsgType.Text,
+ },
+ // @ts-expect-error the matrix-js-sdk types are terrible
+ "m.relates_to": {
+ rel_type: "m.replace",
+ event_id: replacingEventId,
+ },
+ })
+ }
  }
 
  console.log("Send MSG:", this.input.innerText)
  void createMessage()
+ this.replacingEventId = null
  }
  })
  this.input.addEventListener("input", () => {
@@ -88,4 +107,15 @@ export default class ChatInput extends Component {
  this.element.appendChild(emojiButton)
  this.element.appendChild(this.emojiPicker.element)
 	}
+
+	startReplacement(event: MatrixEvent) {
+ this.replacingEventId = event.getId() || null
+ const content = event.getContent()
+ if (content.msgtype === MsgType.Text) {
+ if (this.input) {
+ this.input.textContent = content.body as string || ""
+ this.input.focus()
+ }
+ }
+	}
 }

client/src/comps/events/ChatMessageBase.ts

@@ -1,10 +1,12 @@
 import { twemojiParse } from "../../md"
-import { Direction, MatrixEvent } from "matrix-js-sdk"
+import { Direction, IContent, MatrixEvent } from "matrix-js-sdk"
 import { getMXUser, matrix } from "../../matrix"
 import EventBase from "./EventBase"
 import { relativeTimeFormat } from "../../intl"
 import ContextMenu, { ContextMenuItem } from "../ContextMenu"
 import ConfirmForm from "../forms/ConfirmForm"
+import { app } from "../../main"
+import RoomView from "../views/RoomView"
 
 export default class ChatMessageBase extends EventBase {
 	constructor(msg: MatrixEvent) {
@@ -24,8 +26,9 @@ export default class ChatMessageBase extends EventBase {
 
  const ctxMenu = new ContextMenu("message-menu", this.element)
  const ctxMenuItems: ContextMenuItem[] = []
+ const isMyEvent = this.message.getSender() === matrix.getUserId()
  const canRedact =
-this.message.getSender() === matrix.getUserId() ||
+isMyEvent ||
  room
  ?.getLiveTimeline()
  .getState(Direction.Forward)
@@ -53,13 +56,37 @@ export default class ChatMessageBase extends EventBase {
  },
  })
  }
+ if (isMyEvent) {
+ ctxMenuItems.push({
+ label: "Replace",
+ action: () => {
+ if (!this.message) return
+ const view = app.getCurrentView()
+ if (!(view instanceof RoomView)) return
+ view.chatInput.startReplacement(this.message)
+ }
+ })
+ }
 
  ctxMenu.reset(ctxMenuItems)
  this.element.appendChild(ctxMenu.element)
 
  void this.reset()
 	}
 
+	async replaceEvent(event: MatrixEvent) {
+ this.message = event
+ await this.reset()
+	}
+
+	getContent() {
+ const content = this.message.getContent()
+ if (content["m.relates_to"]?.rel_type === "m.replace") {
+ return content["m.new_content"] as IContent || content
+ }
+ return content
+	}
+
 	async reset() {
  const msg = this.message
  const { displayname } = await getMXUser(msg.getSender()!)
@@ -78,6 +105,15 @@ export default class ChatMessageBase extends EventBase {
  return
  }
 
+ console.log("Resetting message:", msg.getId(), msg.getContent())
+ if (msg.getContent()["m.relates_to"]?.rel_type === "m.replace" || msg.getOriginalContent() != msg.getContent()) {
+ const replacedMarker = document.createElement("span")
+ replacedMarker.className = "replaced-marker"
+ replacedMarker.textContent = " (replaced)"
+ this.contentElement.appendChild(replacedMarker)
+ return
+ }
+
  this.contentElement
  .querySelectorAll<HTMLSpanElement>("[data-mx-spoiler]")
  .forEach(el => {

client/src/comps/events/EventBase.ts

@@ -3,7 +3,7 @@ import Component from "../Component"
 import Avatar from "../Avatar"
 
 export default abstract class EventBase extends Component {
-readonly message: MatrixEvent
+	message: MatrixEvent
 	readonly mainElement: HTMLDivElement
 	readonly asideElement: HTMLDivElement
 	readonly contentElement: HTMLDivElement

client/src/comps/events/RoomAudioMessage.ts

@@ -11,7 +11,7 @@ export default class RoomAudioMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
  const blobUrl =
  typeof content.url == "string" ? await getMXCData(content.url) : null
 

client/src/comps/events/RoomEmoteMessage.ts

@@ -20,9 +20,9 @@ export default class RoomEmoteMessage extends ChatMessageBase {
  this.contentElement.appendChild(emote)
 
  const body = document.createElement("span")
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
 
- switch (this.message.getContent().format) {
+ switch (this.getContent().format) {
  case "org.matrix.custom.html":
  body.innerHTML = purifyHTML(content.formatted_body ?? "")
  break

client/src/comps/events/RoomFileMessage.ts

@@ -11,7 +11,7 @@ export default class RoomFileMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
  const blobUrl =
  typeof content.url == "string" ? await getMXCData(content.url) : null
 

client/src/comps/events/RoomImageMessage.ts

@@ -11,7 +11,7 @@ export default class RoomImageMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
  const mxcUrl = typeof content.url == "string" ? content.url : ""
 
  const img = new MXCImage(mxcUrl)

client/src/comps/events/RoomNoticeMessage.ts

@@ -10,9 +10,9 @@ export default class RoomNoticeMessage extends ChatMessageBase {
 	}
 
 	async reset(): Promise<void> {
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
 
- switch (this.message.getContent().format) {
+ switch (this.getContent().format) {
  case "org.matrix.custom.html":
  this.contentElement.innerHTML = purifyHTML(content.formatted_body || "")
  break

client/src/comps/events/RoomTextMessage.ts

@@ -10,9 +10,9 @@ export default class RoomTextMessage extends ChatMessageBase {
 	}
 
 	async reset(): Promise<void> {
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
 
- switch (this.message.getContent().format) {
+ switch (this.getContent().format) {
  case "org.matrix.custom.html":
  this.contentElement.innerHTML = purifyHTML(content.formatted_body || "")
  break

client/src/comps/events/RoomVideoMessage.ts

@@ -11,7 +11,7 @@ export default class RoomVideoMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
  const blobUrl =
  typeof content.url == "string" ? await getMXCData(content.url) : null
 

client/src/comps/views/RoomView.ts

@@ -1,10 +1,11 @@
 import View from "../views//View"
 import ChatInput from "../ChatInput"
 import EventList from "../EventList"
-import { MatrixEvent, Room, RoomEvent } from "matrix-js-sdk"
+import { MatrixEvent, MatrixEventEvent, Room, RoomEvent } from "matrix-js-sdk"
 import { matrix } from "../../matrix"
 import MemberList from "../MemberList"
 import { parseEventContent } from "../../events"
+import ChatMessageBase from "../events/ChatMessageBase"
 
 export default class RoomView extends View {
 	private currentRoom?: Room
@@ -40,7 +41,27 @@ export default class RoomView extends View {
 	onTimelineEvent(room: Room) {
  return (event: MatrixEvent) => {
  if (event.getRoomId() === room.roomId) {
+ if (event.getContent()["m.relates_to"]?.rel_type === "m.replace") {
+ const eventId = event.getContent()["m.relates_to"]?.event_id
+ if (!eventId) return
+ const comp = this.msgList.eventComponents.get(eventId)
+ if (!comp) return
+ if (!(comp instanceof ChatMessageBase)) return
+ void comp.replaceEvent(event)
+ this.msgList.eventComponents.set(event.getId()!, comp)
+ return
+ }
  this.msgList.pushMessage(event)
+ if (event.isSending()) {
+ const oldId = event.getId()
+ if (!oldId) return
+ event.once(MatrixEventEvent.LocalEventIdReplaced, (newEvent) => {
+ console.log("Event ID replaced:", oldId, "->", newEvent.getId())
+ const comp = this.msgList.eventComponents.get(oldId)
+ this.msgList.eventComponents.delete(oldId)
+ this.msgList.eventComponents.set(newEvent.getId()!, comp!)
+ })
+ }
  }
  }
 	}
@@ -65,7 +86,9 @@ export default class RoomView extends View {
  this.head.reset(room.name)
  await matrix.roomInitialSync(room.roomId, 20)
  const events = room.getLiveTimeline().getEvents()
- this.msgList.reset(events)
+ this.msgList.reset(events.filter(e => {
+ return e.getContent()["m.relates_to"]?.rel_type !== "m.replace"
+ }))
 
  if (this.timelineEventHandler)
  matrix.off(RoomEvent.Timeline, this.timelineEventHandler)

client/public/css/style.css

@@ -754,7 +754,8 @@ dialog {
 	overflow: hidden hidden;
 }
 
-.message-content.redacted {
+.message-content.redacted,
+.replaced-marker {
 	font-style: italic;
 	color: var(--text-muted);
 }

client/src/comps/ChatInput.ts

@@ -1,4 +1,4 @@
-import { MsgType } from "matrix-js-sdk"
+import { MatrixEvent, MsgType } from "matrix-js-sdk"
 import { matrix } from "../matrix"
 import Component from "./Component"
 import EmojiPicker from "./EmojiPicker"
@@ -9,6 +9,7 @@ import RoomView from "./views/RoomView"
 export default class ChatInput extends Component {
 	readonly emojiPicker: EmojiPicker
 	readonly input: HTMLDivElement
+	replacingEventId: string | null = null
 
 	constructor(view: PostView | RoomView) {
  super("div", { id: "chat-input-container" })
@@ -30,6 +31,7 @@ export default class ChatInput extends Component {
  this.input.setAttribute("placeholder", "Message #channel")
  this.input.addEventListener("keypress", e => {
  if (e.code == "Enter" && !e.shiftKey) {
+ const replacingEventId = this.replacingEventId
  e.preventDefault()
  const content = this.input.innerText.trim()
  if (content == "") return
@@ -52,14 +54,31 @@ export default class ChatInput extends Component {
  const room = view.getCurrentRoom()
  if (!room) return
 
- await matrix.sendMessage(room.roomId, {
- body: content,
- msgtype: MsgType.Text,
- })
+ if (!replacingEventId) {
+ await matrix.sendMessage(room.roomId, {
+ body: content,
+ msgtype: MsgType.Text,
+ })
+ } else {
+ await matrix.sendMessage(room.roomId, {
+ body: "* " + content,
+ msgtype: MsgType.Text,
+ "m.new_content": {
+ body: content,
+ msgtype: MsgType.Text,
+ },
+ // @ts-expect-error the matrix-js-sdk types are terrible
+ "m.relates_to": {
+ rel_type: "m.replace",
+ event_id: replacingEventId,
+ },
+ })
+ }
  }
 
  console.log("Send MSG:", this.input.innerText)
  void createMessage()
+ this.replacingEventId = null
  }
  })
  this.input.addEventListener("input", () => {
@@ -88,4 +107,15 @@ export default class ChatInput extends Component {
  this.element.appendChild(emojiButton)
  this.element.appendChild(this.emojiPicker.element)
 	}
+
+	startReplacement(event: MatrixEvent) {
+ this.replacingEventId = event.getId() || null
+ const content = event.getContent()
+ if (content.msgtype === MsgType.Text) {
+ if (this.input) {
+ this.input.textContent = content.body as string || ""
+ this.input.focus()
+ }
+ }
+	}
 }

client/src/comps/events/ChatMessageBase.ts

@@ -1,10 +1,12 @@
 import { twemojiParse } from "../../md"
-import { Direction, MatrixEvent } from "matrix-js-sdk"
+import { Direction, IContent, MatrixEvent } from "matrix-js-sdk"
 import { getMXUser, matrix } from "../../matrix"
 import EventBase from "./EventBase"
 import { relativeTimeFormat } from "../../intl"
 import ContextMenu, { ContextMenuItem } from "../ContextMenu"
 import ConfirmForm from "../forms/ConfirmForm"
+import { app } from "../../main"
+import RoomView from "../views/RoomView"
 
 export default class ChatMessageBase extends EventBase {
 	constructor(msg: MatrixEvent) {
@@ -24,8 +26,9 @@ export default class ChatMessageBase extends EventBase {
 
  const ctxMenu = new ContextMenu("message-menu", this.element)
  const ctxMenuItems: ContextMenuItem[] = []
+ const isMyEvent = this.message.getSender() === matrix.getUserId()
  const canRedact =
-this.message.getSender() === matrix.getUserId() ||
+isMyEvent ||
  room
  ?.getLiveTimeline()
  .getState(Direction.Forward)
@@ -53,13 +56,37 @@ export default class ChatMessageBase extends EventBase {
  },
  })
  }
+ if (isMyEvent) {
+ ctxMenuItems.push({
+ label: "Replace",
+ action: () => {
+ if (!this.message) return
+ const view = app.getCurrentView()
+ if (!(view instanceof RoomView)) return
+ view.chatInput.startReplacement(this.message)
+ }
+ })
+ }
 
  ctxMenu.reset(ctxMenuItems)
  this.element.appendChild(ctxMenu.element)
 
  void this.reset()
 	}
 
+	async replaceEvent(event: MatrixEvent) {
+ this.message = event
+ await this.reset()
+	}
+
+	getContent() {
+ const content = this.message.getContent()
+ if (content["m.relates_to"]?.rel_type === "m.replace") {
+ return content["m.new_content"] as IContent || content
+ }
+ return content
+	}
+
 	async reset() {
  const msg = this.message
  const { displayname } = await getMXUser(msg.getSender()!)
@@ -78,6 +105,15 @@ export default class ChatMessageBase extends EventBase {
  return
  }
 
+ console.log("Resetting message:", msg.getId(), msg.getContent())
+ if (msg.getContent()["m.relates_to"]?.rel_type === "m.replace" || msg.getOriginalContent() != msg.getContent()) {
+ const replacedMarker = document.createElement("span")
+ replacedMarker.className = "replaced-marker"
+ replacedMarker.textContent = " (replaced)"
+ this.contentElement.appendChild(replacedMarker)
+ return
+ }
+
  this.contentElement
  .querySelectorAll<HTMLSpanElement>("[data-mx-spoiler]")
  .forEach(el => {

client/src/comps/events/EventBase.ts

@@ -3,7 +3,7 @@ import Component from "../Component"
 import Avatar from "../Avatar"
 
 export default abstract class EventBase extends Component {
-readonly message: MatrixEvent
+	message: MatrixEvent
 	readonly mainElement: HTMLDivElement
 	readonly asideElement: HTMLDivElement
 	readonly contentElement: HTMLDivElement

client/src/comps/events/RoomAudioMessage.ts

@@ -11,7 +11,7 @@ export default class RoomAudioMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
  const blobUrl =
  typeof content.url == "string" ? await getMXCData(content.url) : null
 

client/src/comps/events/RoomEmoteMessage.ts

@@ -20,9 +20,9 @@ export default class RoomEmoteMessage extends ChatMessageBase {
  this.contentElement.appendChild(emote)
 
  const body = document.createElement("span")
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
 
- switch (this.message.getContent().format) {
+ switch (this.getContent().format) {
  case "org.matrix.custom.html":
  body.innerHTML = purifyHTML(content.formatted_body ?? "")
  break

client/src/comps/events/RoomFileMessage.ts

@@ -11,7 +11,7 @@ export default class RoomFileMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
  const blobUrl =
  typeof content.url == "string" ? await getMXCData(content.url) : null
 

client/src/comps/events/RoomImageMessage.ts

@@ -11,7 +11,7 @@ export default class RoomImageMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
  const mxcUrl = typeof content.url == "string" ? content.url : ""
 
  const img = new MXCImage(mxcUrl)

client/src/comps/events/RoomNoticeMessage.ts

@@ -10,9 +10,9 @@ export default class RoomNoticeMessage extends ChatMessageBase {
 	}
 
 	async reset(): Promise<void> {
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
 
- switch (this.message.getContent().format) {
+ switch (this.getContent().format) {
  case "org.matrix.custom.html":
  this.contentElement.innerHTML = purifyHTML(content.formatted_body || "")
  break

client/src/comps/events/RoomTextMessage.ts

@@ -10,9 +10,9 @@ export default class RoomTextMessage extends ChatMessageBase {
 	}
 
 	async reset(): Promise<void> {
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
 
- switch (this.message.getContent().format) {
+ switch (this.getContent().format) {
  case "org.matrix.custom.html":
  this.contentElement.innerHTML = purifyHTML(content.formatted_body || "")
  break

client/src/comps/events/RoomVideoMessage.ts

@@ -11,7 +11,7 @@ export default class RoomVideoMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
  const blobUrl =
  typeof content.url == "string" ? await getMXCData(content.url) : null
 

client/src/comps/views/RoomView.ts

@@ -1,10 +1,11 @@
 import View from "../views//View"
 import ChatInput from "../ChatInput"
 import EventList from "../EventList"
-import { MatrixEvent, Room, RoomEvent } from "matrix-js-sdk"
+import { MatrixEvent, MatrixEventEvent, Room, RoomEvent } from "matrix-js-sdk"
 import { matrix } from "../../matrix"
 import MemberList from "../MemberList"
 import { parseEventContent } from "../../events"
+import ChatMessageBase from "../events/ChatMessageBase"
 
 export default class RoomView extends View {
 	private currentRoom?: Room
@@ -40,7 +41,27 @@ export default class RoomView extends View {
 	onTimelineEvent(room: Room) {
  return (event: MatrixEvent) => {
  if (event.getRoomId() === room.roomId) {
+ if (event.getContent()["m.relates_to"]?.rel_type === "m.replace") {
+ const eventId = event.getContent()["m.relates_to"]?.event_id
+ if (!eventId) return
+ const comp = this.msgList.eventComponents.get(eventId)
+ if (!comp) return
+ if (!(comp instanceof ChatMessageBase)) return
+ void comp.replaceEvent(event)
+ this.msgList.eventComponents.set(event.getId()!, comp)
+ return
+ }
  this.msgList.pushMessage(event)
+ if (event.isSending()) {
+ const oldId = event.getId()
+ if (!oldId) return
+ event.once(MatrixEventEvent.LocalEventIdReplaced, (newEvent) => {
+ console.log("Event ID replaced:", oldId, "->", newEvent.getId())
+ const comp = this.msgList.eventComponents.get(oldId)
+ this.msgList.eventComponents.delete(oldId)
+ this.msgList.eventComponents.set(newEvent.getId()!, comp!)
+ })
+ }
  }
  }
 	}
@@ -65,7 +86,9 @@ export default class RoomView extends View {
  this.head.reset(room.name)
  await matrix.roomInitialSync(room.roomId, 20)
  const events = room.getLiveTimeline().getEvents()
- this.msgList.reset(events)
+ this.msgList.reset(events.filter(e => {
+ return e.getContent()["m.relates_to"]?.rel_type !== "m.replace"
+ }))
 
  if (this.timelineEventHandler)
  matrix.off(RoomEvent.Timeline, this.timelineEventHandler)

client/public/css/style.css

@@ -754,7 +754,8 @@ dialog {
 	overflow: hidden hidden;
 }
 
-.message-content.redacted {
+.message-content.redacted,
+.replaced-marker {
 	font-style: italic;
 	color: var(--text-muted);
 }

client/src/comps/ChatInput.ts

@@ -1,4 +1,4 @@
-import { MsgType } from "matrix-js-sdk"
+import { MatrixEvent, MsgType } from "matrix-js-sdk"
 import { matrix } from "../matrix"
 import Component from "./Component"
 import EmojiPicker from "./EmojiPicker"
@@ -9,6 +9,7 @@ import RoomView from "./views/RoomView"
 export default class ChatInput extends Component {
 	readonly emojiPicker: EmojiPicker
 	readonly input: HTMLDivElement
+	replacingEventId: string | null = null
 
 	constructor(view: PostView | RoomView) {
  super("div", { id: "chat-input-container" })
@@ -30,6 +31,7 @@ export default class ChatInput extends Component {
  this.input.setAttribute("placeholder", "Message #channel")
  this.input.addEventListener("keypress", e => {
  if (e.code == "Enter" && !e.shiftKey) {
+ const replacingEventId = this.replacingEventId
  e.preventDefault()
  const content = this.input.innerText.trim()
  if (content == "") return
@@ -52,14 +54,31 @@ export default class ChatInput extends Component {
  const room = view.getCurrentRoom()
  if (!room) return
 
- await matrix.sendMessage(room.roomId, {
- body: content,
- msgtype: MsgType.Text,
- })
+ if (!replacingEventId) {
+ await matrix.sendMessage(room.roomId, {
+ body: content,
+ msgtype: MsgType.Text,
+ })
+ } else {
+ await matrix.sendMessage(room.roomId, {
+ body: "* " + content,
+ msgtype: MsgType.Text,
+ "m.new_content": {
+ body: content,
+ msgtype: MsgType.Text,
+ },
+ // @ts-expect-error the matrix-js-sdk types are terrible
+ "m.relates_to": {
+ rel_type: "m.replace",
+ event_id: replacingEventId,
+ },
+ })
+ }
  }
 
  console.log("Send MSG:", this.input.innerText)
  void createMessage()
+ this.replacingEventId = null
  }
  })
  this.input.addEventListener("input", () => {
@@ -88,4 +107,15 @@ export default class ChatInput extends Component {
  this.element.appendChild(emojiButton)
  this.element.appendChild(this.emojiPicker.element)
 	}
+
+	startReplacement(event: MatrixEvent) {
+ this.replacingEventId = event.getId() || null
+ const content = event.getContent()
+ if (content.msgtype === MsgType.Text) {
+ if (this.input) {
+ this.input.textContent = content.body as string || ""
+ this.input.focus()
+ }
+ }
+	}
 }

client/src/comps/events/ChatMessageBase.ts

@@ -1,10 +1,12 @@
 import { twemojiParse } from "../../md"
-import { Direction, MatrixEvent } from "matrix-js-sdk"
+import { Direction, IContent, MatrixEvent } from "matrix-js-sdk"
 import { getMXUser, matrix } from "../../matrix"
 import EventBase from "./EventBase"
 import { relativeTimeFormat } from "../../intl"
 import ContextMenu, { ContextMenuItem } from "../ContextMenu"
 import ConfirmForm from "../forms/ConfirmForm"
+import { app } from "../../main"
+import RoomView from "../views/RoomView"
 
 export default class ChatMessageBase extends EventBase {
 	constructor(msg: MatrixEvent) {
@@ -24,8 +26,9 @@ export default class ChatMessageBase extends EventBase {
 
  const ctxMenu = new ContextMenu("message-menu", this.element)
  const ctxMenuItems: ContextMenuItem[] = []
+ const isMyEvent = this.message.getSender() === matrix.getUserId()
  const canRedact =
-this.message.getSender() === matrix.getUserId() ||
+isMyEvent ||
  room
  ?.getLiveTimeline()
  .getState(Direction.Forward)
@@ -53,13 +56,37 @@ export default class ChatMessageBase extends EventBase {
  },
  })
  }
+ if (isMyEvent) {
+ ctxMenuItems.push({
+ label: "Replace",
+ action: () => {
+ if (!this.message) return
+ const view = app.getCurrentView()
+ if (!(view instanceof RoomView)) return
+ view.chatInput.startReplacement(this.message)
+ }
+ })
+ }
 
  ctxMenu.reset(ctxMenuItems)
  this.element.appendChild(ctxMenu.element)
 
  void this.reset()
 	}
 
+	async replaceEvent(event: MatrixEvent) {
+ this.message = event
+ await this.reset()
+	}
+
+	getContent() {
+ const content = this.message.getContent()
+ if (content["m.relates_to"]?.rel_type === "m.replace") {
+ return content["m.new_content"] as IContent || content
+ }
+ return content
+	}
+
 	async reset() {
  const msg = this.message
  const { displayname } = await getMXUser(msg.getSender()!)
@@ -78,6 +105,15 @@ export default class ChatMessageBase extends EventBase {
  return
  }
 
+ console.log("Resetting message:", msg.getId(), msg.getContent())
+ if (msg.getContent()["m.relates_to"]?.rel_type === "m.replace" || msg.getOriginalContent() != msg.getContent()) {
+ const replacedMarker = document.createElement("span")
+ replacedMarker.className = "replaced-marker"
+ replacedMarker.textContent = " (replaced)"
+ this.contentElement.appendChild(replacedMarker)
+ return
+ }
+
  this.contentElement
  .querySelectorAll<HTMLSpanElement>("[data-mx-spoiler]")
  .forEach(el => {

client/src/comps/events/EventBase.ts

@@ -3,7 +3,7 @@ import Component from "../Component"
 import Avatar from "../Avatar"
 
 export default abstract class EventBase extends Component {
-readonly message: MatrixEvent
+	message: MatrixEvent
 	readonly mainElement: HTMLDivElement
 	readonly asideElement: HTMLDivElement
 	readonly contentElement: HTMLDivElement

client/src/comps/events/RoomAudioMessage.ts

@@ -11,7 +11,7 @@ export default class RoomAudioMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
  const blobUrl =
  typeof content.url == "string" ? await getMXCData(content.url) : null
 

client/src/comps/events/RoomEmoteMessage.ts

@@ -20,9 +20,9 @@ export default class RoomEmoteMessage extends ChatMessageBase {
  this.contentElement.appendChild(emote)
 
  const body = document.createElement("span")
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
 
- switch (this.message.getContent().format) {
+ switch (this.getContent().format) {
  case "org.matrix.custom.html":
  body.innerHTML = purifyHTML(content.formatted_body ?? "")
  break

client/src/comps/events/RoomFileMessage.ts

@@ -11,7 +11,7 @@ export default class RoomFileMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
  const blobUrl =
  typeof content.url == "string" ? await getMXCData(content.url) : null
 

client/src/comps/events/RoomImageMessage.ts

@@ -11,7 +11,7 @@ export default class RoomImageMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
  const mxcUrl = typeof content.url == "string" ? content.url : ""
 
  const img = new MXCImage(mxcUrl)

client/src/comps/events/RoomNoticeMessage.ts

@@ -10,9 +10,9 @@ export default class RoomNoticeMessage extends ChatMessageBase {
 	}
 
 	async reset(): Promise<void> {
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
 
- switch (this.message.getContent().format) {
+ switch (this.getContent().format) {
  case "org.matrix.custom.html":
  this.contentElement.innerHTML = purifyHTML(content.formatted_body || "")
  break

client/src/comps/events/RoomTextMessage.ts

@@ -10,9 +10,9 @@ export default class RoomTextMessage extends ChatMessageBase {
 	}
 
 	async reset(): Promise<void> {
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
 
- switch (this.message.getContent().format) {
+ switch (this.getContent().format) {
  case "org.matrix.custom.html":
  this.contentElement.innerHTML = purifyHTML(content.formatted_body || "")
  break

client/src/comps/events/RoomVideoMessage.ts

@@ -11,7 +11,7 @@ export default class RoomVideoMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
  const blobUrl =
  typeof content.url == "string" ? await getMXCData(content.url) : null
 

client/src/comps/views/RoomView.ts

@@ -1,10 +1,11 @@
 import View from "../views//View"
 import ChatInput from "../ChatInput"
 import EventList from "../EventList"
-import { MatrixEvent, Room, RoomEvent } from "matrix-js-sdk"
+import { MatrixEvent, MatrixEventEvent, Room, RoomEvent } from "matrix-js-sdk"
 import { matrix } from "../../matrix"
 import MemberList from "../MemberList"
 import { parseEventContent } from "../../events"
+import ChatMessageBase from "../events/ChatMessageBase"
 
 export default class RoomView extends View {
 	private currentRoom?: Room
@@ -40,7 +41,27 @@ export default class RoomView extends View {
 	onTimelineEvent(room: Room) {
  return (event: MatrixEvent) => {
  if (event.getRoomId() === room.roomId) {
+ if (event.getContent()["m.relates_to"]?.rel_type === "m.replace") {
+ const eventId = event.getContent()["m.relates_to"]?.event_id
+ if (!eventId) return
+ const comp = this.msgList.eventComponents.get(eventId)
+ if (!comp) return
+ if (!(comp instanceof ChatMessageBase)) return
+ void comp.replaceEvent(event)
+ this.msgList.eventComponents.set(event.getId()!, comp)
+ return
+ }
  this.msgList.pushMessage(event)
+ if (event.isSending()) {
+ const oldId = event.getId()
+ if (!oldId) return
+ event.once(MatrixEventEvent.LocalEventIdReplaced, (newEvent) => {
+ console.log("Event ID replaced:", oldId, "->", newEvent.getId())
+ const comp = this.msgList.eventComponents.get(oldId)
+ this.msgList.eventComponents.delete(oldId)
+ this.msgList.eventComponents.set(newEvent.getId()!, comp!)
+ })
+ }
  }
  }
 	}
@@ -65,7 +86,9 @@ export default class RoomView extends View {
  this.head.reset(room.name)
  await matrix.roomInitialSync(room.roomId, 20)
  const events = room.getLiveTimeline().getEvents()
- this.msgList.reset(events)
+ this.msgList.reset(events.filter(e => {
+ return e.getContent()["m.relates_to"]?.rel_type !== "m.replace"
+ }))
 
  if (this.timelineEventHandler)
  matrix.off(RoomEvent.Timeline, this.timelineEventHandler)

client/public/css/style.css

@@ -754,7 +754,8 @@ dialog {
 	overflow: hidden hidden;
 }
 
-.message-content.redacted {
+.message-content.redacted,
+.replaced-marker {
 	font-style: italic;
 	color: var(--text-muted);
 }

client/src/comps/ChatInput.ts

@@ -1,4 +1,4 @@
-import { MsgType } from "matrix-js-sdk"
+import { MatrixEvent, MsgType } from "matrix-js-sdk"
 import { matrix } from "../matrix"
 import Component from "./Component"
 import EmojiPicker from "./EmojiPicker"
@@ -9,6 +9,7 @@ import RoomView from "./views/RoomView"
 export default class ChatInput extends Component {
 	readonly emojiPicker: EmojiPicker
 	readonly input: HTMLDivElement
+	replacingEventId: string | null = null
 
 	constructor(view: PostView | RoomView) {
  super("div", { id: "chat-input-container" })
@@ -30,6 +31,7 @@ export default class ChatInput extends Component {
  this.input.setAttribute("placeholder", "Message #channel")
  this.input.addEventListener("keypress", e => {
  if (e.code == "Enter" && !e.shiftKey) {
+ const replacingEventId = this.replacingEventId
  e.preventDefault()
  const content = this.input.innerText.trim()
  if (content == "") return
@@ -52,14 +54,31 @@ export default class ChatInput extends Component {
  const room = view.getCurrentRoom()
  if (!room) return
 
- await matrix.sendMessage(room.roomId, {
- body: content,
- msgtype: MsgType.Text,
- })
+ if (!replacingEventId) {
+ await matrix.sendMessage(room.roomId, {
+ body: content,
+ msgtype: MsgType.Text,
+ })
+ } else {
+ await matrix.sendMessage(room.roomId, {
+ body: "* " + content,
+ msgtype: MsgType.Text,
+ "m.new_content": {
+ body: content,
+ msgtype: MsgType.Text,
+ },
+ // @ts-expect-error the matrix-js-sdk types are terrible
+ "m.relates_to": {
+ rel_type: "m.replace",
+ event_id: replacingEventId,
+ },
+ })
+ }
  }
 
  console.log("Send MSG:", this.input.innerText)
  void createMessage()
+ this.replacingEventId = null
  }
  })
  this.input.addEventListener("input", () => {
@@ -88,4 +107,15 @@ export default class ChatInput extends Component {
  this.element.appendChild(emojiButton)
  this.element.appendChild(this.emojiPicker.element)
 	}
+
+	startReplacement(event: MatrixEvent) {
+ this.replacingEventId = event.getId() || null
+ const content = event.getContent()
+ if (content.msgtype === MsgType.Text) {
+ if (this.input) {
+ this.input.textContent = content.body as string || ""
+ this.input.focus()
+ }
+ }
+	}
 }

client/src/comps/events/ChatMessageBase.ts

@@ -1,10 +1,12 @@
 import { twemojiParse } from "../../md"
-import { Direction, MatrixEvent } from "matrix-js-sdk"
+import { Direction, IContent, MatrixEvent } from "matrix-js-sdk"
 import { getMXUser, matrix } from "../../matrix"
 import EventBase from "./EventBase"
 import { relativeTimeFormat } from "../../intl"
 import ContextMenu, { ContextMenuItem } from "../ContextMenu"
 import ConfirmForm from "../forms/ConfirmForm"
+import { app } from "../../main"
+import RoomView from "../views/RoomView"
 
 export default class ChatMessageBase extends EventBase {
 	constructor(msg: MatrixEvent) {
@@ -24,8 +26,9 @@ export default class ChatMessageBase extends EventBase {
 
  const ctxMenu = new ContextMenu("message-menu", this.element)
  const ctxMenuItems: ContextMenuItem[] = []
+ const isMyEvent = this.message.getSender() === matrix.getUserId()
  const canRedact =
-this.message.getSender() === matrix.getUserId() ||
+isMyEvent ||
  room
  ?.getLiveTimeline()
  .getState(Direction.Forward)
@@ -53,13 +56,37 @@ export default class ChatMessageBase extends EventBase {
  },
  })
  }
+ if (isMyEvent) {
+ ctxMenuItems.push({
+ label: "Replace",
+ action: () => {
+ if (!this.message) return
+ const view = app.getCurrentView()
+ if (!(view instanceof RoomView)) return
+ view.chatInput.startReplacement(this.message)
+ }
+ })
+ }
 
  ctxMenu.reset(ctxMenuItems)
  this.element.appendChild(ctxMenu.element)
 
  void this.reset()
 	}
 
+	async replaceEvent(event: MatrixEvent) {
+ this.message = event
+ await this.reset()
+	}
+
+	getContent() {
+ const content = this.message.getContent()
+ if (content["m.relates_to"]?.rel_type === "m.replace") {
+ return content["m.new_content"] as IContent || content
+ }
+ return content
+	}
+
 	async reset() {
  const msg = this.message
  const { displayname } = await getMXUser(msg.getSender()!)
@@ -78,6 +105,15 @@ export default class ChatMessageBase extends EventBase {
  return
  }
 
+ console.log("Resetting message:", msg.getId(), msg.getContent())
+ if (msg.getContent()["m.relates_to"]?.rel_type === "m.replace" || msg.getOriginalContent() != msg.getContent()) {
+ const replacedMarker = document.createElement("span")
+ replacedMarker.className = "replaced-marker"
+ replacedMarker.textContent = " (replaced)"
+ this.contentElement.appendChild(replacedMarker)
+ return
+ }
+
  this.contentElement
  .querySelectorAll<HTMLSpanElement>("[data-mx-spoiler]")
  .forEach(el => {

client/src/comps/events/EventBase.ts

@@ -3,7 +3,7 @@ import Component from "../Component"
 import Avatar from "../Avatar"
 
 export default abstract class EventBase extends Component {
-readonly message: MatrixEvent
+	message: MatrixEvent
 	readonly mainElement: HTMLDivElement
 	readonly asideElement: HTMLDivElement
 	readonly contentElement: HTMLDivElement

client/src/comps/events/RoomAudioMessage.ts

@@ -11,7 +11,7 @@ export default class RoomAudioMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
  const blobUrl =
  typeof content.url == "string" ? await getMXCData(content.url) : null
 

client/src/comps/events/RoomEmoteMessage.ts

@@ -20,9 +20,9 @@ export default class RoomEmoteMessage extends ChatMessageBase {
  this.contentElement.appendChild(emote)
 
  const body = document.createElement("span")
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
 
- switch (this.message.getContent().format) {
+ switch (this.getContent().format) {
  case "org.matrix.custom.html":
  body.innerHTML = purifyHTML(content.formatted_body ?? "")
  break

client/src/comps/events/RoomFileMessage.ts

@@ -11,7 +11,7 @@ export default class RoomFileMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
  const blobUrl =
  typeof content.url == "string" ? await getMXCData(content.url) : null
 

client/src/comps/events/RoomImageMessage.ts

@@ -11,7 +11,7 @@ export default class RoomImageMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
  const mxcUrl = typeof content.url == "string" ? content.url : ""
 
  const img = new MXCImage(mxcUrl)

client/src/comps/events/RoomNoticeMessage.ts

@@ -10,9 +10,9 @@ export default class RoomNoticeMessage extends ChatMessageBase {
 	}
 
 	async reset(): Promise<void> {
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
 
- switch (this.message.getContent().format) {
+ switch (this.getContent().format) {
  case "org.matrix.custom.html":
  this.contentElement.innerHTML = purifyHTML(content.formatted_body || "")
  break

client/src/comps/events/RoomTextMessage.ts

@@ -10,9 +10,9 @@ export default class RoomTextMessage extends ChatMessageBase {
 	}
 
 	async reset(): Promise<void> {
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
 
- switch (this.message.getContent().format) {
+ switch (this.getContent().format) {
  case "org.matrix.custom.html":
  this.contentElement.innerHTML = purifyHTML(content.formatted_body || "")
  break

client/src/comps/events/RoomVideoMessage.ts

@@ -11,7 +11,7 @@ export default class RoomVideoMessage extends ChatMessageBase {
 	async reset(): Promise<void> {
  this.contentElement.innerHTML = ""
 
- const content = parseEventContent(this.message.getContent())
+ const content = parseEventContent(this.getContent())
  const blobUrl =
  typeof content.url == "string" ? await getMXCData(content.url) : null
 

client/src/comps/views/RoomView.ts

@@ -1,10 +1,11 @@
 import View from "../views//View"
 import ChatInput from "../ChatInput"
 import EventList from "../EventList"
-import { MatrixEvent, Room, RoomEvent } from "matrix-js-sdk"
+import { MatrixEvent, MatrixEventEvent, Room, RoomEvent } from "matrix-js-sdk"
 import { matrix } from "../../matrix"
 import MemberList from "../MemberList"
 import { parseEventContent } from "../../events"
+import ChatMessageBase from "../events/ChatMessageBase"
 
 export default class RoomView extends View {
 	private currentRoom?: Room
@@ -40,7 +41,27 @@ export default class RoomView extends View {
 	onTimelineEvent(room: Room) {
  return (event: MatrixEvent) => {
  if (event.getRoomId() === room.roomId) {
+ if (event.getContent()["m.relates_to"]?.rel_type === "m.replace") {
+ const eventId = event.getContent()["m.relates_to"]?.event_id
+ if (!eventId) return
+ const comp = this.msgList.eventComponents.get(eventId)
+ if (!comp) return
+ if (!(comp instanceof ChatMessageBase)) return
+ void comp.replaceEvent(event)
+ this.msgList.eventComponents.set(event.getId()!, comp)
+ return
+ }
  this.msgList.pushMessage(event)
+ if (event.isSending()) {
+ const oldId = event.getId()
+ if (!oldId) return
+ event.once(MatrixEventEvent.LocalEventIdReplaced, (newEvent) => {
+ console.log("Event ID replaced:", oldId, "->", newEvent.getId())
+ const comp = this.msgList.eventComponents.get(oldId)
+ this.msgList.eventComponents.delete(oldId)
+ this.msgList.eventComponents.set(newEvent.getId()!, comp!)
+ })
+ }
  }
  }
 	}
@@ -65,7 +86,9 @@ export default class RoomView extends View {
  this.head.reset(room.name)
  await matrix.roomInitialSync(room.roomId, 20)
  const events = room.getLiveTimeline().getEvents()
- this.msgList.reset(events)
+ this.msgList.reset(events.filter(e => {
+ return e.getContent()["m.relates_to"]?.rel_type !== "m.replace"
+ }))
 
  if (this.timelineEventHandler)
  matrix.off(RoomEvent.Timeline, this.timelineEventHandler)