[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}

yarn.lock

@@ -4382,7 +4382,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.8.0 || ^17.0.0 || ^18.0.0", "@types/react@^18.2.42", "@types/react@^18.2.48":
+"@types/react@*", "@types/react@18.2.48", "@types/react@^16.8.0 || ^17.0.0 || ^18.0.0", "@types/react@^18.2.42", "@types/react@^18.2.48":
   version "18.2.48"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.48.tgz#11df5664642d0bd879c1f58bc1d37205b064e8f1"
   integrity sha512-qboRCl6Ie70DQQG9hhNREz81jqC1cs9EVNcjQ1AU+jH6NFfSAhVVbrrY/+nSF+Bsk4AOwm9Qa61InvMCyV+H3w==
@@ -11951,6 +11951,7 @@ string-argv@~0.3.2:
   integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==
 
 "string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+  name string-width-cjs
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -13322,6 +13323,7 @@ wordwrap@^1.0.0:
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
 "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+  name wrap-ansi-cjs
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==