Node selected only by triple click

1

Hi, I have a strange behavior when selecting a node. When I click once on a node, it is not selected, but the node is selected in one of the following cases:

  • triple click on a node
  • clicking with pressed ctrl
  • when moving a node (drag event)

Figure schema:

{
    content: 'caption',
    selectable: true,
    draggable: true,
    group: 'block',
    isolating: true,
    resizable: true,
    attrs: {
      position: { default: 'left' },
      width: { default: null },
      src: {},
    },
    parseDOM: [{
      tag: 'figure.rte-figure',
      getAttrs(dom) {
        const img = dom.querySelector('img');
        const width = dom.style.width || null;

        return {
          position: dom && dom.getAttribute('position') || 'left',
          src: img && img.src,
          width,
        };
      }
    }],
    toDOM(node) {
      const width = node.attrs.width || '';

      return ['figure', {
        style: `width: ${width}`,
        class: `rte-figure rte-figure--${node.attrs.position}`,
        position: node.attrs.position,
      }, ['img', {
        src: node.attrs.src,
        class: 'rte-media',
        style: 'width: 100%',
      }]];
    },
  }

Caption schema:

{
    content: 'inline*',
    parseDOM: [{
      tag: 'figcaption',
    }],
    toDOM() {
      return ['figcaption', 0];
    }
  }

Figure has a contentDOM property where the caption node is inserted.

Thanks in advance for any possible solutions to this problem.

2

It has content, which disables the default select-on-click behavior because the user may be clicking in the content. You’ll have to add your own event handler that checks where the click happens and implements the selection for a node like that.

3

Thanks, this solved my problem. But I noticed another, strange behavior. I have update method:

update(node, decorations) {
    if (this.props.node.type != node.type) {
      return false;
    } else {
      this.props.node = node;
      this.props.decorations = decorations;
      return true;
    }
  }

The essence of the problem is that when true is returned from update, the entire node is still deleted and re-rendered. In my understanding, when update returns true the node should not be removed and re-rendered.

4

If you can reduce that to a minimal example script, I can take a look.