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) {
            if (node.attrs.width && node.attrs.height) {
                isInitialized.current = true;
                return;
            }

            const width = imgRef.current.naturalWidth;
            const 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;
        const currentHeight = node.attrs.height;

        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',
            position: 'relative',
            outline: editing ? `1px dashed ${BORDER_COLOR}` : 'none',
            verticalAlign: 'top',
            zIndex: 1
        };

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

    return (
        <NodeViewWrapper
            as="span"
            style={getWrapperStyle()}
            ref={wrapperRef}
            onClick={(e) => {
                e.stopPropagation();
                setEditing(true);
            }}
            contentEditable={false}
            data-image-wrapper
        >
            <img
                {...node.attrs}
                ref={imgRef}
                style={{
                    width: `${node.attrs.width}px`,
                    height: `${node.attrs.height}px`,
                    maxWidth: '100%',
                    display: 'block',
                    margin: '0 auto', // Центрируем изображение внутри wrapper'а
                    cursor: 'default',
                    userSelect: 'none'
                }}
                onLoad={() => {
                    if (imgRef.current && !isInitialized.current &&
                        (!node.attrs.width || !node.attrs.height)) {
                        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';

        return ['span', {
            'data-type': 'resizable-image',
            'data-image-wrapper': true,
            style: `
                display: ${align === 'center' ? 'block' : 'inline-block'};
                float: ${['left', 'right'].includes(align) ? align : 'none'};
                margin: ${align === 'left' ? '0 1rem 1rem 0' :
                align === 'right' ? '0 0 1rem 1rem' :
                    align === 'center' ? '0 auto' : '0'};
                text-align: ${align === 'center' ? 'center' : 'left'};
                vertical-align: top;
                position: relative;
                z-index: 1;
            `,
            'data-align': align
        }, ['img', {
            ...HTMLAttributes,
            style: `width:${HTMLAttributes.width}px;height:${HTMLAttributes.height}px;max-width:100%;display:block;margin:0 auto;`
        }]];
    },

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

export default ResizableImageExtension;