Use selection-specific caret hit testing while starting and extending mouse selections. The public caret-position API keeps its normal line ranking, but selection drags now snap below-line movement to line edges and prefer the previous line when starting in a nearby inter-line gap. Add coverage for dragging from message text, after-text space, gutters, author names, avatar-adjacent areas, and row bottoms so these inert message regions reliably start selection.
43 lines
1,014 B
HTML
43 lines
1,014 B
HTML
<!DOCTYPE html>
|
|
<script src="include.js"></script>
|
|
<style>
|
|
body {
|
|
font: 16px Arial, sans-serif;
|
|
margin: 0;
|
|
}
|
|
|
|
.message {
|
|
min-height: 60px;
|
|
position: relative;
|
|
width: 500px;
|
|
}
|
|
|
|
.gutter {
|
|
height: 60px;
|
|
left: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 72px;
|
|
}
|
|
|
|
.content {
|
|
margin-left: 72px;
|
|
padding-top: 8px;
|
|
}
|
|
</style>
|
|
<div class="message">
|
|
<div class="gutter"></div>
|
|
<div class="content" id="content">Alice says hello from the chat history.</div>
|
|
</div>
|
|
<script>
|
|
test(() => {
|
|
document.body.offsetWidth;
|
|
|
|
const contentRect = content.getBoundingClientRect();
|
|
internals.mouseDown(10, contentRect.top + 10);
|
|
internals.mouseMove(contentRect.left + 80, contentRect.top + 20);
|
|
internals.mouseUp(contentRect.left + 80, contentRect.top + 20);
|
|
|
|
println(`selected chat text: ${getSelection().toString().includes("Alice")}`);
|
|
});
|
|
</script>
|