### 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 line
dc042f6ddc/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>
0f659224a7