fix: dialog usage pattern example

apps/docs/guides/tailwind/slash-command.mdx

@@ -193,3 +193,36 @@ Components are wrapper over cmdk
 </EditorContent>
 ...
 ```
+
+## Usage in Dialog
+
+By default, it isn't possible to scroll the command list when it's opened in a dialog since both are attached to the document's body and the default behaviour of Radix's Dialog is to lock the scroll of the body when open.
+
+In order to fix this, we need to pass a ref to the `slashCommand` function so that it can render the command palette outside the editor's DOM hierarchy. 
+
+We can do this by creating a `useRef` and passing it to the `slashCommand` function.
+
+```tsx
+// Modify slashCommand to accept a ref
+const slashCommand = (ref: React.RefObject<HTMLDivElement> | null) => Command.configure({
+  suggestion: {
+    items: () => suggestionItems,
+    render: () => renderItems(ref),
+  },
+});
+```
+
+```tsx
+// Create a ref and pass it to the slashCommand
+const ref = useRef<HTMLDivElement>(null);
+const extensions = useRef([...defaultExtensions, slashCommand(ref)]).current;
+```
+
+```tsx
+// Wrap the editor with a div and pass the ref
+<div ref={ref} className="w-full h-full">
+  <EditorRoot>
+    ...
+  </EditorRoot>
+</div>
+```

apps/web/components/tailwind/advanced-editor.tsx

@@ -11,13 +11,13 @@ import {
   type JSONContent,
 } from "novel";
 import { ImageResizer, handleCommandNavigation } from "novel/extensions";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useDebouncedCallback } from "use-debounce";
 import { defaultExtensions } from "./extensions";
 import { ColorSelector } from "./selectors/color-selector";
 import { LinkSelector } from "./selectors/link-selector";
-import { NodeSelector } from "./selectors/node-selector";
 import { MathSelector } from "./selectors/math-selector";
+import { NodeSelector } from "./selectors/node-selector";
 import { Separator } from "./ui/separator";
 
 import { handleImageDrop, handleImagePaste } from "novel/plugins";
@@ -26,11 +26,12 @@ import { uploadFn } from "./image-upload";
 import { TextButtons } from "./selectors/text-buttons";
 import { slashCommand, suggestionItems } from "./slash-command";
 
-const hljs = require('highlight.js');
-
-const extensions = [...defaultExtensions, slashCommand];
+const hljs = require("highlight.js");
 
 const TailwindAdvancedEditor = () => {
+  const ref = useRef<HTMLDivElement>(null);
+  const extensions = useRef([...defaultExtensions, slashCommand(ref)]).current;
+
   const [initialContent, setInitialContent] = useState<null | JSONContent>(null);
   const [saveStatus, setSaveStatus] = useState("Saved");
   const [charsCount, setCharsCount] = useState();
@@ -42,8 +43,8 @@ const TailwindAdvancedEditor = () => {
 
   //Apply Codeblock Highlighting on the HTML from editor.getHTML()
   const highlightCodeblocks = (content: string) => {
-    const doc = new DOMParser().parseFromString(content, 'text/html');
-    doc.querySelectorAll('pre code').forEach((el) => {
+    const doc = new DOMParser().parseFromString(content, "text/html");
+    doc.querySelectorAll("pre code").forEach((el) => {
       // @ts-ignore
       // https://highlightjs.readthedocs.io/en/latest/api.html?highlight=highlightElement#highlightelement
       hljs.highlightElement(el);
@@ -76,65 +77,67 @@ const TailwindAdvancedEditor = () => {
           {charsCount} Words
         </div>
       </div>
-      <EditorRoot>
-        <EditorContent
-          initialContent={initialContent}
-          extensions={extensions}
-          className="relative min-h-[500px] w-full max-w-screen-lg border-muted bg-background sm:mb-[calc(20vh)] sm:rounded-lg sm:border sm:shadow-lg"
-          editorProps={{
-            handleDOMEvents: {
-              keydown: (_view, event) => handleCommandNavigation(event),
-            },
-            handlePaste: (view, event) => handleImagePaste(view, event, uploadFn),
-            handleDrop: (view, event, _slice, moved) => handleImageDrop(view, event, moved, uploadFn),
-            attributes: {
-              class:
-                "prose prose-lg dark:prose-invert prose-headings:font-title font-default focus:outline-none max-w-full",
-            },
-          }}
-          onUpdate={({ editor }) => {
-            debouncedUpdates(editor);
-            setSaveStatus("Unsaved");
-          }}
-          slotAfter={<ImageResizer />}
-        >
-          <EditorCommand className="z-50 h-auto max-h-[330px] overflow-y-auto rounded-md border border-muted bg-background px-1 py-2 shadow-md transition-all">
-            <EditorCommandEmpty className="px-2 text-muted-foreground">No results</EditorCommandEmpty>
-            <EditorCommandList>
-              {suggestionItems.map((item) => (
-                <EditorCommandItem
-                  value={item.title}
-                  onCommand={(val) => item.command(val)}
-                  className="flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm hover:bg-accent aria-selected:bg-accent"
-                  key={item.title}
-                >
-                  <div className="flex h-10 w-10 items-center justify-center rounded-md border border-muted bg-background">
-                    {item.icon}
-                  </div>
-                  <div>
-                    <p className="font-medium">{item.title}</p>
-                    <p className="text-xs text-muted-foreground">{item.description}</p>
-                  </div>
-                </EditorCommandItem>
-              ))}
-            </EditorCommandList>
-          </EditorCommand>
+      <div ref={ref} className="w-full h-full">
+        <EditorRoot>
+          <EditorContent
+            initialContent={initialContent}
+            extensions={extensions}
+            className="relative min-h-[500px] w-full max-w-screen-lg border-muted bg-background sm:mb-[calc(20vh)] sm:rounded-lg sm:border sm:shadow-lg"
+            editorProps={{
+              handleDOMEvents: {
+                keydown: (_view, event) => handleCommandNavigation(event),
+              },
+              handlePaste: (view, event) => handleImagePaste(view, event, uploadFn),
+              handleDrop: (view, event, _slice, moved) => handleImageDrop(view, event, moved, uploadFn),
+              attributes: {
+                class:
+                  "prose prose-lg dark:prose-invert prose-headings:font-title font-default focus:outline-none max-w-full",
+              },
+            }}
+            onUpdate={({ editor }) => {
+              debouncedUpdates(editor);
+              setSaveStatus("Unsaved");
+            }}
+            slotAfter={<ImageResizer />}
+          >
+            <EditorCommand className="z-50 h-auto max-h-[330px] overflow-y-auto rounded-md border border-muted bg-background px-1 py-2 shadow-md transition-all">
+              <EditorCommandEmpty className="px-2 text-muted-foreground">No results</EditorCommandEmpty>
+              <EditorCommandList>
+                {suggestionItems.map((item) => (
+                  <EditorCommandItem
+                    value={item.title}
+                    onCommand={(val) => item.command(val)}
+                    className="flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm hover:bg-accent aria-selected:bg-accent"
+                    key={item.title}
+                  >
+                    <div className="flex h-10 w-10 items-center justify-center rounded-md border border-muted bg-background">
+                      {item.icon}
+                    </div>
+                    <div>
+                      <p className="font-medium">{item.title}</p>
+                      <p className="text-xs text-muted-foreground">{item.description}</p>
+                    </div>
+                  </EditorCommandItem>
+                ))}
+              </EditorCommandList>
+            </EditorCommand>
 
-          <GenerativeMenuSwitch open={openAI} onOpenChange={setOpenAI}>
-            <Separator orientation="vertical" />
-            <NodeSelector open={openNode} onOpenChange={setOpenNode} />
-            <Separator orientation="vertical" />
+            <GenerativeMenuSwitch open={openAI} onOpenChange={setOpenAI}>
+              <Separator orientation="vertical" />
+              <NodeSelector open={openNode} onOpenChange={setOpenNode} />
+              <Separator orientation="vertical" />
 
-            <LinkSelector open={openLink} onOpenChange={setOpenLink} />
-            <Separator orientation="vertical" />
-            <MathSelector />
-            <Separator orientation="vertical" />
-            <TextButtons />
-            <Separator orientation="vertical" />
-            <ColorSelector open={openColor} onOpenChange={setOpenColor} />
-          </GenerativeMenuSwitch>
-        </EditorContent>
-      </EditorRoot>
+              <LinkSelector open={openLink} onOpenChange={setOpenLink} />
+              <Separator orientation="vertical" />
+              <MathSelector />
+              <Separator orientation="vertical" />
+              <TextButtons />
+              <Separator orientation="vertical" />
+              <ColorSelector open={openColor} onOpenChange={setOpenColor} />
+            </GenerativeMenuSwitch>
+          </EditorContent>
+        </EditorRoot>
+      </div>
     </div>
   );
 };

apps/web/components/tailwind/slash-command.tsx

@@ -181,9 +181,10 @@ export const suggestionItems = createSuggestionItems([
   },
 ]);
 
-export const slashCommand = Command.configure({
-  suggestion: {
-    items: () => suggestionItems,
-    render: renderItems,
-  },
-});
+export const slashCommand = (ref: React.RefObject<HTMLDivElement> | null) =>
+  Command.configure({
+    suggestion: {
+      items: () => suggestionItems,
+      render: () => renderItems(ref),
+    },
+  });