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

* refactor: version editor

* chore: added missing props

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/editor.tsx

@@ -0,0 +1,114 @@
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane editor
+import { DocumentReadOnlyEditorWithRef, TDisplayConfig } from "@plane/editor";
+// plane types
+import { IUserLite, TPageVersion } from "@plane/types";
+// plane ui
+import { Loader } from "@plane/ui";
+// hooks
+import { useMember, useMention, usePage, 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 = {
+  activeVersion: string | null;
+  isCurrentVersionActive: boolean;
+  pageId: string;
+  versionDetails: TPageVersion | undefined;
+};
+
+export const PagesVersionEditor: React.FC<Props> = observer((props) => {
+  const { activeVersion, isCurrentVersionActive, pageId, versionDetails } = props;
+  // params
+  const { workspaceSlug, projectId } = useParams();
+  // store hooks
+  const { data: currentUser } = useUser();
+  const {
+    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);
+  // issue-embed
+  const { issueEmbedProps } = useIssueEmbed(workspaceSlug?.toString() ?? "", projectId?.toString() ?? "");
+  // use-mention
+  const { mentionHighlights } = useMention({
+    workspaceSlug: workspaceSlug?.toString() ?? "",
+    projectId: projectId?.toString() ?? "",
+    members: projectMemberDetails,
+    user: currentUser ?? undefined,
+  });
+  // page filters
+  const { fontSize, fontStyle } = usePageFilters();
+
+  const displayConfig: TDisplayConfig = {
+    fontSize,
+    fontStyle,
+  };
+
+  if (!isCurrentVersionActive && !versionDetails)
+    return (
+      <div className="size-full px-5">
+        <Loader className="relative space-y-4">
+          <Loader.Item width="50%" height="36px" />
+          <div className="space-y-2">
+            <div className="py-2">
+              <Loader.Item width="100%" height="36px" />
+            </div>
+            <Loader.Item width="80%" height="22px" />
+            <div className="relative flex items-center gap-2">
+              <Loader.Item width="30px" height="30px" />
+              <Loader.Item width="30%" height="22px" />
+            </div>
+            <div className="py-2">
+              <Loader.Item width="60%" height="36px" />
+            </div>
+            <Loader.Item width="70%" height="22px" />
+            <Loader.Item width="30%" height="22px" />
+            <div className="relative flex items-center gap-2">
+              <Loader.Item width="30px" height="30px" />
+              <Loader.Item width="30%" height="22px" />
+            </div>
+            <div className="py-2">
+              <Loader.Item width="50%" height="30px" />
+            </div>
+            <Loader.Item width="100%" height="22px" />
+            <div className="py-2">
+              <Loader.Item width="30%" height="30px" />
+            </div>
+            <Loader.Item width="30%" height="22px" />
+            <div className="relative flex items-center gap-2">
+              <div className="py-2">
+                <Loader.Item width="30px" height="30px" />
+              </div>
+              <Loader.Item width="30%" height="22px" />
+            </div>
+          </div>
+        </Loader>
+      </div>
+    );
+
+  return (
+    <DocumentReadOnlyEditorWithRef
+      id={activeVersion ?? ""}
+      initialValue={
+        (isCurrentVersionActive ? currentPageDetails.description_html : versionDetails?.description_html) ?? "<p></p>"
+      }
+      containerClassName="p-0 pb-64 border-none"
+      displayConfig={displayConfig}
+      editorClassName="pl-10"
+      mentionHandler={{
+        highlights: mentionHighlights,
+      }}
+      embedHandler={{
+        issue: {
+          widgetCallback: issueEmbedProps.widgetCallback,
+        },
+      }}
+    />
+  );
+});

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}