binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-2217] fix: drag handle positioning and action (#5349)

Browse source 
* fix: drag handle click action

* fix: drag handle positioning
This commit is contained in:
Aaryan Khandelwal 2024-08-12 15:51:23 +05:30 • committed by GitHub
parent f817d70f78
commit 3ffaa4f2ca
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 29 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

2
packages/editor/src/core/components/menus/block-menu.tsx
View file

@ -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({

1
packages/editor/src/core/extensions/side-menu.tsx
View file

@ -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(),

34
packages/editor/src/core/plugins/drag-handle.ts
View file

@ -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 =
'<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>';
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();

12
packages/editor/src/styles/drag-drop.css
View file

@ -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;
@ -16,6 +17,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;