From 858246261911ebfda2f50405b9b764cdad478ec6 Mon Sep 17 00:00:00 2001
From: Ronald Langeveld <hi@ronaldlangeveld.com>
Date: Mon, 4 Mar 2024 15:17:42 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fixed=20emojis=20not=20updating?=
 =?UTF-8?q?=20in=20Announcement=20Bar=20(#19792)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

refs
https://linear.app/tryghost/issue/ENG-358/🐛-emojis-created-with-lexicals-emoji-picker-are-not-displayed

- Changed the update method from onBlur to a 500ms denounce instead
since the onBlur would update before the emoji plugin for the koenig
editor input field manages to create the emoji.
- Switching to denouncing would ensure the preview only updates once the
input field stopped being modified.
---
 .../settings/site/AnnouncementBarModal.tsx    | 22 ++++++++-----------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/apps/admin-x-settings/src/components/settings/site/AnnouncementBarModal.tsx b/apps/admin-x-settings/src/components/settings/site/AnnouncementBarModal.tsx
index 90392dcfb6..2966d5e132 100644
--- a/apps/admin-x-settings/src/components/settings/site/AnnouncementBarModal.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/AnnouncementBarModal.tsx
@@ -1,8 +1,9 @@
 import AnnouncementBarPreview from './announcementBar/AnnouncementBarPreview';
 import NiceModal from '@ebay/nice-modal-react';
-import React, {useCallback, useState} from 'react';
+import React, {useRef, useState} from 'react';
 import useSettingGroup from '../../../hooks/useSettingGroup';
 import {CheckboxGroup, ColorIndicator, Form, HtmlField, PreviewModalContent, Tab, showToast} from '@tryghost/admin-x-design-system';
+import {debounce} from '@tryghost/admin-x-design-system';
 import {getHomepageUrl} from '@tryghost/admin-x-framework/api/site';
 import {getSettingValues} from '@tryghost/admin-x-framework/api/settings';
 import {useBrowsePosts} from '@tryghost/admin-x-framework/api/posts';
@@ -118,7 +119,6 @@ const AnnouncementBarModal: React.FC = () => {
     const visibilitySettings = JSON.parse(announcementVisibility?.toString() || '[]') as string[];
     const {updateRoute} = useRouting();
     const [selectedPreviewTab, setSelectedPreviewTab] = useState('homepage');
-    const [announcementContentState, setAnnouncementContentState] = useState(announcementContent);
 
     const toggleColorSwatch = (e: string | null) => {
         updateSetting('announcement_background', e);
@@ -134,28 +134,24 @@ const AnnouncementBarModal: React.FC = () => {
         updateSetting('announcement_visibility', JSON.stringify(visibilitySettings));
     };
 
-    const announcementTextHandler = useCallback((e:string) => {
-        setAnnouncementContentState(e);
-    }, []);
+    const updateAnnouncementDebouncedRef = useRef(
+        debounce((value: string) => {
+            updateSetting('announcement_content', value);
+        }, 500)
+    );
 
     const sidebar = <Sidebar
         accentColor={accentColor}
         announcementBackgroundColor={announcementBackgroundColor}
         announcementContent={announcementContent}
         announcementTextHandler={(e) => {
-            announcementTextHandler(e);
+            updateAnnouncementDebouncedRef.current(e);
         }}
         paidMembersEnabled={paidMembersEnabled}
         toggleColorSwatch={toggleColorSwatch}
         toggleVisibility={toggleVisibility}
         visibility={announcementVisibility as string[]}
-        onBlur={() => {
-            if (announcementContentState) {
-                updateSetting('announcement_content', announcementContentState);
-            } else {
-                updateSetting('announcement_content', null);
-            }
-        }}
+        onBlur={() => {}}
     />;
 
     const {data: {posts: [latestPost]} = {posts: []}} = useBrowsePosts({