[WEB-460] refactor: editors, chore: pages list improvement (#4090)
* fix: stroing the transactions in page * fix: page details changes * chore: page response change * chore: removed duplicated endpoints * chore: optimised the urls * chore: removed archived and favorite pages * chore: revamping pages store and components * mentions loading state part done * fixed mentions not showing in modals * removed comments and cleaned up types * removed unused types * reset: head * chore: pages store and component updates * style: pages list item UI * fix: improved colors and drag handle width * fix: slash commands are no more shown in the code blocks * fix: cleanup/hide drag handles post drop * fix: hide/cleanup drag handles post drag start * fix: aligning the drag handles better with the node post css changes of the length * fix: juggling back and forth of drag handles in ordered and unordered lists * chore: fix imports, ts errors and other things * fix: clearing nodes to default node i.e paragraph before converting it to other types of nodes For more reference on what this does, please refer https://tiptap.dev/docs/editor/api/commands/clear-nodes * chore: clearNodes after delete in case of selections being present * fix: hiding link selector in the bubble menu if inline code block is selected * chore: filtering, ordering and searching implemented * chore: updated pages store and updated UI * chore: new core editor just for document editor created * chore: removed setIsSubmitting prop in doc editor * fix: fixed submitting state for image uploads * refactor: setShouldShowAlert removed * refactor: rerenderOnPropsChange prop removed * chore: type inference magic in ref to expose an api for controlling editor menu items from outside * fix: naming imports * chore: change names of the exposed functions and removing old types * refactor: remove debouncedUpdatesEnabled prop; * refactor: editor heading markings now parsed using html * chore: removed unrelated components from the document editor * refactor: page details granular components * fix: remove onActionCompleteHandler * refactor: removed rerenderOnProps change prop * feat: added getMarkDown function * chore: update dropdown option actions * fix: sidebar markings update logic * chore: add image and to-do list actions to the toolbar * fix: handling refs and populating them via callbacks * feat: scroll to node api exposed * cleaning up editor refs when the editor is destroyed * feat: scrolling added to read only instance of the editor * fix: markings logic * fix: build errors with types * fix: build erros * fix: subscribing to transactions of editor via ref * chore: remove debug statements * fix: type errors * fix: temporary different slash commands for document editor * chore: inline code extension style * chore: remove border from readOnly editor * fix: editor bottom padding * chore: pages improvements * chore: handle Enter key on the page title * feat: added loading indicator logic in mentions * fix: mentions and slash commands now work well with multiple editors in one place * refactor: page store structure, filtering logic * feat: added better seperation in inline code blocks * feat: list autojoining added * fix: pages folder structure * fix: image refocus from external parts * working lists somewhat * chore: implement page reactions * fix: build errors * fix: build errors * fixed drag handles stuff * task list item fixed * working * fix: working on multiple nested lists * chore: remove debug statements * fix: Tab key on first list item handled to not go out of editor focus * feat: threshold auto scroll support added and multi nested list selection fixed * fix: caret color bug with improved inline code blocks * fix: node range error when bulk deleting with list * fix: removed slash commands from working in code blocks * chore: update typography margins * chore: new field added in page model * fix: better type inference in slash commands * chore: code block UI * feat: image insertion at correct position using ref added * feat: added improved mentions support for space * fix: type errors in mentions for comments in web app * sync: core with document-core * fix: build errors * fix: fallback for appendTo not being able to find active container instantly * fix: page store * fix: page description * fix: css quality issues * chore: code cleanup * chore: removed placeholder text in codeblocks * chore: archived pages response change * chore: archived pages response change * fix: initial pages list fetch * fix: pages list filters and ordering * chore: add access change option in the quick actions dropdown * fix: inline code block caret fixed * regression: removing extra text * chore: caret color removed * feat: copy code button added in code blocks * fix: initial load of page details * fix: initial load of page details * fix: image resizing weird behavior on click/expanding it too much fixed now * chore: copy page response * fix: todo list spacing * chore: description html in the copy page * chore: handle latest description on refetch * fix: saner scroll behaviours * fix: block menu positioning * fix: updated empty string description * feat: tab change sync support added * fix: infinite rerendering with markings * fix: block menu finally * fix: intial load on reload bug fixed * fix: nested lists alignment * fix: editor padding * fix: first level list items copyable * chore: list spacing * fix: title change * fix: pages list block items interaction * fix: saving chip position * fix: delete action from block menu to focus properly * fix: margin-bottom as 0 to avoid weird spacing when a paragraph node follows a list node * style: table, chore: lite text editor toolbar * fix: page description tab sync * fix: lists spacing and alignment * refactor: document editor props * feat: rich text editor wrapper created and migrated core * feat: created wrapper around lite text editor and merged core * chore: add lite text editor toolbar * fix: build errors * fix: type errors and addead live updation of toolbar * chore: pages migration * fix: inbox issue * refactor: remove redundant package * refactor: unused files * fix: add dompurify to space app * fix: inline code margin * fix: editor className props * fix: build errors * fix: traversing up the tree before assuming the parent is not a list item * fix: drag handle positions for list items fixed * fix: removed focus at end logic after deleting block * fix: image wrapper overflow scroll fix with block menu's position * fix: selection and deletion logic for nested lists fixed!! * fix: hiding the block menu while scrolling in the document/app * fix: merge conflicts resolved from develop * fix: inbox issue description * chore: move page title to the web app * fix: handling edge cases for table selection * chore: lint issues * refactor: list item functions moved to same file * refactor: use mention hook * fix: added try catch blocks for mention suggestions * chore: remove unused code * fix: remove console logs * fix: remove console logs --------- Co-authored-by: NarayanBavisetti <narayan3119@gmail.com> Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com> Co-authored-by: gurusainath <gurusainath007@gmail.com> Co-authored-by: Palanikannan1437 <73993394+Palanikannan1437@users.noreply.github.com>
This commit is contained in:
Aaryan Khandelwal
GitHub
parent
8b6035d315
commit
3e2355e223
248 changed files with 7602 additions and 5619 deletions
173
web/components/pages/editor/editor-body.tsx
Normal file
173
web/components/pages/editor/editor-body.tsx
Normal file
|
|
@ -0,0 +1,173 @@
|
|||
import { useEffect } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import { useRouter } from "next/router";
|
||||
import { Control, Controller } from "react-hook-form";
|
||||
// document editor
|
||||
import {
|
||||
DocumentEditorWithRef,
|
||||
DocumentReadOnlyEditorWithRef,
|
||||
EditorReadOnlyRefApi,
|
||||
EditorRefApi,
|
||||
IMarking,
|
||||
} from "@plane/document-editor";
|
||||
// types
|
||||
import { IUserLite, TPage } from "@plane/types";
|
||||
// components
|
||||
import { PageContentBrowser, PageEditorTitle } from "@/components/pages";
|
||||
// helpers
|
||||
import { cn } from "@/helpers/common.helper";
|
||||
// hooks
|
||||
import { useMember, useMention, useUser, useWorkspace } from "@/hooks/store";
|
||||
import useReloadConfirmations from "@/hooks/use-reload-confirmation";
|
||||
// services
|
||||
import { FileService } from "@/services/file.service";
|
||||
// store
|
||||
import { IPageStore } from "@/store/pages/page.store";
|
||||
|
||||
const fileService = new FileService();
|
||||
|
||||
type Props = {
|
||||
control: Control<TPage, any>;
|
||||
editorRef: React.RefObject<EditorRefApi>;
|
||||
readOnlyEditorRef: React.RefObject<EditorReadOnlyRefApi>;
|
||||
swrPageDetails: TPage | undefined;
|
||||
handleSubmit: () => void;
|
||||
markings: IMarking[];
|
||||
pageStore: IPageStore;
|
||||
sidePeekVisible: boolean;
|
||||
handleEditorReady: (value: boolean) => void;
|
||||
handleReadOnlyEditorReady: (value: boolean) => void;
|
||||
updateMarkings: (description_html: string) => void;
|
||||
};
|
||||
|
||||
export const PageEditorBody: React.FC<Props> = observer((props) => {
|
||||
const {
|
||||
control,
|
||||
handleReadOnlyEditorReady,
|
||||
handleEditorReady,
|
||||
editorRef,
|
||||
markings,
|
||||
readOnlyEditorRef,
|
||||
handleSubmit,
|
||||
pageStore,
|
||||
swrPageDetails,
|
||||
sidePeekVisible,
|
||||
updateMarkings,
|
||||
} = props;
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
// store hooks
|
||||
const { currentUser } = useUser();
|
||||
const { getWorkspaceBySlug } = useWorkspace();
|
||||
const {
|
||||
getUserDetails,
|
||||
project: { getProjectMemberIds },
|
||||
} = useMember();
|
||||
// derived values
|
||||
const workspaceId = workspaceSlug ? getWorkspaceBySlug(workspaceSlug.toString())?.id ?? "" : "";
|
||||
const pageTitle = pageStore?.name ?? "";
|
||||
const pageDescription = pageStore?.description_html ?? "<p></p>";
|
||||
const isFullWidth = !!pageStore?.view_props?.full_width;
|
||||
const { description_html, isContentEditable, updateTitle, isSubmitting, setIsSubmitting } = pageStore;
|
||||
const projectMemberIds = projectId ? getProjectMemberIds(projectId.toString()) : [];
|
||||
const projectMemberDetails = projectMemberIds?.map((id) => getUserDetails(id) as IUserLite);
|
||||
// use-mention
|
||||
const { mentionHighlights, mentionSuggestions } = useMention({
|
||||
workspaceSlug: workspaceSlug?.toString() ?? "",
|
||||
projectId: projectId?.toString() ?? "",
|
||||
members: projectMemberDetails,
|
||||
user: currentUser ?? undefined,
|
||||
});
|
||||
|
||||
const { setShowAlert } = useReloadConfirmations(isSubmitting === "submitting");
|
||||
|
||||
useEffect(() => {
|
||||
updateMarkings(description_html ?? "<p></p>");
|
||||
}, [description_html, updateMarkings]);
|
||||
|
||||
return (
|
||||
<div className="flex items-center h-full w-full overflow-y-auto">
|
||||
<div
|
||||
className={cn("sticky top-0 hidden h-full flex-shrink-0 -translate-x-full p-5 duration-200 md:block", {
|
||||
"translate-x-0": sidePeekVisible,
|
||||
"w-56 lg:w-72": !isFullWidth,
|
||||
"w-[10%]": isFullWidth,
|
||||
})}
|
||||
>
|
||||
{!isFullWidth && (
|
||||
<PageContentBrowser
|
||||
editorRef={(isContentEditable ? editorRef : readOnlyEditorRef)?.current}
|
||||
markings={markings}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className={cn("h-full w-full pt-5", {
|
||||
"md:w-[calc(100%-14rem)] lg:w-[calc(100%-18rem-18rem)]": !isFullWidth,
|
||||
"w-[80%]": isFullWidth,
|
||||
})}
|
||||
>
|
||||
<div className="h-full w-full flex flex-col gap-y-7 overflow-y-auto overflow-x-hidden">
|
||||
<div className="w-full flex-shrink-0 ml-5">
|
||||
<PageEditorTitle
|
||||
editorRef={editorRef}
|
||||
title={pageTitle}
|
||||
updateTitle={updateTitle}
|
||||
readOnly={!isContentEditable}
|
||||
/>
|
||||
</div>
|
||||
{isContentEditable ? (
|
||||
<Controller
|
||||
name="description_html"
|
||||
control={control}
|
||||
render={({ field: { onChange } }) => (
|
||||
<DocumentEditorWithRef
|
||||
fileHandler={{
|
||||
cancel: fileService.cancelUpload,
|
||||
delete: fileService.getDeleteImageFunction(workspaceId),
|
||||
restore: fileService.getRestoreImageFunction(workspaceId),
|
||||
upload: fileService.getUploadFileFunction(workspaceSlug as string, setIsSubmitting),
|
||||
}}
|
||||
handleEditorReady={handleEditorReady}
|
||||
initialValue={pageDescription}
|
||||
value={swrPageDetails?.description_html ?? "<p></p>"}
|
||||
ref={editorRef}
|
||||
containerClassName="p-0 pb-64"
|
||||
editorClassName="px-10"
|
||||
onChange={(_description_json, description_html) => {
|
||||
setIsSubmitting("submitting");
|
||||
setShowAlert(true);
|
||||
onChange(description_html);
|
||||
handleSubmit();
|
||||
}}
|
||||
mentionHandler={{
|
||||
highlights: mentionHighlights,
|
||||
suggestions: mentionSuggestions,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
<DocumentReadOnlyEditorWithRef
|
||||
ref={readOnlyEditorRef}
|
||||
initialValue={pageDescription}
|
||||
handleEditorReady={handleReadOnlyEditorReady}
|
||||
containerClassName="p-0 pb-64 border-none"
|
||||
editorClassName="px-10"
|
||||
mentionHandler={{
|
||||
highlights: mentionHighlights,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={cn("hidden lg:block h-full flex-shrink-0", {
|
||||
"w-56 lg:w-72": !isFullWidth,
|
||||
"w-[10%]": isFullWidth,
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
99
web/components/pages/editor/header/extra-options.tsx
Normal file
99
web/components/pages/editor/header/extra-options.tsx
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
import { useState } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import { Lock, RefreshCw, Sparkle } from "lucide-react";
|
||||
// editor
|
||||
import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/document-editor";
|
||||
// ui
|
||||
import { ArchiveIcon } from "@plane/ui";
|
||||
// components
|
||||
import { GptAssistantPopover } from "@/components/core";
|
||||
import { PageInfoPopover, PageOptionsDropdown } from "@/components/pages";
|
||||
// helpers
|
||||
import { cn } from "@/helpers/common.helper";
|
||||
import { renderFormattedDate } from "@/helpers/date-time.helper";
|
||||
// hooks
|
||||
import { useApplication } from "@/hooks/store";
|
||||
// store
|
||||
import { IPageStore } from "@/store/pages/page.store";
|
||||
|
||||
type Props = {
|
||||
editorRef: React.RefObject<EditorRefApi>;
|
||||
handleDuplicatePage: () => void;
|
||||
pageStore: IPageStore;
|
||||
projectId: string;
|
||||
readOnlyEditorRef: React.RefObject<EditorReadOnlyRefApi>;
|
||||
};
|
||||
|
||||
export const PageExtraOptions: React.FC<Props> = observer((props) => {
|
||||
const { editorRef, handleDuplicatePage, pageStore, projectId, readOnlyEditorRef } = props;
|
||||
// states
|
||||
const [gptModalOpen, setGptModal] = useState(false);
|
||||
// store hooks
|
||||
const {
|
||||
config: { envConfig },
|
||||
} = useApplication();
|
||||
// derived values
|
||||
const { archived_at, isContentEditable, isSubmitting, is_locked } = pageStore;
|
||||
|
||||
const handleAiAssistance = async (response: string) => {
|
||||
if (!editorRef) return;
|
||||
editorRef.current?.setEditorValueAtCursorPosition(response);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-grow items-center justify-end gap-3">
|
||||
{isContentEditable && (
|
||||
<div
|
||||
className={cn("fade-in flex items-center gap-x-2 transition-all duration-300", {
|
||||
"fade-out": isSubmitting === "saved",
|
||||
})}
|
||||
>
|
||||
{isSubmitting === "submitting" && <RefreshCw className="h-4 w-4 stroke-custom-text-300" />}
|
||||
<span className="text-sm text-custom-text-300">{isSubmitting === "submitting" ? "Saving..." : "Saved"}</span>
|
||||
</div>
|
||||
)}
|
||||
{is_locked && (
|
||||
<div className="flex h-7 items-center gap-2 rounded-full bg-custom-background-80 px-3 py-0.5 text-xs font-medium text-custom-text-300">
|
||||
<Lock className="h-3 w-3" />
|
||||
<span>Locked</span>
|
||||
</div>
|
||||
)}
|
||||
{archived_at && (
|
||||
<div className="flex h-7 items-center gap-2 rounded-full bg-blue-500/20 px-3 py-0.5 text-xs font-medium text-blue-500">
|
||||
<ArchiveIcon className="h-3 w-3" />
|
||||
<span>Archived at {renderFormattedDate(archived_at)}</span>
|
||||
</div>
|
||||
)}
|
||||
{isContentEditable && envConfig?.has_openai_configured && (
|
||||
<GptAssistantPopover
|
||||
isOpen={gptModalOpen}
|
||||
projectId={projectId}
|
||||
handleClose={() => {
|
||||
setGptModal((prevData) => !prevData);
|
||||
// this is done so that the title do not reset after gpt popover closed
|
||||
// reset(getValues());
|
||||
}}
|
||||
onResponse={handleAiAssistance}
|
||||
placement="top-end"
|
||||
button={
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90"
|
||||
onClick={() => setGptModal((prevData) => !prevData)}
|
||||
>
|
||||
<Sparkle className="h-4 w-4" />
|
||||
AI
|
||||
</button>
|
||||
}
|
||||
className="!min-w-[38rem]"
|
||||
/>
|
||||
)}
|
||||
<PageInfoPopover pageStore={pageStore} />
|
||||
<PageOptionsDropdown
|
||||
editorRef={isContentEditable ? editorRef.current : readOnlyEditorRef.current}
|
||||
handleDuplicatePage={handleDuplicatePage}
|
||||
pageStore={pageStore}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
5
web/components/pages/editor/header/index.ts
Normal file
5
web/components/pages/editor/header/index.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
export * from "./extra-options";
|
||||
export * from "./info-popover";
|
||||
export * from "./options-dropdown";
|
||||
export * from "./root";
|
||||
export * from "./toolbar";
|
||||
57
web/components/pages/editor/header/info-popover.tsx
Normal file
57
web/components/pages/editor/header/info-popover.tsx
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
import { useState } from "react";
|
||||
import { usePopper } from "react-popper";
|
||||
import { Calendar, History, Info } from "lucide-react";
|
||||
// helpers
|
||||
import { renderFormattedDate } from "@/helpers/date-time.helper";
|
||||
// store
|
||||
import { IPageStore } from "@/store/pages/page.store";
|
||||
|
||||
type Props = {
|
||||
pageStore: IPageStore;
|
||||
};
|
||||
|
||||
export const PageInfoPopover: React.FC<Props> = (props) => {
|
||||
const { pageStore } = props;
|
||||
// states
|
||||
const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
|
||||
// refs
|
||||
const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
|
||||
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
|
||||
// popper-js
|
||||
const { styles: infoPopoverStyles, attributes: infoPopoverAttributes } = usePopper(referenceElement, popperElement, {
|
||||
placement: "bottom-start",
|
||||
});
|
||||
// derived values
|
||||
const { created_at, updated_at } = pageStore;
|
||||
|
||||
return (
|
||||
<div onMouseEnter={() => setIsPopoverOpen(true)} onMouseLeave={() => setIsPopoverOpen(false)}>
|
||||
<button type="button" ref={setReferenceElement} className="block">
|
||||
<Info className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
{isPopoverOpen && (
|
||||
<div
|
||||
className="z-10 w-64 space-y-2.5 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 p-3 shadow-custom-shadow-rg"
|
||||
ref={setPopperElement}
|
||||
style={infoPopoverStyles.popper}
|
||||
{...infoPopoverAttributes.popper}
|
||||
>
|
||||
<div className="space-y-1.5">
|
||||
<h6 className="text-xs text-custom-text-400">Last updated on</h6>
|
||||
<h5 className="flex items-center gap-1 text-sm">
|
||||
<History className="h-3 w-3" />
|
||||
{renderFormattedDate(updated_at)}
|
||||
</h5>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<h6 className="text-xs text-custom-text-400">Created on</h6>
|
||||
<h5 className="flex items-center gap-1 text-sm">
|
||||
<Calendar className="h-3 w-3" />
|
||||
{renderFormattedDate(created_at)}
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
175
web/components/pages/editor/header/options-dropdown.tsx
Normal file
175
web/components/pages/editor/header/options-dropdown.tsx
Normal file
|
|
@ -0,0 +1,175 @@
|
|||
import { observer } from "mobx-react";
|
||||
import { Clipboard, Copy, Link, Lock } from "lucide-react";
|
||||
// document editor
|
||||
import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/document-editor";
|
||||
// ui
|
||||
import { ArchiveIcon, CustomMenu, TOAST_TYPE, ToggleSwitch, setToast } from "@plane/ui";
|
||||
// helpers
|
||||
import { copyTextToClipboard, copyUrlToClipboard } from "@/helpers/string.helper";
|
||||
// hooks
|
||||
import { useApplication } from "@/hooks/store";
|
||||
// store
|
||||
import { IPageStore } from "@/store/pages/page.store";
|
||||
|
||||
type Props = {
|
||||
editorRef: EditorRefApi | EditorReadOnlyRefApi | null;
|
||||
handleDuplicatePage: () => void;
|
||||
pageStore: IPageStore;
|
||||
};
|
||||
|
||||
export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
|
||||
const { editorRef, handleDuplicatePage, pageStore } = props;
|
||||
// store values
|
||||
const {
|
||||
archive,
|
||||
lock,
|
||||
unlock,
|
||||
canCurrentUserArchivePage,
|
||||
canCurrentUserDuplicatePage,
|
||||
canCurrentUserLockPage,
|
||||
restore,
|
||||
view_props,
|
||||
updateViewProps,
|
||||
} = pageStore;
|
||||
// store hooks
|
||||
const {
|
||||
router: { workspaceSlug, projectId },
|
||||
} = useApplication();
|
||||
|
||||
const handleArchivePage = async () =>
|
||||
await archive().catch(() =>
|
||||
setToast({
|
||||
type: TOAST_TYPE.ERROR,
|
||||
title: "Error!",
|
||||
message: "Page could not be archived. Please try again later.",
|
||||
})
|
||||
);
|
||||
|
||||
const handleRestorePage = async () =>
|
||||
await restore().catch(() =>
|
||||
setToast({
|
||||
type: TOAST_TYPE.ERROR,
|
||||
title: "Error!",
|
||||
message: "Page could not be restored. Please try again later.",
|
||||
})
|
||||
);
|
||||
|
||||
const handleLockPage = async () =>
|
||||
await lock().catch(() =>
|
||||
setToast({
|
||||
type: TOAST_TYPE.ERROR,
|
||||
title: "Error!",
|
||||
message: "Page could not be locked. Please try again later.",
|
||||
})
|
||||
);
|
||||
|
||||
const handleUnlockPage = async () =>
|
||||
await unlock().catch(() =>
|
||||
setToast({
|
||||
type: TOAST_TYPE.ERROR,
|
||||
title: "Error!",
|
||||
message: "Page could not be unlocked. Please try again later.",
|
||||
})
|
||||
);
|
||||
|
||||
// menu items list
|
||||
const MENU_ITEMS: {
|
||||
key: string;
|
||||
action: () => void;
|
||||
label: string;
|
||||
icon: React.FC<any>;
|
||||
shouldRender: boolean;
|
||||
}[] = [
|
||||
{
|
||||
key: "copy-markdown",
|
||||
action: () => {
|
||||
if (!editorRef) return;
|
||||
copyTextToClipboard(editorRef.getMarkDown()).then(() =>
|
||||
setToast({
|
||||
type: TOAST_TYPE.SUCCESS,
|
||||
title: "Successful!",
|
||||
message: "Markdown copied to clipboard.",
|
||||
})
|
||||
);
|
||||
},
|
||||
label: "Copy markdown",
|
||||
icon: Clipboard,
|
||||
shouldRender: true,
|
||||
},
|
||||
{
|
||||
key: "copy-page-link",
|
||||
action: () => {
|
||||
copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/pages/${pageStore.id}`).then(() =>
|
||||
setToast({
|
||||
type: TOAST_TYPE.SUCCESS,
|
||||
title: "Successful!",
|
||||
message: "Page link copied to clipboard.",
|
||||
})
|
||||
);
|
||||
},
|
||||
label: "Copy page link",
|
||||
icon: Link,
|
||||
shouldRender: true,
|
||||
},
|
||||
{
|
||||
key: "make-a-copy",
|
||||
action: handleDuplicatePage,
|
||||
label: "Make a copy",
|
||||
icon: Copy,
|
||||
shouldRender: canCurrentUserDuplicatePage,
|
||||
},
|
||||
{
|
||||
key: "lock-page",
|
||||
action: handleLockPage,
|
||||
label: "Lock page",
|
||||
icon: Lock,
|
||||
shouldRender: !pageStore.is_locked && canCurrentUserLockPage,
|
||||
},
|
||||
{
|
||||
key: "unlock-page",
|
||||
action: handleUnlockPage,
|
||||
label: "Unlock page",
|
||||
icon: Lock,
|
||||
shouldRender: pageStore.is_locked && canCurrentUserLockPage,
|
||||
},
|
||||
{
|
||||
key: "archive-page",
|
||||
action: handleArchivePage,
|
||||
label: "Archive page",
|
||||
icon: ArchiveIcon,
|
||||
shouldRender: !pageStore.archived_at && canCurrentUserArchivePage,
|
||||
},
|
||||
{
|
||||
key: "restore-page",
|
||||
action: handleRestorePage,
|
||||
label: "Restore page",
|
||||
icon: ArchiveIcon,
|
||||
shouldRender: !!pageStore.archived_at && canCurrentUserArchivePage,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<CustomMenu maxHeight="md" placement="bottom-start" verticalEllipsis closeOnSelect>
|
||||
<CustomMenu.MenuItem
|
||||
className="flex w-full items-center justify-between gap-2"
|
||||
onClick={() =>
|
||||
updateViewProps({
|
||||
full_width: !view_props?.full_width,
|
||||
})
|
||||
}
|
||||
>
|
||||
Full width
|
||||
<ToggleSwitch value={!!view_props?.full_width} onChange={() => {}} />
|
||||
</CustomMenu.MenuItem>
|
||||
{MENU_ITEMS.map((item) => {
|
||||
if (!item.shouldRender) return null;
|
||||
return (
|
||||
<CustomMenu.MenuItem key={item.key} onClick={item.action} className="flex items-center gap-2">
|
||||
<item.icon className="h-3 w-3" />
|
||||
<div className="text-custom-text-300">{item.label}</div>
|
||||
</CustomMenu.MenuItem>
|
||||
);
|
||||
})}
|
||||
</CustomMenu>
|
||||
);
|
||||
});
|
||||
70
web/components/pages/editor/header/root.tsx
Normal file
70
web/components/pages/editor/header/root.tsx
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
import { observer } from "mobx-react";
|
||||
import { EditorReadOnlyRefApi, EditorRefApi, IMarking } from "@plane/document-editor";
|
||||
// components
|
||||
import { PageExtraOptions, PageSummaryPopover, PageToolbar } from "@/components/pages";
|
||||
// helpers
|
||||
import { cn } from "@/helpers/common.helper";
|
||||
// store
|
||||
import { IPageStore } from "@/store/pages/page.store";
|
||||
|
||||
type Props = {
|
||||
editorRef: React.RefObject<EditorRefApi>;
|
||||
readOnlyEditorRef: React.RefObject<EditorReadOnlyRefApi>;
|
||||
handleDuplicatePage: () => void;
|
||||
markings: IMarking[];
|
||||
pageStore: 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,
|
||||
pageStore,
|
||||
projectId,
|
||||
sidePeekVisible,
|
||||
setSidePeekVisible,
|
||||
} = props;
|
||||
// derived values
|
||||
const { isContentEditable, view_props } = pageStore;
|
||||
const isFullWidth = !!view_props?.full_width;
|
||||
|
||||
if (!editorRef.current && !readOnlyEditorRef.current) return null;
|
||||
|
||||
return (
|
||||
<div className="flex items-center border-b border-custom-border-200 px-3 py-2 md:px-5">
|
||||
<div
|
||||
className={cn("flex-shrink-0", {
|
||||
"w-56 lg:w-72": !isFullWidth,
|
||||
"w-[10%]": 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}
|
||||
pageStore={pageStore}
|
||||
projectId={projectId}
|
||||
readOnlyEditorRef={readOnlyEditorRef}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
90
web/components/pages/editor/header/toolbar.tsx
Normal file
90
web/components/pages/editor/header/toolbar.tsx
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
import React, { useEffect, useState, useCallback } from "react";
|
||||
// editor
|
||||
import { EditorMenuItemNames, EditorRefApi } from "@plane/document-editor";
|
||||
// ui
|
||||
import { Tooltip } from "@plane/ui";
|
||||
// constants
|
||||
import { TOOLBAR_ITEMS, ToolbarMenuItem } from "@/constants/editor";
|
||||
// helpers
|
||||
import { cn } from "@/helpers/common.helper";
|
||||
|
||||
type Props = {
|
||||
editorRef: EditorRefApi;
|
||||
};
|
||||
|
||||
type ToolbarButtonProps = {
|
||||
item: ToolbarMenuItem;
|
||||
isActive: boolean;
|
||||
executeCommand: (commandName: EditorMenuItemNames) => void;
|
||||
};
|
||||
|
||||
const ToolbarButton: React.FC<ToolbarButtonProps> = React.memo((props) => {
|
||||
const { item, isActive, executeCommand } = props;
|
||||
|
||||
return (
|
||||
<Tooltip
|
||||
tooltipContent={
|
||||
<p className="flex flex-col gap-1 text-center text-xs">
|
||||
<span className="font-medium">{item.name}</span>
|
||||
{item.shortcut && <kbd className="text-custom-text-400">{item.shortcut.join(" + ")}</kbd>}
|
||||
</p>
|
||||
}
|
||||
>
|
||||
<button
|
||||
key={item.key}
|
||||
type="button"
|
||||
onClick={() => executeCommand(item.key)}
|
||||
className={cn("grid h-7 w-7 place-items-center rounded text-custom-text-300 hover:bg-custom-background-80", {
|
||||
"bg-custom-background-80 text-custom-text-100": isActive,
|
||||
})}
|
||||
>
|
||||
<item.icon
|
||||
className={cn("h-4 w-4", {
|
||||
"text-custom-text-100": isActive,
|
||||
})}
|
||||
/>
|
||||
</button>
|
||||
</Tooltip>
|
||||
);
|
||||
});
|
||||
|
||||
ToolbarButton.displayName = "ToolbarButton";
|
||||
|
||||
const toolbarItems = TOOLBAR_ITEMS.document;
|
||||
|
||||
export const PageToolbar: React.FC<Props> = ({ editorRef }) => {
|
||||
const [activeStates, setActiveStates] = useState<Record<string, boolean>>({});
|
||||
|
||||
const updateActiveStates = useCallback(() => {
|
||||
const newActiveStates: Record<string, boolean> = {};
|
||||
Object.values(toolbarItems)
|
||||
.flat()
|
||||
.forEach((item) => {
|
||||
newActiveStates[item.key] = editorRef.isMenuItemActive(item.key);
|
||||
});
|
||||
setActiveStates(newActiveStates);
|
||||
}, [editorRef]);
|
||||
|
||||
useEffect(() => {
|
||||
const unsubscribe = editorRef.onStateChange(updateActiveStates);
|
||||
updateActiveStates();
|
||||
return () => unsubscribe();
|
||||
}, [editorRef, updateActiveStates]);
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap items-center divide-x divide-custom-border-200">
|
||||
{Object.keys(toolbarItems).map((key) => (
|
||||
<div key={key} className="flex items-center gap-0.5 px-2 first:pl-0 last:pr-0">
|
||||
{toolbarItems[key].map((item) => (
|
||||
<ToolbarButton
|
||||
key={item.key}
|
||||
item={item}
|
||||
isActive={activeStates[item.key]}
|
||||
executeCommand={editorRef.executeMenuItemCommand}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
4
web/components/pages/editor/index.ts
Normal file
4
web/components/pages/editor/index.ts
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
export * from "./header";
|
||||
export * from "./summary";
|
||||
export * from "./editor-body";
|
||||
export * from "./title";
|
||||
49
web/components/pages/editor/summary/content-browser.tsx
Normal file
49
web/components/pages/editor/summary/content-browser.tsx
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
// types
|
||||
import { EditorReadOnlyRefApi, EditorRefApi, IMarking } from "@plane/document-editor";
|
||||
import { OutlineHeading1, OutlineHeading2, OutlineHeading3 } from "./heading-components";
|
||||
|
||||
type Props = {
|
||||
editorRef: EditorRefApi | EditorReadOnlyRefApi | null;
|
||||
markings: IMarking[];
|
||||
setSidePeekVisible?: (sidePeekState: boolean) => void;
|
||||
};
|
||||
|
||||
export const PageContentBrowser: React.FC<Props> = (props) => {
|
||||
const { editorRef, markings, setSidePeekVisible } = props;
|
||||
|
||||
const handleOnClick = (marking: IMarking) => {
|
||||
editorRef?.scrollSummary(marking);
|
||||
if (setSidePeekVisible) setSidePeekVisible(false);
|
||||
};
|
||||
|
||||
const HeadingComponent: {
|
||||
[key: number]: React.FC<{ marking: IMarking; onClick: () => void }>;
|
||||
} = {
|
||||
1: OutlineHeading1,
|
||||
2: OutlineHeading2,
|
||||
3: OutlineHeading3,
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col overflow-hidden">
|
||||
<h2 className="font-medium">Outline</h2>
|
||||
<div className="h-full flex flex-col items-start gap-y-2 overflow-y-auto mt-2">
|
||||
{markings.length !== 0 ? (
|
||||
markings.map((marking) => {
|
||||
const Component = HeadingComponent[marking.level];
|
||||
if (!Component) return null;
|
||||
return (
|
||||
<Component
|
||||
key={`${marking.level}-${marking.sequence}`}
|
||||
marking={marking}
|
||||
onClick={() => handleOnClick(marking)}
|
||||
/>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<p className="mt-3 text-xs text-custom-text-400">Headings will be displayed here for navigation</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
37
web/components/pages/editor/summary/heading-components.tsx
Normal file
37
web/components/pages/editor/summary/heading-components.tsx
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
// document editor
|
||||
import { IMarking } from "@plane/document-editor";
|
||||
|
||||
type HeadingProps = {
|
||||
marking: IMarking;
|
||||
onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
|
||||
};
|
||||
|
||||
export const OutlineHeading1 = ({ marking, onClick }: HeadingProps) => (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
className="ml-4 cursor-pointer text-sm font-medium text-custom-text-400 hover:text-custom-primary-100 max-md:ml-2.5"
|
||||
>
|
||||
{marking.text}
|
||||
</button>
|
||||
);
|
||||
|
||||
export const OutlineHeading2 = ({ marking, onClick }: HeadingProps) => (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
className="ml-6 cursor-pointer text-xs font-medium text-custom-text-400 hover:text-custom-primary-100"
|
||||
>
|
||||
{marking.text}
|
||||
</button>
|
||||
);
|
||||
|
||||
export const OutlineHeading3 = ({ marking, onClick }: HeadingProps) => (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
className="ml-8 cursor-pointer text-xs font-medium text-custom-text-400 hover:text-custom-primary-100"
|
||||
>
|
||||
{marking.text}
|
||||
</button>
|
||||
);
|
||||
2
web/components/pages/editor/summary/index.ts
Normal file
2
web/components/pages/editor/summary/index.ts
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
export * from "./content-browser";
|
||||
export * from "./popover";
|
||||
75
web/components/pages/editor/summary/popover.tsx
Normal file
75
web/components/pages/editor/summary/popover.tsx
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
import { useState } from "react";
|
||||
import { usePopper } from "react-popper";
|
||||
import { List } from "lucide-react";
|
||||
// document editor
|
||||
import { EditorReadOnlyRefApi, EditorRefApi, IMarking } from "@plane/document-editor";
|
||||
// helpers
|
||||
import { cn } from "@/helpers/common.helper";
|
||||
// components
|
||||
import { PageContentBrowser } from "./content-browser";
|
||||
|
||||
type Props = {
|
||||
editorRef: EditorRefApi | EditorReadOnlyRefApi | null;
|
||||
isFullWidth: boolean;
|
||||
markings: IMarking[];
|
||||
sidePeekVisible: boolean;
|
||||
setSidePeekVisible: (sidePeekState: boolean) => void;
|
||||
};
|
||||
|
||||
export const PageSummaryPopover: React.FC<Props> = (props) => {
|
||||
const { editorRef, markings, sidePeekVisible, setSidePeekVisible } = props;
|
||||
// refs
|
||||
const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
|
||||
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
|
||||
// popper-js
|
||||
const { styles: summaryPopoverStyles, attributes: summaryPopoverAttributes } = usePopper(
|
||||
referenceElement,
|
||||
popperElement,
|
||||
{
|
||||
placement: "bottom-start",
|
||||
}
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="group/summary-popover w-min whitespace-nowrap">
|
||||
<button
|
||||
type="button"
|
||||
ref={setReferenceElement}
|
||||
className={`grid h-7 w-7 place-items-center rounded ${
|
||||
sidePeekVisible ? "bg-custom-primary-100/20 text-custom-primary-100" : "text-custom-text-300"
|
||||
}`}
|
||||
onClick={() => setSidePeekVisible(!sidePeekVisible)}
|
||||
>
|
||||
<List className="h-4 w-4" />
|
||||
</button>
|
||||
<div
|
||||
className={cn("block md:hidden", {
|
||||
// "md:hidden": !isFullWidth,
|
||||
})}
|
||||
>
|
||||
{sidePeekVisible && (
|
||||
<div
|
||||
className="z-10 max-h-80 w-64 overflow-y-auto rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 p-3 shadow-custom-shadow-rg"
|
||||
ref={setPopperElement}
|
||||
style={summaryPopoverStyles.popper}
|
||||
{...summaryPopoverAttributes.popper}
|
||||
>
|
||||
<PageContentBrowser setSidePeekVisible={setSidePeekVisible} editorRef={editorRef} markings={markings} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="hidden md:block">
|
||||
{!sidePeekVisible && (
|
||||
<div
|
||||
className="z-10 hidden max-h-80 w-64 overflow-y-auto rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 p-3 shadow-custom-shadow-rg group-hover/summary-popover:block"
|
||||
ref={setPopperElement}
|
||||
style={summaryPopoverStyles.popper}
|
||||
{...summaryPopoverAttributes.popper}
|
||||
>
|
||||
<PageContentBrowser editorRef={editorRef} markings={markings} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
40
web/components/pages/editor/title.tsx
Normal file
40
web/components/pages/editor/title.tsx
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
import { observer } from "mobx-react";
|
||||
// editor
|
||||
import { EditorRefApi } from "@plane/document-editor";
|
||||
// ui
|
||||
import { TextArea } from "@plane/ui";
|
||||
|
||||
type Props = {
|
||||
editorRef: React.RefObject<EditorRefApi>;
|
||||
readOnly: boolean;
|
||||
title: string;
|
||||
updateTitle: (title: string) => void;
|
||||
};
|
||||
|
||||
export const PageEditorTitle: React.FC<Props> = observer((props) => {
|
||||
const { editorRef, readOnly, title, updateTitle } = props;
|
||||
|
||||
return (
|
||||
<>
|
||||
{readOnly ? (
|
||||
<h6 className="-mt-2 break-words bg-transparent text-4xl font-bold">{title}</h6>
|
||||
) : (
|
||||
<TextArea
|
||||
onChange={(e) => updateTitle(e.target.value)}
|
||||
className="-mt-2 w-full bg-custom-background text-4xl font-bold outline-none p-0 border-none resize-none rounded-none"
|
||||
style={{
|
||||
lineHeight: "1.2",
|
||||
}}
|
||||
placeholder="Untitled Page"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
editorRef.current?.setFocusAtPosition(0);
|
||||
}
|
||||
}}
|
||||
value={title}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue