@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.
51 lines (50 loc) • 2.24 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEditorStore } from "../store/useEditorState";
import { useState } from "react";
import { LuMinus, LuPlus } from "react-icons/lu";
export function FontSize() {
const { editor } = useEditorStore();
const currentFontSize = editor?.getAttributes("textStyle").fontSize
? editor?.getAttributes("textStyle").fontSize.replace(/[px|pt|em|rem]/g, "")
: "16";
const [fontSize, setFontSize] = useState(currentFontSize);
const [inputValue, setInputValue] = useState(fontSize);
const [isEditing, setIsEditing] = useState(false);
function updateFontSize(newSize) {
const size = parseInt(newSize);
if (!isNaN(size) && size > 0) {
setFontSize(newSize);
setInputValue(newSize);
setIsEditing(false);
editor?.chain().focus().setFontSize(`${size}px`).run();
}
}
function handleInputChange(e) {
setInputValue(e.target.value);
}
function handleInputBlur() {
updateFontSize(inputValue);
}
function handleKeyDown(e) {
if (e.key === "Enter") {
e.preventDefault();
updateFontSize(inputValue);
editor?.commands.focus();
}
}
function increment() {
const newSize = parseInt(fontSize) + 1;
updateFontSize(newSize.toString());
}
function decrement() {
const newSize = parseInt(fontSize) - 1;
if (newSize > 0) {
updateFontSize(newSize.toString());
}
}
return (_jsxs("div", { className: "flex-center", children: [_jsx("button", { className: "toolbar-button", onClick: decrement, children: _jsx(LuMinus, { size: 16 }) }), isEditing ? (_jsx("input", { value: inputValue, className: "font-size-input", onChange: handleInputChange, onBlur: handleInputBlur, onKeyDown: handleKeyDown })) : (_jsx("button", { className: "font-size-button", onClick: () => {
setIsEditing(true);
setFontSize(currentFontSize);
}, children: currentFontSize })), _jsx("button", { className: "toolbar-button", onClick: increment, children: _jsx(LuPlus, { size: 16 }) })] }));
}