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

[Sim0nRoden]

Thanks for the reply.
I tried using inline and text alignment before, which resulted in the following issue:

Here the text can only be written on one line next to the image not on the whole side. This example uses the Image extension configured with inline: true
Image.configure({ inline: true })

In this example I used "float: left" in the styling options. This is the closest I've come to solving the issue, although this will only allow text wrap with an image left or right, not anywhere, but I can live with that if there is no better option.
The problem with this is, that the editor does not adjust its height to the image (the bottom border will go straight through the image).
This does not affect the functionality and I can manually add empty lines to it till the border reaches the bottom but this is not that ideal.

      Image.configure({ inline: true }).extend({
        addAttributes() {
          return {
            ...this.parent?.(),
            float: {
              default: 'none',
              renderHTML: () => ({
                style: 'float: left;',
              }),
              parseHTML: (element) => element.style.float || 'none',
            },
          };
        },
      }),

[nperez0111]

@Sim0nRoden yea this is a limitation of web layout in general & float is definitely a good option for this. To get the height to work again, you need an element with clear: both before the end of the editor content.

You can probably do this with a decoration that is positioned as the last element. Or forcing your editor schema to include a last element, though it will show up in your content

[Sim0nRoden]

Hi @nperez0111, sorry for bothering you again.
I tired adding elements that have "clear: both" as styling option but I was unsuccessful so far. I am not that experienced in working with the editor and its plugins. Would you be able to provide an example on how I could add this decorator/element at the last position of the editor?
Thank you very much for the help!!

[nperez0111]

Here is an example of a tiptap extension that adds a Prosemirror decoration that preserves the selection. You can modify this to place a Decoration.widget at the end of a doc (like state.doc.nodeSize - 1) and it can have the element with the clearfix

import { Extension } from '@tiptap/core'
import { Plugin, PluginKey } from '@tiptap/pm/state'
import { Decoration, DecorationSet } from '@tiptap/pm/view'

export type SelectionOptions = {
  /**
   * The class name that should be added to the selected text.
   * @default 'selection'
   * @example 'is-selected'
   */
  className: string
}

/**
 * This extension allows you to add a class to the selected text.
 * @see https://www.tiptap.dev/api/extensions/selection
 */
export const Selection = Extension.create({
  name: 'selection',

  addOptions() {
    return {
      className: 'selection',
    }
  },

  addProseMirrorPlugins() {
    const { editor, options } = this

    return [
      new Plugin({
        key: new PluginKey('selection'),
        props: {
          decorations(state) {
            if (state.selection.empty || editor.isFocused) {
              return null
            }

            return DecorationSet.create(state.doc, [
              Decoration.inline(state.selection.from, state.selection.to, {
                class: options.className,
              }),
            ])
          },
        },
      }),
    ]
  },
})

export default Selection

[Sim0nRoden]

Thank you so much, I just got it to work. Below is the full extension I used for anyone that has the same issue and stumbles across this thread :)

import { Extension } from '@tiptap/core';
import { Plugin, PluginKey } from '@tiptap/pm/state';
import { Decoration, DecorationSet } from '@tiptap/pm/view';

export const ClearfixExtension = Extension.create({
  name: 'clearfix',

  addProseMirrorPlugins() {
    return [
      new Plugin({
        key: new PluginKey('clearfix'),
        props: {
          decorations(state) {
            const endOfDocPosition = state.doc.nodeSize - 2;
            const decoration = Decoration.widget(endOfDocPosition, () => {
              const clearfixElement = document.createElement('div');
              clearfixElement.style.clear = 'both';
              clearfixElement.classList.add('clearfix');
              return clearfixElement;
            });

            return DecorationSet.create(state.doc, [decoration]);
          },
        },
      }),
    ];
  },
});

export default ClearfixExtension;