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'];

const ResizableImageTemplate = ({ node, updateAttributes, editor, getPos }) => {
    const imgRef = useRef(null);
    const wrapperRef = useRef(null);
    const [editing, setEditing] = useState(false);
    const [showAlignMenu, setShowAlignMenu] = useState(false);
    const isInitialized = useRef(false);
    const resizeData = useRef({
        startWidth: 0,
        startHeight: 0,
        startX: 0,
        startY: 0,
        aspectRatio: 1
    });

    // Добавляем прозрачный нулевой пробел после изображения
    useEffect(() => {
        if (!editor || !getPos) return;

        const pos = getPos() + 1;
        const doc = editor.state.doc;

        if (doc.nodeSize > pos && doc.nodeAt(pos)?.textContent !== '\u200B') {
            editor.commands.insertContentAt(pos, {
                type: 'text',
                text: '\u200B' // Невидимый нулевой пробел
            });
        }
    }, [editor, getPos]);

    // Инициализация размеров
    useEffect(() => {
        if (imgRef.current && !isInitialized.current) {
            const width = node.attrs.width || imgRef.current.naturalWidth;
            const height = node.attrs.height || imgRef.current.naturalHeight;
            updateAttributes({
                width: Math.round(width),
                height: Math.round(height)
            });
            isInitialized.current = true;
        }
    }, [node.attrs.width, node.attrs.height, updateAttributes]);

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

        const currentWidth = node.attrs.width || imgRef.current.naturalWidth;
        const currentHeight = node.attrs.height || imgRef.current.naturalHeight;

        resizeData.current = {
            startWidth: currentWidth,
            startHeight: currentHeight,
            startX: e.clientX,
            startY: e.clientY,
            aspectRatio: currentWidth / currentHeight,
            direction
        };

        const onMouseMove = (e) => {
            const { startWidth, startHeight, startX, startY, aspectRatio, direction } = resizeData.current;

            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);
        setTimeout(() => editor.commands.focus(), 100);
    };

    const getWrapperStyle = () => {
        const baseStyle = {
            display: 'inline-block',
            lineHeight: 0,
            margin: '0.5rem 0',
            position: 'relative',
            outline: editing ? `1px dashed ${BORDER_COLOR}` : 'none',
            verticalAlign: 'top',
            zIndex: 1
        };

        switch(node.attrs.align) {
            case 'left':
                return { ...baseStyle, float: 'left', marginRight: '1rem' };
            case 'right':
                return { ...baseStyle, float: 'right', marginLeft: '1rem' };
            case 'center':
                return {
                    ...baseStyle,
                    display: 'block',
                    marginLeft: 'auto',
                    marginRight: 'auto',
                    textAlign: 'center'
                };
            case 'wrap-left':
                return { ...baseStyle, float: 'left', margin: '0 1rem 1rem 0', shapeOutside: 'margin-box' };
            case 'wrap-right':
                return { ...baseStyle, float: 'right', margin: '0 0 1rem 1rem', shapeOutside: 'margin-box' };
            default:
                return baseStyle;
        }
    };

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

    return (
        <NodeViewWrapper
            as="div"
            style={getWrapperStyle()}
            ref={wrapperRef}
            onClick={(e) => {
                e.stopPropagation();
                setEditing(true);
            }}
            contentEditable={false}
            data-image-wrapper
        >
            <img
                {...node.attrs}
                ref={imgRef}
                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)
                        });
                        isInitialized.current = true;
                    }
                }}
            />

            {editing && (
                <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: '4px 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: '2px 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 => {
                    const width = element.getAttribute('width');
                    return width ? parseInt(width, 10) : null;
                },
                renderHTML: attributes => attributes.width ? { width: attributes.width } : {}
            },
            height: {
                default: null,
                parseHTML: element => {
                    const height = element.getAttribute('height');
                    return height ? parseInt(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 })
            }
        };
    },

    renderHTML({ HTMLAttributes }) {
        const align = HTMLAttributes.align || 'left';
        const isWrap = ['wrap-left', 'wrap-right'].includes(align);
        const floatDirection = isWrap ? align.split('-')[1] : ['left', 'right'].includes(align) ? align : 'none';

        return ['span', {
            'data-type': 'resizable-image',
            'data-image-wrapper': true,
            style: `
                display: ${align === 'center' ? 'block' : 'inline-block'};
                float: ${floatDirection};
                margin: ${align === 'left' ? '0 1rem 1rem 0' :
                align === 'right' ? '0 0 1rem 1rem' :
                    align === 'wrap-left' ? '0 1rem 1rem 0' :
                        align === 'wrap-right' ? '0 0 1rem 1rem' :
                            align === 'center' ? '0.5rem auto' : '0'};
                shape-outside: ${isWrap ? 'margin-box' : 'none'};
                vertical-align: top;
                position: relative;
                z-index: 1;
            `,
            'data-align': align
        }, ['img', HTMLAttributes]];
    },

    addNodeView() {
        return ReactNodeViewRenderer(ResizableImageTemplate);
    }
}).configure({
    inline: true,
    group: 'inline',
    draggable: true,
    selectable: false // Важно отключить выделение изображения
});

export default ResizableImageExtension;