Extra empty-nodes are created every time

1

I created a node that containes meta Image and description of a link.

const CustomNode = {
  inline: true,
  attrs: {
    src: {},
    width: { default: '100%' },
    alt: { default: null },
    title: { default: null },
    textContent: { default: '' },
    imgUrl: { default: '' },
  },
  group: 'inline',
  parseDOM: [
    {
      priority: 51,
      tag: 'div[src][title][textContent][imgUrl]',
      getAttrs(dom) {
        return {
          src: dom.getAttribute('src'),
          title: dom.getAttribute('title'),
          textContent: dom.getAttribute('textContent'),
          imgUrl: dom.getAttribute('imgUrl'),
        };
      },
    },
  ],

  toDOM(node) {
    const attrs = {
      style: `
        display: flex; 
        justify-content: flex-start;
        padding: 1.5rem; 
        border-radius: 15px;
        background-color: #f1f1f1;
        overflow: hidden;
        margin: 1rem 0;
        `,
    };
    const imgAttrs = {
      src: node.attrs.imgUrl,
      width: '100px',
      height: '100px',
      style:
        'margin: 1rem; object-fit: cover; margin-right: 2rem; width: 100px; height: 100px; ',
    };

    const aAttrs = {
      href: node.attrs.src,
      target: '_blank',
      rel: 'noopener',
    };

    return [
      'div',
      [
        'a',
        { ...aAttrs },
        [
          'div',
          { ...node.attrs, ...attrs },
          ['img', { ...imgAttrs }],
          ['span', node.attrs.title + '\n' + node.attrs.textContent],
        ],
      ],
    ];
  },
};

I save the content from the editor as HTML by using DOMSerializer.

Every time I parse the HTML in the editor, new empty nodes are created above and below this CustomNode.

Is this the right way to create a node? What can I do to avoid those extra empty nodes?

Also currently after serializing, I’m replacing empty p tags with <p>&nbsp;</p> which might not be the right way. to save those spaces, what can I do to preserve those breaks?

Thanks!

2

I guess it might help to target the outer node created by toDOM in your parseDOM rule (possibly by giving it an extra class or attribute).

3

I changed the toDOM to

 return [
      'div',
      { ...node.attrs},
      [
        'a',
        {  ...attrs, ...aAttrs },
        ['img', { ...imgAttrs }],
        ['span', node.attrs.title + '\n' + node.attrs.textContent],
      ],
    ];

But still new empty nodes are created above and below the node.

Thanks!

4

Every time I come back to editor with this content, new empty nodes are create above and below the CustomNode.

5

Ah! it is solved. Instead of inline converted it to block.

isBlock to true and group is block

Thanks!