'use strict';

var core = require('@tiptap/core');
var react = require('@tiptap/react');
var React = require('react');
var reResizable = require('re-resizable');

function ResizableImageWrapper(props) {
    var _a, _b;
    const defaultWidth = props.node.attrs.width;
    const defaultHeight = props.node.attrs.height;
    const [marginLeft, setPaddingLeft] = React.useState((_b = (_a = props.node.attrs) === null || _a === void 0 ? void 0 : _a.marginLeft) !== null && _b !== void 0 ? _b : 0);
    const handleLeftArrowClick = () => {
        props.updateAttributes({
            marginLeft,
        });
        setPaddingLeft(marginLeft - 10);
    };
    const handleRightArrowClick = () => {
        props.updateAttributes({
            marginLeft,
        });
        setPaddingLeft(marginLeft + 10);
    };
    return (React.createElement(react.NodeViewWrapper, { className: "image-resizer" },
        React.createElement("button", { className: "arrow-button", onClick: handleLeftArrowClick }, "\u2190"),
        "\u00A0\u00A0",
        React.createElement("button", { className: "arrow-button", onClick: handleRightArrowClick }, "\u2192"),
        React.createElement("div", { style: {
                marginTop: "10px",
            } }),
        React.createElement(reResizable.Resizable, { className: "resizable-image", defaultSize: {
                width: defaultWidth ? defaultWidth : "300",
                height: defaultHeight ? defaultHeight : "300",
            }, onResize: (e, direction, ref) => {
                props.updateAttributes({
                    width: ref.style.width,
                    height: ref.style.height,
                });
            }, maxWidth: "100%", style: {
                backgroundImage: `url(${props.node.attrs.src})`,
                backgroundSize: "100% 100%",
                backgroundRepeat: "no-repeat",
                marginLeft: `${marginLeft}px`,
            }, lockAspectRatio: false })));
}

const inputRegex = /(?:^|\s)(!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\))$/;
const ResizableImage = core.Node.create({
    name: "image",
    addOptions() {
        return {
            inline: false,
            allowBase64: false,
            HTMLAttributes: {},
        };
    },
    inline() {
        return this.options.inline;
    },
    group() {
        return this.options.inline ? "inline" : "block";
    },
    draggable: true,
    addAttributes() {
        return {
            src: {
                default: null,
            },
            alt: {
                default: null,
            },
            title: {
                default: null,
            },
            height: {
                default: null,
            },
            width: {
                default: null,
            },
            marginLeft: {
                default: null,
            },
            dataID: {
                default: null,
            },
        };
    },
    parseHTML() {
        return [
            {
                tag: "img",
            },
        ];
    },
    renderHTML({ HTMLAttributes }) {
        const { height, width, marginLeft } = HTMLAttributes;
        console.log(HTMLAttributes);
        const attributes = {
            ...HTMLAttributes,
            style: `height: ${height} !important; width: ${width} !important; margin-left: ${marginLeft}px !important;`,
        };
        return ["img", core.mergeAttributes(this.options.HTMLAttributes, attributes)];
    },
    addCommands() {
        return {
            setImage: (options) => ({ commands }) => {
                return commands.insertContent({
                    type: this.name,
                    attrs: options,
                });
            },
        };
    },
    addNodeView() {
        return react.ReactNodeViewRenderer(ResizableImageWrapper);
    },
    addInputRules() {
        return [
            core.nodeInputRule({
                find: inputRegex,
                type: this.type,
                getAttributes: (match) => {
                    const [, , alt, src, title, height, width] = match;
                    return { src, alt, title, height, width };
                },
            }),
        ];
    },
});

module.exports = ResizableImage;
//# sourceMappingURL=index.cjs.map