Image Resizes to Full Width on Insertion

[goldwizard13]

Hi there,

I'm using the tiptap-extension-resize-image (version 1.1.8) in my Tiptap editor, and I've encountered an issue where images are automatically stretched to the full width of the screen upon insertion. I would like to have the ability to insert images at their original dimensions and add custom styles to them.

Here are the details:

Extension Version: tiptap-extension-resize-image v1.1.8
Current Behavior: When an image is inserted, it automatically resizes to the full width of the editor. The style applied is width: 100%; height: auto;.
Desired Behavior: I want the inserted images to retain their original dimensions. Additionally, I need to be able to specify custom styles for the images upon insertion.

I've tried configuring the extension with options such as defaultStyle and handleStyles, but they do not seem to affect the behavior of the inserted images. Here is what I attempted:

javascript

ImageResize.configure({ handleStyles: { left: 'left: -4px; top: 50%; transform: translate(-50%, -50%); cursor: ew-resize;', right: 'right: -4px; top: 50%; transform: translate(50%, -50%); cursor: ew-resize;', top: 'top: -4px; left: 50%; transform: translate(-50%, -50%); cursor: ns-resize;', bottom: 'bottom: -4px; left: 50%; transform: translate(-50%, 50%); cursor: ns-resize;', }, resizable: { enabled: true, }, defaultStyle: { width: 'auto', height: 'auto', }, });

Unfortunately, this configuration does not seem to solve the issue.

Could you please provide guidance on how to achieve the desired behavior, or if there are any updates or additional options available that could help with this problem?

Thank you for your assistance!

[Luis17Paiva]

I had the same problem and managed to solve it in the following way: `onDrop: (currentEditor, files, pos) => { files.forEach(file => { if (file.size > 2 1024 1024) {
alert("The file size exceeds the 2MB limit"); return; } const fileReader = new FileReader(); fileReader.readAsDataURL(file); fileReader.onload = () => { const img = document.createElement("img"); img.src = fileReader.result as string;

                    img.onload = () => {
                        const width = img.naturalWidth;
                        const height = img.naturalHeight;

                        currentEditor.chain().insertContentAt(pos, {
                            type: "image",
                            attrs: {
                                src: fileReader.result,
                                width: width,  
                                height: height,  
                                style: "width: auto; height: auto;", 
                            },
                        }).focus().run();
                    };
                };
            });
        },`

[bae-sh]

Hi, @goldwizard13

I’ve implemented this based on the Tiptap image extension. If the img tag contains width or height attributes, the image will be inserted with those dimensions. However, if no size is provided, Tiptap will apply the 100% width.

This is the behavior of Tiptap, not my custom implementation. That said, I recommend including size attributes in the img tag or using the insertContentAt method, as @Luis17Paiva suggested.

If you have any further questions, feel free to reach out! Thanks!