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

[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;

[aptjoshua]

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