Merge pull request #342 from steven-tey/expose-command-list

feat: expose editor command list

Author: andrewdoro

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

@@ -10,6 +10,7 @@ import {
   EditorContent,
   type JSONContent,
   EditorInstance,
+  EditorCommandList,
 } from "novel";
 import { ImageResizer, handleCommandNavigation } from "novel/extensions";
 import { defaultExtensions } from "./extensions";
@@ -87,24 +88,26 @@ const TailwindAdvancedEditor = () => {
             <EditorCommandEmpty className="px-2 text-muted-foreground">
               No results
             </EditorCommandEmpty>
-            {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>
+              {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}>

packages/headless/src/components/editor-command.tsx

@@ -8,7 +8,7 @@ import type { ComponentPropsWithoutRef, FC } from "react";
 import type { Range } from "@tiptap/core";
 
 export const EditorCommandTunnelContext = createContext(
-  {} as ReturnType<typeof tunnel>
+  {} as ReturnType<typeof tunnel>,
 );
 
 interface EditorCommandOutProps {
@@ -44,7 +44,7 @@ export const EditorCommandOut: FC<EditorCommandOutProps> = ({
               key: e.key,
               cancelable: true,
               bubbles: true,
-            })
+            }),
           );
 
         return false;
@@ -67,7 +67,6 @@ export const EditorCommand = forwardRef<
   HTMLDivElement,
   ComponentPropsWithoutRef<typeof Command>
 >(({ children, className, ...rest }, ref) => {
-  const commandListRef = useRef<HTMLDivElement>(null);
   const [query, setQuery] = useAtom(queryAtom);
 
   return (
@@ -88,12 +87,13 @@ export const EditorCommand = forwardRef<
               onValueChange={setQuery}
               style={{ display: "none" }}
             />
-            <Command.List ref={commandListRef}>{children}</Command.List>
+            {children}
           </Command>
         </tunnelInstance.In>
       )}
     </EditorCommandTunnelContext.Consumer>
   );
 });
+export const EditorCommandList = Command.List;
 
 EditorCommand.displayName = "EditorCommand";

packages/headless/src/components/index.ts

@@ -5,5 +5,5 @@ export type { JSONContent } from "@tiptap/react";
 export { EditorRoot, EditorContent, type EditorContentProps } from "./editor";
 export { EditorBubble } from "./editor-bubble";
 export { EditorBubbleItem } from "./editor-bubble-item";
-export { EditorCommand } from "./editor-command";
+export { EditorCommand, EditorCommandList } from "./editor-command";
 export { EditorCommandItem, EditorCommandEmpty } from "./editor-command-item";