Need help pasting from within editor

1

Hi,

Let’s say I have an editor with 3 p classes: r, g, b, with r as the default class.

Now, if I copy a line, say <p class="b">Test</p> , and paste it in a new line, I expect the new line to be pasted as a paragraph of class b.

However, only the content is pasted while the default p class (r) is used. I get the pasted content as <p class="r">Test</p>

Here is my schema:

const validClasses = ["r", "g", "b"]

const mySchema = new Schema({
  nodes: {
    doc: {
      content: "paragraph+"
    },
    paragraph: {
      attrs: {class: {default: "r"}},
      content:"text*",
      parseDOM: [{tag: "p", getAttrs: dom => {
        let cls = dom.className
        if (validClasses.indexOf(cls) == -1) cls = "r"
        console.log(cls)
        return {class: cls}
      }}],
      toDOM(node) { return ["p", {class: node.attrs.class}, 0] }
    },
    text: {
      toDOM(node) { return node.text }
    }
  }
})

I’m guessing it’s a problem with my ParseDOM, but I fail to understand what it could be.

The log inside the parseDOM does show the pasted class.

Here is a glitch link showing the same example to test

Any help would be much appreciated.

2

Appears to be fixed by using className: instead of class: for the attr key. Not sure if that’s a ProseMirror thing or a JS thing or something else entirely.

3

Hey @astevenson, thanks for your reply.

I tried out what you said, with my schema now looking like this:

const mySchema = new Schema({
  nodes: {
    doc: {
      content: "paragraph+"
    },
    paragraph: {
      attrs: {className: {default: "r"}},
      content:"text*",
      parseDOM: [{tag: "p", getAttrs: dom => {
        let cls = dom.className
        if (validClasses.indexOf(cls) == -1) cls = "r"
        console.log(cls)
        return {className: cls}
      }}],
      toDOM(node) { return ["p", {class: node.attrs.className}, 0] }
    },
    text: {
      toDOM(node) { return node.text }
    }
  }
})

However, that did not change anything and I am still getting the undesired behaviour.

4

Signed up here just now to ask this same question!

My schema is a node spec for a link with a data attribute and a class attribute, but when you cut/copy and paste within the editor these attributes are lost (they are not set to defaults as in @Mansehej’s post, they are just completely missing). The href attribute comes through correctly.

Here’s the node spec:

const wikiLinkNodeSpec = {
  attrs: {
    noteId: { default: 0 },
    noteTitle: { default: "Untitled" },
  },
  inline: true,
  group: "inline",
  draggable: true,
  toDOM: node => ["a", {"href": `/notes/${node.attrs.noteId}`,
                        "data-wikilink": node.attrs.noteId,
                         class: "blah blah" },
                  node.attrs.noteTitle],
  parseDOM: [{
    tag: "a[data-wikilink]",
    getAttrs: dom => {
      let noteId = parseInt(dom.getAttribute("data-wikilink"))
      let noteTitle = dom.innerText
      return {noteId, noteTitle }
    }
  }]
}

Not sure what’s going on here as this is written pretty much identically as the dino example, which does maintain the extra attributes through cut+paste.

Any help understanding this would be greatly appreciated

EDIT: this is basically done in the prosemirror-example-setup

Dan

1 Like
5

AHH fixed it (although this doesn’t fix @Mansehej’s problem, so please help him out).

Forgot that there was a mark in the schema for “a” tags as well, and that was parsing with higher priority than this wikilink node spec, when the content was pasted.

So now it seems a little strange that they were parsing correctly when the initial content was assigned to the editor. Perhaps whether nodes or marks are parsed first is non-deterministic?

6

Good to hear that your problem was fixed, @pyrrho.

Any suggestions for my issue, @marijn?

Any help would be greatly appreciated.

7

Have you tried setting the defining property on your paragraph node spec?

8

Yes, that worked! Thanks a lot for your help!