OpenSourceArk/Ghost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🐛 Fixed emojis not updating in Announcement Bar (#19792)

Browse Source 
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.
This commit is contained in:
Ronald Langeveld 2024-03-04 15:17:42 +02:00 committed by GitHub
parent 2816c2c128
commit 8582462619
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 9 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
apps/admin-x-settings/src/components/settings/site/AnnouncementBarModal.tsx
View File

@ -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({