From 41f5e98aed23fba4aa596de505d68d8520fbe34f Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 2 Feb 2026 10:54:04 +0000 Subject: [PATCH] fix(editor): prevent '@' character appearing when backspacing emoji When backspacing a custom emoji in the text composer, TipTap's Mention extension would fall back to its default renderText implementation which uses `suggestion?.char ?? '@'`. When the suggestion context is unavailable (e.g., during backspace/delete operations), this fallback produces '@' followed by the emoji shortcode, which then triggers the profile mention suggestion showing "No profiles found". Fix by providing an explicit renderText option to EmojiMention.configure() that always returns the correct format: the actual character for unicode emojis, or `:shortcode:` for custom emojis. This ensures consistent text representation regardless of whether suggestion context is available. Applied to both MentionEditor and RichEditor components. https://claude.ai/code/session_01YWNAEhjLprna1iWcnQEr1o --- src/components/editor/MentionEditor.tsx | 10 +++++++++- src/components/editor/RichEditor.tsx | 9 +++++++++ 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/src/components/editor/MentionEditor.tsx b/src/components/editor/MentionEditor.tsx index 976f5f7..a468e7b 100644 --- a/src/components/editor/MentionEditor.tsx +++ b/src/components/editor/MentionEditor.tsx @@ -900,7 +900,15 @@ export const MentionEditor = forwardRef< .run(); }, }, - // Note: renderLabel is not used when nodeView is defined + // Provide renderText option to prevent fallback to '@' character + // TipTap's default renderText uses `suggestion?.char ?? '@'` which + // can produce '@' when suggestion context is unavailable (e.g., during backspace) + renderText({ node }: any) { + if (node.attrs.source === "unicode") { + return node.attrs.url || ""; + } + return `:${node.attrs.id}:`; + }, }), ); } diff --git a/src/components/editor/RichEditor.tsx b/src/components/editor/RichEditor.tsx index ff808bc..115d9d3 100644 --- a/src/components/editor/RichEditor.tsx +++ b/src/components/editor/RichEditor.tsx @@ -507,6 +507,15 @@ export const RichEditor = forwardRef( .run(); }, }, + // Provide renderText option to prevent fallback to '@' character + // TipTap's default renderText uses `suggestion?.char ?? '@'` which + // can produce '@' when suggestion context is unavailable (e.g., during backspace) + renderText({ node }: any) { + if (node.attrs.source === "unicode") { + return node.attrs.url || ""; + } + return `:${node.attrs.id}:`; + }, }), ); }