import { jsx as _jsx } from "react/jsx-runtime";
import { useSlate } from "slate-react";
import { isBlockActive } from "../../../services/isBlockActive";
import { toggleBlock } from "../../../services/toggleBlock";
import { textAlignTypes } from "../../../templates/richTextTemplates";
import "./styles.css";
function BlockButton({ format, icon: Icon }) {
    const editor = useSlate();
    const blockType = textAlignTypes.includes(format) ? "align" : "type";
    const isActive = isBlockActive(editor, format, blockType);
    const activeClass = isActive ? "activeTrue" : "activeFalse";
    function handleMouseDown(event) {
        event.preventDefault();
        toggleBlock(editor, format);
    }
    return (_jsx("button", { type: "button", className: "arkynRichTextBlockButton " + activeClass, onMouseDown: handleMouseDown, children: _jsx(Icon, {}) }));
}
export { BlockButton };
