Inquiries about nodeView DND

1

When a nodeView is dropped, a new nodeView is created,
Is there a way to not create a new one?

class ImageView {
  constructor(node, view, getPos) {
    console.log('>>>>>>>>constructor');

    this.node = node;
    this.view = view;
    this.getPos = getPos;

    this.dom = document.createElement('img');
    this.dom.src = node.attrs.src;
    this.dom.style.border = '1px solid red';
  }

  update(node) {
    console.log('>>>>>>>>update');
    if (!node.sameMarkup(this.node)) return false;

    this.node = node;

    return true;
  }
}


window.view = new EditorView(document.querySelector("#editor"), {
  state: EditorState.create({
    doc: DOMParser.fromSchema(mySchema).parse(document.querySelector("#content")),
    plugins: exampleSetup({schema: mySchema})
  }),
  nodeViews: {
    image(node, view, getPos) {
      return new ImageView(node, view, getPos);
    }
  }
})

// console

// When ImageView is moved by dragging..
>>>>>>>>constructor

// When ImageView is moved by dragging..
>>>>>>>>constructor

image
image668×606 35.2 KB

image
image906×174 5.56 KB

I want to know how to keep the DOM without creating it every time I move it.
(The purpose is to avoid reloading the image.)
And is it possible to catch drag and drop events in ImageView?
please help me…

2

Not on the ProseMirror side, no. You may be able to set up your node view to somehow reuse the DOM node, but as far as the editor is concerned it is creating a new node here.

1 Like
3

I see. Thanks for your reply.