Fix cursor position

src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer.tsx

@@ -14,9 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { MutableRefObject, ReactNode, useEffect } from 'react';
+import React, { MutableRefObject, ReactNode } from 'react';
 
 import { useComposerFunctions } from '../hooks/useComposerFunctions';
+import { usePlainTextInitialization } from '../hooks/usePlainTextInitialization';
 import { usePlainTextListeners } from '../hooks/usePlainTextListeners';
 import { ComposerFunctions } from '../types';
 import { Editor } from "./Editor";
@@ -38,12 +39,7 @@ export function PlainTextComposer({
 ) {
     const { ref, onInput, onPaste, onKeyDown } = usePlainTextListeners(onChange, onSend);
     const composerFunctions = useComposerFunctions(ref);
-
-    useEffect(() => {
-        if (ref.current) {
-            ref.current.innerText = initialContent;
-        }
-    }, [ref, initialContent]);
+    usePlainTextInitialization(initialContent, ref);
 
     return <div className={className} onInput={onInput} onPaste={onPaste} onKeyDown={onKeyDown}>
         <Editor ref={ref} disabled={disabled} />

src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx

@@ -20,6 +20,7 @@ import { useWysiwyg, FormattingFunctions } from "@matrix-org/matrix-wysiwyg";
 import { FormattingButtons } from './FormattingButtons';
 import { Editor } from './Editor';
 import { useInputEventProcessor } from '../hooks/useInputEventProcessor';
+import { useSetCursorPosition } from '../hooks/useSetCursorPosition';
 
 interface WysiwygComposerProps {
     disabled?: boolean;
@@ -47,6 +48,8 @@ export const WysiwygComposer = memo(function WysiwygComposer(
         }
     }, [onChange, content, disabled]);
 
+    useSetCursorPosition(isWysiwygReady, ref);
+
     return (
         <div className={className}>
             <FormattingButtons composer={wysiwyg} formattingStates={formattingStates} />

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

@@ -0,0 +1,28 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { RefObject, useEffect } from "react";
+
+import { setCursorPositionAtTheEnd } from "./utils";
+
+export function usePlainTextInitialization(initialContent: string, ref: RefObject<HTMLElement>) {
+    useEffect(() => {
+        if (ref.current) {
+            ref.current.innerText = initialContent;
+            setCursorPositionAtTheEnd(ref.current);
+        }
+    }, [ref, initialContent]);
+}

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

@@ -0,0 +1,27 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { RefObject, useEffect } from "react";
+
+import { setCursorPositionAtTheEnd } from "./utils";
+
+export function useSetCursorPosition(isComposerReady: boolean, ref: RefObject<HTMLElement>) {
+    useEffect(() => {
+        if (ref.current && isComposerReady) {
+            setCursorPositionAtTheEnd(ref.current);
+        }
+    }, [ref, isComposerReady]);
+}

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

@@ -41,3 +41,14 @@ export function focusComposer(
         );
     }
 }
+
+export function setCursorPositionAtTheEnd(element: HTMLElement) {
+    const range = document.createRange();
+    range.selectNodeContents(element);
+    range.collapse(false);
+    const sel = document.getSelection();
+    sel.removeAllRanges();
+    sel.addRange(range);
+
+    element.focus();
+}