mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2026-04-20 19:00:25 +00:00
1f88e6819a
Previously, clicking in the middle of a multi-code point grapheme would place the cursor at a code unit index somewhere in the middle of the grapheme. This was not only visually misleading, but the user could then start typing and insert characters in the middle of the cluster. This also made text select pretty wonky. The main issue was that we were treating the glyph index in a glyph run as a code unit index. We must instead map that glyph index back to a code unit index with help from LibGfx (via harfbuzz). The distance computation used here was also a bit off, especially for the last glyph in a glyph run. We essentially want the cursor to end up on whichever edge of the clicked glyph it is closest to. The result of the distance computation limited us to the left edge of the last glyph. Instead, we can use the same edge tracking we use for form- associated elements to handle this for us.
24 lines
691 B
HTML
24 lines
691 B
HTML
<!doctype html>
|
|
<script src="../include.js"></script>
|
|
<textarea id="text">
|
|
hello 👩🏼❤️👨🏻👩🏼❤️👨🏻👩🏼❤️👨🏻👩🏼❤️👨🏻
|
|
</textarea>
|
|
<script>
|
|
test(() => {
|
|
const content = text.textContent.trim();
|
|
|
|
const click = (x, y) => {
|
|
internals.click(x, y);
|
|
|
|
const remainingText = content.substr(text.selectionStart);
|
|
println(`Click [${x}, ${y}]: position=${text.selectionStart} text="${remainingText}"`);
|
|
};
|
|
|
|
click(13, 20);
|
|
click(16, 20);
|
|
click(52, 20);
|
|
click(57, 20);
|
|
click(85, 20);
|
|
click(90, 20);
|
|
});
|
|
</script>
|