✨(frontend) prevent duplicate emoji when used as first character in title

ensures icon and title are visually distinct in sub-document headers

Signed-off-by: Cyril <c.gromoff@gmail.com>

Author: Ovgodd

CHANGELOG.md

@@ -19,6 +19,8 @@ and this project adheres to
 - 🐛(docx) fix image overflow by limiting width to 600px during export #1525
 - 🐛(frontend) preserve @ character when esc is pressed after typing it #1512
 - 🐛(frontend) fix pdf embed to use full width #1526
+- 🐛(frontend) prevent duplicate emoji when used as first character in t… #1595
+
 
 ## [3.9.0] - 2025-11-10
 

src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx

@@ -122,15 +122,22 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
       if (isTopRoot) {
         const sanitizedTitle = updateDocTitle(doc, inputText);
         setTitleDisplay(sanitizedTitle);
+        return sanitizedTitle;
       } else {
-        const sanitizedTitle = updateDocTitle(
-          doc,
-          emoji ? `${emoji} ${inputText}` : inputText,
-        );
+        const { emoji: pastedEmoji } = getEmojiAndTitle(inputText);
+        const textPreservingPastedEmoji = pastedEmoji
+          ? `\u200B${inputText}`
+          : inputText;
+        const finalTitle = emoji
+          ? `${emoji} ${textPreservingPastedEmoji}`
+          : textPreservingPastedEmoji;
+
+        const sanitizedTitle = updateDocTitle(doc, finalTitle);
         const { titleWithoutEmoji: sanitizedTitleWithoutEmoji } =
           getEmojiAndTitle(sanitizedTitle);
 
         setTitleDisplay(sanitizedTitleWithoutEmoji);
+        return sanitizedTitleWithoutEmoji;
       }
     },
     [updateDocTitle, doc, emoji, isTopRoot],
@@ -139,7 +146,10 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter') {
       e.preventDefault();
-      handleTitleSubmit(e.currentTarget.textContent || '');
+      const nextDisplay = handleTitleSubmit(e.currentTarget.textContent || '');
+      if (typeof nextDisplay === 'string') {
+        e.currentTarget.textContent = nextDisplay;
+      }
     }
   };
 
@@ -168,9 +178,15 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
           suppressContentEditableWarning={true}
           aria-label={`${t('Document title')}`}
           aria-multiline={false}
-          onBlurCapture={(event) =>
-            handleTitleSubmit(event.target.textContent || '')
-          }
+          onBlurCapture={(event) => {
+            const nextDisplay = handleTitleSubmit(
+              event.target.textContent || '',
+            );
+            // Immediately reflect sanitized display in the editable field
+            if (typeof nextDisplay === 'string') {
+              event.target.textContent = nextDisplay;
+            }
+          }}
           $color={colorsTokens['greyscale-1000']}
           $padding={{ right: 'big' }}
           $css={css`

src/frontend/apps/impress/src/features/docs/doc-management/utils.ts

@@ -26,12 +26,14 @@ export const getEmojiAndTitle = (title: string) => {
   // Use emoji-regex library for comprehensive emoji detection compatible with ES5
   const regex = emojiRegex();
 
-  // Check if the title starts with an emoji
-  const match = title.match(regex);
+  // Ignore leading spaces when checking for a leading emoji
+  const leadingSpacesLength = title.match(/^\s+/)?.[0]?.length ?? 0;
+  const trimmedStart = title.slice(leadingSpacesLength);
+  const match = trimmedStart.match(regex);
 
-  if (match && title.startsWith(match[0])) {
+  if (match && trimmedStart.startsWith(match[0])) {
     const emoji = match[0];
-    const titleWithoutEmoji = title.substring(emoji.length).trim();
+    const titleWithoutEmoji = trimmedStart.substring(emoji.length).trim();
     return { emoji, titleWithoutEmoji };
   }