259 lines
10 KiB
JavaScript
259 lines
10 KiB
JavaScript
import React, { useCallback } from 'react'
|
|
import { BubbleMenu } from '@tiptap/react/menus'
|
|
|
|
function TableButton({ onClick, active = false, disabled = false, title, children }) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
onMouseDown={(event) => {
|
|
event.preventDefault()
|
|
}}
|
|
onClick={onClick}
|
|
disabled={disabled}
|
|
title={title}
|
|
className={[
|
|
'inline-flex h-8 items-center justify-center rounded-lg px-2.5 text-[11px] font-semibold uppercase tracking-[0.14em] transition-colors',
|
|
'focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-400',
|
|
active
|
|
? 'bg-sky-600/25 text-sky-300'
|
|
: 'text-zinc-400 hover:bg-white/[0.06] hover:text-zinc-200',
|
|
disabled && 'pointer-events-none opacity-30',
|
|
].filter(Boolean).join(' ')}
|
|
>
|
|
{children}
|
|
</button>
|
|
)
|
|
}
|
|
|
|
export function TableInsertDialog({
|
|
open,
|
|
rows,
|
|
cols,
|
|
withHeaderRow,
|
|
withHeaderColumn,
|
|
onRowsChange,
|
|
onColsChange,
|
|
onHeaderRowChange,
|
|
onHeaderColumnChange,
|
|
onClose,
|
|
onInsert,
|
|
}) {
|
|
if (!open) return null
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 z-[9999] flex items-center justify-center bg-[#04070dcc] px-4 backdrop-blur-md"
|
|
onClick={(event) => {
|
|
if (event.target === event.currentTarget) {
|
|
onClose?.()
|
|
}
|
|
}}
|
|
role="presentation"
|
|
>
|
|
<div className="w-full max-w-2xl overflow-hidden rounded-3xl border border-white/10 bg-[linear-gradient(180deg,rgba(16,22,34,0.98),rgba(8,12,19,0.98))] shadow-[0_30px_80px_rgba(0,0,0,0.55)]">
|
|
<div className="border-b border-white/[0.06] px-6 py-5">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.24em] text-white/35">Table</div>
|
|
<h3 className="mt-2 text-lg font-semibold text-white">Insert table</h3>
|
|
<p className="mt-2 text-sm leading-6 text-white/65">Create a table and edit rows and columns directly in the editor.</p>
|
|
</div>
|
|
|
|
<div className="grid gap-4 px-6 py-5 md:grid-cols-2">
|
|
<label className="grid gap-2 text-sm text-slate-300">
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Rows</span>
|
|
<input
|
|
type="number"
|
|
min="1"
|
|
max="12"
|
|
value={rows}
|
|
onChange={(event) => onRowsChange?.(Number.parseInt(event.target.value, 10) || 1)}
|
|
className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none"
|
|
/>
|
|
</label>
|
|
|
|
<label className="grid gap-2 text-sm text-slate-300">
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Columns</span>
|
|
<input
|
|
type="number"
|
|
min="1"
|
|
max="12"
|
|
value={cols}
|
|
onChange={(event) => onColsChange?.(Number.parseInt(event.target.value, 10) || 1)}
|
|
className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none"
|
|
/>
|
|
</label>
|
|
|
|
<label className="flex items-start gap-3 rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-slate-200 md:col-span-2">
|
|
<input
|
|
type="checkbox"
|
|
checked={withHeaderRow}
|
|
onChange={(event) => onHeaderRowChange?.(event.target.checked)}
|
|
className="mt-1"
|
|
/>
|
|
<span>
|
|
<span className="block font-semibold text-white">Header row</span>
|
|
<span className="mt-1 block text-xs leading-5 text-slate-400">Use a header row for column labels.</span>
|
|
</span>
|
|
</label>
|
|
|
|
<label className="flex items-start gap-3 rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-slate-200 md:col-span-2">
|
|
<input
|
|
type="checkbox"
|
|
checked={withHeaderColumn}
|
|
onChange={(event) => onHeaderColumnChange?.(event.target.checked)}
|
|
className="mt-1"
|
|
/>
|
|
<span>
|
|
<span className="block font-semibold text-white">Header column</span>
|
|
<span className="mt-1 block text-xs leading-5 text-slate-400">Use a header column for row labels.</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-end gap-3 border-t border-white/[0.06] px-6 py-4">
|
|
<button type="button" onClick={onClose} className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-white/[0.08]">
|
|
Cancel
|
|
</button>
|
|
<button type="button" onClick={onInsert} className="rounded-2xl border border-sky-300/20 bg-sky-400/10 px-4 py-2.5 text-sm font-semibold text-sky-100 transition hover:bg-sky-400/15">
|
|
Insert table
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default function RichTableControls({ editor }) {
|
|
const isTableActive = Boolean(editor?.isActive('table'))
|
|
|
|
const canRun = useCallback((commandName) => {
|
|
if (!editor) return false
|
|
|
|
try {
|
|
const chain = editor.can().chain().focus()
|
|
const next = typeof chain[commandName] === 'function' ? chain[commandName]() : null
|
|
return Boolean(next?.run?.())
|
|
} catch {
|
|
return false
|
|
}
|
|
}, [editor])
|
|
|
|
const runCommand = useCallback((commandName) => {
|
|
if (!editor) return
|
|
|
|
const chain = editor.chain().focus()
|
|
if (typeof chain[commandName] !== 'function') return
|
|
|
|
chain[commandName]().run()
|
|
}, [editor])
|
|
|
|
const deleteTable = useCallback(() => {
|
|
if (!editor) return
|
|
|
|
editor.chain().focus().deleteTable().run()
|
|
}, [editor])
|
|
|
|
const getActiveTable = useCallback(() => {
|
|
if (!editor) return null
|
|
|
|
const { state } = editor
|
|
const { $from } = state.selection
|
|
|
|
for (let depth = $from.depth; depth >= 0; depth -= 1) {
|
|
const node = $from.node(depth)
|
|
if (node?.type?.name !== 'table') {
|
|
continue
|
|
}
|
|
|
|
return {
|
|
node,
|
|
depth,
|
|
pos: $from.before(depth),
|
|
}
|
|
}
|
|
|
|
return null
|
|
}, [editor])
|
|
|
|
const moveTable = useCallback((direction) => {
|
|
if (!editor) return
|
|
|
|
const tableInfo = getActiveTable()
|
|
if (!tableInfo) return
|
|
|
|
const { state, view } = editor
|
|
const { doc } = state
|
|
const tableNode = tableInfo.node
|
|
const tablePos = tableInfo.pos
|
|
const tableSize = tableNode.nodeSize
|
|
|
|
let childPos = 1
|
|
let previous = null
|
|
let current = null
|
|
let next = null
|
|
|
|
for (let index = 0; index < doc.childCount; index += 1) {
|
|
const child = doc.child(index)
|
|
if (childPos === tablePos) {
|
|
current = { node: child, pos: childPos }
|
|
next = index + 1 < doc.childCount
|
|
? { node: doc.child(index + 1), pos: childPos + child.nodeSize }
|
|
: null
|
|
break
|
|
}
|
|
|
|
previous = { node: child, pos: childPos }
|
|
childPos += child.nodeSize
|
|
}
|
|
|
|
if (!current) return
|
|
|
|
const tr = state.tr.delete(tablePos, tablePos + tableSize)
|
|
let insertPos = tablePos
|
|
|
|
if (direction === 'up') {
|
|
if (!previous) return
|
|
insertPos = previous.pos
|
|
} else if (direction === 'down') {
|
|
if (!next) return
|
|
insertPos = next.pos + next.node.nodeSize - tableSize
|
|
} else {
|
|
return
|
|
}
|
|
|
|
tr.insert(insertPos, tableNode.type.create(tableNode.attrs, tableNode.content, tableNode.marks))
|
|
view.dispatch(tr)
|
|
editor.chain().focus().setNodeSelection(insertPos).run()
|
|
}, [editor, getActiveTable])
|
|
|
|
if (!editor) return null
|
|
|
|
return (
|
|
<BubbleMenu
|
|
editor={editor}
|
|
shouldShow={({ editor: bubbleEditor }) => Boolean(bubbleEditor?.isActive('table'))}
|
|
tippyOptions={{
|
|
placement: 'top-start',
|
|
offset: [0, 12],
|
|
duration: 100,
|
|
}}
|
|
className="rich-table-toolbar"
|
|
>
|
|
<div className="flex flex-wrap items-center gap-2 rounded-2xl border border-sky-300/25 bg-[linear-gradient(180deg,rgba(12,18,29,0.98),rgba(6,10,16,0.98))] px-3 py-2 text-xs text-slate-400 shadow-[0_18px_50px_rgba(0,0,0,0.35)]">
|
|
<span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 font-semibold uppercase tracking-[0.16em] text-slate-300">Table tools</span>
|
|
<TableButton onClick={() => runCommand('addRowBefore')} disabled={!canRun('addRowBefore')} title="Add row before">Row +</TableButton>
|
|
<TableButton onClick={() => runCommand('addRowAfter')} disabled={!canRun('addRowAfter')} title="Add row after">Row +</TableButton>
|
|
<TableButton onClick={() => runCommand('deleteRow')} disabled={!canRun('deleteRow')} title="Delete row">Del row</TableButton>
|
|
<TableButton onClick={() => runCommand('addColumnBefore')} disabled={!canRun('addColumnBefore')} title="Add column before">Col +</TableButton>
|
|
<TableButton onClick={() => runCommand('addColumnAfter')} disabled={!canRun('addColumnAfter')} title="Add column after">Col +</TableButton>
|
|
<TableButton onClick={() => runCommand('deleteColumn')} disabled={!canRun('deleteColumn')} title="Delete column">Del col</TableButton>
|
|
<TableButton onClick={() => runCommand('mergeCells')} disabled={!canRun('mergeCells')} title="Merge selected cells">Merge</TableButton>
|
|
<TableButton onClick={() => runCommand('splitCell')} disabled={!canRun('splitCell')} title="Split selected cell">Split</TableButton>
|
|
<TableButton onClick={() => runCommand('toggleHeaderRow')} disabled={!canRun('toggleHeaderRow')} active={isTableActive} title="Toggle header row">Header row</TableButton>
|
|
<TableButton onClick={() => runCommand('toggleHeaderColumn')} disabled={!canRun('toggleHeaderColumn')} active={isTableActive} title="Toggle header column">Header col</TableButton>
|
|
<TableButton onClick={() => moveTable('up')} disabled={!getActiveTable()} title="Move table up">Move up</TableButton>
|
|
<TableButton onClick={() => moveTable('down')} disabled={!getActiveTable()} title="Move table down">Move down</TableButton>
|
|
<TableButton onClick={deleteTable} title="Delete table">Delete table</TableButton>
|
|
</div>
|
|
</BubbleMenu>
|
|
)
|
|
} |