Fixed Editor: Backspace key unexpectedly deletes line-breaks above caret that were created using Shift+Enter

Steffen

Well-known member
Affected version
2.2.9
At the end of this line I'll hit Shift+Enter (not just Enter) twice to create two line-breaks.

Now when I hit the delete key anywhere in this line here, one of the two line-breaks above is removed unexpectedly.

It seems like Enter creates a new paragraph (<p>) whereas Shift+Enter creates a line break (<br>).

Don't ask me why you should use Shift+Enter instead of just Enter in the first place. All I know is that this is driving some of our users nuts. Anyhting you can do about this? :)
 

Attachments

I've been facing this issue for a while now, and I see that this thread didn't get a reply at all.

This is kind of frustrating when typing, I know it might not be so popular to add an empty line by pressing SHIFT+ENTER, but sometimes I do since I got used to it on messaging apps.

I can see even the official XF is affected (video below), can't say exactly from which version I started facing this issue on my board but it must be not later than a couple of updates.

Please take a look into it.


 
Managed it somehow. You can add this after <head> in PAGE_CONTAINER.

Code:
<script>
    window.addEventListener('keydown', function (e) { e.stopPropagation(); }, true);
    window.addEventListener('keyup', function (e) { e.stopPropagation(); }, true);
    window.addEventListener('keypress', function (e) { e.stopPropagation(); }, true);
</script>

Don't ask why/how it fixes it, I don't know.
 
I've had this and thought it was a bug in Firefox. The above fixes it.

Is it possible to add the above into extra.less so that future updates don't override the addition?
 
Previous code was broke some another things. Here is code to restrict SHIFT + ENTER in the editor

JavaScript:
<script>
function isEnterShiftPressed(event) {
    if ((event.key === 'Enter') && (event.shiftKey))
        return true;

    return false;
}

function isEditor(event) {
    if (event.target == document.querySelector('.fr-element'))
        return true;

    return false;
}

window.addEventListener('keydown', function (event) { if (isEnterShiftPressed(event) && isEditor(event)) { event.preventDefault(); event.stopPropagation(); } }, true);
window.addEventListener('keyup', function (event) { if (isEnterShiftPressed(event) && isEditor(event)) { event.preventDefault(); event.stopPropagation(); } }, true);
window.addEventListener('keypress', function (event) { if (isEnterShiftPressed(event) && isEditor(event)) { event.preventDefault(); event.stopPropagation(); } }, true);
</script>
 
It's been driving me insane as well. Ill be formatting my paragraph lines as I type then have a typo hit backspace to delete the typo and it deletes a line break I added before the paragraph.
 
Previous code was broke some another things. Here is code to restrict SHIFT + ENTER in the editor

JavaScript:
<script>
function isEnterShiftPressed(event) {
    if ((event.key === 'Enter') && (event.shiftKey))
        return true;

    return false;
}

function isEditor(event) {
    if (event.target == document.querySelector('.fr-element'))
        return true;

    return false;
}

window.addEventListener('keydown', function (event) { if (isEnterShiftPressed(event) && isEditor(event)) { event.preventDefault(); event.stopPropagation(); } }, true);
window.addEventListener('keyup', function (event) { if (isEnterShiftPressed(event) && isEditor(event)) { event.preventDefault(); event.stopPropagation(); } }, true);
window.addEventListener('keypress', function (event) { if (isEnterShiftPressed(event) && isEditor(event)) { event.preventDefault(); event.stopPropagation(); } }, true);
</script>
Thank you scriptop! Now if only XF official forum also used your fix to not drive me nuts since I'm a shift+enter user. :)

This seems to have been fixed in a patch to Froala:

 
Last edited:
I tried the script of @scriptop and this works on XF version 2.2.12
to add after <head> in PAGE_CONTAINER

Code:
<!-- START fix bug backspace deleted after using shift+enter -->
<script>
    window.addEventListener('keydown', function (e) { e.stopPropagation(); }, true);
    window.addEventListener('keyup', function (e) { e.stopPropagation(); }, true);
    window.addEventListener('keypress', function (e) { e.stopPropagation(); }, true);
</script>
<!-- END-->
 
Last edited:
Great news! Thank you!!

By the way Chris, any chance that something like this could be integrated in future releases?
The current pop-up for emoji is quite unhandy on mobile, since it covers the textbox 😞
 
Hi @Chris is this issue fixed?

After inserting the code I mentioned above, it creates issues with the auto mentioned username when we write @Username.
The tagging doesn't display anymore the users.


Edit: just saw on the title that this bug has been fixed.
 
Last edited:
Top Bottom