TasGrid/src/lib/extensions/image.ts

import Image from "@tiptap/extension-image";

export const CustomImage = Image.extend({
    name: "image",

    group: "block",
    selectable: true,
    draggable: true,

    addAttributes() {
        return {
            ...this.parent?.(),
            src: {
                default: null,
            },
            width: {
                default: null,
                parseHTML: element => element.getAttribute('width'),
                renderHTML: attributes => {
                    if (!attributes.width) return {};
                    return { width: attributes.width };
                },
            },
            filename: {
                default: null,
                parseHTML: element => element.getAttribute('data-filename'),
                renderHTML: attributes => {
                    if (!attributes.filename) return {};
                    return { 'data-filename': attributes.filename };
                },
            },
        };
    },

    addCommands() {
        return {
            setImage: (options: { src: string, alt?: string, title?: string, filename?: string }) => ({ commands }) => {
                return commands.insertContent({
                    type: this.name,
                    attrs: options,
                });
            },
        };
    },

    addNodeView() {
        return ({ node, getPos, editor }) => {
            const wrapper = document.createElement('div');
            // Give it position: relative and flex/inline-block to wrap the image tightly
            wrapper.classList.add('image-wrapper', 'relative', 'inline-block', 'my-4', 'group', 'max-w-full');
            wrapper.style.display = 'block'; // Block level to not mess up flow
            wrapper.style.marginInline = 'auto'; // Center if desired, or let it flow
            
            if (node.attrs.width) {
                const w = typeof node.attrs.width === 'number' ? `${node.attrs.width}px` : node.attrs.width;
                wrapper.style.width = w;
            } else {
                wrapper.style.width = 'fit-content';
            }

            const img = document.createElement('img');
            Object.entries(node.attrs).forEach(([key, value]) => {
                if (value !== null && value !== undefined) {
                    if (key === 'filename') {
                        img.setAttribute('data-filename', value);
                    } else {
                        img.setAttribute(key, value);
                    }
                }
            });
            img.classList.add('rounded-lg', 'border', 'border-border', 'max-w-full', 'h-auto', 'cursor-default');
            img.style.width = '100%';

            // Resize handle
            const resizer = document.createElement('div');
            // Adding style.touchAction = 'none' to prevent mobile browser scrolling when dragging
            resizer.style.touchAction = 'none';
            resizer.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white"><path d="m21 21-6-6m6 6v-4.8m0 4.8h-4.8M3 16.2V21m0 0h4.8M3 21l6-6M21 7.8V3m0 0h-4.8M21 3l-6 6M3 7.8V3m0 0h4.8M3 3l6 6"/></svg>';
            resizer.classList.add('absolute', 'bottom-2', 'right-2', 'w-6', 'h-6', 'bg-black/50', 'hover:bg-black/80', 'backdrop-blur-sm', 'cursor-nwse-resize', 'transition-opacity', 'z-20', 'rounded-md', 'flex', 'items-center', 'justify-center', 'shadow-sm');
            resizer.contentEditable = 'false';
            
            let isResizing = false;
            let startX = 0;
            let startWidth = 0;

            const initResize = (clientX: number) => {
                isResizing = true;
                startX = clientX;
                startWidth = wrapper.offsetWidth;
            };

            const doResize = (clientX: number, minW: number) => {
                if (!isResizing) return;
                const dx = clientX - startX;
                const newWidth = Math.max(minW, startWidth + dx);
                wrapper.style.width = `${newWidth}px`;
            };

            const stopResize = () => {
                if (!isResizing) return;
                isResizing = false;
                if (typeof getPos === 'function') {
                    const pos = getPos();
                    if (typeof pos === 'number') {
                        editor.commands.command(({ tr }) => {
                            tr.setNodeMarkup(pos, undefined, {
                                ...node.attrs,
                                width: wrapper.offsetWidth,
                            });
                            return true;
                        });
                    }
                }
            };

            resizer.addEventListener('mousedown', (e) => {
                e.preventDefault();
                e.stopPropagation();
                initResize(e.clientX);
                
                const onMouseMove = (ev: MouseEvent) => {
                    ev.preventDefault();
                    doResize(ev.clientX, 100);
                };
                
                const onMouseUp = (ev: MouseEvent) => {
                    ev.preventDefault();
                    stopResize();
                    document.removeEventListener('mousemove', onMouseMove);
                    document.removeEventListener('mouseup', onMouseUp);
                };
                
                document.addEventListener('mousemove', onMouseMove);
                document.addEventListener('mouseup', onMouseUp);
            });

            resizer.addEventListener('touchstart', (e) => {
                e.preventDefault();
                e.stopPropagation();
                initResize(e.touches[0].clientX);
                
                const onTouchMove = (ev: TouchEvent) => {
                    ev.preventDefault();
                    doResize(ev.touches[0].clientX, 100);
                };
                
                const onTouchEnd = () => {
                    // touchend doesn't have touches[0] usually
                    stopResize();
                    document.removeEventListener('touchmove', onTouchMove);
                    document.removeEventListener('touchend', onTouchEnd);
                    document.removeEventListener('touchcancel', onTouchEnd);
                };
                
                document.addEventListener('touchmove', onTouchMove, { passive: false });
                document.addEventListener('touchend', onTouchEnd);
                document.addEventListener('touchcancel', onTouchEnd);
            }, { passive: false });

            // Delete button overlay
            const overlay = document.createElement('div');
            overlay.classList.add('absolute', 'top-2', 'left-2', 'flex', '[@media(hover:hover)]:hidden', '[@media(hover:hover)]:group-hover:flex', 'bg-background/80', 'backdrop-blur-sm', 'p-1', 'rounded-lg', 'border', 'border-border', 'shadow-sm', 'z-10');

            const deleteBtn = document.createElement('button');
            deleteBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-muted-foreground hover:text-destructive transition-colors"><path d="M3 6h18"></path><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path></svg>';
            deleteBtn.classList.add('p-1', 'cursor-pointer');
            
            deleteBtn.onclick = (e) => {
                e.preventDefault();
                e.stopPropagation();
                if (typeof getPos === 'function') {
                    const pos = getPos();
                    if (typeof pos === 'number') {
                        editor.commands.deleteRange({ from: pos, to: pos + node.nodeSize });
                    }
                }
            };

            overlay.appendChild(deleteBtn);
            wrapper.appendChild(img);
            wrapper.appendChild(resizer);
            wrapper.appendChild(overlay);

            return {
                dom: wrapper,
                stopEvent: () => true,
                ignoreMutation: () => true,
            };
        };
    },
});

// @ts-ignore
declare module '@tiptap/core' {
    interface Commands<ReturnType> {
        // @ts-ignore
        image: {
            setImage: (options: { src: string, alt?: string, title?: string, filename?: string }) => ReturnType;
        };
    }
}