fix: remove problem with stuck in slash menu

apps/web/app/page.tsx

@@ -5,6 +5,8 @@ import { useState } from "react";
 import Link from "next/link";
 import { Emojis } from "@eddieseditor/emojis";
 import { CodeHighlight, useHighlighter } from "@eddieseditor/code-highlight";
+import { defaultSlashCommands } from "eddies";
+import { AlertCircle } from "lucide-react";
 
 export default function Page() {
   const [theme, setTheme] = useState<"dark" | "light">("dark");
@@ -57,11 +59,19 @@ export default function Page() {
                 shikiji: data,
               }),
             ]}
+            slashMenuCommands={[
+              ...defaultSlashCommands,
+              {
+                title: "Test",
+                command: () => console.log("test"),
+                description: "Do this do get amazing funcion",
+                icon: AlertCircle,
+              },
+            ]}
             theme={theme}
             limit={3000}
             placeholder={{
               enabled: true,
-              text: "Type something here...",
               nodes: {
                 heading: "Heading",
               },
@@ -191,7 +201,6 @@ export default function Page() {
                 },
               ],
             }}
-            onContentChange={(content) => console.log(content.getJSON())}
           />
         )}
       </div>

packages/eddies/src/components/slash-command/menu.tsx

@@ -54,31 +54,38 @@ export const CommandMenu = React.forwardRef(
       [command, editor, items]
     );
 
-    const commandListContainer = useRef<HTMLDivElement>(null);
-
-    useImperativeHandle(ref, () => ({
-      onKeyDown: ({ event }: { event: React.KeyboardEvent }) => {
-        event.preventDefault();
-        if (event.key === "ArrowUp") {
-          setSelectedIndex((selectedIndex + items.length - 1) % items.length);
-          return true;
-        }
-        if (event.key === "ArrowDown") {
-          setSelectedIndex((selectedIndex + 1) % items.length);
-          return true;
-        }
-        if (event.key === "Enter") {
-          console.log("enter");
-          selectItem(selectedIndex);
-          return true;
+    useEffect(() => {
+      const navigationKeys = ["ArrowUp", "ArrowDown", "Enter"];
+      const onKeyDown = (e: KeyboardEvent) => {
+        if (navigationKeys.includes(e.key)) {
+          e.preventDefault();
+          if (e.key === "ArrowUp") {
+            setSelectedIndex((selectedIndex + items.length - 1) % items.length);
+            return true;
+          }
+          if (e.key === "ArrowDown") {
+            setSelectedIndex((selectedIndex + 1) % items.length);
+            return true;
+          }
+          if (e.key === "Enter") {
+            selectItem(selectedIndex);
+            return true;
+          }
+          return false;
         }
-      },
-    }));
+      };
+      document.addEventListener("keydown", onKeyDown);
+      return () => {
+        document.removeEventListener("keydown", onKeyDown);
+      };
+    }, [items, selectedIndex, setSelectedIndex, selectItem]);
 
     useEffect(() => {
       setSelectedIndex(0);
     }, [items]);
 
+    const commandListContainer = useRef<HTMLDivElement>(null);
+
     useLayoutEffect(() => {
       const container = commandListContainer?.current;
 

packages/eddies/src/components/slash-command/slash-command.ts

@@ -36,17 +36,11 @@ export type SlashCommandItem = {
 };
 
 export const SlashCommand = Extension.create<{
-  theme: "dark" | "light";
+  slashCommands?: SlashCommandItem[];
 }>({
   name: "slash-command",
   priority: 300,
 
-  addOptions() {
-    return {
-      theme: "dark",
-    };
-  },
-
   addProseMirrorPlugins() {
     return [
       Suggestion({
@@ -74,7 +68,7 @@ export const SlashCommand = Extension.create<{
           view.focus();
         },
         items: ({ query }: { query: string }) => {
-          return defaultSlashCommands.filter((item) => {
+          return (this.options.slashCommands ?? []).filter((item) => {
             if (typeof query === "string" && query.length > 0) {
               const search = query.toLowerCase();
               return (

packages/eddies/src/editor.tsx

@@ -13,6 +13,7 @@ import CharacterCount from "@tiptap/extension-character-count";
 import { useEffect, useMemo, useRef } from "react";
 import { useEditor } from "./hooks/useEditor";
 import { SlashCommand } from "./components/slash-command/slash-command";
+import { defaultSlashCommands } from "./components/slash-command/default-items";
 
 export function Editor({
   initialValue,
@@ -24,6 +25,7 @@ export function Editor({
   limit = showCharacterCount ? 3000 : 0,
   menu = true,
   bubbleMenuItems = defaultBubbleMenuItems,
+  slashMenuCommands = defaultSlashCommands,
   isEditable = true,
   autofocus = false,
   onReady = () => {},
@@ -43,7 +45,9 @@ export function Editor({
       CharacterCount.configure({
         limit,
       }),
-      SlashCommand,
+      SlashCommand.configure({
+        slashCommands: slashMenuCommands,
+      }),
     ],
     initialValue,
     placeholder,
@@ -54,11 +58,7 @@ export function Editor({
     tiptapOptions,
   });
 
-  const bMenuItems = !Array.isArray(bubbleMenuItems)
-    ? bubbleMenuItems.includeDefault
-      ? [...defaultBubbleMenuItems, ...bubbleMenuItems.items!]
-      : bubbleMenuItems.items
-    : bubbleMenuItems;
+  const bMenuItems = bubbleMenuItems;
 
   if (!editor) return;
 

packages/eddies/src/index.tsx

@@ -14,3 +14,4 @@ export { EddiesEditor } from "@eddieseditor/core";
 export const BubbleMenu = BubbleMenuComponment;
 export const BubbleButton = BubbleMenuButton;
 export const NodeSelector = NodeSelectorComponent;
+export * from "./components/slash-command/default-items";

packages/eddies/src/types.ts

@@ -8,6 +8,7 @@ import { EditorProps as TiptapEditorProps } from "@tiptap/pm/view";
 import { BubbleMenuItem } from "./components/bubble-menu/bubble-menu";
 import { Editor as CoreEditor } from "@tiptap/react";
 import { EditorOptions } from "@eddieseditor/core";
+import { SlashCommandItem } from "./components/slash-command/slash-command";
 
 export type EditorProps = {
   /**
@@ -38,14 +39,10 @@ export type EditorProps = {
   /**
    * Items that will be displayed in bubble menu.
    */
-  bubbleMenuItems?:
-    | BubbleMenuItem[]
-    | {
-        /**
-         * Shows default bubble menu items.
-         */
-        includeDefault?: boolean;
+  bubbleMenuItems?: BubbleMenuItem[];
 
-        items?: BubbleMenuItem[];
-      };
+  /**
+   * Slash menu commands
+   */
+  slashMenuCommands?: SlashCommandItem[];
 } & EditorOptions;