cetirizine

commit 6eff9140863d06684007cd09749907b679225ae8
parent a0f9b08972cdd07dde4c785d1b270eceaf2a4708
Author: MTRNord <mtrnord1@gmail.com>
Date:   Mon,  8 May 2023 16:59:31 +0200

Fix redaction rendering and make sure that we properly choose rooms when sending

Diffstat:
M
src/components/input/chat/input.tsx
 | 
113
+++++++++++++++++++++++++++++++++++++++++--------------------------------------
M
src/pages/MainPage.tsx
 | 
2
+-

2 files changed, 59 insertions(+), 56 deletions(-)
diff --git a/src/components/input/chat/input.tsx b/src/components/input/chat/input.tsx
@@ -23,7 +23,7 @@ import CodeHighlightPlugin from './plugins/CodeHighlightPlugin';
 import EditorTheme from './theme';
 
 import './input.scss';
-import { FC, memo, useEffect, useState } from 'react';
+import { FC, memo, useCallback, useEffect, useState } from 'react';
 import { Send } from 'lucide-react';
 import { useRoom } from '../../../app/sdk/client';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
@@ -106,73 +106,76 @@ const SendButton: FC<SendButtonProps> = memo(({ roomID, onStartSending, onStopSe
     const room = useRoom(roomID || "");
     const [editor] = useLexicalComposerContext();
 
-    const sendMessage = async () => {
+    const sendMessage = useCallback(() => {
         // TODO: Sanitize the html and send message to room
         if (!room) {
             return;
         }
 
-        let htmlMessage = $generateHtmlFromNodes(editor);
-        // TODO: Make sure that we strip any non matrix stuff
-        const codeRegex = /(?<all><code .* (?:data-highlight-language="(?<language>.*?)")(?: .*?)?>(?<code>[\s\S]*?)<\/code>)/;
-        let matched = codeRegex.exec(htmlMessage);
-        while (matched !== null) {
-            if (matched) {
-                const { groups } = matched;
-                if (groups) {
-                    let { all, language, code } = groups;
-
-                    const spanRegex = /<span(?: class=".*?")?>(?<content>.*?)<\/span>/;
-                    let matchedspans = spanRegex.exec(code);
-                    while (matchedspans !== null) {
-                        if (matchedspans) {
-                            const { groups } = matchedspans;
-                            if (groups) {
-                                const { content } = groups;
-
-                                code = code.replaceAll(matchedspans[0], content)
+        editor.getEditorState().read(() => {
+            let htmlMessage = $generateHtmlFromNodes(editor);
+            // TODO: Make sure that we strip any non matrix stuff
+            const codeRegex = /(?<all><code .* (?:data-highlight-language="(?<language>.*?)")(?: .*?)?>(?<code>[\s\S]*?)<\/code>)/;
+            let matched = codeRegex.exec(htmlMessage);
+            while (matched !== null) {
+                if (matched) {
+                    const { groups } = matched;
+                    if (groups) {
+                        let { all, language, code } = groups;
+
+                        const spanRegex = /<span(?: class=".*?")?>(?<content>.*?)<\/span>/;
+                        let matchedspans = spanRegex.exec(code);
+                        while (matchedspans !== null) {
+                            if (matchedspans) {
+                                const { groups } = matchedspans;
+                                if (groups) {
+                                    const { content } = groups;
+
+                                    code = code.replaceAll(matchedspans[0], content)
+                                }
                             }
+                            matchedspans = spanRegex.exec(code)
                         }
-                        matchedspans = spanRegex.exec(code)
-                    }
 
-                    code = code.replaceAll("<br>", "\n")
-                    htmlMessage = htmlMessage.replace(all, `<pre><code class="language-${language}">${code}</code></pre>`)
+                        code = code.replaceAll("<br>", "\n")
+                        htmlMessage = htmlMessage.replace(all, `<pre><code class="language-${language}">${code}</code></pre>`)
+                    }
                 }
+                matched = codeRegex.exec(htmlMessage)
             }
-            matched = codeRegex.exec(htmlMessage)
-        }
-        const plainMessage = $convertToMarkdownString(TRANSFORMERS);
+            const plainMessage = $convertToMarkdownString(TRANSFORMERS);
 
-        console.log(htmlMessage)
-        // TODO: local echo
-        if ((htmlMessage === "" && plainMessage === "") || htmlMessage === '<p class="editor-paragraph"><br></p>') {
-            return;
-        }
-        onStartSending();
-        console.log("Sending message to: ", roomID)
-
-        if (htmlMessage !== '<p class="editor-paragraph"><br></p>') {
-            try {
-                await room.sendHtmlMessage(htmlMessage, plainMessage);
-                editor.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined);
-                editor.dispatchCommand(CLEAR_HISTORY_COMMAND, undefined);
-                localStorage.removeItem(`editor-${roomID}`);
-            } catch (e: any) {
-                console.log(e);
+            console.log(htmlMessage)
+            // TODO: local echo
+            if ((htmlMessage === "" && plainMessage === "") || htmlMessage === '<p class="editor-paragraph"><br></p>') {
+                return;
             }
-        } else {
-            try {
-                await room.sendTextMessage(plainMessage);
-                editor.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined);
-                editor.dispatchCommand(CLEAR_HISTORY_COMMAND, undefined);
-                localStorage.removeItem(`editor-${roomID}`);
-            } catch (e: any) {
-                console.log(e);
+            onStartSending();
+            console.log("Sending message to: ", roomID)
+
+            if (htmlMessage !== '<p class="editor-paragraph"><br></p>') {
+                room.sendHtmlMessage(htmlMessage, plainMessage).then(() => {
+                    editor.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined);
+                    editor.dispatchCommand(CLEAR_HISTORY_COMMAND, undefined);
+                    localStorage.removeItem(`editor-${roomID}`);
+                    onStopSending();
+                }).catch((e) => {
+                    console.log(e);
+                    onStopSending();
+                })
+            } else {
+                room.sendTextMessage(plainMessage).then(() => {
+                    editor.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined);
+                    editor.dispatchCommand(CLEAR_HISTORY_COMMAND, undefined);
+                    localStorage.removeItem(`editor-${roomID}`);
+                    onStopSending();
+                }).catch((e) => {
+                    console.log(e);
+                    onStopSending();
+                })
             }
-        }
-        onStopSending();
-    }
+        })
+    }, [roomID, editor]);
 
     useEffect(() => {
         editor.registerCommand<KeyboardEvent | null>(
diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
@@ -62,7 +62,7 @@ const ChatView: FC<ChatViewProps> = memo(({ roomID, scrollRef }) => {
             });
 
             // Check if event is redacted
-            const redaction = no_relations?.find((e) => {
+            const redaction = dedupedEvents?.find((e) => {
                 return e.type === "m.room.redaction" && e.redacts === event.event_id;
             });
             const redacted = redaction !== undefined;