From 9b473b27c211976fa6b7bffd5a2961845d750ed4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= Date: Mon, 6 Apr 2026 19:18:09 +0400 Subject: [PATCH] Fix invisible drag line on Safari MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Émile Ré --- .../ui/src/RichEditor/OptionsMenu/OptionsMenuTrigger.tsx | 7 ++++++- packages/ui/src/RichEditor/OptionsMenu/variants.ts | 2 +- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/ui/src/RichEditor/OptionsMenu/OptionsMenuTrigger.tsx b/packages/ui/src/RichEditor/OptionsMenu/OptionsMenuTrigger.tsx index 09c3db4e8..e8508f9e7 100644 --- a/packages/ui/src/RichEditor/OptionsMenu/OptionsMenuTrigger.tsx +++ b/packages/ui/src/RichEditor/OptionsMenu/OptionsMenuTrigger.tsx @@ -61,8 +61,13 @@ export function OptionsMenuTrigger({ const wrapper = document.createElement("div"); wrapper.append(hoveredBlock.cloneNode(true)); wrapper.style.position = "absolute"; - wrapper.style.top = "-10000px"; + wrapper.style.left = "-10000px"; + wrapper.style.top = "0"; + wrapper.style.minWidth = "1px"; + wrapper.style.minHeight = "1px"; document.body.append(wrapper); + // Safari needs the element laid out before setDragImage + void wrapper.offsetHeight; e.dataTransfer.setDragImage(wrapper, 0, 0); document.addEventListener("dragend", () => wrapper.remove(), { once: true }); } diff --git a/packages/ui/src/RichEditor/OptionsMenu/variants.ts b/packages/ui/src/RichEditor/OptionsMenu/variants.ts index 6b999ee3b..743d0c479 100644 --- a/packages/ui/src/RichEditor/OptionsMenu/variants.ts +++ b/packages/ui/src/RichEditor/OptionsMenu/variants.ts @@ -8,7 +8,7 @@ export const optionsMenuVariants = tv({ slots: { trigger: [ "z-20 flex size-5 items-center justify-center", - "rounded text-txt-tertiary hover:bg-subtle hover:text-txt-primary cursor-grab", + "rounded text-txt-tertiary hover:bg-subtle hover:text-txt-primary cursor-grab active:cursor-grabbing", ], menu: ["rounded-lg border border-border-mid bg-level-0 p-1 shadow-mid z-30"], },