nilfam-editor/src/components/button/SizeFontButton.jsx

A powerful, customizable rich-text editor built with TipTap, React, and Tailwind CSS. Supports RTL/LTR text, resizable media (images/videos), tables, code blocks, font styling, and more for an enhanced content creation experience.

import {t} from "../Lang/i18n.js";

const SizeFontButton = ({editor,lang}) => {
    return (
        <div>
            <select className="border border-gray-300 rounded p-1 text-sm" onChange={(e) => {
                const level = parseInt(e.target.value);
                if (level) editor.chain().focus().setFontSize(level).run();
            }}>
                <option value="">{ t('fontSize', lang) }</option>
                <option value="8">8</option>
                <option value="3">10</option>
                <option value="12">12</option>
                <option value="14">14</option>
                <option value="16">16</option>
                <option value="18">18</option>
                <option value="20">20</option>
                <option value="22">22</option>
                <option value="24">24</option>
                <option value="26">26</option>
                <option value="28">28</option>
                <option value="36">36</option>
                <option value="46">46</option>
                <option value="56">56</option>
            </select>
        </div>
    );
};

export default SizeFontButton;