Selecting a whole line and replacing it also replace the previous new line feed

[jojorne]

Let's say we have this:

text a

text b

If you select "text b", the entire line, and paste something, you'll get this result:

text a
new text

And by doing again, selecting "new text" and pasting something, you'll get this:

text asomething

[LostRuins]

Doesn't happen to me. what browser are you using?

[jojorne]

Okay... I tested on Edge, Chrome and Opera. It only happens on Firefox.

[jojorne]

I think that it's a bug with Firefox itself.

old text new text

There was nothing in lite that changed the text before the merge_edit_field method, right?

[jojorne]

I think there is a bugzilla open with the suggestion to listen to "beforeinput".

[LostRuins]

Could you link the to the bugzilla issue?

[jojorne]

If you disable the merge_edit_field() event, it fix the behavior. The white-space: pre-wrap; prevents <br> from being inserted. My conclusion is that merge_edit_field() modifies the content in a way that Firefox doesn't know how to handle.

a
<br>
b
<br>

after

<span>a</span>
<span><br>b</span>

So selecting the text is selecting <br>b? I'm not sure... After disabling the merge_edit_field() event, Firefox converted to:

<span>a</span>
<span>b<br></span>

[LostRuins]

If you disable "autosave" does it still happen?

[jojorne]

If you disable "autosave" does it still happen?

Yes. It still happens.

[LostRuins]

Okay I took some time to look into this, and I don't think I am able to fix it. Even when I remove all my copy-paste handling and use the default one, it still happens in firefox. In fact, looking at other online examples this is happening too. For example:

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_contenteditable

The same effect occurs. I think its just a bug in firefox itself.

[jojorne]

I don't know javascript but...

            document.querySelector('meta[name="viewport"]')
            .setAttribute("content","width=device-width, initial-scale=1, maximum-scale=1");
        }

        //fix for replacing text in firefox
        {
            document.getElementById("gametext").addEventListener("beforeinput", function(e) {
                if (e.inputType == "insertText") {
                    e.preventDefault();
                    let text = e.currentTarget.innerText;
                    let selection = window.getSelection();
                    let selectionStart = selection.anchorOffset;
                    let selectionEnd = selectionStart + selection.rangeCount;
                    e.currentTarget.innerText = `${text.slice(0, selectionStart)}${e.data}${text.slice(selectionEnd)}`
                }
            });
        }

        //fix for copy paste text in firefox, and also to prevent pasting rich text
        {
            document.getElementById("gametext").addEventListener("paste", function(e) {
                e.preventDefault();

Maybe this will help?

[LostRuins]

Unfortunately this won't work. Not only does it not correctly preserve edit history for redo/undo, it's also triggering on every singe key input and inserting characters at the wrong index. If you're trying to handle text pasting the event type should be insertFromPaste not insertText (but that does not cover all scenarios, because it's possible to replace a line of text by typing normally too)