Changing custom attribute of <img> via extend on Image-extension will trigger reload of image and loss of selection `

[martinmolema]

Hi,
I am using TipTap in Angular 19 (supported by ngx-tiptap). I have created an extension of the Image so I can style the image and upload it using a custom upload function. I created a toolbar that can show popups using some basic self-written popup-system.

The problem is that if I set the float-attribute or any other custom style attribute, two things happen:

1. the image is reloaded
2. the focus is lost

The first isn't that great an issue, because a proper browser will get it from the cache. I just noticed it because I have 'disable cache' enabled in the Chrome Developer tools. Now I have noticed that if I select an image in the Chrome developer console and set the 'SRC' attribute to the same value it already is, then the image is reloaded. So here lies part of the problem.

The second one ruins my GUI: because temporarily there is no image selected, the popups I display disappear. This is annoying because one of the popups enables the user to enter values for e.g. border, margin or padding. Now everytime I change the value, the images is reloaded, the selection disappears and the popup disappears.

Now, I can run a command to immediately restore the selection afterwards (see code below), but the 'onSelectionChange' lifecycle hook of the editor was already executed.
this.editor.chain().focus().setNodeSelection(this.editor.view.state.selection.anchor).run();

I could do some save-state of my toolbar and restore it after the image was updated, but I already tried to restore the focus to the input-element for e.g. the margin, padding or border and I cannot make the browser return the focus. Probably because there are timing problems: I want to restore the focus to a control that was hidden because the popup is not yet restored.....

Any help would be greatly appreciated.

Here is my code. First the function that creates a new extension

export const ImageUploadExtension = Image.extend<ImageUploadOptions>({
  addOptions() {

    return {
      ...this.parent?.(),
      inline: true,
      uploadFn: (file: File) => Promise.resolve(''), // Override this function with your upload logic
    };
  },

  addAttributes() {
    return {
      ...this.parent?.(),
      float: {
        default: 'none',
        parseHTML: (element) => element.style.float || 'none',
        renderHTML: (attributes) => {
          return {style: `float:${attributes.float}`}
        }
      },
    };
  },

  inline() {
    return this.options.inline
  },

  group() {
    return this.options.inline ? 'inline' : 'block'
  },


  addProseMirrorPlugins() {
    return [
      new Plugin({
        props: {
          handlePaste: (view, event) => {
            const clipboardData = event.clipboardData as DataTransfer;
            const items = clipboardData?.items as DataTransferItemList;

            if (items) {
              for (let i = 0; i < items.length; i++) {
                const item = items[i];
                if (item.type.startsWith('image/')) {
                  const file = item.getAsFile();
                  if (file) {
                    // Upload het bestand en voeg het in de editor in
                    this.options.uploadFn(file).then((url: string) => {
                      view.dispatch(
                        view.state.tr.replaceSelectionWith(
                          this.type.create({src: url})
                        )
                      );
                    });
                    return true; // prevent standard browser behaviour
                  }
                }
              }
            }
            return false; // allow browser standard behaviour for non-images
          },
        },
      }),
    ];
  },
});

In my Angular component that embeds the tiptap-editor-component I have this function:

  updateImageFloat(float: string): void {
    if (this.selectedImageStyle && this.selectedImageNode) {
      this.editor.commands.updateAttributes('image', { float: float }
      );
    }
  }

The HTML for the popup looks like this:

@if (popupImageStyleFloat.visible && selectedImageStyle) {
    <div class="popup popup-image-styles-float vertical"
         [style.top.px]="popupImageStyleFloat.top"
         [style.left.px]="popupImageStyleFloat.left">
        <button [class.active]="selectedImageStyle.float ==='none'"
                (click)="updateImageFloat('none')">
            <mat-icon>image</mat-icon>
        </button>
        <button [class.active]="selectedImageStyle.float ==='left'"
                (click)="updateImageFloat('left')">
            <mat-icon>format_align_left</mat-icon>
        </button>
        <button [class.active]="selectedImageStyle.float ==='right'"
                (click)="updateImageFloat('right')">
            <mat-icon>format_align_right</mat-icon>
        </button>
    </div>
}

To detect if an image is selected I use the 'onSelectionUpdate' property of the editor:

      onSelectionUpdate: () => {
        this.selectionHasChanged();
      }

This will in turn call a function that (amongst other things) does this: It will call the 'hide()' function of all popups that are related to the selected image. The console.log is appearing twice in the log, even if I immediately restore the focus to the selected image.

if (this.editor.isActive('image')) {
      this.getSelectedImage();
    }
    else {
      console.log(`Closing all image popups`);
      [
        this.popupImageStyleBoxShadow,
        this.popupImageStyleBorder,
        this.popupImageStyleFloat,
        this.popupImageStyleMarginPadding
      ].forEach((element) => {element.hide(); })
    }

Please find below the installed extensions

    "@angular/animations": "^19.0.5",
    "@angular/cdk": "^19.0.4",
    "@angular/common": "^19.0.5",
    "@angular/compiler": "^19.0.5",
    "@angular/core": "^19.0.5",
    "@angular/forms": "^19.0.5",
    "@angular/material": "^19.0.4",
    "@angular/material-moment-adapter": "^19.0.4",
    "@angular/platform-browser": "^19.0.5",
    "@angular/platform-browser-dynamic": "^19.0.5",
    "@angular/router": "^19.0.5",
    "@tiptap/core": "^2.11.0",
    "@tiptap/extension-blockquote": "^2.11.0",
    "@tiptap/extension-bullet-list": "^2.11.0",
    "@tiptap/extension-code-block": "^2.11.0",
    "@tiptap/extension-code-block-lowlight": "^2.11.0",
    "@tiptap/extension-color": "^2.11.0",
    "@tiptap/extension-font-family": "^2.11.0",
    "@tiptap/extension-highlight": "^2.11.0",
    "@tiptap/extension-image": "^2.11.0",
    "@tiptap/extension-link": "^2.11.0",
    "@tiptap/extension-list-item": "^2.11.0",
    "@tiptap/extension-mention": "^2.11.0",
    "@tiptap/extension-subscript": "^2.11.0",
    "@tiptap/extension-superscript": "^2.11.0",
    "@tiptap/extension-table": "^2.11.0",
    "@tiptap/extension-table-cell": "^2.11.0",
    "@tiptap/extension-table-header": "^2.11.0",
    "@tiptap/extension-table-row": "^2.11.0",
    "@tiptap/extension-text-align": "^2.11.0",
    "@tiptap/extension-text-style": "^2.11.0",
    "@tiptap/starter-kit": "^2.11.0",
    "@tiptap/suggestion": "^2.11.0",
    "highlight.js": "^11.11.1",
    "lowlight": "^3.3.0",
    "moment": "^2.29.3",
    "ngx-tiptap": "^12.0.0",
    "process": "^0.11.10",
    "rxjs": "~7.4.0",
    "tslib": "^2.4.0",
    "xlsx": "^0.18.5",
    "zone.js": "~0.15.0"

[nperez0111]

It is a little difficult to understand if this is your issue exactly, but my best interpretation is that because updateAttributes changes the selection, you are seeing unwanted selection events?

It would probably be ideal to change updateAttributes to not mess with selections, but technically this can change behavior of existing commands, so I think we can only change this for the next major version.

In your case, though, I think that you can probably use something like this instead:

    const originalSelection = this.editor.state.selection

    this.editor.chain().updateAttributes('image', { float: float }).command(({ tr }) => {
      tr.setSelection(originalSelection)
      return true
    }).run()

This should run all the transactions in one cycle, and should:

• maintain focus on the editor (since that seemed to be what you wanted)
• update the image to have the new float attribute
• restore the selection to what it was before, this should have the side effect of not triggering any selection update events as the previous selection and the new one should be equal

I hope this was helpful, if not, could you include a screen recording to better understand the context of what you are seeing

[martinmolema]

Please find attached a video to show the way it works now. The popups on the right in the toolbar get closed because momentarily the selection changes. (this is the situation before using your suggested code).

TipTapEditor.-.selection.change-2025-01-05_19.21.20.mp4

[nperez0111]

Ah, yea, we would also need to map the selection to the new document since the selection may point to different positions (since it is a different document after updating the attributes)

    const oldSelection = this.state.selection

    this.chain().command(({ tr }) => {
      tr.setSelection(oldSelection.map(tr.doc, tr.mapping))
      return true
    })

[martinmolema]

Ok, so how would I fit the updateAttributes('image', { float: float }) part in your last code?

[nperez0111]

The same way, the command was the only thing that was different:

    const originalSelection = this.editor.state.selection

    this.editor.chain().updateAttributes('image', { float: float }).command(({ tr }) => {
      tr.setSelection(oldSelection.map(tr.doc, tr.mapping))
      return true
    }).run()

[martinmolema]

I tried this but still I can see the editor.onSelectionChange() function being called.