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;
}