feat: init

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

@@ -0,0 +1,101 @@
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import type { TDisplayConfig } from "@plane/editor";
+import type { JSONContent, TPageVersion } from "@plane/types";
+import { Loader } from "@plane/ui";
+import { isJSONContentEmpty } from "@plane/utils";
+// components
+import { DocumentEditor } from "@/components/editor/document/editor";
+// hooks
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { usePageFilters } from "@/hooks/use-page-filters";
+// plane web hooks
+import type { EPageStoreType } from "@/plane-web/hooks/store";
+
+export type TVersionEditorProps = {
+  activeVersion: string | null;
+  versionDetails: TPageVersion | undefined;
+  storeType: EPageStoreType;
+};
+
+export const PagesVersionEditor: React.FC<TVersionEditorProps> = observer((props) => {
+  const { activeVersion, versionDetails } = props;
+  // params
+  const { workspaceSlug, projectId } = useParams();
+  // store hooks
+  const { getWorkspaceBySlug } = useWorkspace();
+  // derived values
+  const workspaceDetails = getWorkspaceBySlug(workspaceSlug?.toString() ?? "");
+  // page filters
+  const { fontSize, fontStyle } = usePageFilters();
+
+  const displayConfig: TDisplayConfig = {
+    fontSize,
+    fontStyle,
+    wideLayout: true,
+  };
+
+  if (!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>
+    );
+
+  const description = isJSONContentEmpty(versionDetails?.description_json as JSONContent)
+    ? versionDetails?.description_html
+    : versionDetails?.description_json;
+
+  if (!description) return null;
+
+  return (
+    <DocumentEditor
+      key={activeVersion ?? ""}
+      editable={false}
+      id={activeVersion ?? ""}
+      value={description}
+      containerClassName="p-0 pb-64 border-none"
+      displayConfig={displayConfig}
+      editorClassName="pl-10"
+      projectId={projectId?.toString()}
+      workspaceId={workspaceDetails?.id ?? ""}
+      workspaceSlug={workspaceSlug?.toString() ?? ""}
+    />
+  );
+});

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

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

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

@@ -0,0 +1,128 @@
+import { useState } from "react";
+import { observer } from "mobx-react";
+import useSWR from "swr";
+import { EyeIcon, TriangleAlert } from "lucide-react";
+// plane imports
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { TPageVersion } from "@plane/types";
+import { renderFormattedDate, renderFormattedTime } from "@plane/utils";
+// helpers
+import type { EPageStoreType } from "@/plane-web/hooks/store";
+// local imports
+import type { TVersionEditorProps } from "./editor";
+
+type Props = {
+  activeVersion: string | null;
+  editorComponent: React.FC<TVersionEditorProps>;
+  fetchVersionDetails: (pageId: string, versionId: string) => Promise<TPageVersion | undefined>;
+  handleClose: () => void;
+  handleRestore: (descriptionHTML: string) => Promise<void>;
+  pageId: string;
+  restoreEnabled: boolean;
+  storeType: EPageStoreType;
+};
+
+export const PageVersionsMainContent: React.FC<Props> = observer((props) => {
+  const {
+    activeVersion,
+    editorComponent,
+    fetchVersionDetails,
+    handleClose,
+    handleRestore,
+    pageId,
+    restoreEnabled,
+    storeType,
+  } = props;
+  // states
+  const [isRestoring, setIsRestoring] = useState(false);
+  const [isRetrying, setIsRetrying] = useState(false);
+
+  const {
+    data: versionDetails,
+    error: versionDetailsError,
+    mutate: mutateVersionDetails,
+  } = useSWR(
+    pageId && activeVersion ? `PAGE_VERSION_${activeVersion}` : null,
+    pageId && activeVersion ? () => fetchVersionDetails(pageId, activeVersion) : null
+  );
+
+  const handleRestoreVersion = async () => {
+    if (!restoreEnabled) return;
+    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);
+  };
+
+  const VersionEditor = editorComponent;
+
+  return (
+    <div className="flex-grow flex flex-col overflow-hidden">
+      {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">
+            <div className="flex items-center gap-4">
+              <h6 className="text-base font-medium">
+                {versionDetails
+                  ? `${renderFormattedDate(versionDetails.last_saved_at)} ${renderFormattedTime(versionDetails.last_saved_at)}`
+                  : "Loading version details"}
+              </h6>
+              <span className="flex-shrink-0 flex items-center gap-1 text-xs font-medium text-custom-primary-100 bg-custom-primary-100/20 py-1 px-1.5 rounded">
+                <EyeIcon className="flex-shrink-0 size-3" />
+                View only
+              </span>
+            </div>
+            {restoreEnabled && (
+              <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">
+            <VersionEditor activeVersion={activeVersion} storeType={storeType} versionDetails={versionDetails} />
+          </div>
+        </>
+      )}
+    </div>
+  );
+});

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

@@ -0,0 +1,67 @@
+import { useCallback } from "react";
+import { observer } from "mobx-react";
+import { useRouter, useSearchParams } from "next/navigation";
+// plane imports
+import type { TPageVersion } from "@plane/types";
+import { cn } from "@plane/utils";
+// hooks
+import { useQueryParams } from "@/hooks/use-query-params";
+// plane web imports
+import type { EPageStoreType } from "@/plane-web/hooks/store";
+// local imports
+import { PAGE_NAVIGATION_PANE_VERSION_QUERY_PARAM, PAGE_NAVIGATION_PANE_WIDTH } from "../navigation-pane";
+import type { TVersionEditorProps } from "./editor";
+import { PageVersionsMainContent } from "./main-content";
+
+type Props = {
+  editorComponent: React.FC<TVersionEditorProps>;
+  fetchVersionDetails: (pageId: string, versionId: string) => Promise<TPageVersion | undefined>;
+  handleRestore: (descriptionHTML: string) => Promise<void>;
+  pageId: string;
+  restoreEnabled: boolean;
+  storeType: EPageStoreType;
+};
+
+export const PageVersionsOverlay: React.FC<Props> = observer((props) => {
+  const { editorComponent, fetchVersionDetails, handleRestore, pageId, restoreEnabled, storeType } = props;
+  // navigation
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  // query params
+  const { updateQueryParams } = useQueryParams();
+  // derived values
+  const activeVersion = searchParams.get(PAGE_NAVIGATION_PANE_VERSION_QUERY_PARAM);
+  const isOpen = !!activeVersion;
+
+  const handleClose = useCallback(() => {
+    const updatedRoute = updateQueryParams({
+      paramsToRemove: [PAGE_NAVIGATION_PANE_VERSION_QUERY_PARAM],
+    });
+    router.push(updatedRoute);
+  }, [router, updateQueryParams]);
+
+  return (
+    <div
+      className={cn(
+        "absolute inset-0 z-[16] h-full bg-custom-background-100 flex overflow-hidden opacity-0 pointer-events-none transition-opacity",
+        {
+          "opacity-100 pointer-events-auto": isOpen,
+        }
+      )}
+      style={{
+        width: `calc(100% - ${PAGE_NAVIGATION_PANE_WIDTH}px)`,
+      }}
+    >
+      <PageVersionsMainContent
+        activeVersion={activeVersion}
+        editorComponent={editorComponent}
+        fetchVersionDetails={fetchVersionDetails}
+        handleClose={handleClose}
+        handleRestore={handleRestore}
+        pageId={pageId}
+        restoreEnabled={restoreEnabled}
+        storeType={storeType}
+      />
+    </div>
+  );
+});