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 { TableHandle } from './table-handle'
export default function Editor() {
const editor = useMemo(() => {
const extension = defineExtension()
return createEditor({ extension, defaultContent })
}, [])
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>
<TableHandle />
</div>
</div>
</ProseKit>
)
}
const defaultContent = `
<table><tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</tbody></table>
`ts
import {
defineBaseKeymap,
defineDoc,
defineHistory,
defineParagraph,
defineText,
union,
} from 'prosekit/core'
import { defineGapCursor } from 'prosekit/extensions/gap-cursor'
import { defineTable } from 'prosekit/extensions/table'
export function defineExtension() {
return union(
defineBaseKeymap(),
defineDoc(),
defineText(),
defineParagraph(),
defineTable(),
defineHistory(),
defineGapCursor(),
)
}
export type EditorExtension = ReturnType<typeof defineExtension>tsx
import { useEditor } from 'prosekit/react'
import {
TableHandleColumnRoot,
TableHandleColumnTrigger,
TableHandlePopoverContent,
TableHandlePopoverItem,
TableHandleRoot,
TableHandleRowRoot,
TableHandleRowTrigger,
} from 'prosekit/react/table-handle'
import type { EditorExtension } from './extension'
export function TableHandle() {
const editor = useEditor<EditorExtension>({ update: true })
return (
<TableHandleRoot className="contents">
<TableHandleColumnRoot className='flex items-center box-border justify-center h-[1.2em] w-[1.5em] bg-white hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded text-zinc-500/50 dark:text-zinc-500/50 translate-y-3 border border-zinc-200 dark:border-zinc-800 border-solid [&:not([data-state])]:hidden will-change-transform data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95 data-[state=open]:animate-duration-150 data-[state=closed]:animate-duration-200'>
<TableHandleColumnTrigger>
<div className='i-lucide-grip-horizontal h-5 w-5'></div>
</TableHandleColumnTrigger>
<TableHandlePopoverContent 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'>
{editor.commands.addTableColumnBefore.canExec() && (
<TableHandlePopoverItem
className='relative min-w-[8rem] scroll-my-1 rounded px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 box-border cursor-default select-none whitespace-nowrap outline-none data-[focused]:bg-zinc-100 dark:data-[focused]:bg-zinc-800'
onSelect={editor.commands.addTableColumnBefore}
>
<span>Insert Left</span>
</TableHandlePopoverItem>
)}
{editor.commands.addTableColumnAfter.canExec() && (
<TableHandlePopoverItem
className='relative min-w-[8rem] scroll-my-1 rounded px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 box-border cursor-default select-none whitespace-nowrap outline-none data-[focused]:bg-zinc-100 dark:data-[focused]:bg-zinc-800'
onSelect={editor.commands.addTableColumnAfter}
>
<span>Insert Right</span>
</TableHandlePopoverItem>
)}
{editor.commands.deleteCellSelection.canExec() && (
<TableHandlePopoverItem
className='relative min-w-[8rem] scroll-my-1 rounded px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 box-border cursor-default select-none whitespace-nowrap outline-none data-[focused]:bg-zinc-100 dark:data-[focused]:bg-zinc-800'
onSelect={editor.commands.deleteCellSelection}
>
<span>Clear Contents</span>
<span className='text-xs tracking-widest text-zinc-500 dark:text-zinc-500'>Del</span>
</TableHandlePopoverItem>
)}
{editor.commands.deleteTableColumn.canExec() && (
<TableHandlePopoverItem
className='relative min-w-[8rem] scroll-my-1 rounded px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 box-border cursor-default select-none whitespace-nowrap outline-none data-[focused]:bg-zinc-100 dark:data-[focused]:bg-zinc-800'
onSelect={editor.commands.deleteTableColumn}
>
<span>Delete Column</span>
</TableHandlePopoverItem>
)}
</TableHandlePopoverContent>
</TableHandleColumnRoot>
<TableHandleRowRoot className='flex items-center box-border justify-center h-[1.5em] w-[1.2em] bg-white hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded text-zinc-500/50 dark:text-zinc-500/50 translate-x-3 border border-zinc-200 dark:border-zinc-800 border-solid [&:not([data-state])]:hidden will-change-transform data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95 data-[state=open]:animate-duration-150 data-[state=closed]:animate-duration-200'>
<TableHandleRowTrigger>
<div className='i-lucide-grip-vertical h-5 w-5'></div>
</TableHandleRowTrigger>
<TableHandlePopoverContent 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'>
{editor.commands.addTableRowAbove.canExec() && (
<TableHandlePopoverItem
className='relative min-w-[8rem] scroll-my-1 rounded px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 box-border cursor-default select-none whitespace-nowrap outline-none data-[focused]:bg-zinc-100 dark:data-[focused]:bg-zinc-800'
onSelect={editor.commands.addTableRowAbove}
>
<span>Insert Above</span>
</TableHandlePopoverItem>
)}
{editor.commands.addTableRowBelow.canExec() && (
<TableHandlePopoverItem
className='relative min-w-[8rem] scroll-my-1 rounded px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 box-border cursor-default select-none whitespace-nowrap outline-none data-[focused]:bg-zinc-100 dark:data-[focused]:bg-zinc-800'
onSelect={editor.commands.addTableRowBelow}
>
<span>Insert Below</span>
</TableHandlePopoverItem>
)}
{editor.commands.deleteCellSelection.canExec() && (
<TableHandlePopoverItem
className='relative min-w-[8rem] scroll-my-1 rounded px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 box-border cursor-default select-none whitespace-nowrap outline-none data-[focused]:bg-zinc-100 dark:data-[focused]:bg-zinc-800'
onSelect={editor.commands.deleteCellSelection}
>
<span>Clear Contents</span>
<span className='text-xs tracking-widest text-zinc-500 dark:text-zinc-500'>Del</span>
</TableHandlePopoverItem>
)}
{editor.commands.deleteTableRow.canExec() && (
<TableHandlePopoverItem
className='relative min-w-[8rem] scroll-my-1 rounded px-3 py-1.5 flex items-center justify-between gap-8 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:data-[disabled=true]:opacity-50 box-border cursor-default select-none whitespace-nowrap outline-none data-[focused]:bg-zinc-100 dark:data-[focused]:bg-zinc-800'
onSelect={editor.commands.deleteTableRow}
>
<span>Delete Row</span>
</TableHandlePopoverItem>
)}
</TableHandlePopoverContent>
</TableHandleRowRoot>
</TableHandleRoot>
)
}