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);

    // Генерация уникального ID при создании
    useEffect(() => {
        if (!node.attrs['data-node-id']) {
            updateAttributes({
                'data-node-id': `img-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
            });
        }
    }, [node.attrs['data-node-id'], updateAttributes]);

    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 {
                const width = node.attrs.width || imgRef.current.naturalWidth;
                const height = node.attrs.height || imgRef.current.naturalHeight;
                if (width > 0 && height > 0) {
                    updateAttributes({
                        width: Math.round(width),
                        height: Math.round(height),
                        'data-node-id': node.attrs['data-node-id'] || Math.random().toString(36).substr(2, 9)
                    });
                    isInitialized.current = true;
                }
            } catch (error) {
                console.warn('Error initializing image size:', error);
            }
        };

        if (imgRef.current.complete) {
            initImageSize();
        } else {
            imgRef.current.onload = initImageSize;
        }

        return () => {
            if (imgRef.current) imgRef.current.onload = null;
        };
    }, [node.attrs.width, node.attrs.height, updateAttributes, node.attrs['data-node-id']]);

    const handleResizeStart = (direction) => (e) => {
        e.preventDefault();
        e.stopPropagation();

        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 onMouseMove = (e) => {
            const deltaX = e.clientX - startX;
            const deltaY = e.clientY - startY;

            let newWidth, newHeight;

            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.round(newHeight * aspectRatio);
                } else {
                    const scale = direction.includes('e') ? 1 : -1;
                    newWidth = Math.max(startWidth + deltaX * scale, MIN_WIDTH);
                    newHeight = Math.round(newWidth / aspectRatio);
                }
            } else {
                if (direction.includes('e') || direction.includes('w')) {
                    const scale = direction.includes('e') ? 1 : -1;
                    newWidth = Math.max(startWidth + deltaX * scale, MIN_WIDTH);
                    newHeight = Math.round(newWidth / aspectRatio);
                } else {
                    const scale = direction.includes('s') ? 1 : -1;
                    newHeight = Math.max(startHeight + deltaY * scale, MIN_WIDTH);
                    newWidth = Math.round(newHeight * aspectRatio);
                }
            }

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

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

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

    const handleAlign = (align) => {
        updateAttributes({ align });
        setShowAlignMenu(false);
        editor.commands.focus();
    };

    const getWrapperStyle = () => ({
        display: 'inline-block',
        lineHeight: 0,
        margin: '0.5rem 0',
        position: 'relative',
        outline: selected ? `1px dashed ${BORDER_COLOR}` : 'none',
        verticalAlign: 'top',
        ...(node.attrs.align === 'left' && { float: 'left', marginRight: '1rem' }),
        ...(node.attrs.align === 'right' && { float: 'right', marginLeft: '1rem' }),
        ...(node.attrs.align === 'center' && {
            display: 'block',
            marginLeft: 'auto',
            marginRight: 'auto',
            textAlign: 'center'
        }),
        ...(node.attrs.align === 'text' && {
            display: 'inline-block',
            float: 'none',
            margin: '0 0.2rem',
            verticalAlign: 'middle'
        })
    });

    const getImageStyle = () => ({
        width: node.attrs.width ? `${node.attrs.width}px` : 'auto',
        height: node.attrs.height ? `${node.attrs.height}px` : 'auto',
        maxWidth: '100%',
        display: 'block',
        cursor: 'default',
        userSelect: 'none',
        margin: node.attrs.align === 'center' ? '0 auto' : '0',
        verticalAlign: node.attrs.align === 'text' ? 'middle' : 'top'
    });

    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} // обязательно true для работы dragstart
                style={getImageStyle()}
                onLoad={() => {
                    if (imgRef.current && !isInitialized.current) {
                        const width = imgRef.current.naturalWidth;
                        const height = imgRef.current.naturalHeight;
                        updateAttributes({
                            width: Math.round(width),
                            height: Math.round(height),
                            'data-node-id': node.attrs['data-node-id'] || Math.random().toString(36).substr(2, 9)
                        });
                        isInitialized.current = true;
                    }
                }}
            />

            {selected && (
                <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;