fix(app): send default emoji as unicode instead of shortcodes (#1996)

fluxer_app/src/features/channel/components/LexicalChannelTextareaContent.tsx

@@ -286,13 +286,17 @@ export const LexicalChannelTextareaContent = observer(
 			previousValueRef.current = initialDraftRef.current.display;
 			rememberSegmentsForValue(initialDraftRef.current.display, initialDraftRef.current.segments);
 		}
+		const [wireValue, setWireValue] = useState(() =>
+			segmentManagerRef.current.displayToActual(initialDraftRef.current.display),
+		);
 		const handleEditorChange = useCallback(
-			(display: string, segments: Array<MentionSegment>) => {
+			(display: string, segments: Array<MentionSegment>, wire: string) => {
 				editorDisplayRef.current = display;
 				segmentManagerRef.current.setSegments(segments);
 				previousValueRef.current = display;
 				rememberSegmentsForValue(display, segments);
 				setValue(display);
+				setWireValue(wire);
 			},
 			[previousValueRef, rememberSegmentsForValue, segmentManagerRef],
 		);
@@ -342,10 +346,7 @@ export const LexicalChannelTextareaContent = observer(
 		const sendMentionConfirmationEvent = useCallback((event: MentionConfirmationEvent) => {
 			setMentionConfirmationSnapshot((snapshot) => transitionMentionConfirmationSnapshot(snapshot, event));
 		}, []);
-		const currentMentionConfirmationSourceContent = useMemo(
-			() => displayToActual(value).trim(),
-			[displayToActual, value],
-		);
+		const currentMentionConfirmationSourceContent = useMemo(() => wireValue.trim(), [wireValue]);
 		const currentMentionConfirmationSourceContentRef = useRef(currentMentionConfirmationSourceContent);
 		const pendingMentionConfirmationRef = useRef<MentionConfirmationInfo | null>(pendingMentionConfirmation);
 		const handleSendMessageRef = useRef(handleSendMessage);
@@ -514,8 +515,8 @@ export const LexicalChannelTextareaContent = observer(
 			[channel, i18n],
 		);
 		const trimmedMessageContent = useMemo(
-			() => resolveTypedEmojiContent(displayToActual(value).trim()),
-			[displayToActual, resolveTypedEmojiContent, value],
+			() => resolveTypedEmojiContent(wireValue.trim()),
+			[resolveTypedEmojiContent, wireValue],
 		);
 		const hasMessageContent = useMemo(() => hasVisibleMessageContent(trimmedMessageContent), [trimmedMessageContent]);
 		const isSubmissionBlockedBySlowmode = useMemo(() => {

fluxer_app/src/features/lexical/composer/ComposerSerialization.ts

@@ -17,6 +17,7 @@ import {
 	$createComposerPlainSegmentNode,
 	$isComposerPlainSegmentNode,
 } from '@app/features/lexical/composer/nodes/ComposerPlainSegmentNode';
+import {$isComposerStandardEmojiNode} from '@app/features/lexical/composer/nodes/ComposerStandardEmojiNode';
 import {$createSlashSeparatorNode} from '@app/features/lexical/composer/nodes/SlashSeparatorNode';
 import {
 	$createSlashSlotNode,
@@ -306,6 +307,9 @@ export function $projectComposer(): ComposerProjection {
 					start,
 					end: display.length,
 				});
+			} else if ($isComposerStandardEmojiNode(child)) {
+				display += child.getTextContent();
+				wire += child.getWireText();
 			} else if ($isSlashSlotNode(child)) {
 				const displayText = child.getTextContent();
 				const start = display.length;

fluxer_app/src/features/lexical/composer/nodes/ComposerStandardEmojiNode.tsx

@@ -117,6 +117,11 @@ export class ComposerStandardEmojiNode extends DecoratorNode<JSX.Element> {
 		return this.getLatest().__display;
 	}
 
+	getWireText(): string {
+		const self = this.getLatest();
+		return self.__literal ? self.__display : self.__surrogate;
+	}
+
 	getEmojiName(): string {
 		return this.getLatest().__name;
 	}