Make quick action dropdowns use capture phase of the event to trigger closure on outside click (#5414)

* chore: project page version

* feat: page version history implemented

* chore: hide save button when version history overlay is active

* refactor: updated navigation logic

* chore: added error states

---------

Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>

admin/core/components/authentication/auth-banner.tsx

@@ -0,0 +1,29 @@
+import { FC } from "react";
+import { Info, X } from "lucide-react";
+// helpers
+import { TAuthErrorInfo } from "@/helpers/authentication.helper";
+
+type TAuthBanner = {
+  bannerData: TAuthErrorInfo | undefined;
+  handleBannerData?: (bannerData: TAuthErrorInfo | undefined) => void;
+};
+
+export const AuthBanner: FC<TAuthBanner> = (props) => {
+  const { bannerData, handleBannerData } = props;
+
+  if (!bannerData) return <></>;
+  return (
+    <div className="relative flex items-center p-2 rounded-md gap-2 border border-custom-primary-100/50 bg-custom-primary-100/10">
+      <div className="w-4 h-4 flex-shrink-0 relative flex justify-center items-center">
+        <Info size={16} className="text-custom-primary-100" />
+      </div>
+      <div className="w-full text-sm font-medium text-custom-primary-100">{bannerData?.message}</div>
+      <div
+        className="relative ml-auto w-6 h-6 rounded-sm flex justify-center items-center transition-all cursor-pointer hover:bg-custom-primary-100/20 text-custom-primary-100/80"
+        onClick={() => handleBannerData && handleBannerData(undefined)}
+      >
+        <X className="w-4 h-4 flex-shrink-0" />
+      </div>
+    </div>
+  );
+};

admin/core/components/authentication/index.ts

@@ -1,3 +1,4 @@
+export * from "./auth-banner";
 export * from "./email-config-switch";
 export * from "./password-config-switch";
 export * from "./authentication-method-card";

admin/core/components/login/sign-in-form.tsx

@@ -8,8 +8,16 @@ import { Button, Input, Spinner } from "@plane/ui";
 // components
 import { Banner } from "@/components/common";
 // helpers
+import {
+  authErrorHandler,
+  EAuthenticationErrorCodes,
+  EErrorAlertType,
+  TAuthErrorInfo,
+} from "@/helpers/authentication.helper";
+
 import { API_BASE_URL } from "@/helpers/common.helper";
 import { AuthService } from "@/services/auth.service";
+import { AuthBanner } from "../authentication";
 // ui
 // icons
 
@@ -53,6 +61,7 @@ export const InstanceSignInForm: FC = (props) => {
   const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
   const [formData, setFormData] = useState<TFormData>(defaultFromData);
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [errorInfo, setErrorInfo] = useState<TAuthErrorInfo | undefined>(undefined);
 
   const handleFormChange = (key: keyof TFormData, value: string | boolean) =>
     setFormData((prev) => ({ ...prev, [key]: value }));
@@ -91,6 +100,15 @@ export const InstanceSignInForm: FC = (props) => {
     [formData.email, formData.password, isSubmitting]
   );
 
+  useEffect(() => {
+    if (errorCode) {
+      const errorDetail = authErrorHandler(errorCode?.toString() as EAuthenticationErrorCodes);
+      if (errorDetail) {
+        setErrorInfo(errorDetail);
+      }
+    }
+  }, [errorCode]);
+
   return (
     <div className="flex-grow container mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 py-10 lg:pt-28 transition-all">
       <div className="relative flex flex-col space-y-6">
@@ -103,7 +121,11 @@ export const InstanceSignInForm: FC = (props) => {
           </p>
         </div>
 
-        {errorData.type && errorData?.message && <Banner type="error" message={errorData?.message} />}
+        {errorData.type && errorData?.message ? (
+          <Banner type="error" message={errorData?.message} />
+        ) : (
+          <>{errorInfo && <AuthBanner bannerData={errorInfo} handleBannerData={(value) => setErrorInfo(value)} />}</>
+        )}
 
         <form
           className="space-y-4"

apiserver/plane/app/serializers/__init__.py

@@ -92,6 +92,7 @@ from .page import (
     SubPageSerializer,
     PageDetailSerializer,
     PageVersionSerializer,
+    PageVersionDetailSerializer,
 )
 
 from .estimate import (

apiserver/plane/app/serializers/page.py

@@ -167,7 +167,40 @@ class PageLogSerializer(BaseSerializer):
 class PageVersionSerializer(BaseSerializer):
     class Meta:
         model = PageVersion
-        fields = "__all__"
+        fields = [
+            "id",
+            "workspace",
+            "page",
+            "last_saved_at",
+            "owned_by",
+            "created_at",
+            "updated_at",
+            "created_by",
+            "updated_by",
+        ]
+        read_only_fields = [
+            "workspace",
+            "page",
+        ]
+
+
+class PageVersionDetailSerializer(BaseSerializer):
+    class Meta:
+        model = PageVersion
+        fields = [
+            "id",
+            "workspace",
+            "page",
+            "last_saved_at",
+            "description_binary",
+            "description_html",
+            "description_json",
+            "owned_by",
+            "created_at",
+            "updated_at",
+            "created_by",
+            "updated_by",
+        ]
         read_only_fields = [
             "workspace",
             "page",

apiserver/plane/app/views/page/version.py

@@ -5,16 +5,18 @@ from rest_framework.response import Response
 # Module imports
 from plane.db.models import PageVersion
 from ..base import BaseAPIView
-from plane.app.permissions import ProjectEntityPermission
-from plane.app.serializers import PageVersionSerializer
+from plane.app.serializers import (
+    PageVersionSerializer,
+    PageVersionDetailSerializer,
+)
+from plane.app.permissions import allow_permission, ROLE
 
 
 class PageVersionEndpoint(BaseAPIView):
 
-    permission_classes = [
-        ProjectEntityPermission,
-    ]
-
+    @allow_permission(
+        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER, ROLE.GUEST]
+    )
     def get(self, request, slug, project_id, page_id, pk=None):
         # Check if pk is provided
         if pk:
@@ -25,7 +27,7 @@ class PageVersionEndpoint(BaseAPIView):
                 pk=pk,
             )
             # Serialize the page version
-            serializer = PageVersionSerializer(page_version)
+            serializer = PageVersionDetailSerializer(page_version)
             return Response(serializer.data, status=status.HTTP_200_OK)
         # Return all page versions
         page_versions = PageVersion.objects.filter(

apiserver/plane/space/views/issue.py

@@ -60,7 +60,6 @@ from plane.db.models import (
     IssueVote,
     ProjectPublicMember,
     IssueAttachment,
-    Project,
 )
 from plane.bgtasks.issue_activities_task import issue_activity
 from plane.utils.issue_filters import issue_filters
@@ -78,15 +77,6 @@ class ProjectIssuesPublicEndpoint(BaseAPIView):
         deploy_board = DeployBoard.objects.filter(
             anchor=anchor, entity_name="project"
         ).first()
-
-        project = Project.objects.get(pk=deploy_board.project_id)
-
-        if project.archived_at:
-            return Response(
-                {"error": "Project is archived"},
-                status=status.HTTP_404_NOT_FOUND,
-            )
-    
         if not deploy_board:
             return Response(
                 {"error": "Project is not published"},

packages/editor/src/core/hooks/use-editor.ts

@@ -126,8 +126,8 @@ export const useEditor = (props: CustomEditorProps) => {
   useImperativeHandle(
     forwardedRef,
     () => ({
-      clearEditor: () => {
-        editorRef.current?.commands.clearContent();
+      clearEditor: (emitUpdate = false) => {
+        editorRef.current?.commands.clearContent(emitUpdate);
       },
       setEditorValue: (content: string) => {
         editorRef.current?.commands.setContent(content);

packages/editor/src/core/types/editor.ts

@@ -6,7 +6,7 @@ import { IMentionHighlight, IMentionSuggestion, TDisplayConfig, TEditorCommands,
 export type EditorReadOnlyRefApi = {
   getMarkDown: () => string;
   getHTML: () => string;
-  clearEditor: () => void;
+  clearEditor: (emitUpdate?: boolean) => void;
   setEditorValue: (content: string) => void;
   scrollSummary: (marking: IMarking) => void;
 };

packages/types/src/pages.d.ts

@@ -48,3 +48,19 @@ export type TPageFilters = {
 };
 
 export type TPageEmbedType = "mention" | "issue";
+
+export type TPageVersion = {
+  created_at: string;
+  created_by: string;
+  deleted_at: string | null;
+  description_binary?: string | null;
+  description_html?: string | null;
+  description_json?: object;
+  id: string;
+  last_saved_at: string;
+  owned_by: string;
+  page: string;
+  updated_at: string;
+  updated_by: string;
+  workspace: string;
+}

packages/ui/src/dropdowns/custom-menu.tsx

@@ -35,6 +35,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
     tabIndex,
     closeOnSelect,
     openOnHover = false,
+    useCaptureForOutsideClick = false,
   } = props;
 
   const [referenceElement, setReferenceElement] = React.useState<HTMLButtonElement | null>(null);
@@ -88,7 +89,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
     }
   };
 
-  useOutsideClickDetector(dropdownRef, closeDropdown);
+  useOutsideClickDetector(dropdownRef, closeDropdown, useCaptureForOutsideClick);
 
   let menuItems = (
     <Menu.Items className={cn("fixed z-10", menuItemsClassName)} static>

packages/ui/src/dropdowns/helper.tsx

@@ -17,6 +17,7 @@ export interface IDropdownProps {
   optionsClassName?: string;
   placement?: Placement;
   tabIndex?: number;
+  useCaptureForOutsideClick?: boolean;
 }
 
 export interface ICustomMenuDropdownProps extends IDropdownProps {

packages/ui/src/hooks/use-outside-click-detector.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 
 // TODO: move it to helpers package
-const useOutsideClickDetector = (ref: React.RefObject<HTMLElement>, callback: () => void) => {
+const useOutsideClickDetector = (ref: React.RefObject<HTMLElement>, callback: () => void, useCapture = false) => {
   const handleClick = (event: MouseEvent) => {
     if (ref.current && !ref.current.contains(event.target as Node)) {
       // get all the element with attribute name data-prevent-outside-click
@@ -31,10 +31,10 @@ const useOutsideClickDetector = (ref: React.RefObject<HTMLElement>, callback: ()
   };
 
   useEffect(() => {
-    document.addEventListener("mousedown", handleClick);
+    document.addEventListener("mousedown", handleClick, useCapture);
 
     return () => {
-      document.removeEventListener("mousedown", handleClick);
+      document.removeEventListener("mousedown", handleClick, useCapture);
     };
   });
 };

space/core/components/common/empty-state.tsx

@@ -1,50 +0,0 @@
-"use client";
-import React from "react";
-
-import Image from "next/image";
-
-// ui
-import { Button } from "@plane/ui";
-
-type Props = {
-  title: string;
-  description?: React.ReactNode;
-  image: any;
-  primaryButton?: {
-    icon?: any;
-    text: string;
-    onClick: () => void;
-  };
-  secondaryButton?: React.ReactNode;
-  disabled?: boolean;
-};
-
-export const EmptyState: React.FC<Props> = ({
-  title,
-  description,
-  image,
-  primaryButton,
-  secondaryButton,
-  disabled = false,
-}) => (
-  <div className={`flex h-full w-full items-center justify-center`}>
-    <div className="flex w-full flex-col items-center text-center">
-      <Image src={image} className="w-52 sm:w-60" alt={primaryButton?.text || "button image"} />
-      <h6 className="mb-3 mt-6 text-xl font-semibold sm:mt-8">{title}</h6>
-      {description && <p className="mb-7 px-5 text-custom-text-300 sm:mb-8">{description}</p>}
-      <div className="flex items-center gap-4">
-        {primaryButton && (
-          <Button
-            variant="primary"
-            prependIcon={primaryButton.icon}
-            onClick={primaryButton.onClick}
-            disabled={disabled}
-          >
-            {primaryButton.text}
-          </Button>
-        )}
-        {secondaryButton}
-      </div>
-    </div>
-  </div>
-);

space/core/components/issues/issue-layouts/issue-layout-HOC.tsx

@@ -1,11 +1,6 @@
 import { observer } from "mobx-react";
-// import { useTheme } from "next-themes";
-import { useTheme } from "next-themes";
 import { TLoader } from "@plane/types";
 import { LogoSpinner } from "@/components/common";
-import { EmptyState } from "@/components/common/empty-state";
-import emptyIssueDark from "@/public/empty-state/search/issues-dark.webp"
-import emptyIssueLight from "@/public/empty-state/search/issues-light.webp"
 
 interface Props {
   children: string | JSX.Element | JSX.Element[];
@@ -18,9 +13,6 @@ interface Props {
 }
 
 export const IssueLayoutHOC = observer((props: Props) => {
-
-  const { resolvedTheme } = useTheme();
-
   const { getIssueLoader, getGroupIssueCount } = props;
 
   const issueCount = getGroupIssueCount(undefined, undefined, false);
@@ -33,15 +25,8 @@ export const IssueLayoutHOC = observer((props: Props) => {
     );
   }
 
-  if (issueCount === 0) {
-    return <div className="flex w-full h-full items-center justify-center">
-      {/* No Issues Found */}
-      <EmptyState
-          image={resolvedTheme === "dark" ? emptyIssueDark : emptyIssueLight}
-          title="Project does not exist"
-          description="The project you are looking for has no issues or has been archived."
-        />
-      </div>;
+  if (getGroupIssueCount(undefined, undefined, false) === 0) {
+    return <div className="flex w-full h-full items-center justify-center">No Issues Found</div>;
   }
 
   return <>{props.children}</>;

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx

@@ -64,7 +64,7 @@ const PageDetailsPage = observer(() => {
     <>
       <PageHead title={name} />
       <div className="flex h-full flex-col justify-between">
-        <div className="h-full w-full flex-shrink-0 flex flex-col overflow-hidden">
+        <div className="relative h-full w-full flex-shrink-0 flex flex-col overflow-hidden">
           <PageRoot page={page} projectId={projectId.toString()} workspaceSlug={workspaceSlug.toString()} />
           <IssuePeekOverview />
         </div>

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
+import { useParams, useSearchParams } from "next/navigation";
 import { FileText } from "lucide-react";
 // types
 import { TLogoProps } from "@plane/types";
@@ -25,6 +25,7 @@ export interface IPagesHeaderProps {
 export const PageDetailsHeader = observer(() => {
   // router
   const { workspaceSlug, pageId } = useParams();
+  const searchParams = useSearchParams();
   // state
   const [isOpen, setIsOpen] = useState(false);
   // store hooks
@@ -55,6 +56,8 @@ export const PageDetailsHeader = observer(() => {
     }
   };
 
+  const isVersionHistoryOverlayActive = !!searchParams.get("version");
+
   return (
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
@@ -157,7 +160,7 @@ export const PageDetailsHeader = observer(() => {
         </div>
       </div>
       <PageDetailsHeaderExtraActions />
-      {isContentEditable && (
+      {isContentEditable && !isVersionHistoryOverlayActive && (
         <Button
           variant="primary"
           size="sm"

web/app/layout.tsx

@@ -1,4 +1,4 @@
-import { Metadata } from "next";
+import { Metadata, Viewport } from "next";
 import Script from "next/script";
 // styles
 import "@/styles/globals.css";
@@ -28,6 +28,15 @@ export const metadata: Metadata = {
   },
 };
 
+export const viewport: Viewport = {
+  minimumScale: 1,
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+  width: "device-width",
+  viewportFit: "cover",
+};
+
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   const isSessionRecorderEnabled = parseInt(process.env.NEXT_PUBLIC_ENABLE_SESSION_RECORDER || "0");
 
@@ -51,10 +60,6 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <link rel="apple-touch-icon" sizes="180x180" href="/icons/icon-180x180.png" />
         <link rel="apple-touch-icon" sizes="512x512" href="/icons/icon-512x512.png" />
         <link rel="manifest" href="/manifest.json" />
-        <meta
-          name="viewport"
-          content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, user-scalable=no, viewport-fit=cover"
-        />
         {/* preloading */}
         <link rel="preload" href={`${API_BASE_URL}/api/instances/`} as="fetch" crossOrigin="use-credentials" />
         <link rel="preload" href={`${API_BASE_URL}/api/users/me/ `} as="fetch" crossOrigin="use-credentials" />

web/ce/components/issues/worklog/activity/filter-root.tsx

@@ -9,7 +9,6 @@ import { TActivityFilters, ACTIVITY_FILTER_TYPE_OPTIONS, TActivityFilterOption }
 export type TActivityFilterRoot = {
   selectedFilters: TActivityFilters[];
   toggleFilter: (filter: TActivityFilters) => void;
-  isIntakeIssue?: boolean;
 };
 
 export const ActivityFilterRoot: FC<TActivityFilterRoot> = (props) => {

web/ce/components/workspace/upgrade/pro-plan-upgrade.tsx

@@ -15,19 +15,33 @@ type TProPiceFrequency = "month" | "year";
 
 type TProPlanPrice = {
   key: string;
-  price: string;
+  currency: string;
+  price: number;
   recurring: TProPiceFrequency;
 };
 
+// constants
+export const calculateYearlyDiscount = (monthlyPrice: number, yearlyPricePerMonth: number): number => {
+  const monthlyCost = monthlyPrice * 12;
+  const yearlyCost = yearlyPricePerMonth * 12;
+  const amountSaved = monthlyCost - yearlyCost;
+  const discountPercentage = (amountSaved / monthlyCost) * 100;
+  return Math.floor(discountPercentage);
+};
+
 const PRO_PLAN_PRICES: TProPlanPrice[] = [
-  { key: "monthly", price: "$7", recurring: "month" },
-  { key: "yearly", price: "$5", recurring: "year" },
+  { key: "monthly", currency: "$", price: 8, recurring: "month" },
+  { key: "yearly", currency: "$", price: 6, recurring: "year" },
 ];
 
 export const ProPlanUpgrade: FC<ProPlanUpgradeProps> = (props) => {
   const { basePlan, features, verticalFeatureList = false, extraFeatures } = props;
   // states
   const [selectedPlan, setSelectedPlan] = useState<TProPiceFrequency>("month");
+  // derived
+  const monthlyPrice = PRO_PLAN_PRICES.find((price) => price.recurring === "month")?.price ?? 0;
+  const yearlyPrice = PRO_PLAN_PRICES.find((price) => price.recurring === "year")?.price ?? 0;
+  const yearlyDiscount = calculateYearlyDiscount(monthlyPrice, yearlyPrice);
   // env
   const PRO_PLAN_MONTHLY_PAYMENT_URL = process.env.NEXT_PUBLIC_PRO_PLAN_MONTHLY_PAYMENT_URL ?? "https://plane.so/pro";
   const PRO_PLAN_YEARLY_PAYMENT_URL = process.env.NEXT_PUBLIC_PRO_PLAN_YEARLY_PAYMENT_URL ?? "https://plane.so/pro";
@@ -55,7 +69,7 @@ export const ProPlanUpgrade: FC<ProPlanUpgradeProps> = (props) => {
                   {price.recurring === "year" && ("Yearly" as string)}
                   {price.recurring === "year" && (
                     <span className="bg-gradient-to-r from-[#C78401] to-[#896828] text-white rounded-full px-2 py-1 ml-1 text-xs">
-                      -28%
+                      -{yearlyDiscount}%
                     </span>
                   )}
                 </>
@@ -69,8 +83,8 @@ export const ProPlanUpgrade: FC<ProPlanUpgradeProps> = (props) => {
               <div className="pt-6 pb-4 text-center font-semibold">
                 <div className="text-2xl">Plane Pro</div>
                 <div className="text-3xl">
-                  {price.recurring === "month" && "$7"}
-                  {price.recurring === "year" && "$5"}
+                  {price.currency}
+                  {price.price}
                 </div>
                 <div className="text-sm text-custom-text-300">a user per month</div>
               </div>

web/core/components/issues/issue-detail/issue-activity/comments/comment-create.tsx

@@ -7,9 +7,10 @@ import { LiteTextEditor } from "@/components/editor/lite-text-editor/lite-text-e
 // constants
 import { EIssueCommentAccessSpecifier } from "@/constants/issue";
 // helpers
+import { cn } from "@/helpers/common.helper";
 import { isEmptyHtmlString } from "@/helpers/string.helper";
 // hooks
-import { useWorkspace } from "@/hooks/store";
+import { useIssueDetail, useWorkspace } from "@/hooks/store";
 // editor
 import { TActivityOperations } from "../root";
 
@@ -27,6 +28,7 @@ export const IssueCommentCreate: FC<TIssueCommentCreate> = (props) => {
   const editorRef = useRef<any>(null);
   // store hooks
   const workspaceStore = useWorkspace();
+  const { peekIssue } = useIssueDetail();
   // derived values
   const workspaceId = workspaceStore.getWorkspaceBySlug(workspaceSlug as string)?.id as string;
   // form info
@@ -58,6 +60,9 @@ export const IssueCommentCreate: FC<TIssueCommentCreate> = (props) => {
 
   return (
     <div
+      className={cn("sticky bottom-0 z-10 bg-custom-background-100 sm:static", {
+        "-bottom-5": !peekIssue,
+      })}
       onKeyDown={(e) => {
         if (e.key === "Enter" && !e.shiftKey && !e.ctrlKey && !e.metaKey && !isEmpty && !isSubmitting)
           handleSubmit(onSubmit)(e);

web/core/components/issues/issue-detail/issue-activity/root.tsx

@@ -123,7 +123,7 @@ export const IssueActivity: FC<TIssueActivity> = observer((props) => {
               disabled={disabled}
             />
           )}
-          <ActivityFilterRoot selectedFilters={selectedFilters} toggleFilter={toggleFilter} isIntakeIssue={isIntakeIssue}/>
+          <ActivityFilterRoot selectedFilters={selectedFilters} toggleFilter={toggleFilter} />
         </div>
       </div>
 

web/core/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx

@@ -163,6 +163,7 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = observer((props
         placement={placements}
         menuItemsClassName="z-[14]"
         maxHeight="lg"
+        useCaptureForOutsideClick
         closeOnSelect
       >
         {MENU_ITEMS.map((item) => {

web/core/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx

@@ -125,6 +125,7 @@ export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = observer((
         placement={placements}
         menuItemsClassName="z-[14]"
         maxHeight="lg"
+        useCaptureForOutsideClick
         closeOnSelect
       >
         {MENU_ITEMS.map((item) => {

web/core/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx

@@ -183,6 +183,7 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
         portalElement={portalElement}
         menuItemsClassName="z-[14]"
         maxHeight="lg"
+        useCaptureForOutsideClick
         closeOnSelect
       >
         {MENU_ITEMS.map((item) => {

web/core/components/issues/issue-layouts/quick-action-dropdowns/draft-issue.tsx

@@ -115,6 +115,7 @@ export const DraftIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
         placement={placements}
         menuItemsClassName="z-[14]"
         maxHeight="lg"
+        useCaptureForOutsideClick
         closeOnSelect
       >
         {MENU_ITEMS.map((item) => {

web/core/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx

@@ -180,6 +180,7 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = observer((pr
         portalElement={portalElement}
         menuItemsClassName="z-[14]"
         maxHeight="lg"
+        useCaptureForOutsideClick
         closeOnSelect
       >
         {MENU_ITEMS.map((item) => {

web/core/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx

@@ -174,6 +174,7 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = observer((p
         portalElement={portalElement}
         menuItemsClassName="z-[14]"
         maxHeight="lg"
+        useCaptureForOutsideClick
         closeOnSelect
       >
         {MENU_ITEMS.map((item) => {

web/core/components/pages/editor/header/options-dropdown.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
-import { ArchiveRestoreIcon, Clipboard, Copy, Link, Lock, LockOpen } from "lucide-react";
+import { useParams, useRouter } from "next/navigation";
+import { ArchiveRestoreIcon, Clipboard, Copy, History, Link, Lock, LockOpen } from "lucide-react";
 // document editor
 import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/editor";
 // ui
@@ -11,6 +11,7 @@ import { ArchiveIcon, CustomMenu, TOAST_TYPE, ToggleSwitch, setToast } from "@pl
 import { copyTextToClipboard, copyUrlToClipboard } from "@/helpers/string.helper";
 // hooks
 import { usePageFilters } from "@/hooks/use-page-filters";
+import { useQueryParams } from "@/hooks/use-query-params";
 // store
 import { IPage } from "@/store/pages/page";
 
@@ -23,6 +24,8 @@ type Props = {
 
 export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
   const { editorRef, handleDuplicatePage, page, handleSaveDescription } = props;
+  // router
+  const router = useRouter();
   // store values
   const {
     archived_at,
@@ -40,6 +43,8 @@ export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
   const { workspaceSlug, projectId } = useParams();
   // page filters
   const { isFullWidth, handleFullWidth } = usePageFilters();
+  // update query params
+  const { updateQueryParams } = useQueryParams();
 
   const handleArchivePage = async () =>
     await archive().catch(() =>
@@ -145,6 +150,19 @@ export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
       icon: archived_at ? ArchiveRestoreIcon : ArchiveIcon,
       shouldRender: canCurrentUserArchivePage,
     },
+    {
+      key: "version-history",
+      action: () => {
+        // add query param, version=current to the route
+        const updatedRoute = updateQueryParams({
+          paramsToAdd: { version: "current" },
+        });
+        router.push(updatedRoute);
+      },
+      label: "Version history",
+      icon: History,
+      shouldRender: true,
+    },
   ];
 
   return (

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

@@ -1,12 +1,23 @@
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
+import { useSearchParams } from "next/navigation";
+// plane editor
 import { EditorRefApi, useEditorMarkings } from "@plane/editor";
+// plane types
 import { TPage } from "@plane/types";
+// plane ui
 import { setToast, TOAST_TYPE } from "@plane/ui";
-import { PageEditorHeaderRoot, PageEditorBody } from "@/components/pages";
+// components
+import { PageEditorHeaderRoot, PageEditorBody, PageVersionsOverlay } from "@/components/pages";
+// hooks
 import { useProjectPages } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
 import { usePageDescription } from "@/hooks/use-page-description";
+import { useQueryParams } from "@/hooks/use-query-params";
+// services
+import { ProjectPageVersionService } from "@/services/page";
+const projectPageVersionService = new ProjectPageVersionService();
+// store
 import { IPage } from "@/store/pages/page";
 
 type TPageRootProps = {
@@ -16,34 +27,40 @@ type TPageRootProps = {
 };
 
 export const PageRoot = observer((props: TPageRootProps) => {
-  // router
-  const router = useAppRouter();
   const { projectId, workspaceSlug, page } = props;
-  const { createPage } = useProjectPages();
-  const { access, description_html, name } = page;
-
   // states
   const [editorReady, setEditorReady] = useState(false);
   const [readOnlyEditorReady, setReadOnlyEditorReady] = useState(false);
-
+  const [sidePeekVisible, setSidePeekVisible] = useState(window.innerWidth >= 768);
+  const [isVersionsOverlayOpen, setIsVersionsOverlayOpen] = useState(false);
   // refs
   const editorRef = useRef<EditorRefApi>(null);
   const readOnlyEditorRef = useRef<EditorRefApi>(null);
-
+  // router
+  const router = useAppRouter();
+  // search params
+  const searchParams = useSearchParams();
+  // store hooks
+  const { createPage } = useProjectPages();
+  // derived values
+  const { access, description_html, name } = page;
   // editor markings hook
   const { markings, updateMarkings } = useEditorMarkings();
-
-  const [sidePeekVisible, setSidePeekVisible] = useState(window.innerWidth >= 768 ? true : false);
-
   // project-description
-  const { handleDescriptionChange, isDescriptionReady, pageDescriptionYJS, handleSaveDescription } = usePageDescription(
-    {
-      editorRef,
-      page,
-      projectId,
-      workspaceSlug,
-    }
-  );
+  const {
+    handleDescriptionChange,
+    isDescriptionReady,
+    pageDescriptionYJS,
+    handleSaveDescription,
+    manuallyUpdateDescription,
+  } = usePageDescription({
+    editorRef,
+    page,
+    projectId,
+    workspaceSlug,
+  });
+  // update query params
+  const { updateQueryParams } = useQueryParams();
 
   const handleCreatePage = async (payload: Partial<TPage>) => await createPage(payload);
 
@@ -65,8 +82,48 @@ export const PageRoot = observer((props: TPageRootProps) => {
       );
   };
 
+  const version = searchParams.get("version");
+  useEffect(() => {
+    if (!version) {
+      setIsVersionsOverlayOpen(false);
+      return;
+    }
+    setIsVersionsOverlayOpen(true);
+  }, [version]);
+
+  const handleCloseVersionsOverlay = () => {
+    const updatedRoute = updateQueryParams({
+      paramsToRemove: ["version"],
+    });
+    router.push(updatedRoute);
+  };
+
   return (
     <>
+      <PageVersionsOverlay
+        activeVersion={version}
+        fetchAllVersions={async (pageId) => {
+          if (!workspaceSlug || !projectId) return;
+          return await projectPageVersionService.fetchAllVersions(
+            workspaceSlug.toString(),
+            projectId.toString(),
+            pageId
+          );
+        }}
+        fetchVersionDetails={async (pageId, versionId) => {
+          if (!workspaceSlug || !projectId) return;
+          return await projectPageVersionService.fetchVersionById(
+            workspaceSlug.toString(),
+            projectId.toString(),
+            pageId,
+            versionId
+          );
+        }}
+        handleRestore={manuallyUpdateDescription}
+        isOpen={isVersionsOverlayOpen}
+        onClose={handleCloseVersionsOverlay}
+        pageId={page.id ?? ""}
+      />
       <PageEditorHeaderRoot
         editorRef={editorRef}
         readOnlyEditorRef={readOnlyEditorRef}

web/core/components/pages/index.ts

@@ -4,5 +4,6 @@ export * from "./header";
 export * from "./list";
 export * from "./loaders";
 export * from "./modals";
+export * from "./version";
 export * from "./pages-list-main-content";
 export * from "./pages-list-view";

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

@@ -0,0 +1,111 @@
+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;
+  versionDetails: TPageVersion | undefined;
+};
+
+export const PagesVersionEditor: React.FC<Props> = observer((props) => {
+  const { activeVersion, isCurrentVersionActive, versionDetails } = props;
+  // params
+  const { workspaceSlug, projectId, pageId } = useParams();
+  // store hooks
+  const { data: currentUser } = useUser();
+  const {
+    getUserDetails,
+    project: { getProjectMemberIds },
+  } = useMember();
+  const { description_html } = usePage(pageId.toString() ?? "");
+  // 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 ? 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

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

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

@@ -0,0 +1,114 @@
+import { useState } from "react";
+import { observer } from "mobx-react";
+import useSWR from "swr";
+import { TriangleAlert } from "lucide-react";
+// plane types
+import { TPageVersion } from "@plane/types";
+// plane ui
+import { Button, setToast, TOAST_TYPE } from "@plane/ui";
+// components
+import { PagesVersionEditor } from "@/components/pages";
+// helpers
+import { renderFormattedDate, renderFormattedTime } from "@/helpers/date-time.helper";
+
+type Props = {
+  activeVersion: string | null;
+  fetchVersionDetails: (pageId: string, versionId: string) => Promise<TPageVersion | undefined>;
+  handleClose: () => void;
+  handleRestore: (descriptionHTML: string) => Promise<void>;
+  pageId: string;
+};
+
+export const PageVersionsMainContent: React.FC<Props> = observer((props) => {
+  const { activeVersion, fetchVersionDetails, handleClose, handleRestore, pageId } = props;
+  // states
+  const [isRestoring, setIsRestoring] = useState(false);
+  const [isRetrying, setIsRetrying] = useState(false);
+
+  const {
+    data: versionDetails,
+    error: versionDetailsError,
+    mutate: mutateVersionDetails,
+  } = useSWR(
+    pageId && activeVersion && activeVersion !== "current" ? `PAGE_VERSION_${activeVersion}` : null,
+    pageId && activeVersion && activeVersion !== "current" ? () => fetchVersionDetails(pageId, activeVersion) : null
+  );
+
+  const isCurrentVersionActive = activeVersion === "current";
+
+  const handleRestoreVersion = async () => {
+    setIsRestoring(true);
+    await handleRestore(versionDetails?.description_html ?? "<p></p>")
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Page version restored.",
+        });
+        handleClose();
+      })
+      .catch(() =>
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Failed to restore page version.",
+        })
+      )
+      .finally(() => setIsRestoring(false));
+  };
+
+  const handleRetry = async () => {
+    setIsRetrying(true);
+    await mutateVersionDetails();
+    setIsRetrying(false);
+  };
+
+  return (
+    <div className="flex-grow flex flex-col">
+      {versionDetailsError ? (
+        <div className="flex-grow grid place-items-center">
+          <div className="flex flex-col items-center gap-4 text-center">
+            <span className="flex-shrink-0 grid place-items-center size-11 text-custom-text-300">
+              <TriangleAlert className="size-10" />
+            </span>
+            <div>
+              <h6 className="text-lg font-semibold">Something went wrong!</h6>
+              <p className="text-sm text-custom-text-300">The version could not be loaded, please try again.</p>
+            </div>
+            <Button variant="link-primary" onClick={handleRetry} loading={isRetrying}>
+              Try again
+            </Button>
+          </div>
+        </div>
+      ) : (
+        <>
+          <div className="min-h-14 py-3 px-5 border-b border-custom-border-200 flex items-center justify-between gap-2">
+            <h6 className="text-base font-medium">
+              {isCurrentVersionActive
+                ? "Current version"
+                : versionDetails
+                  ? `${renderFormattedDate(versionDetails.last_saved_at)} ${renderFormattedTime(versionDetails.last_saved_at)}`
+                  : "Loading version details"}
+            </h6>
+            {!isCurrentVersionActive && (
+              <Button
+                variant="primary"
+                size="sm"
+                className="flex-shrink-0"
+                onClick={handleRestoreVersion}
+                loading={isRestoring}
+              >
+                {isRestoring ? "Restoring" : "Restore"}
+              </Button>
+            )}
+          </div>
+          <div className="pt-8 h-full overflow-y-scroll vertical-scrollbar scrollbar-sm">
+            <PagesVersionEditor
+              activeVersion={activeVersion}
+              isCurrentVersionActive={isCurrentVersionActive}
+              versionDetails={versionDetails}
+            />
+          </div>
+        </>
+      )}
+    </div>
+  );
+});

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

@@ -0,0 +1,50 @@
+// plane types
+import { TPageVersion } from "@plane/types";
+// components
+import { PageVersionsMainContent, PageVersionsSidebarRoot } from "@/components/pages";
+// helpers
+import { cn } from "@/helpers/common.helper";
+
+type Props = {
+  activeVersion: string | null;
+  fetchAllVersions: (pageId: string) => Promise<TPageVersion[] | undefined>;
+  fetchVersionDetails: (pageId: string, versionId: string) => Promise<TPageVersion | undefined>;
+  handleRestore: (descriptionHTML: string) => Promise<void>;
+  isOpen: boolean;
+  onClose: () => void;
+  pageId: string;
+};
+
+export const PageVersionsOverlay: React.FC<Props> = (props) => {
+  const { activeVersion, fetchAllVersions, fetchVersionDetails, handleRestore, isOpen, onClose, pageId } = props;
+
+  const handleClose = () => {
+    onClose();
+  };
+
+  return (
+    <div
+      className={cn(
+        "absolute inset-0 z-10 size-full bg-custom-background-100 flex overflow-hidden opacity-0 pointer-events-none transition-opacity",
+        {
+          "opacity-100 pointer-events-auto": isOpen,
+        }
+      )}
+    >
+      <PageVersionsMainContent
+        activeVersion={activeVersion}
+        fetchVersionDetails={fetchVersionDetails}
+        handleClose={handleClose}
+        handleRestore={handleRestore}
+        pageId={pageId}
+      />
+      <PageVersionsSidebarRoot
+        activeVersion={activeVersion}
+        fetchAllVersions={fetchAllVersions}
+        handleClose={handleClose}
+        isOpen={isOpen}
+        pageId={pageId}
+      />
+    </div>
+  );
+};

web/core/components/pages/version/sidebar-list-item.tsx

@@ -0,0 +1,48 @@
+import { observer } from "mobx-react";
+import Link from "next/link";
+// plane types
+import { TPageVersion } from "@plane/types";
+// plane ui
+import { Avatar } from "@plane/ui";
+// helpers
+import { cn } from "@/helpers/common.helper";
+import { renderFormattedDate, renderFormattedTime } from "@/helpers/date-time.helper";
+// hooks
+import { useMember } from "@/hooks/store";
+
+type Props = {
+  href: string;
+  isActive: boolean;
+  version: TPageVersion;
+};
+
+export const PlaneVersionsSidebarListItem: React.FC<Props> = observer((props) => {
+  const { href, isActive, version } = props;
+  // store hooks
+  const { getUserDetails } = useMember();
+  // derived values
+  const ownerDetails = getUserDetails(version.owned_by);
+
+  return (
+    <Link
+      href={href}
+      className={cn("block p-2 rounded-md w-72 hover:bg-custom-background-80 transition-colors", {
+        "bg-custom-background-80": isActive,
+      })}
+    >
+      <p className="text-sm font-medium truncate">
+        {renderFormattedDate(version.last_saved_at)} {renderFormattedTime(version.last_saved_at)}
+      </p>
+      <p className="mt-2 flex items-center gap-1 text-xs">
+        <Avatar
+          src={ownerDetails?.avatar}
+          name={ownerDetails?.display_name}
+          shape="square"
+          size="sm"
+          className="flex-shrink-0"
+        />
+        <span className="text-custom-text-300">{ownerDetails?.display_name}</span>
+      </p>
+    </Link>
+  );
+});

web/core/components/pages/version/sidebar-list.tsx

@@ -0,0 +1,99 @@
+import { useState } from "react";
+import Link from "next/link";
+import useSWR from "swr";
+import { TriangleAlert } from "lucide-react";
+// plane types
+import { TPageVersion } from "@plane/types";
+// plane ui
+import { Button, Loader } from "@plane/ui";
+// components
+import { PlaneVersionsSidebarListItem } from "@/components/pages";
+// helpers
+import { cn } from "@/helpers/common.helper";
+// hooks
+import { useQueryParams } from "@/hooks/use-query-params";
+
+type Props = {
+  activeVersion: string | null;
+  fetchAllVersions: (pageId: string) => Promise<TPageVersion[] | undefined>;
+  isOpen: boolean;
+  pageId: string;
+};
+
+export const PageVersionsSidebarList: React.FC<Props> = (props) => {
+  const { activeVersion, fetchAllVersions, isOpen, pageId } = props;
+  // states
+  const [isRetrying, setIsRetrying] = useState(false);
+  // update query params
+  const { updateQueryParams } = useQueryParams();
+
+  const {
+    data: versionsList,
+    error: versionsListError,
+    mutate: mutateVersionsList,
+  } = useSWR(
+    pageId && isOpen ? `PAGE_VERSIONS_LIST_${pageId}` : null,
+    pageId && isOpen ? () => fetchAllVersions(pageId) : null
+  );
+
+  const handleRetry = async () => {
+    setIsRetrying(true);
+    await mutateVersionsList();
+    setIsRetrying(false);
+  };
+
+  const getVersionLink = (versionID: string) =>
+    updateQueryParams({
+      paramsToAdd: { version: versionID },
+    });
+
+  return (
+    <div className="mt-4 px-4 h-full flex flex-col space-y-2 overflow-y-scroll vertical-scrollbar scrollbar-sm">
+      <Link
+        href={getVersionLink("current")}
+        className={cn("block p-2 rounded-md w-72 hover:bg-custom-background-80 transition-colors", {
+          "bg-custom-background-80": activeVersion === "current",
+        })}
+      >
+        <p className="text-sm font-medium">Current version</p>
+      </Link>
+      {versionsListError ? (
+        <div className="h-full grid place-items-center">
+          <div className="flex flex-col items-center gap-4 text-center">
+            <span className="flex-shrink-0 grid place-items-center size-11 text-custom-text-300">
+              <TriangleAlert className="size-10" />
+            </span>
+            <div>
+              <h6 className="text-base font-semibold">Something went wrong!</h6>
+              <p className="text-xs text-custom-text-300">
+                There was a problem while loading previous
+                <br />
+                versions, please try again.
+              </p>
+            </div>
+            <Button variant="link-primary" onClick={handleRetry} loading={isRetrying}>
+              Try again
+            </Button>
+          </div>
+        </div>
+      ) : versionsList ? (
+        versionsList.map((version) => (
+          <PlaneVersionsSidebarListItem
+            key={version.id}
+            href={getVersionLink(version.id)}
+            isActive={activeVersion === version.id}
+            version={version}
+          />
+        ))
+      ) : (
+        <Loader className="space-y-4">
+          <Loader.Item height="56px" />
+          <Loader.Item height="56px" />
+          <Loader.Item height="56px" />
+          <Loader.Item height="56px" />
+          <Loader.Item height="56px" />
+        </Loader>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,38 @@
+import { X } from "lucide-react";
+// plane types
+import { TPageVersion } from "@plane/types";
+// components
+import { PageVersionsSidebarList } from "@/components/pages";
+
+type Props = {
+  activeVersion: string | null;
+  fetchAllVersions: (pageId: string) => Promise<TPageVersion[] | undefined>;
+  handleClose: () => void;
+  isOpen: boolean;
+  pageId: string;
+};
+
+export const PageVersionsSidebarRoot: React.FC<Props> = (props) => {
+  const { activeVersion, fetchAllVersions, handleClose, isOpen, pageId } = props;
+
+  return (
+    <div className="flex-shrink-0 py-4 border-l border-custom-border-200 flex flex-col">
+      <div className="px-6 flex items-center justify-between gap-2">
+        <h5 className="text-base font-semibold">Version history</h5>
+        <button
+          type="button"
+          onClick={handleClose}
+          className="flex-shrink-0 size-6 grid place-items-center text-custom-text-300 hover:text-custom-text-100 transition-colors"
+        >
+          <X className="size-4" />
+        </button>
+      </div>
+      <PageVersionsSidebarList
+        activeVersion={activeVersion}
+        fetchAllVersions={fetchAllVersions}
+        isOpen={isOpen}
+        pageId={pageId}
+      />
+    </div>
+  );
+};

web/core/hooks/use-multiple-select.ts

@@ -3,6 +3,8 @@
 import { useCallback, useEffect, useMemo } from "react";
 // hooks
 import { useMultipleSelectStore } from "@/hooks/store";
+//
+import useReloadConfirmations from "./use-reload-confirmation";
 
 export type TEntityDetails = {
   entityID: string;
@@ -52,6 +54,15 @@ export const useMultipleSelect = (props: Props) => {
     getEntityDetailsFromEntityID,
   } = useMultipleSelectStore();
 
+  useReloadConfirmations(
+    selectedEntityIds && selectedEntityIds.length > 0,
+    "Are you sure you want to leave? Your current bulk operation selections will be lost.",
+    true,
+    () => {
+      clearSelection();
+    }
+  );
+
   const groups = useMemo(() => Object.keys(entities), [entities]);
 
   const entitiesList: TEntityDetails[] = useMemo(

web/core/hooks/use-page-description.ts

@@ -1,20 +1,19 @@
 import React, { useCallback, useEffect, useState } from "react";
 import useSWR from "swr";
-
+// plane editor
 import {
   EditorRefApi,
   proseMirrorJSONToBinaryString,
   applyUpdates,
   generateJSONfromHTMLForDocumentEditor,
 } from "@plane/editor";
-
 // hooks
 import { setToast, TOAST_TYPE } from "@plane/ui";
 import useAutoSave from "@/hooks/use-auto-save";
 import useReloadConfirmations from "@/hooks/use-reload-confirmation";
-
 // services
 import { ProjectPageService } from "@/services/page";
+// store
 import { IPage } from "@/store/pages/page";
 
 const projectPageService = new ProjectPageService();
@@ -183,6 +182,19 @@ export const usePageDescription = (props: Props) => {
     ]
   );
 
+  const manuallyUpdateDescription = async (descriptionHTML: string) => {
+    const { contentJSON, editorSchema } = generateJSONfromHTMLForDocumentEditor(descriptionHTML ?? "<p></p>");
+    const yDocBinaryString = proseMirrorJSONToBinaryString(contentJSON, "default", editorSchema);
+
+    try {
+      editorRef.current?.clearEditor(true);
+      await updateDescription(yDocBinaryString, descriptionHTML ?? "<p></p>");
+      await mutateDescriptionYJS();
+    } catch (error) {
+      console.log("error", error);
+    }
+  };
+
   useAutoSave(handleSaveDescription);
 
   return {
@@ -190,5 +202,6 @@ export const usePageDescription = (props: Props) => {
     isDescriptionReady,
     pageDescriptionYJS,
     handleSaveDescription,
+    manuallyUpdateDescription,
   };
 };

web/core/hooks/use-query-params.ts

@@ -0,0 +1,39 @@
+import { useSearchParams, usePathname } from "next/navigation";
+
+type TParamsToAdd = {
+  [key: string]: string;
+};
+
+export const useQueryParams = () => {
+  // next navigation
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+
+  const updateQueryParams = ({
+    paramsToAdd = {},
+    paramsToRemove = [],
+  }: {
+    paramsToAdd?: TParamsToAdd;
+    paramsToRemove?: string[];
+  }) => {
+    const currentParams = new URLSearchParams(searchParams.toString());
+
+    // add or update query parameters
+    Object.keys(paramsToAdd).forEach((key) => {
+      currentParams.set(key, paramsToAdd[key]);
+    });
+
+    // remove specified query parameters
+    paramsToRemove.forEach((key) => {
+      currentParams.delete(key);
+    });
+
+    // construct the new route with the updated query parameters
+    const newRoute = `${pathname}?${currentParams.toString()}`;
+    return newRoute;
+  };
+
+  return {
+    updateQueryParams,
+  };
+};

web/core/hooks/use-reload-confirmation.tsx

@@ -1,8 +1,10 @@
 import { useCallback, useEffect, useState } from "react";
 
 //TODO: remove temp flag isActive later and use showAlert as the source of truth
-const useReloadConfirmations = (isActive = true) => {
-  const [showAlert, setShowAlert] = useState(false);
+const useReloadConfirmations = (isActive = true, message?: string, defaultShowAlert = false, onLeave?: () => void) => {
+  const [showAlert, setShowAlert] = useState(defaultShowAlert);
+
+  const alertMessage = message ?? "Are you sure you want to leave? Changes you made may not be saved.";
 
   const handleBeforeUnload = useCallback(
     (event: BeforeUnloadEvent) => {
@@ -28,8 +30,10 @@ const useReloadConfirmations = (isActive = true) => {
       const isAnchorTargetBlank = anchorElement.getAttribute("target") === "_blank";
       if (isAnchorTargetBlank) return;
       // show confirm dialog
-      const leave = confirm("Are you sure you want to leave? Changes you made may not be saved.");
-      if (!leave) {
+      const isLeaving = confirm(alertMessage);
+      if (isLeaving) {
+        onLeave && onLeave();
+      } else {
         event.preventDefault();
         event.stopPropagation();
       }

web/core/services/page/index.ts

@@ -1 +1,2 @@
+export * from "./project-page-version.service";
 export * from "./project-page.service";

web/core/services/page/project-page-version.service.ts

@@ -0,0 +1,33 @@
+// plane types
+import { TPageVersion } from "@plane/types";
+// helpers
+import { API_BASE_URL } from "@/helpers/common.helper";
+// services
+import { APIService } from "@/services/api.service";
+
+export class ProjectPageVersionService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async fetchAllVersions(workspaceSlug: string, projectId: string, pageId: string): Promise<TPageVersion[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/versions/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async fetchVersionById(
+    workspaceSlug: string,
+    projectId: string,
+    pageId: string,
+    versionId: string
+  ): Promise<TPageVersion> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/versions/${versionId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}