From 0f54ef5a60e1b91e010314e4a7cc2c0e0e81c14f Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal Date: Fri, 9 Aug 2024 17:03:40 +0530 Subject: [PATCH 1/2] fix: drag handle click action --- .../src/core/components/menus/block-menu.tsx | 2 +- .../editor/src/core/extensions/side-menu.tsx | 1 + .../editor/src/core/plugins/drag-handle.ts | 34 ++++++++----------- packages/editor/src/styles/drag-drop.css | 11 ++++++ 4 files changed, 28 insertions(+), 20 deletions(-) diff --git a/packages/editor/src/core/components/menus/block-menu.tsx b/packages/editor/src/core/components/menus/block-menu.tsx index dfe30971593..a90e39ca22b 100644 --- a/packages/editor/src/core/components/menus/block-menu.tsx +++ b/packages/editor/src/core/components/menus/block-menu.tsx @@ -14,7 +14,7 @@ export const BlockMenu = (props: BlockMenuProps) => { const handleClickDragHandle = useCallback((event: MouseEvent) => { const target = event.target as HTMLElement; - if (target.matches(".drag-handle-dots") || target.matches(".drag-handle-dot")) { + if (target.matches("#drag-handle")) { event.preventDefault(); popup.current?.setProps({ diff --git a/packages/editor/src/core/extensions/side-menu.tsx b/packages/editor/src/core/extensions/side-menu.tsx index c382469a3b5..5a26222cd6f 100644 --- a/packages/editor/src/core/extensions/side-menu.tsx +++ b/packages/editor/src/core/extensions/side-menu.tsx @@ -175,6 +175,7 @@ const SideMenu = (options: SideMenuPluginProps) => { editorSideMenu.style.left = `${rect.left - rect.width}px`; editorSideMenu.style.top = `${rect.top}px`; showSideMenu(); + dragHandleDOMEvents?.mousemove(); }, keydown: () => hideSideMenu(), mousewheel: () => hideSideMenu(), diff --git a/packages/editor/src/core/plugins/drag-handle.ts b/packages/editor/src/core/plugins/drag-handle.ts index 32b6301d53a..f8b258e8ad1 100644 --- a/packages/editor/src/core/plugins/drag-handle.ts +++ b/packages/editor/src/core/plugins/drag-handle.ts @@ -5,33 +5,27 @@ import { __serializeForClipboard, EditorView } from "@tiptap/pm/view"; // extensions import { SideMenuHandleOptions, SideMenuPluginProps } from "@/extensions"; -const dragHandleClassName = - "hidden sm:grid place-items-center size-5 aspect-square rounded-sm cursor-grab outline-none hover:bg-custom-background-80 active:bg-custom-background-80 active:cursor-grabbing transition-colors duration-200 ease-linear"; -const dragHandleContainerClassName = "size-[15px] grid place-items-center"; -const dragHandleDotsClassName = "h-full w-3 grid grid-cols-2 place-items-center"; -const dragHandleDotClassName = "size-[2.5px] bg-custom-text-300 rounded-[50%]"; +const verticalEllipsisIcon = + ''; const createDragHandleElement = (): HTMLElement => { const dragHandleElement = document.createElement("button"); dragHandleElement.type = "button"; + dragHandleElement.id = "drag-handle"; dragHandleElement.draggable = true; dragHandleElement.dataset.dragHandle = ""; - dragHandleElement.classList.value = dragHandleClassName; + dragHandleElement.classList.value = + "hidden sm:flex items-center size-5 aspect-square rounded-sm cursor-grab outline-none hover:bg-custom-background-80 active:bg-custom-background-80 active:cursor-grabbing transition-[background-color,_opacity] duration-200 ease-linear"; - const dragHandleContainer = document.createElement("span"); - dragHandleContainer.classList.value = dragHandleContainerClassName; - dragHandleElement.appendChild(dragHandleContainer); + const iconElement1 = document.createElement("span"); + iconElement1.classList.value = "pointer-events-none text-custom-text-300"; + iconElement1.innerHTML = verticalEllipsisIcon; + const iconElement2 = document.createElement("span"); + iconElement2.classList.value = "pointer-events-none text-custom-text-300 -ml-2.5"; + iconElement2.innerHTML = verticalEllipsisIcon; - const dotsContainer = document.createElement("span"); - dotsContainer.classList.value = dragHandleDotsClassName; - - for (let i = 0; i < 6; i++) { - const spanElement = document.createElement("span"); - spanElement.classList.value = dragHandleDotClassName; - dotsContainer.appendChild(spanElement); - } - - dragHandleContainer.appendChild(dotsContainer); + dragHandleElement.appendChild(iconElement1); + dragHandleElement.appendChild(iconElement2); return dragHandleElement; }; @@ -226,6 +220,7 @@ export const DragHandlePlugin = (options: SideMenuPluginProps): SideMenuHandleOp let dragHandleElement: HTMLElement | null = null; // drag handle view actions + const showDragHandle = () => dragHandleElement?.classList.remove("drag-handle-hidden"); const hideDragHandle = () => { if (!dragHandleElement?.classList.contains("drag-handle-hidden")) dragHandleElement?.classList.add("drag-handle-hidden"); @@ -260,6 +255,7 @@ export const DragHandlePlugin = (options: SideMenuPluginProps): SideMenuHandleOp }; }; const domEvents = { + mousemove: () => showDragHandle(), dragenter: (view: EditorView) => { view.dom.classList.add("dragging"); hideDragHandle(); diff --git a/packages/editor/src/styles/drag-drop.css b/packages/editor/src/styles/drag-drop.css index c205c0699b7..30419cf66e8 100644 --- a/packages/editor/src/styles/drag-drop.css +++ b/packages/editor/src/styles/drag-drop.css @@ -16,6 +16,17 @@ } /* end side menu */ +/* drag handle */ +#drag-handle { + opacity: 100; + + &.drag-handle-hidden { + opacity: 0; + pointer-events: none; + } +} +/* end drag handle */ + .ProseMirror:not(.dragging) .ProseMirror-selectednode { position: relative; cursor: grab; From 37e1bbb1ab2227d7d3add8b6ab60a2fd5ebf55dc Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal Date: Mon, 12 Aug 2024 13:45:36 +0530 Subject: [PATCH 2/2] fix: drag handle positioning --- packages/editor/src/styles/drag-drop.css | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/editor/src/styles/drag-drop.css b/packages/editor/src/styles/drag-drop.css index 30419cf66e8..c29aaac139d 100644 --- a/packages/editor/src/styles/drag-drop.css +++ b/packages/editor/src/styles/drag-drop.css @@ -8,6 +8,7 @@ opacity 0.2s ease 0.2s, top 0.2s ease, left 0.2s ease; + transform: translateX(-50%); &.side-menu-hidden { opacity: 0;