Inserted custom block nodes don't influence on selection

1

I have such custom block node schema:

const imageNodeSpec = {
  attrs: {
    src: {},
    alt: {
      default: null
    }
  },
  inline: false,
  group: 'block',
  draggable: true,
  parseDOM: [{
    tag: 'div[image-with-description]',
    getAttrs(dom) {
      const image = dom.querySelector('img[src]');
      return {
        src: image.getAttribute('src'),
        alt: image.getAttribute('alt')
      };
    }
  }],
  toDOM(node) {
    return [
      'div',
      {
        class: 'image-with-description-container',
        'image-with-description': true
      },
      [
        'img',
        {
          ...node.attrs,
          class: 'image'
        },
      ],
      [
        'p',
        {
          class: 'image-description'
        },
        node.attrs.alt
      ]
    ];
  }
};

It’s an image with description under it.

Each insertion of this node is occurred at the beginning.

If editor is empty and we insert such nodes then each time we will have position index 1.

Insertion is occured this way:

        const tr = view.state.tr;
        if (!tr.selection.empty) {
          tr.deleteSelection();
        }
        view.dispatch(tr.replaceSelectionWith(type.createAndFill({
          ...attributes,
          src: image.url
        })));
2

Since your schema probably doesn’t allow a completely empty document, what does the document look like after you run that command? And where did you expect the selection to be?

3

After I inserted my custom node I have cursor after inserted element, but in state of editor it’s before inserted element. I can increment it on 1 in debug mode (when I insert second node, if I insert 3rd node I should increment on 2 and so on) and new node will be inserted in correct place.

I don’t know how to show my document so there is screenshot :slight_smile:

31
Снимок экрана 2018-08-01 в 15.25.31.png943×232 40.9 KB

There are two custom nodes in a paragraph element.

And each time selection position will be 1 if I insert new nodes.

4

I think I found the problem: when I click on dropdown item in menu to upload image it focuses on the first element in editor and inserts here new node (sometimes replaces the 1st node).

Updated: No, I made mistake, it’s still not working.

5

How come the images are rendered inside a paragraph in the DOM, though they are block nodes? That seems suspicious.

To look at the actual document, you can run view.state.doc.toString().

6

It’s a document with two custom nodes:

"doc(image, image, paragraph)"

image - name of my custom node.

The last paragraph it’s an empty line.

7

I think the problem was in my application it was refreshing the editor and changing cursor position. I fixed it and nodes are inserted correctly now.

Thanks for your answers :slight_smile: