types/props.ts

@@ -0,0 +1,17 @@
+import type { UserResponse } from "./interfaces";
+
+export interface MessageProps {
+	class?: string,
+	img?: string | null,
+	author?: UserResponse
+	text: string,
+	timestamp: number,
+	format: "12" | "24",
+	type: "normal" | "grouped",
+	marginBottom: boolean,
+	last: boolean,
+	messageId: string,
+	replyingTo?: boolean,
+	editing?: boolean,
+	me: UserResponse
+}

utils/editMessage.ts

@@ -0,0 +1,24 @@
+import type { MessageProps } from "~/types/props";
+
+export default async (element: HTMLDivElement, props: MessageProps) => {
+	console.log("message:", element);
+	const me = await fetchWithApi("/me") as any;
+	if (props.author?.uuid == me.uuid) {
+		const text = element.getElementsByClassName("message-text")[0] as HTMLDivElement;
+		text.contentEditable = "true";
+		text.focus();
+		const range = document.createRange();
+		range.selectNodeContents(text);
+		range.collapse(false);
+		const selection = window.getSelection();
+		selection?.removeAllRanges();
+		selection?.addRange(range);
+		element.addEventListener("keyup", (e) => {
+			console.log("key released:", e.key);
+			if (e.key == "Escape") {
+				text.contentEditable = "false";
+			}
+			text.blur();
+		}, { once: true });
+	}
+}

utils/replyToMessage.ts

@@ -0,0 +1,5 @@
+import type { MessageProps } from "~/types/props";
+
+export default (element: HTMLDivElement, props: MessageProps) => {
+	console.log("element:", element);
+}