Lit element templates containing newlines will be rendered with the new lines

[eric-burel]

Prosemirror will render custom elements in a literal fashion, with newlines displayed. I didn't get how you can install a new package in a Glitch but here is my attempt: https://glitch.com/edit/#!/panoramic-busy-roadrunner

Reproduction step:

• create a Lit element, with newlines within the template (as if you were formatting normal HTML)
• Use this element into any "toDOM" method
• It renders with the spaces

Not sure yet what is specific to prosemirror that could explain this behaviour.

Example component:

class SimpleGreeting extends LitElement {
  constructor() {
    super();
    this.name = 'Somebody';
  }

  render() {
    return html`<span>
        Hello, 

        ${this.name}!

        <slot></slot>
        </span>`;
  }
}
customElements.define('simple-greeting', SimpleGreeting);

[marijnh]

Where did you find that Glitch link? That website is super broken (it's not loading for me again in Firefox) and I regret ever having had them in the docs.

In general, I'd say just don't use Lit, or any other method of creating HTML that adds whitespace, in your toDOM. You don't need web components for your paragraphs, and this problem you are showing shouldn't exist for widgets or atom nodes. The array notation ProseMirror supports in toDOM return values should be plenty succinct already.

[eric-burel]

The Glitch link is from the issue template, let me know if we can figure an easier setup (we use prosemirror in a professional setup with pretty advanced features so we hope to bring more back contributions in the future), I've add a pleasurable experience with Codesandbox for instance. Agreed Glitch is not very good...

The web component is a datapill that will fetch fresh data based on a reference id, and provide a few complex interaction and a rich UI, so using just a NodeView with a totally imperative approach here would be doable but it's almost has having a completely independant workflow to create UI component, which I'd like to avoid (that would make 4 ways to create components in our app...).

The relevant logic is in prosemirror-model/src/to_dom.ts right if we want to dig deeper? Perhaps we can hack something at Lit level or bundle level, will ask Lit devs

[marijnh]

The Glitch link is from the issue template

Ahh, I forgot I had that there. Literally any other online sandbox tends to work better.

toDOM is expected to render stuff without extra whitespace, since it's output is going to be parsed in a whitespace-preserving way, that's just how the library works, and not a bug.

[eric-burel]

No problem, I'll try my luck at Lit: https://github.com/lit/lit/issues/3941

In a way, I wonder if Lit should preserve those newlines in the first place, after all they don't exist in an imperative setup and only appear because we happen to declare the DOM. I wonder if React would give the same issue, I suspect not as you have to explicitly mark spaces with {" "} when you want some after an element.