import React, { useContext } from 'react';
import classNames from 'classnames';
import TextEditorService from '../../text-editor-service';
import TextEditorContext from '../../text-editor-context';
import EditorButton from './editor-button';
import { jsx as _jsx } from "react/jsx-runtime";
function MarkButton({
  icon,
  format,
  tooltip = '',
  testId
}) {
  const {
    slate,
    slateReact
  } = useContext(TextEditorContext);
  const textEditorService = new TextEditorService(slate, slateReact);
  const editor = slateReact.useSlate();
  const isMarkActive = textEditorService.isMarkActive(editor, format);
  return /*#__PURE__*/_jsx(EditorButton, {
    className: classNames({
      active: isMarkActive
    }),
    tooltipText: tooltip,
    icon: icon,
    testId: testId,
    onClick: () => {
      textEditorService.focus(editor);
      textEditorService.toggleMark(editor, format);
    }
  });
}
export default MarkButton;