TS

Author: MartinSchoeler

apps/meteor/app/ui-message/client/messageBox/createComposerAPI.ts

@@ -296,12 +296,9 @@ export const createComposerAPI = (
 			input.value = textAreaTxt.substring(0, selection.start) + text + textAreaTxt.substring(selection.end);
 		}
 
-		input.selectionStart = selection.start + text.length;
-		input.selectionEnd = selection.start + text.length;
-
-		if (selectionStart !== selectionEnd) {
-			input.selectionStart = selectionStart;
-		}
+		const cursorPosition = (selection.start ?? 0) + text.length;
+		input.selectionStart = cursorPosition;
+		input.selectionEnd = cursorPosition;
 
 		triggerEvent(input, 'input');
 		triggerEvent(input, 'change');

apps/meteor/app/ui-message/client/messageBox/renderComposerMarkup.tsx

@@ -14,7 +14,7 @@ const detectEmoji: ComposerMarkupContextValue['detectEmoji'] = (text) => {
 
 	const rawImage = image ? image.replace(/^url\(["']?/, '').replace(/["']?\)$/, '') : undefined;
 
-	return [{ name, className, image: rawImage, content: children ?? '' }];
+	return [{ name, className: className ?? '', image: rawImage, content: children ?? '' }];
 };
 
 export const renderComposerMarkup = (tokens: Root, parseOptions: Options): string => {

apps/meteor/client/views/room/composer/messageBox/RichTextMessageBox.tsx

@@ -60,7 +60,7 @@ type TypingState = {
 	hideplaceholder: boolean;
 };
 
-const reducer = (_: unknown, event: FormEvent<HTMLDivElement>): TypingState => {
+const reducer = (_: unknown, event: FormEvent<HTMLElement>): TypingState => {
 	const target = event.target as HTMLDivElement;
 	const { childNodes } = target;
 

packages/ui-composer/src/MessageComposer/RichTextComposerInputExpandable.tsx

@@ -1,7 +1,7 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Box, IconButton } from '@rocket.chat/fuselage';
 import { useState, forwardRef } from 'react';
-import type { FormEvent, ComponentProps } from 'react';
+import type { ComponentProps, InputEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import RichTextComposerInput from './RichTextComposerInput';
@@ -18,7 +18,7 @@ const RichTextComposerInputExpandable = forwardRef<HTMLDivElement, RichTextExpan
 		const { t } = useTranslation();
 		const [expanded, setExpanded] = useState(false);
 
-		const handleInput = (event: FormEvent<HTMLDivElement>) => {
+		const handleInput = (event: InputEvent<HTMLDivElement>) => {
 			if ((event.target as HTMLDivElement).innerText.trim().length === 0) {
 				setExpanded(false);
 			}

yarn.lock

@@ -15380,16 +15380,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:~18.3.27":
-  version: 18.3.31
-  resolution: "@types/react@npm:18.3.31"
-  dependencies:
-    "@types/prop-types": "npm:*"
-    csstype: "npm:^3.2.2"
-  checksum: 10/0a5d73b1ba3ce73273b28cc50da78d520b1a8d4253075820dc5cf6c9e286ff6cb339b56bd613d05885fec214fbecd8137bddcbdb475612fdcc46e061d88f00fc
-  languageName: node
-  linkType: hard
-
 "@types/react@npm:~19.2.17":
   version: 19.2.17
   resolution: "@types/react@npm:19.2.17"
@@ -28088,7 +28078,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"loose-envify@npm:^1.0.0, loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0":
+"loose-envify@npm:^1.0.0, loose-envify@npm:^1.4.0":
   version: 1.4.0
   resolution: "loose-envify@npm:1.4.0"
   dependencies:
@@ -33062,15 +33052,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:~18.3.1":
-  version: 18.3.1
-  resolution: "react@npm:18.3.1"
-  dependencies:
-    loose-envify: "npm:^1.1.0"
-  checksum: 10/261137d3f3993eaa2368a83110466fc0e558bc2c7f7ae7ca52d94f03aac945f45146bd85e5f481044db1758a1dbb57879e2fcdd33924e2dde1bdc550ce73f7bf
-  languageName: node
-  linkType: hard
-
 "react@npm:~19.2.7":
   version: 19.2.7
   resolution: "react@npm:19.2.7"