HTMLAttributes not getting attached to angular component

[abecirovic3]

Hi,
I have encountered an issue with HTML attributes and custom node views. I'm not sure if this is a bug or just me not understanding how things work, but I would appreciate any help.
So this is my extension

import { Injector } from '@angular/core';
import { Node, mergeAttributes } from '@tiptap/core';
import { AngularNodeViewRenderer } from 'ngx-tiptap';

import { ImageWrapperComponent } from '../components/image-wrapper/image-wrapper.component';

const ImageWrapper = (injector: Injector): Node => {
  return Node.create({
    name: 'imageWrapper',
    group: 'imageWrapper',
    content: 'image',
    draggable: false,
    selectable: false,
    inline: false,

    addAttributes() {
      return {
        width: {
          default: null,
          parseHTML: (element) => {
            const width = element.getAttribute('width');
            const value = width ? parseInt(width, 10) : null;
            return value;
          },
          renderHTML: (attributes) => {
            if (!attributes['width']) {
              return {};
            }
            console.log('RENDER HTML ', attributes['width']); // gets correct width
            return {
              width: attributes['width'],
              style: `flex: 0; min-width: ${attributes['width']}px;`,
            };
          },
        },
      };
    },
    parseHTML() {
      return [{ tag: 'image-wrapper' }];
    },
    renderHTML({ HTMLAttributes }) {
      console.log(HTMLAttributes); // I get for example {width: 920, style: "flex: 0; min-width: 920px;"}
      return ['image-wrapper', HTMLAttributes, 0];
    },
    addNodeView() {
      return AngularNodeViewRenderer(ImageWrapperComponent, { injector });
    },
  });
};

export default ImageWrapper;

Although the renderHTML methods get correct values for the attributes, none of the attributes is added to the HTML element.
Is this maybe angular related or something? If I do it via JS for example el.setAttribute(...) the attribute will get attached to the element.
As said any help or guidance will be appreciated.
Thanks in advance.

[sibiraj-s]

Sorry for the delay. I missed this one.

I don't think this is a problem with this package. The renderer doesn't interfere with the DOM created, but rather has its own wrapper. Can you check if this extension works with just tiptap without angular?

[CondensedMilk7]

I have come across the same issue. Interestingly, when I remove addNodeView and use the default nodeview instead of AngularNodeviewRenderer the attributes are present in HTML. I suspect this package is the culprit.

[abecirovic3]

Sorry for my late reply, so I haven't spent much time figuring out how to do it purely within the extension since we have access to all the attributes with this.node.attrs within the component.
So for example in my component's template, I can write something like this

<div [attr.data-width]="node.attrs['width'] || 0">
 // rest of the template
</div>

Since this was enough for me I haven't really bothered implementing it differently.

[CondensedMilk7]

Thank you for this example, this will work for my intents and purposes as well, but I'll still try and report back if I find a better way.

[sibiraj-s]

Hi, Thanks for the updates. I see that there might be an issue here, but currently I am finding it hard to spend time here as there are some personal stuffs I have to deal with. I will revisit this eventually, In the meantime

A PR is welcome.