From f45bede124b909104ea886fd3221f1254cf81168 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Wed, 28 Aug 2024 17:36:49 +0530
Subject: [PATCH] fix: removed unnecessary editor component (#979)

---
 web/core/components/pages/version/editor.tsx  | 114 ------------------
 web/core/components/pages/version/index.ts    |   1 -
 .../components/pages/version/main-content.tsx |   4 +-
 3 files changed, 2 insertions(+), 117 deletions(-)
 delete mode 100644 web/core/components/pages/version/editor.tsx

diff --git a/web/core/components/pages/version/editor.tsx b/web/core/components/pages/version/editor.tsx
deleted file mode 100644
index d176022bc5..0000000000
--- a/web/core/components/pages/version/editor.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-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,
-        },
-      }}
-    />
-  );
-});
diff --git a/web/core/components/pages/version/index.ts b/web/core/components/pages/version/index.ts
index 8e04e4de9e..f0570ebecd 100644
--- a/web/core/components/pages/version/index.ts
+++ b/web/core/components/pages/version/index.ts
@@ -1,4 +1,3 @@
-export * from "./editor";
 export * from "./main-content";
 export * from "./root";
 export * from "./sidebar-list-item";
diff --git a/web/core/components/pages/version/main-content.tsx b/web/core/components/pages/version/main-content.tsx
index 186240a243..5bfe29bb29 100644
--- a/web/core/components/pages/version/main-content.tsx
+++ b/web/core/components/pages/version/main-content.tsx
@@ -6,10 +6,10 @@ import { TriangleAlert } from "lucide-react";
 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";
+// components
+import { PagesVersionEditor } from "@/plane-web/components/pages";
 
 type Props = {
   activeVersion: string | null;