import { jsx as _jsx } from "react/jsx-runtime";
import { Portal } from '@gravity-ui/uikit';
import { getReactRendererFromState } from "../extensions/behavior/ReactRenderer/index.js";
export const ReactNodeStopEventCn = 'prosemirror-stop-event';
export class ReactNodeView {
    dom;
    node;
    view;
    serializer;
    renderItem;
    getPos;
    constructor(Component, opts) {
        const { getPos, node, serializer, view, options } = opts;
        this.node = node;
        this.dom = options?.isInline
            ? document.createElement('span')
            : document.createElement('div');
        this.dom.contentEditable = 'false';
        this.dom.classList.add('react-node-container');
        const wrapper = document.createElement(options?.isInline ? 'span' : 'div');
        wrapper.classList.add('react-node-wrapper');
        if (options?.reactNodeWrapperCn) {
            wrapper.classList.add(options?.reactNodeWrapperCn);
        }
        this.dom.appendChild(wrapper);
        this.serializer = serializer;
        this.view = view;
        this.getPos = getPos;
        this.renderItem = getReactRendererFromState(view.state).createItem(`${Component.displayName || this.node.type.name}-view`, () => (_jsx(Portal, { container: wrapper, children: _jsx(Component, { dom: wrapper, view: this.view, updateAttributes: this.updateAttributes.bind(this), node: this.node, getPos: this.getPos.bind(this), serializer: this.serializer, extensionOptions: options?.extensionOptions }) })));
    }
    update(node) {
        if (node.type !== this.node.type)
            return false;
        if (this.node === node)
            return true;
        this.node = node;
        this.renderItem.rerender();
        return true;
    }
    destroy() {
        this.renderItem.remove();
    }
    ignoreMutation(_mutation) {
        return true;
    }
    updateAttributes(attributes, marks = []) {
        const pos = this.getPos();
        if (pos === undefined)
            return;
        const { tr } = this.view.state;
        tr.setNodeMarkup(pos, undefined, {
            ...this.node.attrs,
            ...attributes,
        }, marks);
        this.view.dispatch(tr);
    }
    stopEvent(e) {
        const target = e.target;
        const isInput = ['INPUT', 'BUTTON', 'SELECT', 'TEXTAREA'].includes(target.tagName);
        return isInput || target.classList.contains(ReactNodeStopEventCn);
    }
}
export const reactNodeViewFactory = (Component, options) => ({ serializer }) => (node, view, getPos) => new ReactNodeView(Component, { node, view, getPos, serializer, options });
//# sourceMappingURL=react-node-view.js.map
