mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-02 03:57:52 +00:00
0f659224a7
### The problem Writing in the text editor can be very frustrating, the reason is that the editor had a debounced save method which would push the article to the backend and update the current state. This however is a bad idea, since the can take anywhere between 100-300ms depending on network conditions. While this would be in progress, the article is still being edited by the user. So at the end of the network request, the state returned from the backend and the current state in the editor is diverged. But since the update happens anyway, the editor would prepend older context. ``` Time --> User Action: [Edit 1] ---> [Edit 2] ---> [Edit 3] Backend Save: Save Req (Edit 1) ----> Response (Edit 1) Resulting Editor State: [Edit 3] + [Edit 1] (Outdated state prepended) ``` ### The solution The solution is to unbind the article from the backend state, ensuring that the article editor is the source of truth and ignoring the responses. This pull request does this by adding an asynchronous save functionality. The changes include adding a new `saveArticleAsync` event and ensuring that the local state is not updated unnecessarily during asynchronous saves. ``` Time --> User Action: [Edit 1] ---> [Edit 2] ---> [Edit 3] Backend Save: Save Req (Edit 1) ----> Response (ignored) Resulting Editor State: [Edit 3] (Consistent and up-to-date) ``` Added the following two debounced methods These complementary debounce methods prevent unnecessary re-renders while ensuring backend is in sync. `saveArticleAsync` preserves the editor as the source of truth, while `saveArticle` manages periodic state updates from the backend with a delay large enough to safely assume that the user has stopped typing Method | Delay | Behavior -- | -- | -- `saveArticleAsync` | 400ms | Sends data to backend and ignores the response `saveArticle` | 2.5s | Sends data and updates local state with the backend response ### How to test 1. Remove the following linedc042f6ddc/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue (L64)1. Update the latency here to 400 (P.S. the diff shows the latency to be 600, but that was added as a stop-gap solution)dc042f6ddc/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue (L51)1. Set the browser network latency to Slow 3G or 3G 1. Start writing on the editor, try fixing typos with backspace or moving around with the cursor --------- Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Co-authored-by: Pranav <pranav@chatwoot.com>