Slash Menu
A popup that shows a list of command suggestions after pressing /.
Installation
Copy and paste the following code into your project.
tsx
import { useEditor } from 'prosekit/react'
import {
AutocompleteEmpty,
AutocompleteItem,
AutocompleteList,
AutocompletePopover,
} from 'prosekit/react/autocomplete'
import type { EditorExtension } from './extension'
export default function SlashMenu() {
const editor = useEditor<EditorExtension>()
return (
<AutocompletePopover regex={/\/.*$/iu} className='relative block max-h-[25rem] min-w-[8rem] select-none overflow-auto whitespace-nowrap p-1 z-10 box-border rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-neutral-900 shadow-lg [&:not([data-state])]:hidden'>
<AutocompleteList>
<AutocompleteEmpty className='relative block min-w-[8rem] scroll-my-1 rounded px-3 py-1.5 box-border cursor-default select-none whitespace-nowrap outline-none data-[focused]:bg-zinc-100 dark:data-[focused]:bg-zinc-800'>
No results
</AutocompleteEmpty>
<AutocompleteItem
className='relative block min-w-[8rem] scroll-my-1 rounded px-3 py-1.5 box-border cursor-default select-none whitespace-nowrap outline-none data-[focused]:bg-zinc-100 dark:data-[focused]:bg-zinc-800'
onSelect={() => editor.commands.setHeading({ level: 1 })}
>
Heading 1
</AutocompleteItem>
<AutocompleteItem
className='relative block min-w-[8rem] scroll-my-1 rounded px-3 py-1.5 box-border cursor-default select-none whitespace-nowrap outline-none data-[focused]:bg-zinc-100 dark:data-[focused]:bg-zinc-800'
onSelect={() => editor.commands.setHeading({ level: 2 })}
>
Heading 2
</AutocompleteItem>
<AutocompleteItem
className='relative block min-w-[8rem] scroll-my-1 rounded px-3 py-1.5 box-border cursor-default select-none whitespace-nowrap outline-none data-[focused]:bg-zinc-100 dark:data-[focused]:bg-zinc-800'
onSelect={() => editor.commands.wrapInList({ kind: 'task' })}
>
Task list
</AutocompleteItem>
<AutocompleteItem
className='relative block min-w-[8rem] scroll-my-1 rounded px-3 py-1.5 box-border cursor-default select-none whitespace-nowrap outline-none data-[focused]:bg-zinc-100 dark:data-[focused]:bg-zinc-800'
onSelect={() => editor.commands.wrapInList({ kind: 'bullet' })}
>
Bullet list
</AutocompleteItem>
<AutocompleteItem
className='relative block min-w-[8rem] scroll-my-1 rounded px-3 py-1.5 box-border cursor-default select-none whitespace-nowrap outline-none data-[focused]:bg-zinc-100 dark:data-[focused]:bg-zinc-800'
onSelect={() => editor.commands.wrapInList({ kind: 'ordered' })}
>
Ordered list
</AutocompleteItem>
<AutocompleteItem
className='relative block min-w-[8rem] scroll-my-1 rounded px-3 py-1.5 box-border cursor-default select-none whitespace-nowrap outline-none data-[focused]:bg-zinc-100 dark:data-[focused]:bg-zinc-800'
onSelect={() => editor.commands.wrapInList({ kind: 'toggle' })}
>
Toggle list
</AutocompleteItem>
</AutocompleteList>
</AutocompletePopover>
)
}Usage
Add the SlashMenu component to your Editor component.
tsx
import 'prosekit/basic/style.css'
import { createEditor } from 'prosekit/core'
import { ProseKit } from 'prosekit/react'
import { useMemo } from 'react'
import { defineExtension } from './extension'
import SlashMenu from './slash-menu'
export default function Editor() {
const editor = useMemo(() => {
return createEditor({ extension: defineExtension() })
}, [])
return (
<ProseKit editor={editor}>
<div className='box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 shadow dark:border-zinc-700 flex flex-col bg-white dark:bg-neutral-900'>
<div className='relative w-full flex-1 box-border overflow-y-scroll'>
<div ref={editor.mount} className='ProseMirror box-border min-h-full px-[max(4rem,_calc(50%-20rem))] py-8 outline-none outline-0 [&_span[data-mention="user"]]:text-blue-500 [&_span[data-mention="tag"]]:text-violet-500 [&_pre]:text-white [&_pre]:bg-zinc-800'></div>
<SlashMenu />
</div>
</div>
</ProseKit>
)
}