From bb9c4cedec42afd52282269b4d362e9601f281c8 Mon Sep 17 00:00:00 2001
From: iamsivin <iamsivin@gmail.com>
Date: Wed, 15 Apr 2026 19:58:38 +0530
Subject: [PATCH] chore: sync article content on tab visibility change

---
 .../Pages/ArticleEditorPage/ArticleEditor.vue | 21 ++++++++++++++-----
 .../pages/PortalsArticlesEditPage.vue         |  9 +++++++-
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue
index 2f06ea01e..3c5ebc8de 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue
@@ -1,5 +1,6 @@
 <script setup>
-import { ref, computed, watch } from 'vue';
+import { ref, computed, watch, nextTick } from 'vue';
+import { useDocumentVisibility } from '@vueuse/core';
 import { debounce } from '@chatwoot/utils';
 import { useI18n } from 'vue-i18n';
 import { ARTICLE_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';
@@ -35,23 +36,33 @@ const emit = defineEmits([
 ]);
 
 const { t } = useI18n();
+const visibility = useDocumentVisibility();
 
 const isNewArticle = computed(() => !props.article?.id);
 
 const localTitle = ref(props.article?.title ?? '');
 const localContent = ref(props.article?.content ?? '');
 
+const syncLocalState = () => {
+  localTitle.value = props.article?.title ?? '';
+  localContent.value = props.article?.content ?? '';
+};
+
 // Sync local state when navigating to a different article or on initial fetch
 watch(
   () => props.article?.id,
   newId => {
-    if (newId) {
-      localTitle.value = props.article?.title ?? '';
-      localContent.value = props.article?.content ?? '';
-    }
+    if (newId) syncLocalState();
   }
 );
 
+// Sync local state when user returns to tab (fresh data from re-fetch)
+watch(visibility, state => {
+  if (state === 'visible') {
+    nextTick(syncLocalState);
+  }
+});
+
 const debouncedSave = debounce(value => emit('saveArticle', value), 500, false);
 
 const handleSave = value => {
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesEditPage.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesEditPage.vue
index 36508ded5..e49d4caa6 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesEditPage.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesEditPage.vue
@@ -1,5 +1,6 @@
 <script setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed, onMounted, watch } from 'vue';
+import { useDocumentVisibility } from '@vueuse/core';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useAlert, useTrack } from 'dashboard/composables';
@@ -13,6 +14,7 @@ const route = useRoute();
 const router = useRouter();
 const store = useStore();
 const { t } = useI18n();
+const visibility = useDocumentVisibility();
 
 const { articleSlug, portalSlug } = route.params;
 
@@ -98,6 +100,11 @@ const previewArticle = () => {
   });
 };
 
+// Re-fetch article when user returns to this tab
+watch(visibility, state => {
+  if (state === 'visible') fetchArticleDetails();
+});
+
 onMounted(fetchArticleDetails);
 </script>