import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { mergeCSSClasses, } from "@endexai/blocknote-core";
import React, { useCallback, useEffect, useMemo, useState, } from "react";
import { useEditorChange } from "../hooks/useEditorChange.js";
import { useEditorSelectionChange } from "../hooks/useEditorSelectionChange.js";
import { usePrefersColorScheme } from "../hooks/usePrefersColorScheme.js";
import { BlockNoteContext, useBlockNoteContext } from "./BlockNoteContext.js";
import { BlockNoteDefaultUI, } from "./BlockNoteDefaultUI.js";
import { EditorContent } from "./EditorContent.js";
import { ElementRenderer } from "./ElementRenderer.js";
import "./styles.css";
const emptyFn = () => {
    // noop
};
function BlockNoteViewComponent(props, ref) {
    const { editor, className, theme, children, editable, onSelectionChange, onChange, formattingToolbar, linkToolbar, slashMenu, emojiPicker, sideMenu, filePanel, tableHandles, ...rest } = props;
    // Used so other components (suggestion menu) can set
    // aria related props to the contenteditable div
    const [contentEditableProps, setContentEditableProps] = useState();
    const existingContext = useBlockNoteContext();
    const systemColorScheme = usePrefersColorScheme();
    const defaultColorScheme = existingContext?.colorSchemePreference || systemColorScheme;
    const editorColorScheme = theme || (defaultColorScheme === "dark" ? "dark" : "light");
    useEditorChange(onChange || emptyFn, editor);
    useEditorSelectionChange(onSelectionChange || emptyFn, editor);
    useEffect(() => {
        editor.isEditable = editable !== false;
    }, [editable, editor]);
    const renderChildren = useMemo(() => {
        return (_jsxs(_Fragment, { children: [children, _jsx(BlockNoteDefaultUI, { formattingToolbar: formattingToolbar, linkToolbar: linkToolbar, slashMenu: slashMenu, emojiPicker: emojiPicker, sideMenu: sideMenu, filePanel: filePanel, tableHandles: tableHandles })] }));
    }, [
        children,
        formattingToolbar,
        linkToolbar,
        slashMenu,
        emojiPicker,
        sideMenu,
        filePanel,
        tableHandles,
    ]);
    const context = useMemo(() => {
        return {
            ...existingContext,
            editor,
            setContentEditableProps,
        };
    }, [existingContext, editor]);
    const setElementRenderer = useCallback((ref) => {
        editor.elementRenderer = ref;
    }, [editor]);
    return (_jsxs(BlockNoteContext.Provider, { value: context, children: [_jsx(ElementRenderer, { ref: setElementRenderer }), !editor.headless && (_jsx(EditorContent, { editor: editor, children: _jsxs("div", { className: mergeCSSClasses("bn-container", editorColorScheme || "", className || ""), "data-color-scheme": editorColorScheme, ...rest, ref: ref, children: [_jsx("div", { "aria-autocomplete": "list", "aria-haspopup": "listbox", ref: editor.mount, ...contentEditableProps }), renderChildren] }) }))] }));
}
// https://fettblog.eu/typescript-react-generic-forward-refs/
export const BlockNoteViewRaw = React.forwardRef(BlockNoteViewComponent);
//# sourceMappingURL=BlockNoteView.js.map