72c9e1775b
# Pull Request Template ## Description ### Description This PR fixes an issue where the editor would reset content and move the cursor while typing. The issue was caused by a dual debounce setup (400ms + 2500ms) that saved content and then overwrote local state with stale API responses while the user was still typing. ### What changed * Editor now uses local state (`localTitle`, `localContent`) as the source of truth while editing * Vuex store is only used on initial load or navigation * Replaced dual debounce with a single 500ms debounce (fewer API calls) * `UPDATE_ARTICLE` now merges updates instead of replacing the article * Prevents status changes from wiping unsaved content * Removed `updateAsync` for a simpler update flow ### How it works User types → local ref updates immediately (editor reads from this) → 500ms debounce triggers → dispatches `articles/update` → API persists the change → on success: store merges the response (used by other components) → editor remains unaffected (continues using local state) Fixes https://linear.app/chatwoot/issue/CW-6727/better-syncing-of-content-the-editor-randomly-updates-the-content ## Type of change - [x] Bug fix (non-breaking change which fixes an issue) ## How Has This Been Tested? 1. Open any Help Center article for editing 2. Type continuously for a few seconds — content should not reset or jump 3. Change article status (publish/archive/draft) while editing — content should remain intact 4. Test on a slow network (use DevTools throttling) — typing should remain smooth ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [x] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules --------- Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
101 lines
2.7 KiB
JavaScript
101 lines
2.7 KiB
JavaScript
import types from '../../mutation-types';
|
|
|
|
export const mutations = {
|
|
[types.SET_UI_FLAG](_state, uiFlags) {
|
|
_state.uiFlags = {
|
|
..._state.uiFlags,
|
|
...uiFlags,
|
|
};
|
|
},
|
|
|
|
[types.ADD_ARTICLE]: ($state, article) => {
|
|
if (!article.id) return;
|
|
|
|
$state.articles.byId[article.id] = article;
|
|
},
|
|
[types.CLEAR_ARTICLES]: $state => {
|
|
$state.articles.allIds = [];
|
|
$state.articles.byId = {};
|
|
$state.articles.uiFlags.byId = {};
|
|
},
|
|
[types.ADD_MANY_ARTICLES]($state, articles) {
|
|
const allArticles = { ...$state.articles.byId };
|
|
articles.forEach(article => {
|
|
allArticles[article.id] = article;
|
|
});
|
|
|
|
$state.articles.byId = allArticles;
|
|
},
|
|
[types.ADD_MANY_ARTICLES_ID]($state, articleIds) {
|
|
$state.articles.allIds.push(...articleIds);
|
|
},
|
|
|
|
[types.SET_ARTICLES_META]: ($state, meta) => {
|
|
$state.meta = {
|
|
...$state.meta,
|
|
...meta,
|
|
};
|
|
},
|
|
|
|
[types.ADD_ARTICLE_ID]: ($state, articleId) => {
|
|
if ($state.articles.allIds.includes(articleId)) return;
|
|
$state.articles.allIds.push(articleId);
|
|
},
|
|
[types.UPDATE_ARTICLE_FLAG]: ($state, { articleId, uiFlags }) => {
|
|
const flags = $state.articles.uiFlags.byId[articleId] || {};
|
|
|
|
$state.articles.uiFlags.byId[articleId] = {
|
|
...{
|
|
isFetching: false,
|
|
isUpdating: false,
|
|
isDeleting: false,
|
|
},
|
|
...flags,
|
|
...uiFlags,
|
|
};
|
|
},
|
|
[types.ADD_ARTICLE_FLAG]: ($state, { articleId, uiFlags }) => {
|
|
$state.articles.uiFlags.byId[articleId] = {
|
|
...{
|
|
isFetching: false,
|
|
isUpdating: false,
|
|
isDeleting: false,
|
|
},
|
|
...uiFlags,
|
|
};
|
|
},
|
|
[types.SET_ARTICLE_POSITIONS]: ($state, positionsHash) => {
|
|
const { byId, allIds } = $state.articles;
|
|
// Update position on each article record
|
|
Object.entries(positionsHash).forEach(([id, position]) => {
|
|
if (byId[id]) byId[id] = { ...byId[id], position };
|
|
});
|
|
// Re-sort allIds so every consumer sees the new order
|
|
allIds.sort(
|
|
(a, b) =>
|
|
(byId[a]?.position ?? Infinity) - (byId[b]?.position ?? Infinity)
|
|
);
|
|
},
|
|
[types.UPDATE_ARTICLE]: ($state, updatedArticle) => {
|
|
const articleId = updatedArticle.id;
|
|
if ($state.articles.byId[articleId]) {
|
|
const existing = $state.articles.byId[articleId];
|
|
|
|
$state.articles.byId[articleId] = {
|
|
...existing,
|
|
...updatedArticle,
|
|
position: existing.position,
|
|
};
|
|
}
|
|
},
|
|
[types.REMOVE_ARTICLE]($state, articleId) {
|
|
const { [articleId]: toBeRemoved, ...newById } = $state.articles.byId;
|
|
$state.articles.byId = newById;
|
|
},
|
|
[types.REMOVE_ARTICLE_ID]($state, articleId) {
|
|
$state.articles.allIds = $state.articles.allIds.filter(
|
|
id => id !== articleId
|
|
);
|
|
},
|
|
};
|