Paste paragraph containing br

#1

Hello, Prosemirror community.

I’m working on Copy / Paste feature, and here’s the problem now I ran into. If I try to paste html like this,

<p>
  text
  <br>
  text
</p>

It’s rendered like this in Prosemirror,

<p>
  textext
</p>

and this is what I want it to be

<p>
  text
</p>
<p>
  text
</p>

In other words, I want to split paragraph from where break(br) tag be when copy paste html.

I used preserveWhitespace option, hard_break schema, but non of them work. Any Idea to solve this problem? Thanks.

#2

Making a <br> node start a new paragraph isn’t something that the DOMParser can currently do—you can of course make it insert any node in its place, for example a hard_break node, as I guess you found out, but there’s no way for a parse rule to force the current parent node to be closed.

That might be a good thing to add to the library, but I’m not sure when I’ll have time to work on that.

2 Likes
#3

Thanks for your quick reply. So there’s no option for parseRule to split or close parent Node…

At the end I added simple logic in transformPastedHTML (DirectEditorProps).

transformPastedHTML: (html: string) => {
  return html.replace(/<br[^>]*>/g, '</p><p>')
}

This is not a complete solution but can bypass the problem in some case. It would be great parseRule can accept option.

/* Suggestion */

{
  tag: 'p',
  breakPoint: [
    { tag: 'br' },
  ],
  ... // other options
}
#4

Could you see if this patch works for you?

#5

Sorry for late check. I really appreciate for your work.

But I don’t figure out how to use that option. I set schema like below and try to paste html content, but paragraph is not closed.

const schema = {
  paragraph: {
    content: 'inline*',
    group: 'block',
    parseDOM: [
      { tag: 'p' },
      { tag: 'br', closeParent: true },
    ],
  },
... // toDOM, etc
}

<p>content<br>content<p> -> <p>contentcontent</p>

Is it a wrong place to set closeParent option?

+) I used prosemirror-model@1.10.0

#6

See the test in the patch I linked. You can’t add such a rule to a schema node spec, since it’s not creating any nodes. You have to manually create your DOMParser to include the rule.

1 Like