Avoid copy of partial node


#1

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.


#2

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.


#3

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:


#4

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)