From 998d7d9a8ec3fbcecaf5eebc64d063eb8b752709 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com> Date: Wed, 28 Aug 2024 16:05:59 +0530 Subject: [PATCH 1/4] refactor: version history editor (#977) --- web/ee/components/pages/editor/page-root.tsx | 2 +- web/ee/components/pages/version/editor.tsx | 26 +++++++++++++------- 2 files changed, 18 insertions(+), 10 deletions(-) diff --git a/web/ee/components/pages/editor/page-root.tsx b/web/ee/components/pages/editor/page-root.tsx index c18c45a2c2..13f0a847fb 100644 --- a/web/ee/components/pages/editor/page-root.tsx +++ b/web/ee/components/pages/editor/page-root.tsx @@ -29,6 +29,7 @@ type TPageRootProps = { }; export const WorkspacePageRoot = observer((props: TPageRootProps) => { + const { workspaceSlug, page } = props; // states const [editorReady, setEditorReady] = useState(false); const [readOnlyEditorReady, setReadOnlyEditorReady] = useState(false); @@ -39,7 +40,6 @@ export const WorkspacePageRoot = observer((props: TPageRootProps) => { const readOnlyEditorRef = useRef(null); // router const router = useAppRouter(); - const { workspaceSlug, page } = props; // search params const searchParams = useSearchParams(); // store hooks diff --git a/web/ee/components/pages/version/editor.tsx b/web/ee/components/pages/version/editor.tsx index 6550ef1399..29e6725aee 100644 --- a/web/ee/components/pages/version/editor.tsx +++ b/web/ee/components/pages/version/editor.tsx @@ -9,37 +9,37 @@ import { Loader } from "@plane/ui"; // hooks import { useMember, useUser } from "@/hooks/store"; import { usePageFilters } from "@/hooks/use-page-filters"; +// plane web components +import { IssueEmbedCard } from "@/plane-web/components/pages"; // plane web hooks import { useWorkspacePageDetails } from "@/plane-web/hooks/store"; -import { useIssueEmbed } from "@/plane-web/hooks/use-issue-embed"; import { useWorkspaceMention } from "@/plane-web/hooks/use-workspace-mention"; type Props = { activeVersion: string | null; isCurrentVersionActive: boolean; + pageId: string; versionDetails: TPageVersion | undefined; }; export const PagesVersionEditor: React.FC = observer((props) => { - const { activeVersion, isCurrentVersionActive, versionDetails } = props; + const { activeVersion, isCurrentVersionActive, pageId, versionDetails } = props; // params - const { workspaceSlug, projectId, pageId } = useParams(); + const { workspaceSlug } = useParams(); // store hooks const { data: currentUser } = useUser(); const { getUserDetails, workspace: { workspaceMemberIds }, } = useMember(); - const { description_html } = useWorkspacePageDetails(pageId.toString() ?? ""); + const currentPageDetails = useWorkspacePageDetails(pageId); // derived values const workspaceMemberDetails = workspaceMemberIds?.map((id) => getUserDetails(id) as IUserLite); - // issue-embed - const { issueEmbedProps } = useIssueEmbed(workspaceSlug?.toString() ?? "", projectId?.toString() ?? ""); // use-mention const { mentionHighlights } = useWorkspaceMention({ workspaceSlug: workspaceSlug?.toString() ?? "", members: workspaceMemberDetails, - user: currentUser ?? undefined, + user: currentUser, }); // page filters const { fontSize, fontStyle } = usePageFilters(); @@ -94,7 +94,9 @@ export const PagesVersionEditor: React.FC = observer((props) => { return (

"} + initialValue={ + (isCurrentVersionActive ? currentPageDetails.description_html : versionDetails?.description_html) ?? "

" + } containerClassName="p-0 pb-64 border-none" displayConfig={displayConfig} editorClassName="pl-10" @@ -103,7 +105,13 @@ export const PagesVersionEditor: React.FC = observer((props) => { }} embedHandler={{ issue: { - widgetCallback: issueEmbedProps.widgetCallback, + widgetCallback: ({ issueId, projectId: projectIdFromEmbed, workspaceSlug: workspaceSlugFromEmbed }) => { + const resolvedProjectId = projectIdFromEmbed ?? ""; + const resolvedWorkspaceSlug = workspaceSlugFromEmbed ?? workspaceSlug?.toString() ?? ""; + return ( + + ); + }, }, }} /> From 4de6b4c1d246ac32686820e82088618d1ff1c8ca Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com> Date: Wed, 28 Aug 2024 17:01:53 +0530 Subject: [PATCH 2/4] [WEB-2293] fix: version history editor initialization (#978) * fix: initialize editor post description availability * fix: merge conflicts resolved from uat --- web/ee/components/pages/version/editor.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/web/ee/components/pages/version/editor.tsx b/web/ee/components/pages/version/editor.tsx index 29e6725aee..e03264c01c 100644 --- a/web/ee/components/pages/version/editor.tsx +++ b/web/ee/components/pages/version/editor.tsx @@ -91,12 +91,13 @@ export const PagesVersionEditor: React.FC = observer((props) => { ); + const description = isCurrentVersionActive ? currentPageDetails.description_html : versionDetails?.description_html; + if (description === undefined || description?.trim() === "") return null; + return (

" - } + initialValue={description ?? "

"} containerClassName="p-0 pb-64 border-none" displayConfig={displayConfig} editorClassName="pl-10" 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 3/4] 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 = 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 ( -
- - -
-
- -
- -
- - -
-
- -
- - -
- - -
-
- -
- -
- -
- -
-
- -
- -
-
- -
- ); - - return ( -

" - } - 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; From a96cf402c07faba1bbab7addb0beac40eba29348 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com> Date: Tue, 27 Aug 2024 19:50:07 +0530 Subject: [PATCH 4/4] fix: version editor --- web/ce/components/pages/index.ts | 1 + web/ce/components/pages/version/editor.tsx | 115 ++++++++++++++++++ web/ce/components/pages/version/index.ts | 1 + .../components/pages/version/main-content.tsx | 2 +- 4 files changed, 118 insertions(+), 1 deletion(-) create mode 100644 web/ce/components/pages/version/editor.tsx create mode 100644 web/ce/components/pages/version/index.ts diff --git a/web/ce/components/pages/index.ts b/web/ce/components/pages/index.ts index 6f3d30c9a9..715386d0d0 100644 --- a/web/ce/components/pages/index.ts +++ b/web/ce/components/pages/index.ts @@ -1,2 +1,3 @@ export * from "./editor"; +export * from "./version"; export * from "./extra-actions"; diff --git a/web/ce/components/pages/version/editor.tsx b/web/ce/components/pages/version/editor.tsx new file mode 100644 index 0000000000..56615c7246 --- /dev/null +++ b/web/ce/components/pages/version/editor.tsx @@ -0,0 +1,115 @@ +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 = 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 ( +
+ + +
+
+ +
+ +
+ + +
+
+ +
+ + +
+ + +
+
+ +
+ +
+ +
+ +
+
+ +
+ +
+
+ +
+ ); + + const description = isCurrentVersionActive ? currentPageDetails.description_html : versionDetails?.description_html; + if (description === undefined || description?.trim() === "") return null; + + return ( +

"} + containerClassName="p-0 pb-64 border-none" + displayConfig={displayConfig} + editorClassName="pl-10" + mentionHandler={{ + highlights: mentionHighlights, + }} + embedHandler={{ + issue: { + widgetCallback: issueEmbedProps.widgetCallback, + }, + }} + /> + ); +}); diff --git a/web/ce/components/pages/version/index.ts b/web/ce/components/pages/version/index.ts new file mode 100644 index 0000000000..8b1fd904bb --- /dev/null +++ b/web/ce/components/pages/version/index.ts @@ -0,0 +1 @@ +export * from "./editor"; diff --git a/web/core/components/pages/version/main-content.tsx b/web/core/components/pages/version/main-content.tsx index 5bfe29bb29..f729556792 100644 --- a/web/core/components/pages/version/main-content.tsx +++ b/web/core/components/pages/version/main-content.tsx @@ -8,7 +8,7 @@ import { TPageVersion } from "@plane/types"; import { Button, setToast, TOAST_TYPE } from "@plane/ui"; // helpers import { renderFormattedDate, renderFormattedTime } from "@/helpers/date-time.helper"; -// components +// plane web components import { PagesVersionEditor } from "@/plane-web/components/pages"; type Props = {