Propose function to unwrap breaks

[Andy Neale]

When using HTML and you press enter twice contenteditable outputs

When
should suffice

I would like to propose a small improvement

function unwrapBreaks(innerHTML: string) {
    return innerHTML.replaceAll('<div><br></div>', '<br />');
}

Then change (I think this is the correct place to do this)

function currentContent() {
    return props.noHtml
      ? element.value!.innerText
      : element.value!.innerHTML;
}

to

function currentContent() {
    return props.noHtml
      ? element.value!.innerText
      : unwrapBreaks(element.value!.innerHTML); 
}

This will remove the div's wrapping around breaks.

[Léo Flaventin Hauchecorne]

Hi,
I am very sorry for the late answer, I was busy like hell last week...

Does it happen when you do Shift+Enter" ?

Normally, as for nearly all wysiwyg editors, pressing Enter starts a new paragraph (actually my plugin is not responsable for the <div/> addition, and btw, I think navigators may be wrong not to insert <p/> instead...), while Shift+Enter insert a simple line break.

If Shift+Enter does not insert the <div>, I think we should consider it a feature. Adding such post filter could actually lead to unexpected behaviors I think...

Also, the space issue can be easily solved with CSS and your filter may also be called using the update event, without modifying vue-contenteditable :)

[Léo Flaventin Hauchecorne]

I have tested on the sample, I get the expected behavior that with enter, it inserts a div+br, and with shift-enter, it just inserts a br.
If you confirm that, I'll close the issue

[Léo Flaventin Hauchecorne]

No response for 2 month, an no further discussion => closing now