TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-24 14:43:08 +03:00
Code Issues Projects Releases Wiki Activity

Fixed Lexical editors being marked as dirty on load (#18159)

Browse Source 
refs https://github.com/TryGhost/Product/issues/3832

---

This pull request improves the user experience and the data quality of
the newsletter settings form. It adds a feature to disable the save
button when there are no changes, and to show feedback on the save
status. It also fixes a bug in the `HtmlEditor` component that causes
unwanted style attributes to be added to the newsletter content.
This commit is contained in:
Jono M 2023-09-15 10:07:14 +01:00 committed by GitHub
parent 851504030c
commit 3bf24cd4a2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
apps/admin-x-settings/src/admin-x-ds/global/form/HtmlEditor.tsx
View File

@ -121,9 +121,22 @@ const KoenigWrapper: React.FC<HtmlEditorProps & { editor: EditorResource }> = ({
};
const handleSetHtml = (html: string) => {
// Workaround for a bug in Lexical where it adds style attributes everywhere with white-space: pre-wrap
// Likely related: https://github.com/facebook/lexical/issues/4255
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
const elements = doc.querySelectorAll('*') as NodeListOf<HTMLElement>;
elements.forEach((element) => {
element.style.removeProperty('white-space');
if (!element.getAttribute('style')) {
element.removeAttribute('style');
}
});
// Koenig sends this event on load without changing the value, so this prevents forms from being marked as unsaved
if (html !== value) {
onChange?.(html);
if (doc.body.innerHTML !== value) {
onChange?.(doc.body.innerHTML);
}
};

3
apps/admin-x-settings/src/components/settings/email/newsletters/NewsletterDetailModal.tsx
View File

@ -371,7 +371,7 @@ const NewsletterDetailModalContent: React.FC<{newsletter: Newsletter}> = ({newsl
const {mutateAsync: editNewsletter} = useEditNewsletter();
const {updateRoute} = useRouting();
const {formState, updateForm, handleSave, validate, errors, clearError} = useForm({
const {formState, saveState, updateForm, handleSave, validate, errors, clearError} = useForm({
initialState: newsletter,
onSave: async () => {
const {newsletters, meta} = await editNewsletter(formState);
@ -420,6 +420,7 @@ const NewsletterDetailModalContent: React.FC<{newsletter: Newsletter}> = ({newsl
return <PreviewModalContent
afterClose={() => updateRoute('newsletters')}
deviceSelector={false}
dirty={saveState === 'unsaved'}
okLabel='Save & close'
preview={preview}
previewBgColor={'grey'}