How I achieved image sizing, and a question about setNode (Low priority)

[joevallender]

Not really a problem, just sharing some code to possible help others, and a quick question about how to improve the implementation.

I needed to add basic image sizing in tiptap2/vue3 and did so by referring to a mixture of the existing code for image, heading, and bubble menu.

Here is a

• working example
• repo
• blog explaining things
• pic :)

Question

My question is about the best way to update the node. The image extension replaces the selection with a new node, and the heading extension runs commands.setNode which appears to be the cleaner options.

setHeading: attributes => ({ commands }) => {
    if (!this.options.levels.includes(attributes.level)) {
        return false
    }
    return commands.setNode('heading', attributes)
},

When setting a size attribute on images, commands.setNode appeared to have no effect. I guessed that maybe a selected image needs to be treated differently to selected text, but I couldn't work it out. When I'm replacing the selection, changing between image sizes isn't as slick as I would like because of the delay in the browser re-drawing the image node. I'm wondering if I can get setNode to work, it might simply update the attributes, and keep things smoother?

If you can clarify, and I can better understand, I'd be happy to work on a more fully featured image extension.

And, thanks for tiptap!

[joevallender]

Ah I can see the image extensions has already been updated to use commands.insertContent instead of the replace selection code from before. I'll come back and try to reflect it in this example soon

[joevallender]

I've updated my example to use insertContent or updateAttributes after tracing setNode through to where it calls setBlockType in ProseMirror, which only operates on text blocks.

https://github.com/joevallender/tiptap2-image-example/blob/main/src/extensions/custom-image-3.js

[zcuric]

@joevallender How would u solve image alignment with text?

[joevallender]

In the same way, I think. Just as I've added size node attribute, which is set in the UI and then used to add a class when rendering HTML, you could add an align not attribute and use it to set another class which, for example, applies a float.

Do you have a particular use case in mind to share?

[joevallender]

Updated example and repo with a suggestion.

[zcuric]

@joevallender I have my own implementation, so I was curious. I have multiple types of bubble menu content depending on the node.

What about image resizing on dragging the image?

[joevallender]

So far I'm using v2 on one project which only requires some preset image sizes, not as a full text/page editor, so I haven't looked into it.

For resizing, I'd probably leverage an existing library invoked based on the image class, and then run equivalent commands on the extensions to set node attributes for width and height in the 'stopped resizing' callback of the library.

[joevallender]

I'd be interested to see your approach if you can link to a repo or example?

[zcuric]

@joevallender Still in progress, but you can check: https://github.com/ExtensionEngine/tce-tiptap/tree/v2

[joevallender]

Ah that's interesting, thanks! I know the documentation is still in progress on tiptap, but this gives me a few ideas :)

[joevallender]

If I build something more complete like this, I'll share it too. I just thought I'd pull out a few references from my quite project-specific code to share

[zcuric]

@joevallender I learned lot from here: https://github.com/Leecason/element-tiptap. My repo for v1 was heavily inspired by this.

[zcuric]

@joevallender when updating attributes I think you should leverage the updateAttributes function:

 this.editor.commands.updateAttributes('image', { size });

Btw, also check this issue when working with images and bubble menu: #1313

[joevallender]

Thanks again. Yep, updateAttributes is what I ended up using in custom-image-3.js above - definitely seems cleaner.

I'd actually noticed issues with bubble menu positioning even without floats on images, but the code I shared was just some (hopefully) helpful snippets for others to read - I wasn't actually using the bubble menu in my project's UI.

However, it would be nice to get to the bottom of it - so I'll look into it too. Thus far I've only been playing with extensions, but this is such a great project, it definitely warrants cloning and playing with :)

[hanspagel]

Thanks for sharing @joevallender!