Last two BR-Tags cant be remove if option enter is ENTER_BR.

[PATROMO]

If you use enter: $.FroalaEditor.ENTER_BR then it is not possible to remove the last two <br> Tags with push Backspace. Only possible if you open the Code view and remove it there.

Try it out here: https://jsfiddle.net/L4vkamhz/

Expected behavior.

I expect to be able to empty the complete contents in the editor.

Actual behavior.

Two <br><br> can not be deleted.

Steps to reproduce the problem.

Try to remove the BR-Tags https://jsfiddle.net/L4vkamhz/

Editor version.

v2

[seahorsepip]

I've run in the same problem, currently using the following workaround on keydown:

const fixBr = (e, editor) => {
  if (editor.html.get() === '<br><br>' && (
    (editor.selection.get().anchorOffset === 1 && e.key === 'Backspace') ||
    (editor.selection.get().anchorOffset === 0 && e.key === 'Delete')
  )) {
    editor.html.set('');
  }
};

The methods cursor.isAtEnd() and cursor.isAtStart() aren't used above since they always returned false for an unknown reason.

[seahorsepip]

Small update for anyone who also runs into the issue with e.g. <strong> tags:

const fixBr = (e, editor) => {
  if ((
    (editor.selection.get().anchorOffset === 1 && e.key === 'Backspace') ||
    (editor.selection.get().anchorOffset === 0 && e.key === 'Delete')
  ) && htmlToText(editor.html.get()).length <= 1) {
    editor.html.set('');
  }
};

// HTML string to plaintext
export const htmlToText = (html: string) => {
  const div = document.createElement('div');
  div.innerHTML = html;
  return div.innerText;
};

Also regarding the version 2 label, this issue is also on version 3.

[m-andrew-albright]

I'm here because I'm experiencing the same troublesome bug, and it's causing a validation error when the user wants to delete their post (there is a separate title field that is only required when the field we are using froala for is not empty, and the user can't delete the <br><br> so their post is not valid for deletion.)

[seahorsepip]

Never found a proper solution for this issue, the above workaround didn't work reliable enough.

Currently we're using the default paragraph <p> option and convert them to line breaks <br> afterwards on user submit:

const paragraphsToLineBreaks = (html: string) =>
	html
		.replace(/[\n\r]/g, '')
		.replace(/<ol>/g, '<p><ol>')
		.replace(/<\/ol>/g, '</ol></p>')
		.replace(/<ul>/g, '<p><ul>')
		.replace(/<\/ul>/g, '</ul></p>')
		.replace(/<p><br><\/p>/g, '<p></p>')
		.replace(/<\/p><p>/g, '<br>')
		.replace(/<\/?p>/g, '');

[m-andrew-albright]

~~I just updated to 3.2.6-1 and the problem seems fixed!~~

[m-andrew-albright]

I could swear that it was fixed after testing multiple times, but now I'm finding that I was mistaken and it is still broken. Sorry for the false positive. This is still broken. It would be nice if the Froala team would give us some kind of acknowledgment that they are aware of this bug existing, and a path to it being fixed.

[m-andrew-albright]

This is still a problem. The lack of attention on bugs makes me wary to recommend Froala to other developers, and in any new projects we will seek alternative products.

[dcsaszar]

Still happens in 4.0.7: https://jsfiddle.net/u80wngpx/2/

[dcsaszar]

Confirmed fixed in 4.0.12 https://jsfiddle.net/yhcLguxj/1/ 👍