import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo } from 'react';
import { cn } from "../classname.js";
import { ReactRendererComponent } from "../extensions/index.js";
import { logger } from "../logger.js";
import { useRenderTime } from "../react-utils/hooks.js";
import { MarkupEditorComponent } from "./MarkupEditorComponent.js";
import { ToolbarView } from "./ToolbarView.js";
import { MarkupToolbarContextProvider } from "./toolbar/markup/context.js";
import "./MarkupEditorView.css";
const b = cn('markup-editor');
export const MarkupEditorView = memo((props) => {
    const { editor, autofocus, settingsVisible, toolbarVisible, toolbarConfig, hiddenActionsConfig, className, toolbarClassName, children, stickyToolbar = true, } = props;
    useRenderTime((time) => {
        logger.metrics({
            component: 'markup-editor',
            event: 'render',
            duration: time,
        });
    });
    return (_jsxs("div", { className: b({ toolbar: toolbarVisible }, [className]), children: [toolbarVisible ? (_jsx(MarkupToolbarContextProvider, { value: {
                    uploadHandler: editor.fileUploadHandler,
                    needToSetDimensionsForUploadedImages: editor.needToSetDimensionsForUploadedImages,
                }, children: _jsx(ToolbarView, { editor: editor, editorMode: "markup", toolbarEditor: editor, hiddenActionsConfig: hiddenActionsConfig, stickyToolbar: stickyToolbar, toolbarConfig: toolbarConfig, toolbarFocus: () => editor.focus(), settingsVisible: settingsVisible, className: b('toolbar', [toolbarClassName]), children: children }) })) : null, _jsx(MarkupEditorComponent, { autofocus: autofocus, editor: editor, className: b('editor', { 'toolbar-visible': toolbarVisible }), children: _jsx(ReactRendererComponent, { storage: editor.renderStorage }) })] }));
});
MarkupEditorView.displayName = 'MarkdownMarkupEditorView';
//# sourceMappingURL=MarkupEditorView.js.map
