feat: add emoticon conversion feature for text and HTML inputs

src/app/features/room/RoomInput.tsx

@@ -119,6 +119,7 @@ import { usePowerLevelTags } from '../../hooks/usePowerLevelTags';
 import { useComposingCheck } from '../../hooks/useComposingCheck';
 import { useOtherUserColor } from '../../hooks/useUserColor';
 import { getMemberAvatarMxc } from '../../utils/room';
+import { convertEmoticons, convertEmoticonsInHtml } from '../../utils/emoticonConverter';
 
 interface RoomInputProps {
   editor: Editor;
@@ -134,6 +135,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
     const [isMarkdown] = useSetting(settingsAtom, 'isMarkdown');
     const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
     const [legacyUsernameColor] = useSetting(settingsAtom, 'legacyUsernameColor');
+    const [autoConvertEmoticons] = useSetting(settingsAtom, 'autoConvertEmoticons');
     const direct = useIsDirectRoom();
     const commands = useCommands(mx, room);
     const emojiBtnRef = useRef<HTMLButtonElement>(null);
@@ -348,8 +350,15 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
 
       if (plainText === '') return;
 
-      const body = plainText;
-      const formattedBody = customHtml;
+      let body = plainText;
+      let formattedBody = customHtml;
+
+      // Apply emoticon conversion if enabled
+      if (autoConvertEmoticons) {
+        body = convertEmoticons(body);
+        formattedBody = convertEmoticonsInHtml(formattedBody);
+      }
+
       const mentionData = getMentions(mx, roomId, editor);
 
       const content: IContent = {
@@ -385,7 +394,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       resetEditorHistory(editor);
       setReplyDraft(undefined);
       sendTypingStatus(false);
-    }, [mx, roomId, editor, replyDraft, sendTypingStatus, setReplyDraft, isMarkdown, commands, editorRef]);
+    }, [mx, roomId, editor, replyDraft, sendTypingStatus, setReplyDraft, isMarkdown, commands, autoConvertEmoticons]);
 
     const handleKeyDown: KeyboardEventHandler = useCallback(
       (evt) => {

src/app/features/settings/emojis-stickers/EmojisStickers.tsx

@@ -1,17 +1,22 @@
 import React, { useState } from 'react';
-import { Box, Text, IconButton, Icon, Icons, Scroll } from 'folds';
+import { Box, Text, IconButton, Icon, Icons, Scroll, config, Switch } from 'folds';
 import { Page, PageContent, PageHeader } from '../../../components/page';
+import { SequenceCard } from '../../../components/sequence-card';
 import { GlobalPacks } from './GlobalPacks';
 import { UserPack } from './UserPack';
 import { TelegramImport } from './TelegramImport';
 import { ImagePack } from '../../../plugins/custom-emoji';
 import { ImagePackView } from '../../../components/image-pack-view';
+import { useSetting } from '../../../state/hooks/settings';
+import { settingsAtom } from '../../../state/settings';
+import { SettingTile } from '../../../components/setting-tile';
 
 type EmojisStickersProps = {
   requestClose: () => void;
 };
 export function EmojisStickers({ requestClose }: EmojisStickersProps) {
   const [imagePack, setImagePack] = useState<ImagePack>();
+  const [autoConvertEmoticons, setAutoConvertEmoticons] = useSetting(settingsAtom, 'autoConvertEmoticons');
 
   const handleImagePackViewClose = () => {
     setImagePack(undefined);
@@ -41,6 +46,22 @@ export function EmojisStickers({ requestClose }: EmojisStickersProps) {
         <Scroll hideTrack visibility="Hover">
           <PageContent>
             <Box direction="Column" gap="700">
+              <Box direction="Column" gap="100">
+                <Text size="L400">Options</Text>
+                <SequenceCard variant="SurfaceVariant" direction="Column">
+                  <SettingTile
+                    title="Auto-convert Text Emoticons"
+                    description="Automatically convert text emoticons like :) :D :( to emoji when sending messages."
+                    after={
+                      <Switch
+                        variant="Primary"
+                        value={autoConvertEmoticons}
+                        onChange={setAutoConvertEmoticons}
+                      />
+                    }
+                  />
+                </SequenceCard>
+              </Box>
               <UserPack onViewPack={setImagePack} />
               <GlobalPacks onViewPack={setImagePack} />
               <TelegramImport onViewPack={setImagePack} />