[WEB-1116] fix: current version not displaying the latest content (#5573)

* fix: current version sync

* chore: update read only editor ref type

web/core/components/pages/editor/page-root.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useSearchParams } from "next/navigation";
 // editor
-import { EditorRefApi, useEditorMarkings } from "@plane/editor";
+import { EditorReadOnlyRefApi, EditorRefApi, useEditorMarkings } from "@plane/editor";
 // types
 import { TPage } from "@plane/types";
 // ui
@@ -35,7 +35,7 @@ export const PageRoot = observer((props: TPageRootProps) => {
   const [isVersionsOverlayOpen, setIsVersionsOverlayOpen] = useState(false);
   // refs
   const editorRef = useRef<EditorRefApi>(null);
-  const readOnlyEditorRef = useRef<EditorRefApi>(null);
+  const readOnlyEditorRef = useRef<EditorReadOnlyRefApi>(null);
   // router
   const router = useAppRouter();
   // search params
@@ -89,11 +89,15 @@ export const PageRoot = observer((props: TPageRootProps) => {
     editorRef.current?.clearEditor();
     editorRef.current?.setEditorValue(descriptionHTML);
   };
+  const currentVersionDescription = isContentEditable
+    ? editorRef.current?.getHTML()
+    : readOnlyEditorRef.current?.getHTML();
 
   return (
     <>
       <PageVersionsOverlay
         activeVersion={version}
+        currentVersionDescription={currentVersionDescription ?? null}
         editorComponent={PagesVersionEditor}
         fetchAllVersions={async (pageId) => {
           if (!workspaceSlug || !projectId) return;

web/core/components/pages/version/editor.tsx

@@ -7,20 +7,20 @@ import { IUserLite, TPageVersion } from "@plane/types";
 // plane ui
 import { Loader } from "@plane/ui";
 // hooks
-import { useMember, useMention, usePage, useUser } from "@/hooks/store";
+import { useMember, useMention, useUser } from "@/hooks/store";
 import { usePageFilters } from "@/hooks/use-page-filters";
 // plane web hooks
 import { useIssueEmbed } from "@/plane-web/hooks/use-issue-embed";
 
-type Props = {
+export type TVersionEditorProps = {
   activeVersion: string | null;
+  currentVersionDescription: string | null;
   isCurrentVersionActive: boolean;
-  pageId: string;
   versionDetails: TPageVersion | undefined;
 };
 
-export const PagesVersionEditor: React.FC<Props> = observer((props) => {
+export const PagesVersionEditor: React.FC<TVersionEditorProps> = observer((props) => {
-  const { activeVersion, isCurrentVersionActive, pageId, versionDetails } = props;
+  const { activeVersion, currentVersionDescription, isCurrentVersionActive, versionDetails } = props;
   // params
   const { workspaceSlug, projectId } = useParams();
   // store hooks
@@ -29,7 +29,6 @@ export const PagesVersionEditor: React.FC<Props> = observer((props) => {
     getUserDetails,
     project: { getProjectMemberIds },
   } = useMember();
-  const currentPageDetails = usePage(pageId);
   // derived values
   const projectMemberIds = projectId ? getProjectMemberIds(projectId.toString()) : [];
   const projectMemberDetails = projectMemberIds?.map((id) => getUserDetails(id) as IUserLite);
@@ -92,7 +91,7 @@ export const PagesVersionEditor: React.FC<Props> = observer((props) => {
       </div>
     );
 
-  const description = isCurrentVersionActive ? currentPageDetails.description_html : versionDetails?.description_html;
+  const description = isCurrentVersionActive ? currentVersionDescription : versionDetails?.description_html;
   if (description === undefined || description?.trim() === "") return null;
 
   return (

web/core/components/pages/version/main-content.tsx

@@ -6,17 +6,15 @@ import { TriangleAlert } from "lucide-react";
 import { TPageVersion } from "@plane/types";
 // plane ui
 import { Button, setToast, TOAST_TYPE } from "@plane/ui";
+// components
+import { TVersionEditorProps } from "@/components/pages";
 // helpers
 import { renderFormattedDate, renderFormattedTime } from "@/helpers/date-time.helper";
 
 type Props = {
   activeVersion: string | null;
-  editorComponent: React.FC<{
+  currentVersionDescription: string | null;
-    activeVersion: string | null;
+  editorComponent: React.FC<TVersionEditorProps>;
-    isCurrentVersionActive: boolean;
-    pageId: string;
-    versionDetails: TPageVersion | undefined;
-  }>;
   fetchVersionDetails: (pageId: string, versionId: string) => Promise<TPageVersion | undefined>;
   handleClose: () => void;
   handleRestore: (descriptionHTML: string) => Promise<void>;
@@ -25,8 +23,16 @@ type Props = {
 };
 
 export const PageVersionsMainContent: React.FC<Props> = observer((props) => {
-  const { activeVersion, editorComponent, fetchVersionDetails, handleClose, handleRestore, pageId, restoreEnabled } =
+  const {
-    props;
+    activeVersion,
+    currentVersionDescription,
+    editorComponent,
+    fetchVersionDetails,
+    handleClose,
+    handleRestore,
+    pageId,
+    restoreEnabled,
+  } = props;
   // states
   const [isRestoring, setIsRestoring] = useState(false);
   const [isRetrying, setIsRetrying] = useState(false);
@@ -112,8 +118,8 @@ export const PageVersionsMainContent: React.FC<Props> = observer((props) => {
           <div className="pt-8 h-full overflow-y-scroll vertical-scrollbar scrollbar-sm">
             <VersionEditor
               activeVersion={activeVersion}
+              currentVersionDescription={currentVersionDescription}
               isCurrentVersionActive={isCurrentVersionActive}
-              pageId={pageId}
               versionDetails={versionDetails}
             />
           </div>

web/core/components/pages/version/root.tsx

@@ -2,18 +2,14 @@ import { observer } from "mobx-react";
 // plane types
 import { TPageVersion } from "@plane/types";
 // components
-import { PageVersionsMainContent, PageVersionsSidebarRoot } from "@/components/pages";
+import { PageVersionsMainContent, PageVersionsSidebarRoot, TVersionEditorProps } from "@/components/pages";
 // helpers
 import { cn } from "@/helpers/common.helper";
 
 type Props = {
   activeVersion: string | null;
-  editorComponent: React.FC<{
+  currentVersionDescription: string | null;
-    activeVersion: string | null;
+  editorComponent: React.FC<TVersionEditorProps>;
-    isCurrentVersionActive: boolean;
-    pageId: string;
-    versionDetails: TPageVersion | undefined;
-  }>;
   fetchAllVersions: (pageId: string) => Promise<TPageVersion[] | undefined>;
   fetchVersionDetails: (pageId: string, versionId: string) => Promise<TPageVersion | undefined>;
   handleRestore: (descriptionHTML: string) => Promise<void>;
@@ -26,6 +22,7 @@ type Props = {
 export const PageVersionsOverlay: React.FC<Props> = observer((props) => {
   const {
     activeVersion,
+    currentVersionDescription,
     editorComponent,
     fetchAllVersions,
     fetchVersionDetails,
@@ -51,6 +48,7 @@ export const PageVersionsOverlay: React.FC<Props> = observer((props) => {
     >
       <PageVersionsMainContent
         activeVersion={activeVersion}
+        currentVersionDescription={currentVersionDescription}
         editorComponent={editorComponent}
         fetchVersionDetails={fetchVersionDetails}
         handleClose={handleClose}