fix(editor): fix error when type any character after '/'

bjohansebas · Aug 7, 2024 · f3f9b3e · f3f9b3e
1 parent b9e449c
commit f3f9b3e
Showing 1 changed file with 27 additions and 17 deletions.
diff --git a/packages/editor/src/components/editor.tsx b/packages/editor/src/components/editor.tsx
@@ -8,7 +8,15 @@ import type { Editor as EditorClass, FocusPosition } from '@tiptap/core'
 import { useDebouncedCallback } from 'use-debounce'
 
 import { generateJSON } from '@tiptap/html'
-import { EditorBubble, EditorCommand, EditorCommandEmpty, EditorCommandItem, EditorContent, EditorRoot } from 'novel'
+import {
+  EditorBubble,
+  EditorCommand,
+  EditorCommandEmpty,
+  EditorCommandItem,
+  EditorCommandList,
+  EditorContent,
+  EditorRoot,
+} from 'novel'
 import { useState } from 'react'
 
 import { extensions } from '../extensions'
@@ -78,22 +86,24 @@ export function Editor({
       >
         <EditorCommand className="z-50 h-auto max-h-[330px] w-72 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>
-          {suggestionItems.map((item) => (
-            <EditorCommandItem
-              value={item.title}
-              onCommand={(val) => (item.command != null ? item.command(val) : null)}
-              className="flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm aria-selected:bg-accent hover: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-muted-foreground text-xs">{item.description}</p>
-              </div>
-            </EditorCommandItem>
-          ))}
+          <EditorCommandList>
+            {suggestionItems.map((item) => (
+              <EditorCommandItem
+                value={item.title}
+                onCommand={(val) => (item.command != null ? item.command(val) : null)}
+                className="flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm aria-selected:bg-accent hover: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-muted-foreground text-xs">{item.description}</p>
+                </div>
+              </EditorCommandItem>
+            ))}
+          </EditorCommandList>
         </EditorCommand>
         <EditorBubble
           tippyOptions={{