@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.
42 lines (41 loc) • 2.35 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./ui/dialog";
import { Button } from "./ui/button";
import { Input } from "./ui/input";
import { useEditorStore } from "../store/useEditorState";
import { useEffect, useState } from "react";
const padding = [
{
label: "Top",
value: "top",
},
{
label: "Right",
value: "right",
},
{
label: "Bottom",
value: "bottom",
},
{
label: "Left",
value: "left",
},
];
export function PagePadding({ opened, setOpened }) {
const { editorOpts, setEditorOpts } = useEditorStore();
const [editorPadding, setEditorPadding] = useState(editorOpts.padding);
useEffect(() => {
setEditorPadding(editorOpts.padding);
}, [editorOpts.padding]);
return (_jsx(Dialog, { open: opened, onOpenChange: setOpened, children: _jsxs(DialogContent, { className: "w-[300px]", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { className: "text-slate-700", children: "Page Padding" }) }), _jsx("div", { className: "grid grid-cols-2 gap-4 pt-4", children: padding.map(({ label, value }) => (_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium leading-none mb-1.5 text-slate-600", children: label }), _jsxs("div", { className: "relative flex items-center gap-1.5", children: [_jsx("span", { className: "absolute flex items-center justify-center right-2 h-[90%] bg-white", children: "inch" }), _jsx(Input, { type: "number", min: 0, step: 0.01, placeholder: label, defaultValue: (editorPadding[value] || 0).toFixed(2), onChange: (e) => setEditorPadding((prev) => ({
...prev,
[value]: Number(e.target.value),
})), className: " text-center appearance-none outline-none" })] })] }, label))) }), _jsx("div", { className: "flex justify-end pt-2", children: _jsx(Button, { onClick: () => {
setEditorOpts((prev) => ({
...prev,
padding: editorPadding,
}));
setOpened(false);
}, children: "Apply" }) })] }) }));
}