import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useLayoutEffect, useRef } from 'react';
export const MarkupEditorComponent = function MarkupEditorComponent({ editor, autofocus, className, children }) {
    const ref = useRef(null);
    // insert editor to dom
    useLayoutEffect(() => {
        const domElem = editor.markupEditor.cm.dom;
        if (ref.current) {
            ref.current.appendChild(domElem);
        }
        return () => {
            domElem.remove();
        };
    }, [editor.markupEditor]);
    // update editor after connecting to dom
    useEffect(() => {
        editor.markupEditor.cm.requestMeasure();
        if (autofocus) {
            editor.markupEditor.focus();
        }
    }, [editor.markupEditor]);
    return (
    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
    _jsx("div", { ref: ref, className: className, onClick: (event) => {
            const target = event.target;
            if (target instanceof Element && target.classList.contains('cm-editor')) {
                editor.markupEditor.focus();
            }
        }, children: children }));
};
//# sourceMappingURL=MarkupEditorComponent.js.map
