Image.jsx 20.2 KB
Newer Older
yakoff94's avatar
yakoff94 committed
1
import { NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react";
2
import React, { useEffect, useRef, useState, Fragment } from "react";
yakoff94's avatar
yakoff94 committed
3
4
5
6
import TipTapImage from "@tiptap/extension-image";

const MIN_WIDTH = 60;
const BORDER_COLOR = '#0096fd';
Яков's avatar
Яков committed
7
const ALIGN_OPTIONS = ['left', 'center', 'right', 'text'];
yakoff94's avatar
yakoff94 committed
8

Яков's avatar
fix    
Яков committed
9
const ResizableImageTemplate = ({ node, updateAttributes, editor, getPos, selected }) => {
yakoff94's avatar
yakoff94 committed
10
    const imgRef = useRef(null);
11
12
13
    const wrapperRef = useRef(null);
    const [showAlignMenu, setShowAlignMenu] = useState(false);
    const isInitialized = useRef(false);
Яков's avatar
update    
Яков committed
14
15
    const [isResizing, setIsResizing] = useState(false);

Яков's avatar
fix    
Яков committed
16
17
    // Получаем текущую ширину редактора и доступное пространство
    const getEditorDimensions = () => {
Яков's avatar
Яков committed
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
        const editorContent = editor?.options?.element?.closest('.atma-editor-content');
        if (!editorContent) return { width: Infinity, availableSpace: Infinity };

        const fullEditorWidth = editorContent.clientWidth;
        const editorStyles = window.getComputedStyle(editorContent);
        const paddingLeft = parseFloat(editorStyles.paddingLeft) || 0;
        const paddingRight = parseFloat(editorStyles.paddingRight) || 0;
        const availableEditorWidth = fullEditorWidth - paddingLeft - paddingRight;

        let container;

        // при center — всегда редактор
        if (node.attrs.align === 'center') {
            container = editorContent;
        } else {
            // при других выравниваниях — ближайший блок
            container = imgRef.current?.closest('li, blockquote, td, p, div') || editorContent;
Яков's avatar
fix    
Яков committed
35
36
        }

Яков's avatar
Яков committed
37
38
39
40
41
42
43
44
45
        const containerStyles = window.getComputedStyle(container);
        const containerPaddingLeft = parseFloat(containerStyles.paddingLeft) || 0;
        const containerPaddingRight = parseFloat(containerStyles.paddingRight) || 0;
        const containerWidth = container.clientWidth - containerPaddingLeft - containerPaddingRight;

        return {
            width: containerWidth,            // текущая ширина контейнера
            availableSpace: availableEditorWidth // фиксированная доступная ширина
        };
Яков's avatar
fix    
Яков committed
46
47
    };

Яков's avatar
Яков committed
48

Яков's avatar
fix    
Яков committed
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
    // Безопасное обновление атрибутов с учетом выравнивания и границ
    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 });
Яков's avatar
update    
Яков committed
81
    };
82

Яков's avatar
fix    
Яков committed
83
    // Инициализация изображения
84
    useEffect(() => {
Яков's avatar
fix    
Яков committed
85
        if (!node.attrs['data-node-id']) {
Яков's avatar
fix    
Яков committed
86
            safeUpdateAttributes({
Яков's avatar
fix    
Яков committed
87
88
89
                'data-node-id': `img-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
            });
        }
Яков's avatar
fix    
Яков committed
90
    }, [node.attrs['data-node-id']]);
Яков's avatar
fix    
Яков committed
91

Яков's avatar
fix    
Яков committed
92
    // Обработка кликов вне изображения
Яков's avatar
fix    
Яков committed
93
94
95
96
    useEffect(() => {
        const handleClickOutside = (event) => {
            if (wrapperRef.current && !wrapperRef.current.contains(event.target) && selected) {
                editor.commands.setNodeSelection(getPos());
Яков's avatar
fix    
Яков committed
97
98
            }
        };
Яков's avatar
fix    
Яков committed
99
100
101
        document.addEventListener('mousedown', handleClickOutside);
        return () => document.removeEventListener('mousedown', handleClickOutside);
    }, [selected, editor, getPos]);
yakoff94's avatar
yakoff94 committed
102

Яков's avatar
fix    
Яков committed
103
    // Загрузка и инициализация изображения
yakoff94's avatar
yakoff94 committed
104
    useEffect(() => {
Яков's avatar
fix    
Яков committed
105
106
107
108
        if (!imgRef.current || isInitialized.current) return;

        const initImageSize = () => {
            try {
Яков's avatar
fix    
Яков committed
109
110
111
112
113
                // Если размеры уже заданы в атрибутах - используем их сразу
                if (node.attrs.width && node.attrs.height) {
                    isInitialized.current = true;
                    return;
                }
Яков's avatar
fix    
Яков committed
114

Яков's avatar
fix    
Яков committed
115
                const { width: editorWidth } = getEditorDimensions();
Яков's avatar
fix    
Яков committed
116
117
                const naturalWidth = imgRef.current.naturalWidth;
                const naturalHeight = imgRef.current.naturalHeight;
Яков's avatar
update    
Яков committed
118

Яков's avatar
fix    
Яков committed
119
120
                if (naturalWidth <= 0 || naturalHeight <= 0) {
                    console.warn('Image has invalid natural dimensions, retrying...');
Яков's avatar
fix    
Яков committed
121
                    setTimeout(initImageSize, 100);
Яков's avatar
fix    
Яков committed
122
123
124
125
126
127
128
129
130
131
132
133
                    return;
                }

                let initialWidth = naturalWidth;
                let initialHeight = naturalHeight;

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

Яков's avatar
fix    
Яков committed
134
                safeUpdateAttributes({
Яков's avatar
fix    
Яков committed
135
136
137
                    width: initialWidth,
                    height: initialHeight,
                    'data-node-id': node.attrs['data-node-id'] || `img-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
Яков's avatar
fix    
Яков committed
138
139
                });
                isInitialized.current = true;
Яков's avatar
fix    
Яков committed
140
141
142
143
144
            } catch (error) {
                console.warn('Error initializing image size:', error);
            }
        };

Яков's avatar
fix    
Яков committed
145
        const handleLoad = () => {
Яков's avatar
fix    
Яков committed
146
147
148
149
150
            // Если размеры уже заданы в атрибутах, пропускаем инициализацию
            if (node.attrs.width && node.attrs.height) {
                isInitialized.current = true;
                return;
            }
Яков's avatar
fix    
Яков committed
151
152
153
            setTimeout(initImageSize, 50);
        };

Яков's avatar
fix    
Яков committed
154
        if (imgRef.current.complete) {
Яков's avatar
fix    
Яков committed
155
            handleLoad();
Яков's avatar
fix    
Яков committed
156
        } else {
Яков's avatar
fix    
Яков committed
157
            imgRef.current.addEventListener('load', handleLoad);
158
        }
Яков's avatar
fix    
Яков committed
159
160

        return () => {
Яков's avatar
fix    
Яков committed
161
162
163
            if (imgRef.current) {
                imgRef.current.removeEventListener('load', handleLoad);
            }
Яков's avatar
fix    
Яков committed
164
        };
Яков's avatar
fix    
Яков committed
165
    }, [node.attrs.width, node.attrs.height, node.attrs['data-node-id']]);
166

Яков's avatar
fix    
Яков committed
167
    // Обработка ресайза изображения
168
169
170
171
    const handleResizeStart = (direction) => (e) => {
        e.preventDefault();
        e.stopPropagation();

Яков's avatar
update    
Яков committed
172
        setIsResizing(true);
Яков's avatar
update    
Яков committed
173
174
        editor.commands.setNodeSelection(getPos());

Яков's avatar
fix    
Яков committed
175
176
177
178
179
        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;
Яков's avatar
Яков committed
180
        const { width: initialEditorWidth, availableSpace: initialAvailableSpace } = getEditorDimensions();
181
182

        const onMouseMove = (e) => {
Яков's avatar
Яков committed
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
            requestAnimationFrame(() => {
                const maxWidth = node.attrs.align === 'center' ? initialEditorWidth : initialAvailableSpace;

                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.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);
                    }
205
                } else {
Яков's avatar
Яков committed
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
                    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);
                    }
222
223
                }

Яков's avatar
Яков committed
224
225
                safeUpdateAttributes({ width: newWidth, height: newHeight });
            });
yakoff94's avatar
yakoff94 committed
226
227
        };

Яков's avatar
Яков committed
228

229
230
231
        const onMouseUp = () => {
            window.removeEventListener('mousemove', onMouseMove);
            window.removeEventListener('mouseup', onMouseUp);
Яков's avatar
update    
Яков committed
232
            setIsResizing(false);
Яков's avatar
update    
Яков committed
233
            editor.commands.setNodeSelection(getPos());
Яков's avatar
fix    
Яков committed
234
            editor.commands.focus();
yakoff94's avatar
yakoff94 committed
235
236
        };

237
238
239
        window.addEventListener('mousemove', onMouseMove);
        window.addEventListener('mouseup', onMouseUp);
    };
yakoff94's avatar
yakoff94 committed
240

Яков's avatar
fix    
Яков committed
241
    // Изменение выравнивания с автоматическим масштабированием
242
    const handleAlign = (align) => {
Яков's avatar
Яков committed
243
244
245
246
        safeUpdateAttributes({ align }); // первый вызов
        setTimeout(() => {
            safeUpdateAttributes({ align }); // повторный вызов с обновлёнными размерами
        }, 50);
247
        setShowAlignMenu(false);
Яков's avatar
fix    
Яков committed
248
        editor.commands.focus();
249
250
    };

Яков's avatar
fix    
Яков committed
251
    // Стили для обертки изображения
Яков's avatar
update    
Яков committed
252
253
    const getWrapperStyle = () => {
        const baseStyle = {
254
            display: 'inline-block',
Яков's avatar
update    
Яков committed
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
            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',
            }),
        };
    };
yakoff94's avatar
yakoff94 committed
295

Яков's avatar
fix    
Яков committed
296
    // Стили для самого изображения
297
298
    const getImageStyle = () => ({
        width: node.attrs.width ? `${node.attrs.width}px` : 'auto',
Яков's avatar
fix    
Яков committed
299
        height: 'auto',
300
301
302
303
        maxWidth: '100%',
        display: 'block',
        cursor: 'default',
        userSelect: 'none',
Яков's avatar
Яков committed
304
        margin: node.attrs.align === 'center' ? '0 auto' : '0',
Яков's avatar
update    
Яков committed
305
        verticalAlign: node.attrs.align === 'text' ? 'middle' : 'top',
Яков's avatar
fix    
Яков committed
306
        objectFit: 'contain'
307
308
    });

yakoff94's avatar
yakoff94 committed
309
310
    return (
        <NodeViewWrapper
311
            as="div"
312
313
314
315
            style={getWrapperStyle()}
            ref={wrapperRef}
            onClick={(e) => {
                e.stopPropagation();
Яков's avatar
fix    
Яков committed
316
                editor.commands.setNodeSelection(getPos());
yakoff94's avatar
yakoff94 committed
317
            }}
318
319
            contentEditable={false}
            data-image-wrapper
yakoff94's avatar
yakoff94 committed
320
321
        >
            <img
322
323
                {...node.attrs}
                ref={imgRef}
Яков's avatar
update    
Яков committed
324
                draggable={true}
325
                style={getImageStyle()}
326
                onLoad={() => {
Яков's avatar
fix    
Яков committed
327
                    if (imgRef.current && !isInitialized.current && !node.attrs.width && !node.attrs.height) {
Яков's avatar
fix    
Яков committed
328
                        const { width: editorWidth } = getEditorDimensions();
Яков's avatar
update    
Яков committed
329
330
331
                        const naturalWidth = imgRef.current.naturalWidth;
                        const naturalHeight = imgRef.current.naturalHeight;

Яков's avatar
fix    
Яков committed
332
333
334
                        safeUpdateAttributes({
                            width: naturalWidth,
                            height: naturalHeight,
Яков's avatar
fix    
Яков committed
335
                            'data-node-id': node.attrs['data-node-id'] || Math.random().toString(36).substr(2, 9)
336
337
338
                        });
                        isInitialized.current = true;
                    }
yakoff94's avatar
yakoff94 committed
339
340
                }}
            />
341

Яков's avatar
update    
Яков committed
342
            {(selected || isResizing) && (
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
                <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
                            }}
                        />
yakoff94's avatar
yakoff94 committed
362
                    ))}
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382

                    {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',
383
                                        padding: '10px 8px',
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
                                        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,
409
                            padding: '8px 8px',
410
411
412
413
414
415
416
417
                            cursor: 'pointer',
                            fontSize: 12,
                            zIndex: 10
                        }}
                    >
                        Align
                    </button>
                </Fragment>
yakoff94's avatar
yakoff94 committed
418
419
420
421
422
423
424
425
426
            )}
        </NodeViewWrapper>
    );
};

const ResizableImageExtension = TipTapImage.extend({
    addAttributes() {
        return {
            ...this.parent?.(),
Яков's avatar
fix    
Яков committed
427
428
429
            src: { default: null },
            alt: { default: null },
            title: { default: null },
430
431
            width: {
                default: null,
Яков's avatar
fix    
Яков committed
432
                parseHTML: element => parseInt(element.getAttribute('width'), 10) || null,
433
434
435
436
                renderHTML: attributes => attributes.width ? { width: attributes.width } : {}
            },
            height: {
                default: null,
Яков's avatar
fix    
Яков committed
437
                parseHTML: element => parseInt(element.getAttribute('height'), 10) || null,
438
439
440
441
442
443
                renderHTML: attributes => attributes.height ? { height: attributes.height } : {}
            },
            align: {
                default: 'left',
                parseHTML: element => element.getAttribute('data-align') || 'left',
                renderHTML: attributes => ({ 'data-align': attributes.align })
Яков's avatar
fix    
Яков committed
444
445
446
447
448
            },
            'data-node-id': {
                default: null,
                parseHTML: element => element.getAttribute('data-node-id'),
                renderHTML: attributes => ({ 'data-node-id': attributes['data-node-id'] })
449
            }
yakoff94's avatar
yakoff94 committed
450
451
        };
    },
Яков's avatar
update    
Яков committed
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
    renderHTML({ node, HTMLAttributes }) {
        const {
            src,
            alt = '',
            title = '',
            width,
            height,
            ...rest
        } = HTMLAttributes;

        const align = node.attrs.align || 'left';

        const style = [];

        if (align === 'center') {
            style.push('display: block', 'margin-left: auto', 'margin-right: auto');
        } else if (align === 'left') {
            style.push('display: inline-block', 'vertical-align: top', 'margin-right: 1rem');
        } else if (align === 'right') {
            style.push('display: inline-block', 'vertical-align: top', 'margin-left: 1rem');
        } else if (align === 'text') {
            style.push('display: inline-block', 'vertical-align: middle', 'margin: 0 0.2rem');
        }

        if (width) style.push(`width: ${width}px`);
        if (height) style.push(`height: ${height}px`);

        return [
            'img',
            {
                src,
                alt,
                title,
                width,
                height,
                'data-align': align,
                style: style.join('; '),
                ...rest,
            }
        ];
    },
493

yakoff94's avatar
yakoff94 committed
494
495
    addNodeView() {
        return ReactNodeViewRenderer(ResizableImageTemplate);
Яков's avatar
fix    
Яков committed
496
497
498
499
500
501
502
503
    },

    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' }),
        };
504
505
506
507
508
    }
}).configure({
    inline: true,
    group: 'inline',
    draggable: true,
Яков's avatar
fix    
Яков committed
509
    selectable: true
510
});
yakoff94's avatar
yakoff94 committed
511
512

export default ResizableImageExtension;