mirror of
https://github.com/supabase/supabase.git
synced 2026-09-06 09:59:03 +08:00
93d9d80535
## Context Related to Explorer/Notebooks - this PR adds the functionality to add / remove cells Separately - am thinking we can shift a lot of the "cell update" logic into notebook-state, mainly so that each UI component doesn't need to be aware of the notebook's `cells` but just its own cell. I'll do it separately though to prevent bloating this PR, already left comments where i think can be refactored <img width="250" alt="image" src="https://github.com/user-attachments/assets/91aae5f9-07b9-4327-8e21-8e9d71098aa6" /> <img width="250" alt="image" src="https://github.com/user-attachments/assets/677de208-5c52-4155-90c6-bc0879070693" /> <img width="250" alt="image" src="https://github.com/user-attachments/assets/17c3dae7-87bc-40bb-bfa0-15df101006ce" /> <img width="1091" height="262" alt="image" src="https://github.com/user-attachments/assets/a09c3d23-696a-4b55-a1f8-4602e56a60dc" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## New Features - Add query and Markdown cells directly within notebooks. - Move, remove, and reorder cells using drag-and-drop or cell controls. - Add cells from empty states and notebook toolbar actions. - Edit Markdown cells, mark edits as complete, and see placeholders for empty content. ## Improvements - Cell controls and hover interactions are more consistent and responsive. - Moving cells is disabled at the top or bottom of a notebook. - Sample cells now use standardized content and formatting. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
import { FileText, Plus, SquareCode } from 'lucide-react'
|
|
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from 'ui'
|
|
|
|
import { createMarkdownCellSkeleton, createQueryCellSkeleton } from './utils'
|
|
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
|
|
import { useCurrentNotebook, useNotebooksStateSnapshot } from '@/state/notebooks/notebooks-state'
|
|
|
|
interface AddCellDropdownProps {
|
|
cellId: string
|
|
}
|
|
|
|
export const AddCellDropdown = ({ cellId }: AddCellDropdownProps) => {
|
|
const snap = useNotebooksStateSnapshot()
|
|
const currentNotebook = useCurrentNotebook()
|
|
|
|
const onSelectAddCell = (type: 'markdown' | 'query') => {
|
|
const notebookId = currentNotebook?.notebook.id
|
|
if (!notebookId) return
|
|
|
|
const cell = type === 'markdown' ? createMarkdownCellSkeleton() : createQueryCellSkeleton()
|
|
|
|
snap.insertCellAfter({ id: notebookId, cellId, cell })
|
|
}
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<ButtonTooltip
|
|
variant="text"
|
|
className="w-7"
|
|
icon={<Plus />}
|
|
tooltip={{ content: { side: 'bottom', text: 'Add cell' } }}
|
|
/>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="start" className="w-40">
|
|
<DropdownMenuItem className="gap-x-2" onClick={() => onSelectAddCell('query')}>
|
|
<SquareCode size={14} />
|
|
<span>Add query cell</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem className="gap-x-2" onClick={() => onSelectAddCell('markdown')}>
|
|
<FileText size={14} />
|
|
<span>Add markdown cell</span>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)
|
|
}
|