binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
* refactor: version editor

* chore: added missing props
This commit is contained in:
Aaryan Khandelwal 2024-08-28 19:56:28 +05:30 • committed by GitHub
parent 0cce39ec7c
commit de273dd618
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 25 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

1
web/ce/components/pages/index.ts
View file

@ -1,3 +1,2 @@
export * from "./editor";
export * from "./version";
export * from "./extra-actions";

114
web/ce/components/pages/version/editor.tsx
View file

@ -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,
},
}}
/>
);
});

1
web/ce/components/pages/version/index.ts
View file

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