From 49452a68ab1e833a0da36cb6aac773fd105e86d2 Mon Sep 17 00:00:00 2001 From: "M. Palanikannan" <73993394+Palanikannan1437@users.noreply.github.com> Date: Mon, 22 Jan 2024 17:47:44 +0530 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20fix:=20Added=20new=20drag?= =?UTF-8?q?=20handle=20hide=20behavior=20to=20Pages=20(#3426)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Removed unused `switchLinkView` function in `PageRenderer` - Added `hideDragHandle` prop to `PageRenderer` component - Updated `EditorContainer` component in `PageRenderer` to include `hideDragHandle` prop - Removed unused code and variables in `DocumentEditor` component - Added `hideDragHandleOnMouseLeave` state variable in `DocumentEditor` component - Added `setHideDragHandleFunction` to set the hideDragHandle function from the DragAndDrop extension - Passed `hideDragHandleOnMouseLeave` as prop to `PageRenderer` component in `DocumentEditor` - Removed unused code and variables in `PageDetailsPage` component - Updated `customClassName` prop in `PageRenderer` component used in `PageDetailsPage` chore(deps): Update dependencies - Updated `@tippyjs/react` dependency to version 4.2.6 - Updated `mobx-react-lite` dependency to version 4.0.5 - Updated `tippy.js` dependency to version 6.3.7 Co-authored-by: sriram veeraghanta --- .../src/ui/components/page-renderer.tsx | 21 ++++++++++--------- .../src/ui/extensions/index.tsx | 5 +++-- .../editor/document-editor/src/ui/index.tsx | 16 +++++++++++++- .../projects/[projectId]/pages/[pageId].tsx | 2 +- 4 files changed, 30 insertions(+), 14 deletions(-) diff --git a/packages/editor/document-editor/src/ui/components/page-renderer.tsx b/packages/editor/document-editor/src/ui/components/page-renderer.tsx index 72c4c8b46..c60ac0e7a 100644 --- a/packages/editor/document-editor/src/ui/components/page-renderer.tsx +++ b/packages/editor/document-editor/src/ui/components/page-renderer.tsx @@ -27,11 +27,20 @@ type IPageRenderer = { }) => void; editorClassNames: string; editorContentCustomClassNames?: string; + hideDragHandle?: () => void; readonly: boolean; }; export const PageRenderer = (props: IPageRenderer) => { - const { documentDetails, editor, editorClassNames, editorContentCustomClassNames, updatePageTitle, readonly } = props; + const { + documentDetails, + editor, + editorClassNames, + editorContentCustomClassNames, + updatePageTitle, + readonly, + hideDragHandle, + } = props; const [pageTitle, setPagetitle] = useState(documentDetails.title); @@ -65,14 +74,6 @@ export const PageRenderer = (props: IPageRenderer) => { setIsOpen(false); }; - const switchLinkView = (view: "LinkPreview" | "LinkEditView" | "LinkInputView") => { - if (!linkViewProps) return; - setLinkViewProps({ - ...linkViewProps, - view: view, - }); - }; - const handleLinkHover = useCallback( (event: React.MouseEvent) => { if (!editor) return; @@ -167,7 +168,7 @@ export const PageRenderer = (props: IPageRenderer) => { /> )}
- +
diff --git a/packages/editor/document-editor/src/ui/extensions/index.tsx b/packages/editor/document-editor/src/ui/extensions/index.tsx index ca023f4a7..7de1e2922 100644 --- a/packages/editor/document-editor/src/ui/extensions/index.tsx +++ b/packages/editor/document-editor/src/ui/extensions/index.tsx @@ -11,7 +11,8 @@ import { LayersIcon } from "@plane/ui"; export const DocumentEditorExtensions = ( uploadFile: UploadImage, issueEmbedConfig?: IIssueEmbedConfig, - setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void + setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void, + setHideDragHandle?: (hideDragHandlerFromDragDrop: () => void) => void ) => { const additionalOptions: ISlashCommandItem[] = [ { @@ -35,7 +36,7 @@ export const DocumentEditorExtensions = ( return [ SlashCommand(uploadFile, setIsSubmitting, additionalOptions), - DragAndDrop, + DragAndDrop(setHideDragHandle), Placeholder.configure({ placeholder: ({ node }) => { if (node.type.name === "heading") { diff --git a/packages/editor/document-editor/src/ui/index.tsx b/packages/editor/document-editor/src/ui/index.tsx index 8d12f253b..e88632c3b 100644 --- a/packages/editor/document-editor/src/ui/index.tsx +++ b/packages/editor/document-editor/src/ui/index.tsx @@ -86,6 +86,14 @@ const DocumentEditor = ({ const [sidePeekVisible, setSidePeekVisible] = useState(true); const router = useRouter(); + const [hideDragHandleOnMouseLeave, setHideDragHandleOnMouseLeave] = React.useState<() => void>(() => {}); + + // this essentially sets the hideDragHandle function from the DragAndDrop extension as the Plugin + // loads such that we can invoke it from react when the cursor leaves the container + const setHideDragHandleFunction = (hideDragHandlerFromDragDrop: () => void) => { + setHideDragHandleOnMouseLeave(() => hideDragHandlerFromDragDrop); + }; + const editor = useEditor({ onChange(json, html) { updateMarkings(json); @@ -104,7 +112,12 @@ const DocumentEditor = ({ cancelUploadImage, rerenderOnPropsChange, forwardedRef, - extensions: DocumentEditorExtensions(uploadFile, embedConfig?.issueEmbedConfig, setIsSubmitting), + extensions: DocumentEditorExtensions( + uploadFile, + embedConfig?.issueEmbedConfig, + setIsSubmitting, + setHideDragHandleFunction + ), }); if (!editor) { @@ -152,6 +165,7 @@ const DocumentEditor = ({
{ setIsSubmitting={setIsSubmitting} updatePageTitle={updatePageTitle} onActionCompleteHandler={actionCompleteAlert} - customClassName="tracking-tight self-center px-0 h-full w-full" + customClassName="tracking-tight self-center h-full w-full right-[0.675rem]" onChange={(_description_json: Object, description_html: string) => { setShowAlert(true); onChange(description_html);