mirror of
https://github.com/linsa-io/linsa.git
synced 2026-03-18 15:23:59 +01:00
82 lines
2.6 KiB
TypeScript
82 lines
2.6 KiB
TypeScript
import * as React from "react"
|
|
import type { Editor } from "@tiptap/react"
|
|
import type { FormatAction } from "../../types"
|
|
import type { toggleVariants } from "@/components/ui/toggle"
|
|
import type { VariantProps } from "class-variance-authority"
|
|
import { CaretDownIcon, ListBulletIcon } from "@radix-ui/react-icons"
|
|
import { ToolbarSection } from "../toolbar-section"
|
|
|
|
type ListItemAction = "orderedList" | "bulletList"
|
|
interface ListItem extends FormatAction {
|
|
value: ListItemAction
|
|
}
|
|
|
|
const formatActions: ListItem[] = [
|
|
{
|
|
value: "orderedList",
|
|
label: "Numbered list",
|
|
icon: (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
height="20px"
|
|
viewBox="0 -960 960 960"
|
|
width="20px"
|
|
fill="currentColor"
|
|
>
|
|
<path d="M144-144v-48h96v-24h-48v-48h48v-24h-96v-48h120q10.2 0 17.1 6.9 6.9 6.9 6.9 17.1v48q0 10.2-6.9 17.1-6.9 6.9-17.1 6.9 10.2 0 17.1 6.9 6.9 6.9 6.9 17.1v48q0 10.2-6.9 17.1-6.9 6.9-17.1 6.9H144Zm0-240v-96q0-10.2 6.9-17.1 6.9-6.9 17.1-6.9h72v-24h-96v-48h120q10.2 0 17.1 6.9 6.9 6.9 6.9 17.1v72q0 10.2-6.9 17.1-6.9 6.9-17.1 6.9h-72v24h96v48H144Zm48-240v-144h-48v-48h96v192h-48Zm168 384v-72h456v72H360Zm0-204v-72h456v72H360Zm0-204v-72h456v72H360Z" />
|
|
</svg>
|
|
),
|
|
isActive: (editor) => editor.isActive("orderedList"),
|
|
action: (editor) => editor.chain().focus().toggleOrderedList().run(),
|
|
canExecute: (editor) =>
|
|
editor.can().chain().focus().toggleOrderedList().run(),
|
|
shortcuts: ["mod", "shift", "7"],
|
|
},
|
|
{
|
|
value: "bulletList",
|
|
label: "Bullet list",
|
|
icon: <ListBulletIcon className="size-5" />,
|
|
isActive: (editor) => editor.isActive("bulletList"),
|
|
action: (editor) => editor.chain().focus().toggleBulletList().run(),
|
|
canExecute: (editor) =>
|
|
editor.can().chain().focus().toggleBulletList().run(),
|
|
shortcuts: ["mod", "shift", "8"],
|
|
},
|
|
]
|
|
|
|
interface SectionFourProps extends VariantProps<typeof toggleVariants> {
|
|
editor: Editor
|
|
activeActions?: ListItemAction[]
|
|
mainActionCount?: number
|
|
}
|
|
|
|
export const SectionFour: React.FC<SectionFourProps> = ({
|
|
editor,
|
|
activeActions = formatActions.map((action) => action.value),
|
|
mainActionCount = 0,
|
|
size,
|
|
variant,
|
|
}) => {
|
|
return (
|
|
<ToolbarSection
|
|
editor={editor}
|
|
actions={formatActions}
|
|
activeActions={activeActions}
|
|
mainActionCount={mainActionCount}
|
|
dropdownIcon={
|
|
<>
|
|
<ListBulletIcon className="size-5" />
|
|
<CaretDownIcon className="size-5" />
|
|
</>
|
|
}
|
|
dropdownTooltip="Lists"
|
|
size={size}
|
|
variant={variant}
|
|
/>
|
|
)
|
|
}
|
|
|
|
SectionFour.displayName = "SectionFour"
|
|
|
|
export default SectionFour
|