Wrapping text around an image

[Sim0nRoden]

Hi, im working on a dynamic website that has the tiptap editor as main way to add content to the pages.

One problem that I'm facing is that I want the possibility to have images wrapped by text. If possible with freely movable images but at least left/right/centre. So far I was unable to create a working version of this and I'm out of Ideas.

I made a quick (exaugurated) Mockup of what this should look like in Word which is attached below.
Thanks in advance for the help!

[nperez0111]

You are looking for the inline option: https://tiptap.dev/docs/editor/extensions/nodes/image#inline, you'll need another property for setting the alignment like https://tiptap.dev/docs/editor/extensions/functionality/textalign

[aptjoshua]

I'm struggling to understand how this is implemented. I'd love to be able to wordwrap text around images.

[Judge-Paul]

@aptjoshua same, figure it out yet?

[mohd-riaz]

Im also using an image resize extension "tiptap-extension-resize-image". is it possible to make it work with the resize extension too? cuz rn it only works without resize extension

[phongkhuu115]

@mohd-riaz have you ever figured this out, i'm having the same issue

[mohd-riaz]

Hey! i kind of did. Firstly you need to configure the image extension and set inline to true. Then you need to extend the image resize extension to allow for custom classes:

import ImageResize from "tiptap-extension-resize-image";

export const CustomImageResize = ImageResize.extend({
  addAttributes() {
    return {
      ...this.parent?.(),
      class: {
        default: "float-none",
        parseHTML: (element) => element.getAttribute("class"),
        renderHTML: (attributes) => {
          return attributes.class ? { class: attributes.class } : {};
        },
      },
    };
  },
}).configure({
  inline: true,
});

Add this extension to your editor after the image extension.

Finally, in your globals.css add these:

.ProseMirror p div:has(.float-left) {
  float: left;
  margin-right: 5px;
}

.ProseMirror p div:has(.float-right) {
  float: right;
  margin-left: 5px;
}

.ProseMirror p div:has(.float-none) {
  float: none;
  margin: 0;
}

Ofcourse you can alter the classes to your liking.

Now to switch between the classes you need to update the class attribute:

editor?.chain().updateAttributes("image", { class: "float-none"}).run()

You can set the class to either float-none, float-right or float-left. So maybe you can put the update function as a onclick and that should change the float of the selected image. By default it's float-none but you can change that in the extension code too. This took some time to figure out so i hope it helps you with whatever you're trying to build! If you have any more questions or need further explanations, ask away!