@explita/editor
Version:
`@explita/editor` is a versatile, modern rich-text editor built on TipTap for seamless integration into React applications. It provides extensive customization options and advanced features to cater to diverse content creation needs.
25 lines (24 loc) • 1.41 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, } from "./ui/dropdown-menu";
import { useEditorStore } from "../store/useEditorState";
import { LuList, LuListOrdered } from "react-icons/lu";
import { cn } from "../lib/utils";
export function List() {
const { editor } = useEditorStore();
const lists = [
{
label: "Bullet List",
icon: LuList,
isActive: () => editor?.isActive("bulletList"),
onClick: () => editor?.chain().focus().toggleBulletList().run(),
},
{
label: "Ordered List",
icon: LuListOrdered,
isActive: () => editor?.isActive("orderedList"),
onClick: () => editor?.chain().focus().toggleOrderedList().run(),
},
];
return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { title: "List", className: "toolbar-button", children: _jsx(LuList, { size: 16 }) }) }), _jsx(DropdownMenuContent, { className: "editor-dropdown-content", children: lists.map(({ label, icon: Icon, onClick, isActive }) => (_jsxs("button", { onClick: onClick, className: cn("editor-dropdown-menu-button", isActive() && "editor-item-active"), children: [_jsx(Icon, { size: 16 }), _jsx("span", { children: label })] }, label))) })] }));
}