Skip to content

fix(ui): save nested richtext inside inlineBlock #12773

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(ui): save nested richtext inside inlineBlock #12773

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 2 additions & 23 deletions packages/ui/src/forms/useField/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,31 +86,10 @@ export const useField = <TValue,>(options?: Options): FieldType<TValue> => {
})

if (!disableModifyingForm) {
if (typeof setModified === 'function') {
// Only update setModified to true if the form is not already set to modified. Otherwise the following could happen:
// 1. Text field: someone types in it in an unmodified form
// 2. After setTimeout triggers setModified(true): form is set to modified. Save Button becomes available. Good!
// 3. Type something in text field
// 4. Click on save button before setTimeout in useField has finished (so setModified(true) has not been run yet)
// 5. Form is saved, setModified(false) is set in the Form/index.tsx `submit` function, "saved successfully" toast appears
// 6. setModified(true) inside the timeout is run, form is set to modified again, even though it was already saved and thus set to unmodified. Bad! This should have happened before the form is saved. Now the form should be unmodified and stay that way
// until a NEW change happens. Due to this, the "Leave without saving" modal appears even though it should not when leaving the page fast immediately after saving the document.
// This is only an issue for forms which have already been set to modified true, as that causes the save button to be enabled. If we prevent this setTimeout to be run
// for already-modified forms first place (which is unnecessary), we can avoid this issue. As for unmodified forms, this race issue will not happen, because you cannot click the save button faster
// than the timeout in useField is run. That's because the save button won't even be enabled for clicking until the setTimeout in useField has run.
// This fixes e2e test flakes, as e2e tests were often so fast that they were saving the form before the timeout in useField has run.
// Specifically, this fixes the 'should not warn about unsaved changes when navigating to lexical editor with blocks node and then leaving the page after making a change and saving' lexical e2e test.
if (modified === false) {
// Update modified state after field value comes back
// to avoid cursor jump caused by state value / DOM mismatch
setTimeout(() => {
setModified(true)
}, 10)
}
}
setModified(true)
}
},
[setModified, path, dispatchField, disableFormData, hasRows, modified],
[setModified, path, dispatchField, disableFormData, hasRows],
)

// Store result from hook as ref
Expand Down
Loading