Image.jsx

import { NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react";
import React, { useEffect, useRef, useState, Fragment } from "react";
import TipTapImage from "@tiptap/extension-image";

const MIN_WIDTH = 60;
const BORDER_COLOR = '#0096fd';
const ALIGN_OPTIONS = ['left', 'center', 'right', 'text'];

const ResizableImageTemplate = ({ node, updateAttributes, editor, getPos, selected }) => {
    const imgRef = useRef(null);
    const wrapperRef = useRef(null);
    const [showAlignMenu, setShowAlignMenu] = useState(false);
    const isInitialized = useRef(false);
    const [isResizing, setIsResizing] = useState(false);

    // Получаем текущую ширину редактора и доступное пространство
    const getEditorDimensions = () => {
        const editorElement = editor?.options?.element?.closest('.atma-editor-content');
        if (!editorElement) return { width: Infinity, availableSpace: Infinity };

        const editorWidth = editorElement.clientWidth;
        const imgElement = imgRef.current;
        let availableSpace = editorWidth;

        if (imgElement) {
            const imgRect = imgElement.getBoundingClientRect();
            const editorRect = editorElement.getBoundingClientRect();

            if (node.attrs.align === 'center') {
                const leftSpace = imgRect.left - editorRect.left;
                const rightSpace = editorRect.right - imgRect.right;
                availableSpace = Math.min(editorWidth, (leftSpace + rightSpace + imgRect.width));
                console.log(leftSpace, rightSpace, availableSpace);
            } else if (node.attrs.align === 'right') {
                availableSpace = imgRect.left - editorRect.left + node.attrs.width;
            } else if (node.attrs.align === 'left' || node.attrs.align === 'text') {
                availableSpace = editorRect.right - imgRect.left;
            }
        }

        return { width: editorWidth, availableSpace };
    };

    // Безопасное обновление атрибутов с учетом выравнивания и границ
    const safeUpdateAttributes = (newAttrs) => {
        const { width: editorWidth, availableSpace } = getEditorDimensions();
        let { width, height, align } = { ...node.attrs, ...newAttrs };
        const newAlign = newAttrs.align || align;

        // При изменении выравнивания проверяем доступное пространство
        if (newAlign && newAlign !== align) {
            const maxWidth = availableSpace;
            if (width > maxWidth) {
                const ratio = maxWidth / width;
                width = maxWidth;
                height = Math.round(height * ratio);
            }
        } else {
            // Для обычного обновления размеров
            const maxWidth = availableSpace;
            if (width > maxWidth) {
                const ratio = maxWidth / width;
                width = maxWidth;
                height = Math.round(height * ratio);
            }
        }

        // Проверяем минимальный размер
        if (width < MIN_WIDTH) {
            const ratio = MIN_WIDTH / width;
            width = MIN_WIDTH;
            height = Math.round(height * ratio);
        }

        updateAttributes({ width, height, ...newAttrs });
    };

    // Инициализация изображения
    useEffect(() => {
        if (!node.attrs['data-node-id']) {
            safeUpdateAttributes({
                'data-node-id': `img-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
            });
        }
    }, [node.attrs['data-node-id']]);

    // Обработка кликов вне изображения
    useEffect(() => {
        const handleClickOutside = (event) => {
            if (wrapperRef.current && !wrapperRef.current.contains(event.target) && selected) {
                editor.commands.setNodeSelection(getPos());
            }
        };
        document.addEventListener('mousedown', handleClickOutside);
        return () => document.removeEventListener('mousedown', handleClickOutside);
    }, [selected, editor, getPos]);

    // Загрузка и инициализация изображения
    useEffect(() => {
        if (!imgRef.current || isInitialized.current) return;

        const initImageSize = () => {
            try {
                // Если размеры уже заданы в атрибутах - используем их
                if (node.attrs.width && node.attrs.height) {
                    safeUpdateAttributes({
                        width: node.attrs.width,
                        height: node.attrs.height,
                        'data-node-id': node.attrs['data-node-id'] || `img-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
                    });
                    isInitialized.current = true;
                    return;
                }

                const { width: editorWidth } = getEditorDimensions();
                const naturalWidth = imgRef.current.naturalWidth;
                const naturalHeight = imgRef.current.naturalHeight;

                if (naturalWidth <= 0 || naturalHeight <= 0) {
                    console.warn('Image has invalid natural dimensions, retrying...');
                    setTimeout(initImageSize, 100);
                    return;
                }

                let initialWidth = naturalWidth;
                let initialHeight = naturalHeight;

                if (initialWidth > editorWidth) {
                    const ratio = editorWidth / initialWidth;
                    initialWidth = editorWidth;
                    initialHeight = Math.round(initialHeight * ratio);
                }

                safeUpdateAttributes({
                    width: initialWidth,
                    height: initialHeight,
                    'data-node-id': node.attrs['data-node-id'] || `img-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
                });
                isInitialized.current = true;
            } catch (error) {
                console.warn('Error initializing image size:', error);
            }
        };

        const handleLoad = () => {
            setTimeout(initImageSize, 50);
        };

        if (imgRef.current.complete) {
            handleLoad();
        } else {
            imgRef.current.addEventListener('load', handleLoad);
        }

        return () => {
            if (imgRef.current) {
                imgRef.current.removeEventListener('load', handleLoad);
            }
        };
    }, [node.attrs.width, node.attrs.height, node.attrs['data-node-id']]);

    // Обработка ресайза изображения
    const handleResizeStart = (direction) => (e) => {
        e.preventDefault();
        e.stopPropagation();

        setIsResizing(true);
        editor.commands.setNodeSelection(getPos());

        const startWidth = node.attrs.width || imgRef.current.naturalWidth;
        const startHeight = node.attrs.height || imgRef.current.naturalHeight;
        const aspectRatio = startWidth / startHeight;
        const startX = e.clientX;
        const startY = e.clientY;
        const { width: editorWidth, availableSpace } = getEditorDimensions();

        const onMouseMove = (e) => {
            const deltaX = e.clientX - startX;
            const deltaY = e.clientY - startY;

            let newWidth, newHeight;
            const maxWidth = node.attrs.align === 'center' ? editorWidth : availableSpace;

            if (node.attrs.align === 'center') {
                if (direction.includes('n') || direction.includes('s')) {
                    const scale = direction.includes('s') ? 1 : -1;
                    newHeight = Math.max(startHeight + deltaY * scale, MIN_WIDTH);
                    newWidth = Math.min(Math.round(newHeight * aspectRatio), maxWidth);
                    newHeight = Math.round(newWidth / aspectRatio);
                } else {
                    const scale = direction.includes('e') ? 1 : -1;
                    newWidth = Math.min(
                        Math.max(startWidth + deltaX * scale, MIN_WIDTH),
                        maxWidth
                    );
                    newHeight = Math.round(newWidth / aspectRatio);
                }
            } else {
                if (direction.includes('e') || direction.includes('w')) {
                    const scale = direction.includes('e') ? 1 : -1;
                    newWidth = Math.min(
                        Math.max(startWidth + deltaX * scale, MIN_WIDTH),
                        maxWidth
                    );
                    newHeight = Math.round(newWidth / aspectRatio);
                } else {
                    const scale = direction.includes('s') ? 1 : -1;
                    newHeight = Math.max(startHeight + deltaY * scale, MIN_WIDTH);
                    newWidth = Math.min(
                        Math.round(newHeight * aspectRatio),
                        maxWidth
                    );
                    newHeight = Math.round(newWidth / aspectRatio);
                }
            }

            safeUpdateAttributes({ width: newWidth, height: newHeight });
        };

        const onMouseUp = () => {
            window.removeEventListener('mousemove', onMouseMove);
            window.removeEventListener('mouseup', onMouseUp);
            setIsResizing(false);
            editor.commands.setNodeSelection(getPos());
            editor.commands.focus();
        };

        window.addEventListener('mousemove', onMouseMove);
        window.addEventListener('mouseup', onMouseUp);
    };

    // Изменение выравнивания с автоматическим масштабированием
    const handleAlign = (align) => {
        safeUpdateAttributes({ align });
        safeUpdateAttributes({ align });
        setShowAlignMenu(false);
        editor.commands.focus();
    };

    // Стили для обертки изображения
    const getWrapperStyle = () => {
        const baseStyle = {
            display: 'inline-block',
            lineHeight: 0,
            position: 'relative',
            outline: (selected || isResizing) ? `1px dashed ${BORDER_COLOR}` : 'none',
            verticalAlign: 'top',
            margin: '0.5rem 0',
        };

        if (node.attrs.align === 'center') {
            return {
                ...baseStyle,
                display: 'block',
                marginLeft: 'auto',
                marginRight: 'auto',
                width: node.attrs.width ? `${node.attrs.width}px` : 'fit-content',
                maxWidth: '100%',
                textAlign: 'center'
            };
        }

        return {
            ...baseStyle,
            ...(node.attrs.align === 'left' && {
                float: 'left',
                marginRight: '1rem',
                width: node.attrs.width ? `${node.attrs.width}px` : 'auto',
            }),
            ...(node.attrs.align === 'right' && {
                float: 'right',
                marginLeft: '1rem',
                width: node.attrs.width ? `${node.attrs.width}px` : 'auto',
            }),
            ...(node.attrs.align === 'text' && {
                display: 'inline-block',
                float: 'none',
                margin: '0 0.2rem',
                verticalAlign: 'middle',
                width: node.attrs.width ? `${node.attrs.width}px` : 'auto',
            }),
        };
    };

    // Стили для самого изображения
    const getImageStyle = () => ({
        width: node.attrs.width ? `${node.attrs.width}px` : 'auto',
        height: 'auto',
        maxWidth: '100%',
        display: 'block',
        cursor: 'default',
        userSelect: 'none',
        margin: node.attrs.align === 'center' ? '0 auto' : '0',
        verticalAlign: node.attrs.align === 'text' ? 'middle' : 'top',
        objectFit: 'contain'
    });

    return (
        <NodeViewWrapper
            as="div"
            style={getWrapperStyle()}
            ref={wrapperRef}
            onClick={(e) => {
                e.stopPropagation();
                editor.commands.setNodeSelection(getPos());
            }}
            contentEditable={false}
            data-image-wrapper
        >
            <img
                {...node.attrs}
                ref={imgRef}
                draggable={true}
                style={getImageStyle()}
                onLoad={() => {
                    if (imgRef.current && !isInitialized.current) {
                        const { width: editorWidth } = getEditorDimensions();
                        const naturalWidth = imgRef.current.naturalWidth;
                        const naturalHeight = imgRef.current.naturalHeight;

                        safeUpdateAttributes({
                            width: naturalWidth,
                            height: naturalHeight,
                            'data-node-id': node.attrs['data-node-id'] || Math.random().toString(36).substr(2, 9)
                        });
                        isInitialized.current = true;
                    }
                }}
            />

            {(selected || isResizing) && (
                <Fragment>
                    {['nw', 'ne', 'sw', 'se'].map(dir => (
                        <div
                            key={dir}
                            onMouseDown={handleResizeStart(dir)}
                            style={{
                                position: 'absolute',
                                width: 12,
                                height: 12,
                                backgroundColor: BORDER_COLOR,
                                border: '1px solid white',
                                [dir[0] === 'n' ? 'top' : 'bottom']: -6,
                                [dir[1] === 'w' ? 'left' : 'right']: node.attrs.align === 'center' ? '50%' : -6,
                                transform: node.attrs.align === 'center' ?
                                    `translateX(${dir[1] === 'w' ? '-100%' : '0%'})` : 'none',
                                cursor: `${dir}-resize`,
                                zIndex: 10
                            }}
                        />
                    ))}

                    {showAlignMenu && (
                        <div style={{
                            position: 'absolute',
                            top: -40,
                            left: '50%',
                            transform: 'translateX(-50%)',
                            backgroundColor: 'white',
                            boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
                            borderRadius: 4,
                            padding: 4,
                            zIndex: 20,
                            display: 'flex'
                        }}>
                            {ALIGN_OPTIONS.map(align => (
                                <button
                                    key={align}
                                    onClick={() => handleAlign(align)}
                                    style={{
                                        margin: '0 2px',
                                        padding: '10px 8px',
                                        background: node.attrs.align === align ? '#e6f7ff' : 'transparent',
                                        border: '1px solid #d9d9d9',
                                        borderRadius: 2,
                                        cursor: 'pointer'
                                    }}
                                >
                                    {align}
                                </button>
                            ))}
                        </div>
                    )}

                    <button
                        onClick={(e) => {
                            e.stopPropagation();
                            setShowAlignMenu(!showAlignMenu);
                        }}
                        style={{
                            position: 'absolute',
                            top: -30,
                            left: '50%',
                            transform: 'translateX(-50%)',
                            backgroundColor: 'white',
                            border: `1px solid ${BORDER_COLOR}`,
                            borderRadius: 4,
                            padding: '8px 8px',
                            cursor: 'pointer',
                            fontSize: 12,
                            zIndex: 10
                        }}
                    >
                        Align
                    </button>
                </Fragment>
            )}
        </NodeViewWrapper>
    );
};

const ResizableImageExtension = TipTapImage.extend({
    addAttributes() {
        return {
            ...this.parent?.(),
            src: { default: null },
            alt: { default: null },
            title: { default: null },
            width: {
                default: null,
                parseHTML: element => parseInt(element.getAttribute('width'), 10) || null,
                renderHTML: attributes => attributes.width ? { width: attributes.width } : {}
            },
            height: {
                default: null,
                parseHTML: element => parseInt(element.getAttribute('height'), 10) || null,
                renderHTML: attributes => attributes.height ? { height: attributes.height } : {}
            },
            align: {
                default: 'left',
                parseHTML: element => element.getAttribute('data-align') || 'left',
                renderHTML: attributes => ({ 'data-align': attributes.align })
            },
            'data-node-id': {
                default: null,
                parseHTML: element => element.getAttribute('data-node-id'),
                renderHTML: attributes => ({ 'data-node-id': attributes['data-node-id'] })
            }
        };
    },

    addNodeView() {
        return ReactNodeViewRenderer(ResizableImageTemplate);
    },

    addKeyboardShortcuts() {
        return {
            'Mod-ArrowLeft': () => this.editor.commands.updateAttributes(this.type.name, { align: 'left' }),
            'Mod-ArrowRight': () => this.editor.commands.updateAttributes(this.type.name, { align: 'right' }),
            'Mod-ArrowDown': () => this.editor.commands.updateAttributes(this.type.name, { align: 'center' }),
        };
    }
}).configure({
    inline: true,
    group: 'inline',
    draggable: true,
    selectable: true
});

export default ResizableImageExtension;