@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.
14 lines (13 loc) • 953 B
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 { SketchPicker } from "react-color";
export function TextColor() {
const { editor } = useEditorStore();
const currentColor = editor?.getAttributes("textStyle").color || "#000000";
function onChage(color) {
editor?.chain().focus().setColor(color.hex).run();
}
return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { title: "Text Color", className: "toolbar-button", children: [_jsx("span", { children: "A" }), _jsx("div", { className: "h-0.5 w-full", style: { backgroundColor: currentColor } })] }) }), _jsx(DropdownMenuContent, { className: "p-0", children: _jsx(SketchPicker, { color: currentColor, onChange: onChage }) })] }));
}