Integration work for rich text editor 2.3.1

package.json

@@ -61,7 +61,7 @@
     "dependencies": {
         "@babel/runtime": "^7.12.5",
         "@matrix-org/analytics-events": "^0.5.0",
-        "@matrix-org/matrix-wysiwyg": "^2.3.0",
+        "@matrix-org/matrix-wysiwyg": "^2.3.1",
         "@matrix-org/react-sdk-module-api": "^0.0.5",
         "@sentry/browser": "^7.0.0",
         "@sentry/tracing": "^7.0.0",

src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextInitialization.ts

@@ -19,7 +19,7 @@ import { RefObject, useEffect } from "react";
 export function usePlainTextInitialization(initialContent = "", ref: RefObject<HTMLElement>): void {
     useEffect(() => {
         if (ref.current) {
-            ref.current.innerText = initialContent;
+            ref.current.innerHTML = initialContent;
         }
     }, [ref, initialContent]);
 }

src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners.ts

@@ -31,16 +31,6 @@ function isDivElement(target: EventTarget): target is HTMLDivElement {
     return target instanceof HTMLDivElement;
 }
 
-// Hitting enter inside the editor inserts an editable div, initially containing a <br />
-// For correct display, first replace this pattern with a newline character and then remove divs
-// noting that they are used to delimit paragraphs
-function amendInnerHtml(text: string): string {
-    return text
-        .replace(/<div><br><\/div>/g, "\n") // this is pressing enter then not typing
-        .replace(/<div>/g, "\n") // this is from pressing enter, then typing inside the div
-        .replace(/<\/div>/g, "");
-}
-
 /**
  * React hook which generates all of the listeners and the ref to be attached to the editor.
  *
@@ -100,9 +90,8 @@ export function usePlainTextListeners(
             } else if (isNotNull(ref) && isNotNull(ref.current)) {
                 // if called with no argument, read the current innerHTML from the ref and amend it as per `onInput`
                 const currentRefContent = ref.current.innerHTML;
-                const amendedContent = amendInnerHtml(currentRefContent);
-                setContent(amendedContent);
-                onChange?.(amendedContent);
+                setContent(currentRefContent);
+                onChange?.(currentRefContent);
             }
         },
         [onChange, ref],
@@ -113,16 +102,13 @@ export function usePlainTextListeners(
     // when a user selects a suggestion from the autocomplete menu
     const { suggestion, onSelect, handleCommand, handleMention, handleAtRoomMention } = useSuggestion(ref, setText);
 
-    const enterShouldSend = !useSettingValue<boolean>("MessageComposerInput.ctrlEnterToSend");
     const onInput = useCallback(
         (event: SyntheticEvent<HTMLDivElement, InputEvent | ClipboardEvent>) => {
             if (isDivElement(event.target)) {
-                // if enterShouldSend, we do not need to amend the html before setting text
-                const newInnerHTML = enterShouldSend ? event.target.innerHTML : amendInnerHtml(event.target.innerHTML);
-                setText(newInnerHTML);
+                setText(event.target.innerHTML);
             }
         },
-        [setText, enterShouldSend],
+        [setText],
     );
 
     const onPaste = useCallback(
@@ -146,6 +132,7 @@ export function usePlainTextListeners(
         [eventRelation, mxClient, onInput, roomContext],
     );
 
+    const enterShouldSend = !useSettingValue<boolean>("MessageComposerInput.ctrlEnterToSend");
     const onKeyDown = useCallback(
         (event: KeyboardEvent<HTMLDivElement>) => {
             // we need autocomplete to take priority when it is open for using enter to select

yarn.lock

@@ -1610,10 +1610,10 @@
   resolved "https://registry.yarnpkg.com/@matrix-org/matrix-sdk-crypto-js/-/matrix-sdk-crypto-js-0.1.0-alpha.10.tgz#b6a6395cffd3197ae2e0a88f4eeae8b315571fd2"
   integrity sha512-8V2NKuzGOFzEZeZVgF2is7gmuopdRbMZ064tzPDE0vN34iX6s3O8A4oxIT7SA3qtymwm3t1yEvTnT+0gfbmh4g==
 
-"@matrix-org/matrix-wysiwyg@^2.3.0":
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/@matrix-org/matrix-wysiwyg/-/matrix-wysiwyg-2.3.0.tgz#7a815fb90600342cc74c03a3cc7c9908a1d15dd1"
-  integrity sha512-VtA+Bti2IdqpnpCNaTFHMjbpKXe4xHR+OWWJl/gjuYgn4NJO9lfeeEIv34ftC6dBh7R280JEiMxQ9mDcH0J54g==
+"@matrix-org/matrix-wysiwyg@^2.3.1":
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/@matrix-org/matrix-wysiwyg/-/matrix-wysiwyg-2.3.1.tgz#4b607323f3ffd8c332abeba7226010ecc031ed12"
+  integrity sha512-OxJvA+pSGdP2f55foZGEDmU2qvILFLLjV53MOgPw1F6zDAp8nDL1rPPIzFv1qgDj5W7d4Rzq7FnN25vINnAu+A==
 
 "@matrix-org/olm@https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.14.tgz":
   version "3.2.14"