import log from '@diplodoc/transform/lib/log.js';
import imsize from '@diplodoc/transform/lib/plugins/imsize/index.js';
import isNumber from 'is-number';
import { imageNodeName } from "../../../markdown/Image/const.js";
import { ImgSizeAttr } from "./const.js";
export { ImgSizeAttr };
export const ImgSizeSpecs = (builder, opts) => {
    const placeholderContent = builder.context.get('placeholder')?.imgSize;
    builder.configureMd((md) => md.use(imsize, { log, enableInlineStyling: true }));
    builder.addNode(imageNodeName, () => ({
        spec: {
            inline: true,
            attrs: {
                [ImgSizeAttr.Src]: {},
                [ImgSizeAttr.Alt]: { default: null },
                [ImgSizeAttr.Title]: { default: null },
                [ImgSizeAttr.Height]: { default: null },
                [ImgSizeAttr.Width]: { default: null },
                [ImgSizeAttr.Loading]: { default: null },
            },
            placeholder: placeholderContent ? { content: placeholderContent } : opts.placeholder,
            group: 'inline',
            draggable: true,
            parseDOM: [
                {
                    tag: 'img[src]',
                    getAttrs(dom) {
                        const height = dom.getAttribute(ImgSizeAttr.Height);
                        const width = dom.getAttribute(ImgSizeAttr.Width);
                        return {
                            [ImgSizeAttr.Src]: dom.getAttribute(ImgSizeAttr.Src),
                            [ImgSizeAttr.Alt]: dom.getAttribute(ImgSizeAttr.Alt),
                            [ImgSizeAttr.Title]: dom.getAttribute(ImgSizeAttr.Title),
                            [ImgSizeAttr.Loading]: dom.getAttribute(ImgSizeAttr.Loading),
                            [ImgSizeAttr.Height]: isNumber(height) ? height : null,
                            [ImgSizeAttr.Width]: isNumber(width) ? height : null,
                        };
                    },
                },
            ],
            toDOM(node) {
                return ['img', node.attrs];
            },
        },
        fromMd: {
            tokenSpec: {
                name: imageNodeName,
                type: 'node',
                getAttrs: (tok) => ({
                    [ImgSizeAttr.Src]: tok.attrGet(ImgSizeAttr.Src),
                    [ImgSizeAttr.Title]: tok.attrGet(ImgSizeAttr.Title),
                    [ImgSizeAttr.Height]: tok.attrGet(ImgSizeAttr.Height),
                    [ImgSizeAttr.Width]: tok.attrGet(ImgSizeAttr.Width),
                    [ImgSizeAttr.Loading]: tok.attrGet(ImgSizeAttr.Loading),
                    [ImgSizeAttr.Alt]: tok.children?.[0]?.content || null,
                }),
            },
        },
        toMd: (state, node) => {
            const attrs = node.attrs;
            let result = '![';
            if (attrs.alt) {
                result += state.esc(attrs.alt);
            }
            result += '](';
            if (attrs.src) {
                result += state.esc(attrs.src);
            }
            if (attrs.title) {
                result += ` ${state.quote(attrs.title)}`;
            }
            result += getSize(attrs);
            result += ')';
            state.write(result);
        },
    }));
};
function getSize({ width, height }) {
    if (width || height) {
        return ` =${width || ''}x${height || ''}`;
    }
    return '';
}
//# sourceMappingURL=index.js.map
