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 }) => {
    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?.isEditable || typeof getPos !== 'function') return;

        const insertZeroWidthSpace = () => {
            try {
                const pos = getPos();
                if (typeof pos !== 'number' || pos < 0) return;

                const doc = editor.state.doc;
                const insertPos = pos + 1;

                if (insertPos >= doc.content.size) return;

                const nextNode = doc.nodeAt(insertPos);
                if (nextNode?.textContent === '\u200B') return;

                setTimeout(() => {
                    if (editor.isDestroyed) return;
                    editor.commands.insertContentAt(insertPos, {
                        type: 'text',
                        text: '\u200B'
                    });
                }, 50);
            } catch (error) {
                console.warn('Error inserting zero-width space:', error);
            }
        };

        const timer = setTimeout(insertZeroWidthSpace, 100);
        return () => clearTimeout(timer);
    }, [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)
                    });
                    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]);

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

        const nodePos = typeof getPos === 'function' ? getPos() : null;
        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,
            nodePos
        };

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

            // Проверяем, что узел все еще существует
            if (typeof nodePos === 'number') {
                try {
                    const resolvedPos = editor.view.state.doc.resolve(nodePos);
                    if (!resolvedPos?.nodeAfter) return;
                } catch {
                    return;
                }
            }

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

            // Принудительное обновление с новым transaction
            const { state, dispatch } = editor.view;
            const tr = state.tr.setNodeMarkup(nodePos, undefined, {
                ...node.attrs,
                width: newWidth,
                height: newHeight
            });
            dispatch(tr);
        };

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

            // Обновляем атрибуты в конце ресайза для синхронизации
            if (typeof resizeData.current.nodePos === 'number') {
                updateAttributes({
                    width: node.attrs.width,
                    height: node.attrs.height
                });
            }

            if (!editor.isDestroyed && editor.view) {
                setTimeout(() => {
                    try {
                        editor.commands.focus();
                        // Принудительное обновление представления
                        editor.view.dispatch(editor.view.state.tr.setMeta('forceUpdate', true));
                    } catch (error) {
                        console.warn('Focus error after resize:', error);
                    }
                }, 50);
            }
        };

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

        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 'text':
                return {
                    ...baseStyle,
                    display: 'inline-block',
                    float: 'none',
                    margin: '0 0.2rem',
                    verticalAlign: 'middle'
                };
            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',
        verticalAlign: node.attrs.align === 'text' ? 'middle' : 'top'
    });

    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: '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 => {
                    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 ||
            HTMLAttributes['data-align'] ||
            'left';

        const floatValue = align.startsWith('wrap-') ? align.split('-')[1] :
            ['left', 'right'].includes(align) ? align :
                'none';

        let marginValue;
        switch(align) {
            case 'left':
            case 'wrap-left':
                marginValue = '0 1rem 1rem 0';
                break;
            case 'right':
            case 'wrap-right':
                marginValue = '0 0 1rem 1rem';
                break;
            case 'center':
                marginValue = '0.5rem auto';
                break;
            case 'text':
                marginValue = '0 0.2rem';
                break;
            default:
                marginValue = '0';
        }

        return ['span', {
            'data-type': 'resizable-image',
            'data-image-wrapper': true,
            'data-align': align,
            style: `
            display: ${align === 'center' ? 'block' : 'inline-block'};
            float: ${floatValue};
            margin: ${marginValue};
            shape-outside: ${align.startsWith('wrap-') ? 'margin-box' : 'none'};
            vertical-align: ${align === 'text' ? 'middle' : 'top'};
            position: relative;
            ${align === 'center' ? 'width: 100%; text-align: center;' : ''}
        `
        }, ['img', {
            ...HTMLAttributes,
            style: `
            ${HTMLAttributes.style || ''};
            display: ${align === 'center' ? 'inline-block' : 'block'};
            margin: ${align === 'center' ? '0 auto' : '0'};
            max-width: 100%;
            height: auto;
            vertical-align: ${align === 'text' ? 'middle' : 'top'};
        `,
            'data-align': align
        }]];
    },

    addNodeView() {
        return ReactNodeViewRenderer(ResizableImageTemplate);
    }
}).configure({
    inline: true,
    group: 'inline',
    draggable: true,
    selectable: false
});

export default ResizableImageExtension;