[WEB-2293] refactor: version editor (#5454)

* refactor: version editor

* chore: added missing props

web/ce/components/pages/index.ts

@@ -1,3 +1,2 @@
 export * from "./editor";
-export * from "./version";
 export * from "./extra-actions";

web/ce/components/pages/version/index.ts

@@ -1 +0,0 @@
-export * from "./editor";

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

@@ -8,7 +8,7 @@ import { TPage } from "@plane/types";
 // plane ui
 import { setToast, TOAST_TYPE } from "@plane/ui";
 // components
-import { PageEditorHeaderRoot, PageEditorBody, PageVersionsOverlay } from "@/components/pages";
+import { PageEditorHeaderRoot, PageEditorBody, PageVersionsOverlay, PagesVersionEditor } from "@/components/pages";
 // hooks
 import { useProjectPages } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
@@ -102,6 +102,7 @@ export const PageRoot = observer((props: TPageRootProps) => {
     <>
       <PageVersionsOverlay
         activeVersion={version}
+        editorComponent={PagesVersionEditor}
         fetchAllVersions={async (pageId) => {
           if (!workspaceSlug || !projectId) return;
           return await projectPageVersionService.fetchAllVersions(

web/core/components/pages/version/index.ts

@@ -1,3 +1,4 @@
+export * from "./editor";
 export * from "./main-content";
 export * from "./root";
 export * from "./sidebar-list-item";

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

@@ -8,11 +8,15 @@ import { TPageVersion } from "@plane/types";
 import { Button, setToast, TOAST_TYPE } from "@plane/ui";
 // helpers
 import { renderFormattedDate, renderFormattedTime } from "@/helpers/date-time.helper";
-// plane web components
-import { PagesVersionEditor } from "@/plane-web/components/pages";
 
 type Props = {
   activeVersion: string | null;
+  editorComponent: React.FC<{
+    activeVersion: string | null;
+    isCurrentVersionActive: boolean;
+    pageId: string;
+    versionDetails: TPageVersion | undefined;
+  }>;
   fetchVersionDetails: (pageId: string, versionId: string) => Promise<TPageVersion | undefined>;
   handleClose: () => void;
   handleRestore: (descriptionHTML: string) => Promise<void>;
@@ -21,7 +25,8 @@ type Props = {
 };
 
 export const PageVersionsMainContent: React.FC<Props> = observer((props) => {
-  const { activeVersion, fetchVersionDetails, handleClose, handleRestore, pageId, restoreEnabled } = props;
+  const { activeVersion, editorComponent, fetchVersionDetails, handleClose, handleRestore, pageId, restoreEnabled } =
+    props;
   // states
   const [isRestoring, setIsRestoring] = useState(false);
   const [isRetrying, setIsRetrying] = useState(false);
@@ -63,6 +68,8 @@ export const PageVersionsMainContent: React.FC<Props> = observer((props) => {
     setIsRetrying(false);
   };
 
+  const VersionEditor = editorComponent;
+
   return (
     <div className="flex-grow flex flex-col">
       {versionDetailsError ? (
@@ -103,7 +110,7 @@ export const PageVersionsMainContent: React.FC<Props> = observer((props) => {
             )}
           </div>
           <div className="pt-8 h-full overflow-y-scroll vertical-scrollbar scrollbar-sm">
-            <PagesVersionEditor
+            <VersionEditor
               activeVersion={activeVersion}
               isCurrentVersionActive={isCurrentVersionActive}
               pageId={pageId}

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

@@ -8,6 +8,12 @@ import { cn } from "@/helpers/common.helper";
 
 type Props = {
   activeVersion: string | null;
+  editorComponent: React.FC<{
+    activeVersion: string | null;
+    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>;
@@ -20,6 +26,7 @@ type Props = {
 export const PageVersionsOverlay: React.FC<Props> = observer((props) => {
   const {
     activeVersion,
+    editorComponent,
     fetchAllVersions,
     fetchVersionDetails,
     handleRestore,
@@ -44,6 +51,7 @@ export const PageVersionsOverlay: React.FC<Props> = observer((props) => {
     >
       <PageVersionsMainContent
         activeVersion={activeVersion}
+        editorComponent={editorComponent}
         fetchVersionDetails={fetchVersionDetails}
         handleClose={handleClose}
         handleRestore={handleRestore}