eliott/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird synced 2026-05-03 13:02:09 +02:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb: Delete entire graphemes when the delete/backspace key is pressed

Browse Source 
We currently delete a single code unit. If the user presses backspace on
a multi code point emoji, they are going to expect the entire emoji to
be removed. This now matches the behavior of Chrome and Firefox.
This commit is contained in:
Timothy Flynn
2025-08-14 15:25:19 -04:00
committed by Jelle Raaijmakers
parent 76bab90812
commit c369f68eff
Notes: github-actions[bot] 2025-08-14 20:22:53 +00:00 
Author: https://github.com/trflynn89
Commit: https://github.com/LadybirdBrowser/ladybird/commit/c369f68effc
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/5859
Reviewed-by: https://github.com/gmta ✅
8 changed files with 69 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
Tests/LibWeb/Text/input/Editing/execCommand-delete.html
View File

@@ -1,19 +1,25 @@
<!DOCTYPE html>
<script src="../include.js"></script>
<div contenteditable="true">foobar</div>
<div id="a" contenteditable="true">foobar</div>
<div id="b" contenteditable="true">foo👩🏼‍❤️‍👨🏻bar</div>
<script>
test(() => {
var divElm = document.querySelector('div');
println(`Before: ${divElm.textContent}`);
const testDelete = function (divId, position) {
println(`--- ${divId} ---`);
const divElm = document.querySelector(`div#${divId}`);
println(`Before: ${divElm.textContent}`);
// Put cursor after 'foo'
var range = document.createRange();
range.setStart(divElm.childNodes[0], 3);
getSelection().addRange(range);
// Place cursor
const node = divElm.childNodes[0];
getSelection().setBaseAndExtent(node, position, node, position);
// Press backspace
document.execCommand('delete');
// Press backspace
document.execCommand("delete");
println(`After: ${divElm.textContent}`);
println(`After: ${divElm.textContent}`);
};
testDelete("a", 3);
testDelete("b", 15);
});
</script>