mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
de581102e3
* fix: page transaction model * fix: page transaction model * feat: updated ui for page route * chore: initailized `document-editor` package for plane * fix: format persistence while pasting markdown in editor * feat: Inititalized Document-Editor and Editor with Ref * feat: added tooltip component and slash command for editor * feat: added `document-editor` extensions * feat: added custom search component for embedding labels * feat: added top bar menu component * feat: created document-editor exposed components * feat: integrated `document-editor` in `pages` route * chore: updated dependencies * feat: merge conflict resolution * chore: modified configuration for document editor * feat: added content browser menu for document editor summary * feat: added fixed menu and editor instances * feat: added document edittor instances and summary table * feat: implemented document-editor in PageDetail * chore: css and export fixes * fix: migration and optimisation * fix: added `on_create` hook in the core editor * feat: added conditional menu bar action in document-editor * feat: added menu actions from single page view * feat: added services for archiving, unarchiving and retriving archived pages * feat: added services for page archives * feat: implemented page archives in page list view * feat: implemented page archives in document-editor * feat: added editor marking hook * chore: seperated editor header from the main content * chore: seperated editor summary utilities from the main editor * chore: refactored necessary components from the document editor * chore: removed summary sidebar component from the main content editor * chore: removed scrollSummaryDependency from Header and Sidebar * feat: seperated page renderer as a seperate component * chore: seperated page_renderer and sidebar as component from index * feat: added locked property to IPage type * feat: added lock/unlock services in page service * chore: seperated DocumentDetails as exported interface from index * feat: seperated document editor configs as seperate interfaces * chore: seperated menu options from the editor header component * fix: fixed page_lock performing lock/unlock operation on queryset instead of single instance * fix: css positioning changes * feat: added archive/lock alert labels * feat: added boolean props in menu-actions/options * feat: added lock/unlock & archive/unarchive services * feat: added on update mutations for archived pages in page-view * feat: added archive/lock on_update mutations in single page vieq * feat: exported readonly editor for locked pages * chore: seperated kanban menu props and saved over passing redundant data * fix: readonly editor not generating markings on first render * fix: cheveron overflowing from editor-header * chore: removed unused utility actions * fix: enabled sidebar view by default * feat: removed locking on pages in archived state * feat: added indentation in heading component * fix: button classnames in vertical dropdowns * feat: added `last_archived_at` and `last_edited_at` details in editor-header * feat: changed types for archived updates and document last updates * feat: updated editor and header props * feat: updated queryset according to new page query format * feat: added parameters in page view for shared / private pages * feat: updated other-page-view to shared page view && same with private pages * feat: added page-view as shared / private * fix: replaced deleting to archiving for pages * feat: handle restoring of page from archived section from list view * feat: made previledge based option render for pages * feat: removed layout view for page list view * feat: linting changes * fix: adding mobx changes to pages * fix: removed uneccessary migrations * fix: mobx store changes * fix: adding date-fns pacakge * fix: updating yarn lock * fix: removing unneccessary method params * chore: added access specifier to the create/update page modal * fix: tab view layout changes * chore: delete endpoint for page * fix: page actions, including- archive, favorite, access control, delete * chore: remove archive page modal * fix: build errors --------- Co-authored-by: NarayanBavisetti <narayan3119@gmail.com> Co-authored-by: sriramveeraghanta <veeraghanta.sriram@gmail.com> Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
244 lines
7.4 KiB
TypeScript
244 lines
7.4 KiB
TypeScript
import React, { useCallback, useEffect, FC } from "react";
|
|
import { useRouter } from "next/router";
|
|
import useSWR from "swr";
|
|
import { observer } from "mobx-react-lite";
|
|
// hooks
|
|
import useToast from "hooks/use-toast";
|
|
import useUser from "hooks/use-user";
|
|
// components
|
|
import { CommandModal, ShortcutsModal } from "components/command-palette";
|
|
import { BulkDeleteIssuesModal } from "components/core";
|
|
import { CycleCreateUpdateModal } from "components/cycles";
|
|
import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
|
|
import { CreateUpdateModuleModal } from "components/modules";
|
|
import { CreateProjectModal } from "components/project";
|
|
import { CreateUpdateProjectViewModal } from "components/views";
|
|
import { CreateUpdatePageModal } from "components/pages";
|
|
// helpers
|
|
import { copyTextToClipboard } from "helpers/string.helper";
|
|
// services
|
|
import { IssueService } from "services/issue";
|
|
// fetch keys
|
|
import { ISSUE_DETAILS } from "constants/fetch-keys";
|
|
// mobx store
|
|
import { useMobxStore } from "lib/mobx/store-provider";
|
|
|
|
// services
|
|
const issueService = new IssueService();
|
|
|
|
export const CommandPalette: FC = observer(() => {
|
|
const router = useRouter();
|
|
const { workspaceSlug, projectId, issueId, cycleId, moduleId } = router.query;
|
|
// store
|
|
const { commandPalette, theme: themeStore } = useMobxStore();
|
|
const {
|
|
isCommandPaletteOpen,
|
|
toggleCommandPaletteModal,
|
|
isCreateIssueModalOpen,
|
|
toggleCreateIssueModal,
|
|
isCreateCycleModalOpen,
|
|
toggleCreateCycleModal,
|
|
isCreatePageModalOpen,
|
|
toggleCreatePageModal,
|
|
isCreateProjectModalOpen,
|
|
toggleCreateProjectModal,
|
|
isCreateModuleModalOpen,
|
|
toggleCreateModuleModal,
|
|
isCreateViewModalOpen,
|
|
toggleCreateViewModal,
|
|
isShortcutModalOpen,
|
|
toggleShortcutModal,
|
|
isBulkDeleteIssueModalOpen,
|
|
toggleBulkDeleteIssueModal,
|
|
isDeleteIssueModalOpen,
|
|
toggleDeleteIssueModal,
|
|
} = commandPalette;
|
|
const { toggleSidebar } = themeStore;
|
|
|
|
const { user } = useUser();
|
|
|
|
const { setToastAlert } = useToast();
|
|
|
|
const { data: issueDetails } = useSWR(
|
|
workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null,
|
|
workspaceSlug && projectId && issueId
|
|
? () => issueService.retrieve(workspaceSlug as string, projectId as string, issueId as string)
|
|
: null
|
|
);
|
|
|
|
const copyIssueUrlToClipboard = useCallback(() => {
|
|
if (!issueId) return;
|
|
|
|
const url = new URL(window.location.href);
|
|
copyTextToClipboard(url.href)
|
|
.then(() => {
|
|
setToastAlert({
|
|
type: "success",
|
|
title: "Copied to clipboard",
|
|
});
|
|
})
|
|
.catch(() => {
|
|
setToastAlert({
|
|
type: "error",
|
|
title: "Some error occurred",
|
|
});
|
|
});
|
|
}, [setToastAlert, issueId]);
|
|
|
|
const handleKeyDown = useCallback(
|
|
(e: KeyboardEvent) => {
|
|
const { key, ctrlKey, metaKey, altKey } = e;
|
|
if (!key) return;
|
|
|
|
const keyPressed = key.toLowerCase();
|
|
const cmdClicked = ctrlKey || metaKey;
|
|
// if on input, textarea or editor, don't do anything
|
|
if (
|
|
e.target instanceof HTMLTextAreaElement ||
|
|
e.target instanceof HTMLInputElement ||
|
|
(e.target as Element).classList?.contains("ProseMirror")
|
|
)
|
|
return;
|
|
|
|
if (cmdClicked) {
|
|
if (keyPressed === "k") {
|
|
e.preventDefault();
|
|
toggleCommandPaletteModal(true);
|
|
} else if (keyPressed === "c" && altKey) {
|
|
e.preventDefault();
|
|
copyIssueUrlToClipboard();
|
|
} else if (keyPressed === "b") {
|
|
e.preventDefault();
|
|
toggleSidebar();
|
|
}
|
|
} else {
|
|
if (keyPressed === "c") {
|
|
toggleCreateIssueModal(true);
|
|
} else if (keyPressed === "p") {
|
|
toggleCreateProjectModal(true);
|
|
} else if (keyPressed === "h") {
|
|
toggleShortcutModal(true);
|
|
} else if (keyPressed === "v" && workspaceSlug && projectId) {
|
|
toggleCreateViewModal(true);
|
|
} else if (keyPressed === "d" && workspaceSlug && projectId) {
|
|
toggleCreatePageModal(true);
|
|
} else if (keyPressed === "q" && workspaceSlug && projectId) {
|
|
toggleCreateCycleModal(true);
|
|
} else if (keyPressed === "m" && workspaceSlug && projectId) {
|
|
toggleCreateModuleModal(true);
|
|
} else if (keyPressed === "backspace" || keyPressed === "delete") {
|
|
e.preventDefault();
|
|
toggleBulkDeleteIssueModal(true);
|
|
}
|
|
}
|
|
},
|
|
[
|
|
copyIssueUrlToClipboard,
|
|
toggleCreateProjectModal,
|
|
toggleCreateViewModal,
|
|
toggleCreatePageModal,
|
|
toggleShortcutModal,
|
|
toggleCreateCycleModal,
|
|
toggleCreateModuleModal,
|
|
toggleBulkDeleteIssueModal,
|
|
toggleCommandPaletteModal,
|
|
toggleSidebar,
|
|
toggleCreateIssueModal,
|
|
projectId,
|
|
workspaceSlug,
|
|
]
|
|
);
|
|
|
|
useEffect(() => {
|
|
document.addEventListener("keydown", handleKeyDown);
|
|
return () => document.removeEventListener("keydown", handleKeyDown);
|
|
}, [handleKeyDown]);
|
|
|
|
if (!user) return null;
|
|
|
|
const deleteIssue = () => {
|
|
toggleCommandPaletteModal(false);
|
|
toggleDeleteIssueModal(true);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<ShortcutsModal
|
|
isOpen={isShortcutModalOpen}
|
|
onClose={() => {
|
|
toggleShortcutModal(false);
|
|
}}
|
|
/>
|
|
{workspaceSlug && (
|
|
<CreateProjectModal
|
|
isOpen={isCreateProjectModalOpen}
|
|
onClose={() => {
|
|
toggleCreateProjectModal(false);
|
|
}}
|
|
workspaceSlug={workspaceSlug.toString()}
|
|
/>
|
|
)}
|
|
{workspaceSlug && projectId && (
|
|
<>
|
|
<CycleCreateUpdateModal
|
|
isOpen={isCreateCycleModalOpen}
|
|
handleClose={() => toggleCreateCycleModal(false)}
|
|
workspaceSlug={workspaceSlug.toString()}
|
|
projectId={projectId.toString()}
|
|
/>
|
|
<CreateUpdateModuleModal
|
|
isOpen={isCreateModuleModalOpen}
|
|
onClose={() => {
|
|
toggleCreateModuleModal(false);
|
|
}}
|
|
workspaceSlug={workspaceSlug.toString()}
|
|
projectId={projectId.toString()}
|
|
/>
|
|
<CreateUpdateProjectViewModal
|
|
isOpen={isCreateViewModalOpen}
|
|
onClose={() => toggleCreateViewModal(false)}
|
|
workspaceSlug={workspaceSlug.toString()}
|
|
projectId={projectId.toString()}
|
|
/>
|
|
<CreateUpdatePageModal
|
|
isOpen={isCreatePageModalOpen}
|
|
handleClose={() => toggleCreatePageModal(false)}
|
|
projectId={projectId.toString()}
|
|
/>
|
|
</>
|
|
)}
|
|
|
|
<CreateUpdateIssueModal
|
|
isOpen={isCreateIssueModalOpen}
|
|
handleClose={() => toggleCreateIssueModal(false)}
|
|
prePopulateData={
|
|
cycleId ? { cycle: cycleId.toString() } : moduleId ? { module: moduleId.toString() } : undefined
|
|
}
|
|
/>
|
|
|
|
{issueId && issueDetails && (
|
|
<DeleteIssueModal
|
|
handleClose={() => toggleDeleteIssueModal(false)}
|
|
isOpen={isDeleteIssueModalOpen}
|
|
data={issueDetails}
|
|
/>
|
|
)}
|
|
|
|
<BulkDeleteIssuesModal
|
|
isOpen={isBulkDeleteIssueModalOpen}
|
|
onClose={() => {
|
|
toggleBulkDeleteIssueModal(false);
|
|
}}
|
|
user={user}
|
|
/>
|
|
<CommandModal
|
|
deleteIssue={deleteIssue}
|
|
isPaletteOpen={isCommandPaletteOpen}
|
|
closePalette={() => {
|
|
toggleCommandPaletteModal(false);
|
|
}}
|
|
/>
|
|
</>
|
|
);
|
|
});
|