mirror of
https://github.com/linsa-io/linsa.git
synced 2026-01-12 12:20:23 +01:00
Move to TanStack Start from Next.js (#184)
This commit is contained in:
Aslam
93
web/shared/minimal-tiptap/components/section/five.tsx
Normal file
93
web/shared/minimal-tiptap/components/section/five.tsx
Normal file
@@ -0,0 +1,93 @@
|
||||
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,
|
||||
CodeIcon,
|
||||
DividerHorizontalIcon,
|
||||
PlusIcon,
|
||||
QuoteIcon,
|
||||
} from "@radix-ui/react-icons"
|
||||
import { LinkEditPopover } from "../link/link-edit-popover"
|
||||
import { ImageEditDialog } from "../image/image-edit-dialog"
|
||||
import { ToolbarSection } from "../toolbar-section"
|
||||
|
||||
type InsertElementAction = "codeBlock" | "blockquote" | "horizontalRule"
|
||||
interface InsertElement extends FormatAction {
|
||||
value: InsertElementAction
|
||||
}
|
||||
|
||||
const formatActions: InsertElement[] = [
|
||||
{
|
||||
value: "codeBlock",
|
||||
label: "Code block",
|
||||
icon: <CodeIcon className="size-5" />,
|
||||
action: (editor) => editor.chain().focus().toggleCodeBlock().run(),
|
||||
isActive: (editor) => editor.isActive("codeBlock"),
|
||||
canExecute: (editor) =>
|
||||
editor.can().chain().focus().toggleCodeBlock().run(),
|
||||
shortcuts: ["mod", "alt", "C"],
|
||||
},
|
||||
{
|
||||
value: "blockquote",
|
||||
label: "Blockquote",
|
||||
icon: <QuoteIcon className="size-5" />,
|
||||
action: (editor) => editor.chain().focus().toggleBlockquote().run(),
|
||||
isActive: (editor) => editor.isActive("blockquote"),
|
||||
canExecute: (editor) =>
|
||||
editor.can().chain().focus().toggleBlockquote().run(),
|
||||
shortcuts: ["mod", "shift", "B"],
|
||||
},
|
||||
{
|
||||
value: "horizontalRule",
|
||||
label: "Divider",
|
||||
icon: <DividerHorizontalIcon className="size-5" />,
|
||||
action: (editor) => editor.chain().focus().setHorizontalRule().run(),
|
||||
isActive: () => false,
|
||||
canExecute: (editor) =>
|
||||
editor.can().chain().focus().setHorizontalRule().run(),
|
||||
shortcuts: ["mod", "alt", "-"],
|
||||
},
|
||||
]
|
||||
|
||||
interface SectionFiveProps extends VariantProps<typeof toggleVariants> {
|
||||
editor: Editor
|
||||
activeActions?: InsertElementAction[]
|
||||
mainActionCount?: number
|
||||
}
|
||||
|
||||
export const SectionFive: React.FC<SectionFiveProps> = ({
|
||||
editor,
|
||||
activeActions = formatActions.map((action) => action.value),
|
||||
mainActionCount = 0,
|
||||
size,
|
||||
variant,
|
||||
}) => {
|
||||
return (
|
||||
<>
|
||||
<LinkEditPopover editor={editor} size={size} variant={variant} />
|
||||
<ImageEditDialog editor={editor} size={size} variant={variant} />
|
||||
<ToolbarSection
|
||||
editor={editor}
|
||||
actions={formatActions}
|
||||
activeActions={activeActions}
|
||||
mainActionCount={mainActionCount}
|
||||
dropdownIcon={
|
||||
<>
|
||||
<PlusIcon className="size-5" />
|
||||
<CaretDownIcon className="size-5" />
|
||||
</>
|
||||
}
|
||||
dropdownTooltip="Insert elements"
|
||||
size={size}
|
||||
variant={variant}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
SectionFive.displayName = "SectionFive"
|
||||
|
||||
export default SectionFive
|
||||
81
web/shared/minimal-tiptap/components/section/four.tsx
Normal file
81
web/shared/minimal-tiptap/components/section/four.tsx
Normal file
@@ -0,0 +1,81 @@
|
||||
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
|
||||
151
web/shared/minimal-tiptap/components/section/one.tsx
Normal file
151
web/shared/minimal-tiptap/components/section/one.tsx
Normal file
@@ -0,0 +1,151 @@
|
||||
import * as React from "react"
|
||||
import type { Editor } from "@tiptap/react"
|
||||
import type { Level } from "@tiptap/extension-heading"
|
||||
import type { FormatAction } from "../../types"
|
||||
import type { VariantProps } from "class-variance-authority"
|
||||
import type { toggleVariants } from "@/components/ui/toggle"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { CaretDownIcon, LetterCaseCapitalizeIcon } from "@radix-ui/react-icons"
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu"
|
||||
import { ToolbarButton } from "../toolbar-button"
|
||||
import { ShortcutKey } from "../shortcut-key"
|
||||
|
||||
interface TextStyle
|
||||
extends Omit<
|
||||
FormatAction,
|
||||
"value" | "icon" | "action" | "isActive" | "canExecute"
|
||||
> {
|
||||
element: keyof JSX.IntrinsicElements
|
||||
level?: Level
|
||||
className: string
|
||||
}
|
||||
|
||||
const formatActions: TextStyle[] = [
|
||||
{
|
||||
label: "Normal Text",
|
||||
element: "span",
|
||||
className: "grow",
|
||||
shortcuts: ["mod", "alt", "0"],
|
||||
},
|
||||
{
|
||||
label: "Heading 1",
|
||||
element: "h1",
|
||||
level: 1,
|
||||
className: "m-0 grow text-3xl font-extrabold",
|
||||
shortcuts: ["mod", "alt", "1"],
|
||||
},
|
||||
{
|
||||
label: "Heading 2",
|
||||
element: "h2",
|
||||
level: 2,
|
||||
className: "m-0 grow text-xl font-bold",
|
||||
shortcuts: ["mod", "alt", "2"],
|
||||
},
|
||||
{
|
||||
label: "Heading 3",
|
||||
element: "h3",
|
||||
level: 3,
|
||||
className: "m-0 grow text-lg font-semibold",
|
||||
shortcuts: ["mod", "alt", "3"],
|
||||
},
|
||||
{
|
||||
label: "Heading 4",
|
||||
element: "h4",
|
||||
level: 4,
|
||||
className: "m-0 grow text-base font-semibold",
|
||||
shortcuts: ["mod", "alt", "4"],
|
||||
},
|
||||
{
|
||||
label: "Heading 5",
|
||||
element: "h5",
|
||||
level: 5,
|
||||
className: "m-0 grow text-sm font-normal",
|
||||
shortcuts: ["mod", "alt", "5"],
|
||||
},
|
||||
{
|
||||
label: "Heading 6",
|
||||
element: "h6",
|
||||
level: 6,
|
||||
className: "m-0 grow text-sm font-normal",
|
||||
shortcuts: ["mod", "alt", "6"],
|
||||
},
|
||||
]
|
||||
|
||||
interface SectionOneProps extends VariantProps<typeof toggleVariants> {
|
||||
editor: Editor
|
||||
activeLevels?: Level[]
|
||||
}
|
||||
|
||||
export const SectionOne: React.FC<SectionOneProps> = React.memo(
|
||||
({ editor, activeLevels = [1, 2, 3, 4, 5, 6], size, variant }) => {
|
||||
const filteredActions = React.useMemo(
|
||||
() =>
|
||||
formatActions.filter(
|
||||
(action) => !action.level || activeLevels.includes(action.level),
|
||||
),
|
||||
[activeLevels],
|
||||
)
|
||||
|
||||
const handleStyleChange = React.useCallback(
|
||||
(level?: Level) => {
|
||||
if (level) {
|
||||
editor.chain().focus().toggleHeading({ level }).run()
|
||||
} else {
|
||||
editor.chain().focus().setParagraph().run()
|
||||
}
|
||||
},
|
||||
[editor],
|
||||
)
|
||||
|
||||
const renderMenuItem = React.useCallback(
|
||||
({ label, element: Element, level, className, shortcuts }: TextStyle) => (
|
||||
<DropdownMenuItem
|
||||
key={label}
|
||||
onClick={() => handleStyleChange(level)}
|
||||
className={cn("flex flex-row items-center justify-between gap-4", {
|
||||
"bg-accent": level
|
||||
? editor.isActive("heading", { level })
|
||||
: editor.isActive("paragraph"),
|
||||
})}
|
||||
aria-label={label}
|
||||
>
|
||||
<Element className={className}>{label}</Element>
|
||||
<ShortcutKey keys={shortcuts} />
|
||||
</DropdownMenuItem>
|
||||
),
|
||||
[editor, handleStyleChange],
|
||||
)
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<ToolbarButton
|
||||
isActive={editor.isActive("heading")}
|
||||
tooltip="Text styles"
|
||||
aria-label="Text styles"
|
||||
pressed={editor.isActive("heading")}
|
||||
className="w-12"
|
||||
disabled={editor.isActive("codeBlock")}
|
||||
size={size}
|
||||
variant={variant}
|
||||
>
|
||||
<LetterCaseCapitalizeIcon className="size-5" />
|
||||
<CaretDownIcon className="size-5" />
|
||||
</ToolbarButton>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start" className="w-full">
|
||||
{filteredActions.map(renderMenuItem)}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)
|
||||
},
|
||||
)
|
||||
|
||||
SectionOne.displayName = "SectionOne"
|
||||
|
||||
export default SectionOne
|
||||
215
web/shared/minimal-tiptap/components/section/three.tsx
Normal file
215
web/shared/minimal-tiptap/components/section/three.tsx
Normal file
@@ -0,0 +1,215 @@
|
||||
import * as React from "react"
|
||||
import type { Editor } from "@tiptap/react"
|
||||
import type { toggleVariants } from "@/components/ui/toggle"
|
||||
import type { VariantProps } from "class-variance-authority"
|
||||
import { CaretDownIcon, CheckIcon } from "@radix-ui/react-icons"
|
||||
import { ToolbarButton } from "../toolbar-button"
|
||||
import {
|
||||
Popover,
|
||||
PopoverTrigger,
|
||||
PopoverContent,
|
||||
} from "@/components/ui/popover"
|
||||
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip"
|
||||
import { useTheme } from "../../hooks/use-theme"
|
||||
|
||||
interface ColorItem {
|
||||
cssVar: string
|
||||
label: string
|
||||
darkLabel?: string
|
||||
}
|
||||
|
||||
interface ColorPalette {
|
||||
label: string
|
||||
colors: ColorItem[]
|
||||
inverse: string
|
||||
}
|
||||
|
||||
const COLORS: ColorPalette[] = [
|
||||
{
|
||||
label: "Palette 1",
|
||||
inverse: "hsl(var(--background))",
|
||||
colors: [
|
||||
{ cssVar: "hsl(var(--foreground))", label: "Default" },
|
||||
{ cssVar: "var(--mt-accent-bold-blue)", label: "Bold blue" },
|
||||
{ cssVar: "var(--mt-accent-bold-teal)", label: "Bold teal" },
|
||||
{ cssVar: "var(--mt-accent-bold-green)", label: "Bold green" },
|
||||
{ cssVar: "var(--mt-accent-bold-orange)", label: "Bold orange" },
|
||||
{ cssVar: "var(--mt-accent-bold-red)", label: "Bold red" },
|
||||
{ cssVar: "var(--mt-accent-bold-purple)", label: "Bold purple" },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Palette 2",
|
||||
inverse: "hsl(var(--background))",
|
||||
colors: [
|
||||
{ cssVar: "var(--mt-accent-gray)", label: "Gray" },
|
||||
{ cssVar: "var(--mt-accent-blue)", label: "Blue" },
|
||||
{ cssVar: "var(--mt-accent-teal)", label: "Teal" },
|
||||
{ cssVar: "var(--mt-accent-green)", label: "Green" },
|
||||
{ cssVar: "var(--mt-accent-orange)", label: "Orange" },
|
||||
{ cssVar: "var(--mt-accent-red)", label: "Red" },
|
||||
{ cssVar: "var(--mt-accent-purple)", label: "Purple" },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Palette 3",
|
||||
inverse: "hsl(var(--foreground))",
|
||||
colors: [
|
||||
{ cssVar: "hsl(var(--background))", label: "White", darkLabel: "Black" },
|
||||
{ cssVar: "var(--mt-accent-blue-subtler)", label: "Blue subtle" },
|
||||
{ cssVar: "var(--mt-accent-teal-subtler)", label: "Teal subtle" },
|
||||
{ cssVar: "var(--mt-accent-green-subtler)", label: "Green subtle" },
|
||||
{ cssVar: "var(--mt-accent-yellow-subtler)", label: "Yellow subtle" },
|
||||
{ cssVar: "var(--mt-accent-red-subtler)", label: "Red subtle" },
|
||||
{ cssVar: "var(--mt-accent-purple-subtler)", label: "Purple subtle" },
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const MemoizedColorButton = React.memo<{
|
||||
color: ColorItem
|
||||
isSelected: boolean
|
||||
inverse: string
|
||||
onClick: (value: string) => void
|
||||
}>(({ color, isSelected, inverse, onClick }) => {
|
||||
const isDarkMode = useTheme()
|
||||
const label = isDarkMode && color.darkLabel ? color.darkLabel : color.label
|
||||
|
||||
return (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<ToggleGroupItem
|
||||
className="relative size-7 rounded-md p-0"
|
||||
value={color.cssVar}
|
||||
aria-label={label}
|
||||
style={{ backgroundColor: color.cssVar }}
|
||||
onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
e.preventDefault()
|
||||
onClick(color.cssVar)
|
||||
}}
|
||||
>
|
||||
{isSelected && (
|
||||
<CheckIcon
|
||||
className="absolute inset-0 m-auto size-6"
|
||||
style={{ color: inverse }}
|
||||
/>
|
||||
)}
|
||||
</ToggleGroupItem>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="bottom">
|
||||
<p>{label}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
)
|
||||
})
|
||||
|
||||
MemoizedColorButton.displayName = "MemoizedColorButton"
|
||||
|
||||
const MemoizedColorPicker = React.memo<{
|
||||
palette: ColorPalette
|
||||
selectedColor: string
|
||||
inverse: string
|
||||
onColorChange: (value: string) => void
|
||||
}>(({ palette, selectedColor, inverse, onColorChange }) => (
|
||||
<ToggleGroup
|
||||
type="single"
|
||||
value={selectedColor}
|
||||
onValueChange={(value: string) => {
|
||||
if (value) onColorChange(value)
|
||||
}}
|
||||
className="gap-1.5"
|
||||
>
|
||||
{palette.colors.map((color, index) => (
|
||||
<MemoizedColorButton
|
||||
key={index}
|
||||
inverse={inverse}
|
||||
color={color}
|
||||
isSelected={selectedColor === color.cssVar}
|
||||
onClick={onColorChange}
|
||||
/>
|
||||
))}
|
||||
</ToggleGroup>
|
||||
))
|
||||
|
||||
MemoizedColorPicker.displayName = "MemoizedColorPicker"
|
||||
|
||||
interface SectionThreeProps extends VariantProps<typeof toggleVariants> {
|
||||
editor: Editor
|
||||
}
|
||||
|
||||
export const SectionThree: React.FC<SectionThreeProps> = ({
|
||||
editor,
|
||||
size,
|
||||
variant,
|
||||
}) => {
|
||||
const color =
|
||||
editor.getAttributes("textStyle")?.color || "hsl(var(--foreground))"
|
||||
const [selectedColor, setSelectedColor] = React.useState(color)
|
||||
|
||||
const handleColorChange = React.useCallback(
|
||||
(value: string) => {
|
||||
setSelectedColor(value)
|
||||
editor.chain().setColor(value).run()
|
||||
},
|
||||
[editor],
|
||||
)
|
||||
|
||||
React.useEffect(() => {
|
||||
setSelectedColor(color)
|
||||
}, [color])
|
||||
|
||||
return (
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<ToolbarButton
|
||||
tooltip="Text color"
|
||||
aria-label="Text color"
|
||||
className="w-12"
|
||||
size={size}
|
||||
variant={variant}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="size-5"
|
||||
style={{ color: selectedColor }}
|
||||
>
|
||||
<path d="M4 20h16" />
|
||||
<path d="m6 16 6-12 6 12" />
|
||||
<path d="M8 12h8" />
|
||||
</svg>
|
||||
<CaretDownIcon className="size-5" />
|
||||
</ToolbarButton>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent align="start" className="w-full">
|
||||
<div className="space-y-1.5">
|
||||
{COLORS.map((palette, index) => (
|
||||
<MemoizedColorPicker
|
||||
key={index}
|
||||
palette={palette}
|
||||
inverse={palette.inverse}
|
||||
selectedColor={selectedColor}
|
||||
onColorChange={handleColorChange}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
)
|
||||
}
|
||||
|
||||
SectionThree.displayName = "SectionThree"
|
||||
|
||||
export default SectionThree
|
||||
115
web/shared/minimal-tiptap/components/section/two.tsx
Normal file
115
web/shared/minimal-tiptap/components/section/two.tsx
Normal file
@@ -0,0 +1,115 @@
|
||||
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 {
|
||||
CodeIcon,
|
||||
DotsHorizontalIcon,
|
||||
FontBoldIcon,
|
||||
FontItalicIcon,
|
||||
StrikethroughIcon,
|
||||
TextNoneIcon,
|
||||
} from "@radix-ui/react-icons"
|
||||
import { ToolbarSection } from "../toolbar-section"
|
||||
|
||||
type TextStyleAction =
|
||||
| "bold"
|
||||
| "italic"
|
||||
| "strikethrough"
|
||||
| "code"
|
||||
| "clearFormatting"
|
||||
|
||||
interface TextStyle extends FormatAction {
|
||||
value: TextStyleAction
|
||||
}
|
||||
|
||||
const formatActions: TextStyle[] = [
|
||||
{
|
||||
value: "bold",
|
||||
label: "Bold",
|
||||
icon: <FontBoldIcon className="size-5" />,
|
||||
action: (editor) => editor.chain().focus().toggleBold().run(),
|
||||
isActive: (editor) => editor.isActive("bold"),
|
||||
canExecute: (editor) =>
|
||||
editor.can().chain().focus().toggleBold().run() &&
|
||||
!editor.isActive("codeBlock"),
|
||||
shortcuts: ["mod", "B"],
|
||||
},
|
||||
{
|
||||
value: "italic",
|
||||
label: "Italic",
|
||||
icon: <FontItalicIcon className="size-5" />,
|
||||
action: (editor) => editor.chain().focus().toggleItalic().run(),
|
||||
isActive: (editor) => editor.isActive("italic"),
|
||||
canExecute: (editor) =>
|
||||
editor.can().chain().focus().toggleItalic().run() &&
|
||||
!editor.isActive("codeBlock"),
|
||||
shortcuts: ["mod", "I"],
|
||||
},
|
||||
{
|
||||
value: "strikethrough",
|
||||
label: "Strikethrough",
|
||||
icon: <StrikethroughIcon className="size-5" />,
|
||||
action: (editor) => editor.chain().focus().toggleStrike().run(),
|
||||
isActive: (editor) => editor.isActive("strike"),
|
||||
canExecute: (editor) =>
|
||||
editor.can().chain().focus().toggleStrike().run() &&
|
||||
!editor.isActive("codeBlock"),
|
||||
shortcuts: ["mod", "shift", "S"],
|
||||
},
|
||||
{
|
||||
value: "code",
|
||||
label: "Code",
|
||||
icon: <CodeIcon className="size-5" />,
|
||||
action: (editor) => editor.chain().focus().toggleCode().run(),
|
||||
isActive: (editor) => editor.isActive("code"),
|
||||
canExecute: (editor) =>
|
||||
editor.can().chain().focus().toggleCode().run() &&
|
||||
!editor.isActive("codeBlock"),
|
||||
shortcuts: ["mod", "E"],
|
||||
},
|
||||
{
|
||||
value: "clearFormatting",
|
||||
label: "Clear formatting",
|
||||
icon: <TextNoneIcon className="size-5" />,
|
||||
action: (editor) => editor.chain().focus().unsetAllMarks().run(),
|
||||
isActive: () => false,
|
||||
canExecute: (editor) =>
|
||||
editor.can().chain().focus().unsetAllMarks().run() &&
|
||||
!editor.isActive("codeBlock"),
|
||||
shortcuts: ["mod", "\\"],
|
||||
},
|
||||
]
|
||||
|
||||
interface SectionTwoProps extends VariantProps<typeof toggleVariants> {
|
||||
editor: Editor
|
||||
activeActions?: TextStyleAction[]
|
||||
mainActionCount?: number
|
||||
}
|
||||
|
||||
export const SectionTwo: React.FC<SectionTwoProps> = ({
|
||||
editor,
|
||||
activeActions = formatActions.map((action) => action.value),
|
||||
mainActionCount = 2,
|
||||
size,
|
||||
variant,
|
||||
}) => {
|
||||
return (
|
||||
<ToolbarSection
|
||||
editor={editor}
|
||||
actions={formatActions}
|
||||
activeActions={activeActions}
|
||||
mainActionCount={mainActionCount}
|
||||
dropdownIcon={<DotsHorizontalIcon className="size-5" />}
|
||||
dropdownTooltip="More formatting"
|
||||
dropdownClassName="w-8"
|
||||
size={size}
|
||||
variant={variant}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
SectionTwo.displayName = "SectionTwo"
|
||||
|
||||
export default SectionTwo
|
||||
Reference in New Issue
Block a user