Avoid copy of partial node

Hi there. I’m currently having a problem with the copy/paste-functionality. I have a Custom-Node, which contains multiple custom-nodes.

The structure looks like this:

  • Custom-Node-Wrapper
    • custom-node-content
    • custom-node-footer

I display the footer, which contains some buttons, only when the cursor is inside the node. But when i start selecting content and select my custom-node only partially, only the footer for example, it just copies the footer, which i don’t want to exist alone. is there a way to kick this from the clipboard or avoid selecting this content at all?

Any help on this would be great.

If I understand the problem correctly (your node’s toDOM renders the footer, and thus it is visible when you paste it into a non-prosemirror editor), you should be able to avoid this by creating a custom serializer that only renders actual content, without editing controls, and passing that as clipboard serializer.

Your guess was close, sorry for the missing info. I’m trying to copy from the editor and paste it inside it again. Not paste it outside of prosemirror.

I tried to handle the handleDOMEvents -> paste-event inside a plugin and was hoping I’m able to remove the unwanted nodes there. Is this a proper way to do it?

If the serializer is a better way to achieve this, can you tell me where i put the implement for it? In the node-extension, a plugin or a separated file? An example for this would be amazing, if existing :slight_smile:

The easiest way to do this would be to make the toDOM method on the node spec render only the content, and define a node view in some plugin that renders the extra interface elements. Alternatively, something like this could create a DOMSerializer with some rule replaced:

let base = DOMSerializer.fromSchema(schema)
let clipboardSerializer = new DOMSerializer(Object.assign({}, base.nodes, {
  mycustomnode(node) { return ["div", 0] }
}), base.marks)
1 Like