### 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>
* feat: sort by position
* chore: whitespace change
* feat: add border bottom color to list item
* feat: allow dragging articles
* feat: add migration to reorder all articles
* feat: add onsort method
* feat: finish UI sorting
* feat: show 50 per page in articles list
* feat: add article sorting methods
* feat: patch up reorder action with the API
* refactor: better naming
* chore: add comments
* feat: attach position to article before create
* feat: move article to end if moved between categories
* chore: add comments
* chore: update version
* fix: don't change position if previous category was nil
* fix: condition to trigger update on category change
* refactor: store new_position
* refactor: use grid instead of table
* feat: add snug spacing
* feat: add grab-icon
* feat: add grab icon to list
* refactor: show draggable only for category page
* feat: add update_positions as a class method
---------
Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
* Added one more endpoint to attach tempfile and get logo
* Added one more endpoint to attach tempfile and get logo
* spec fixes
* Upload file for articles irrespective of the association
* Upload file for articles irrespective of the association
* Add multiple images with different keys
* feat: Adds image attachment for help center articles
* Adds validation for file upload
* Fixes space above image after adding to doc
* chore: Removed svg from file upload type
* Update app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
* Update app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
* Removes caption for the image
* Fixes woot prosemirror package version
* Update yarn.lock
* Update yarn.lock
---------
Co-authored-by: Tejaswini Chile <tejaswini@chatwoot.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: iamsivin <iamsivin@gmail.com>
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
* Add more actions
* Complete sidebar store integration
* Complete portal list store integration
* Fixed the specs
* Added missing specs
* Add comment
* Code cleanup
* Fixed all the spec issues
* Add portal and article API specs
* Add category name in article list
* Add more locales
* Code beautification
* Exclude locale from codeclimate ci
* feat: Category store integration
* chore: Minor fixes
* chore: API call fixes
* chore: Minor fixes
* chore: Minor fixes
* chore: Adds the ability for get articles based on categories
* chore: minor fixes
* chore: Minor fixes
* chore: fixes specs and minor improvements
* chore: Review fixes
* chore: Minor fixes
* chore: Review fixes
* chore: Review fixes
* chore: Spacing fixes
* Code cleanup
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
