diff --git a/apps/docs/guides/tailwind/setup.mdx b/apps/docs/guides/tailwind/setup.mdx index 3f0a79714..4dfb7a37b 100644 --- a/apps/docs/guides/tailwind/setup.mdx +++ b/apps/docs/guides/tailwind/setup.mdx @@ -14,7 +14,7 @@ description: "Follow this guide to set up Novel with Tailwindcss" href="https://ui.shadcn.com/docs/installation" > You can find more info about installing shadcn-ui here. You will need to add - the following components: Button, Separator, Popover, Command, Dialog, + the following components: Button, Separator, Popover, Command, Dialog This example will use the same stucture from here: [Anatomy](/quickstart#anatomy)\ @@ -339,3 +339,7 @@ import { defaultEditorProps, EditorContent } from "novel"; You need `require("@tailwindcss/typography")` for the prose styling + +## Usage within Dialogs + +Novel has been designed to work automatically within Radix Dialogs, namely by looking for the closest parent attribute `[role="dialog"]`. If you're using a different implementation for popups and dialogs, ensure you add this attribute above the editor so the drag handle calculates the correct position. diff --git a/packages/headless/src/extensions/drag-and-drop.tsx b/packages/headless/src/extensions/drag-and-drop.tsx index 20e0fd699..eedd90bc1 100644 --- a/packages/headless/src/extensions/drag-and-drop.tsx +++ b/packages/headless/src/extensions/drag-and-drop.tsx @@ -12,6 +12,17 @@ export interface DragHandleOptions { } function absoluteRect(node: Element) { const data = node.getBoundingClientRect(); + const modal = node.closest('[role="dialog"]'); + + if (modal && window.getComputedStyle(modal).transform !== "none") { + const modalRect = modal.getBoundingClientRect(); + + return { + top: data.top - modalRect.top, + left: data.left - modalRect.left, + width: data.width, + }; + } return { top: data.top, @@ -154,7 +165,7 @@ function DragHandle(options: DragHandleOptions) { y: event.clientY, }); - if (!(node instanceof Element)) { + if (!(node instanceof Element) || node.matches("ul, ol")) { hideDragHandle(); return; }