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

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

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

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

@@ -122,11 +122,17 @@ 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);
 

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

@@ -26,12 +26,13 @@ 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 trimmedTitle = title.trimStart();
+  const match = trimmedTitle.match(regex);
 
-  if (match && title.startsWith(match[0])) {
+  if (match && trimmedTitle.startsWith(match[0])) {
     const emoji = match[0];
-    const titleWithoutEmoji = title.substring(emoji.length).trim();
+    const titleWithoutEmoji = trimmedTitle.substring(emoji.length).trim();
     return { emoji, titleWithoutEmoji };
   }