mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
ff03c0b718
* chore: pages realtime * chore: empty binary response * chore: added a ypy package * feat: pages collaboration * chore: update fetching logic * chore: degrade ypy version * chore: replace useEffect fetch logic with useSWR * chore: move all the update logic to the page store * refactor: remove react-hook-form * chore: save description_html as well * chore: migrate old data logic * fix: added description_binary as field name * fix: code cleanup * refactor: create separate hook to handle page description * fix: build errors * chore: combine updates instead of using the whole document * chore: removed ypy package * chore: added conflict resolving logic to the client side * chore: add a save changes button * chore: add read-only validation * chore: remove saving state information * chore: added permission class * chore: removed the migration file * chore: corrected the model field * chore: rename pageStore to page * chore: update collaboration provider * chore: add try catch to handle error --------- Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>
90 lines
2.7 KiB
TypeScript
90 lines
2.7 KiB
TypeScript
import { observer } from "mobx-react";
|
|
import { EditorReadOnlyRefApi, EditorRefApi, IMarking } from "@plane/document-editor";
|
|
// components
|
|
import { PageEditorMobileHeaderRoot, PageExtraOptions, PageSummaryPopover, PageToolbar } from "@/components/pages";
|
|
// helpers
|
|
import { cn } from "@/helpers/common.helper";
|
|
// hooks
|
|
import { usePageFilters } from "@/hooks/use-page-filters";
|
|
// store
|
|
import { IPageStore } from "@/store/pages/page.store";
|
|
|
|
type Props = {
|
|
editorRef: React.RefObject<EditorRefApi>;
|
|
readOnlyEditorRef: React.RefObject<EditorReadOnlyRefApi>;
|
|
handleDuplicatePage: () => void;
|
|
markings: IMarking[];
|
|
page: IPageStore;
|
|
projectId: string;
|
|
sidePeekVisible: boolean;
|
|
setSidePeekVisible: (sidePeekState: boolean) => void;
|
|
editorReady: boolean;
|
|
readOnlyEditorReady: boolean;
|
|
};
|
|
|
|
export const PageEditorHeaderRoot: React.FC<Props> = observer((props) => {
|
|
const {
|
|
editorRef,
|
|
readOnlyEditorRef,
|
|
editorReady,
|
|
markings,
|
|
readOnlyEditorReady,
|
|
handleDuplicatePage,
|
|
page,
|
|
projectId,
|
|
sidePeekVisible,
|
|
setSidePeekVisible,
|
|
} = props;
|
|
// derived values
|
|
const { isContentEditable } = page;
|
|
// page filters
|
|
const { isFullWidth } = usePageFilters();
|
|
|
|
if (!editorRef.current && !readOnlyEditorRef.current) return null;
|
|
|
|
return (
|
|
<>
|
|
<div className="hidden md:flex items-center border-b border-custom-border-200 px-3 py-2 md:px-5">
|
|
<div
|
|
className={cn("flex-shrink-0", {
|
|
"w-40 lg:w-56": !isFullWidth,
|
|
"w-[5%]": isFullWidth,
|
|
})}
|
|
>
|
|
<PageSummaryPopover
|
|
editorRef={isContentEditable ? editorRef.current : readOnlyEditorRef.current}
|
|
isFullWidth={isFullWidth}
|
|
markings={markings}
|
|
sidePeekVisible={sidePeekVisible}
|
|
setSidePeekVisible={setSidePeekVisible}
|
|
/>
|
|
</div>
|
|
{(editorReady || readOnlyEditorReady) && isContentEditable && editorRef.current && (
|
|
<PageToolbar editorRef={editorRef?.current} />
|
|
)}
|
|
<PageExtraOptions
|
|
editorRef={editorRef}
|
|
handleDuplicatePage={handleDuplicatePage}
|
|
page={page}
|
|
projectId={projectId}
|
|
readOnlyEditorRef={readOnlyEditorRef}
|
|
/>
|
|
</div>
|
|
<div className="md:hidden">
|
|
<PageEditorMobileHeaderRoot
|
|
editorRef={editorRef}
|
|
readOnlyEditorRef={readOnlyEditorRef}
|
|
editorReady={editorReady}
|
|
readOnlyEditorReady={readOnlyEditorReady}
|
|
markings={markings}
|
|
handleDuplicatePage={handleDuplicatePage}
|
|
page={page}
|
|
projectId={projectId}
|
|
sidePeekVisible={sidePeekVisible}
|
|
setSidePeekVisible={setSidePeekVisible}
|
|
/>
|
|
</div>
|
|
</>
|
|
);
|
|
});
|