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 { globalLogger } from "../logger.js";
import { useRenderTime } from "../react-utils/hooks.js";
import { ToolbarView } from "./ToolbarView.js";
import { WysiwygEditorComponent } from "./WysiwygEditorComponent.js";
import "./WysiwygEditorView.css";
const b = cn('wysiwyg-editor');
export const WysiwygEditorView = memo((props) => {
    const { editor, autofocus, settingsVisible, toolbarVisible, toolbarConfig, hiddenActionsConfig, className, toolbarClassName, children, stickyToolbar = true, } = props;
    useRenderTime((time) => {
        globalLogger.metrics({
            component: 'wysiwyg-editor',
            event: 'render',
            duration: time,
        });
        editor.logger.metrics({
            component: 'wysiwyg-editor',
            event: 'render',
            duration: time,
        });
    });
    return (_jsxs("div", { className: b({ toolbar: toolbarVisible }, [className]), children: [toolbarVisible ? (_jsx(ToolbarView, { editor: editor, editorMode: "wysiwyg", toolbarEditor: editor, stickyToolbar: stickyToolbar, toolbarConfig: toolbarConfig, toolbarFocus: () => editor.focus(), hiddenActionsConfig: hiddenActionsConfig, settingsVisible: settingsVisible, className: b('toolbar', [toolbarClassName]), children: children })) : null, _jsx(WysiwygEditorComponent, { autofocus: autofocus, editor: editor, className: b('editor'), children: _jsx(ReactRendererComponent, { storage: editor.renderStorage }) })] }));
});
WysiwygEditorView.displayName = 'MarkdownWysiwgEditorView';
//# sourceMappingURL=WysiwygEditorView.js.map
