// InlineCodeTool.jsx
// Custom KendoReact Editor tool for inline code formatting
import React from 'react';
import { Button } from '@progress/kendo-react-buttons';
import { SvgIcon } from '@progress/kendo-react-common';
import { codeSnippetIcon } from '@progress/kendo-svg-icons';

const InlineCodeTool = (props) => {
    const { view } = props;

    const handleClick = () => {
        if (view) {
            // Access ProseMirror editor state and dispatch
            const { state, dispatch } = view;
            const markType = state.schema.marks.code;
            const { from, to } = state.selection;

            if (markType) {
                const tr = state.tr;
                // Check if selected text already has code mark
                const hasMark = state.doc.rangeHasMark(from, to, markType);

                if (hasMark) {
                    // Remove code mark if already present (toggle off)
                    tr.removeMark(from, to, markType);
                } else {
                    // Add code mark to selected text (toggle on)
                    tr.addMark(from, to, markType.create());
                }

                // Dispatch transaction to apply changes to editor
                dispatch(tr);
            }
        }
    };

    return (
        // KendoReact Button with SVG icon
        <Button 
            onClick={handleClick} 
            title="Inline Code"
            size="small"
        >
            <SvgIcon icon={codeSnippetIcon} />
        </Button>
    );
};

export default InlineCodeTool;