mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2026-04-19 10:20:22 +00:00
0e4fb9ae73
Previously, it was possible for an up/down arrow press to place the cursor in the middle of a multi-code point grapheme cluster. We want to prevent this in a way that matches the behavior of other browsers. Both Chrome and Firefox will map the starting position to a visually equivalent position in the target line with harfbuzz and ICU segmenters. The need for this is explained in a code comment. The result is a much more natural feeling of text navigation.
51 lines
1.4 KiB
HTML
51 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<script src="include.js"></script>
|
|
<textarea id="text">
|
|
hello 👩🏼❤️👨🏻 there
|
|
my 👩🏼❤️👨🏻 friends!
|
|
</textarea>
|
|
<script>
|
|
test(() => {
|
|
// We need to ensure layout has occurred for arrow navigation to have a layout node to interact with.
|
|
document.body.offsetWidth;
|
|
|
|
const segmenter = new Intl.Segmenter("en", { granularity: "grapheme" });
|
|
const content = text.textContent.trim();
|
|
|
|
const graphemeAtCurrentLocation = () => {
|
|
const segments = segmenter.segment(content.substring(text.selectionStart));
|
|
return Array.from(segments)[0].segment;
|
|
};
|
|
|
|
const moveCursor = direction => {
|
|
internals.sendKey(text, direction);
|
|
|
|
const character = graphemeAtCurrentLocation();
|
|
println(`${direction}: position=${text.selectionStart} character="${character}"`);
|
|
};
|
|
|
|
moveCursor("Right");
|
|
moveCursor("Right");
|
|
moveCursor("Right");
|
|
moveCursor("Right");
|
|
moveCursor("Right");
|
|
|
|
moveCursor("Down");
|
|
moveCursor("Left");
|
|
moveCursor("Up");
|
|
|
|
moveCursor("Right");
|
|
moveCursor("Right");
|
|
moveCursor("Right");
|
|
moveCursor("Right");
|
|
|
|
moveCursor("Down");
|
|
moveCursor("Up");
|
|
moveCursor("Down");
|
|
|
|
moveCursor("Left");
|
|
moveCursor("Left");
|
|
|
|
moveCursor("Up");
|
|
});
|
|
</script>
|