Parsing HTML in prosemirror

1

As I tried to play with the basic example, when i copy a bullet list with ‘ul’ and ‘li’ from other website and paste it in the editor, prosemirror can detect and convert the list to bullet list node and list item nodes. But when I tried to on my own project, this isn’t working all the list content just lies into the same paragraph. Is this because of wrong schema definition? Are there any other factor that could affect this behaviour? Below is my schema for list, any help would be great, Thanks

bullet_list: {
  group: 'block',
  content: 'list_item+',
  parseDOM: [
    {
      tag: 'ul'
    }
  ]
}

ordered_list: {
    group: 'block',
    content: 'list_item+',
    attrs: { order: { default: 1 } },
    parseDOM: [
      {
        tag: 'ol',
        getAttrs(dom: any) {
          return { order: dom.hasAttribute('start') ? +dom.getAttribute('start') : 1 }
        }
      }
    ]
 }

list_item: {
    content: 'paragraph block*',
    defining: true,
    parseDOM: [
      {
        tag: 'li'
      }
    ]
}
2

After some works of finding the problem, I discovered that it may be related to my node view. When I stop using node views , just render the nodes using the toDOM function and try to copy 2 paragraphs from other websites, the editor can recognize it as 2 paragraph nodes.

If i switch back using node view (i use vueJS for the node view component), it could only works if my template contains only a single “p” element (nothing else). In the node view class, I have to set dom and contentDOM pointing both to the single “p” element.

However if there is any elements between dom and contentDOM such as the following structure:

<div class="dom"> 
   <div contenteditable="false">
     <h1> This s h1
   </div>
   <div>
     <p class"content_dom">
   </div>
</div>

With this structure, if set the dom = element with class “dom” and contentDOM = element with class “content_dom”, when i copy a paragraph from other website and paste it on my editor, nothing will happen. the paragraph is kept empty

I wonder should i expect this behavior or did I misuse anything? It would be great if someone can help, thanks

3

In principle, node views shouldn’t be involved at all when parsing content from the clipboard—the editor will run DOMParser.fromSchema(yourSchema) on the pasted HTML. So the relevant thing is the parseDOM specs in your schema, which look fine. As such, I can’t really explain what you’re seeing. If you can reduce it to the most minimal code that triggers the issue, I can take a look.