From da2c5bc03bb5d2bdbb6357c0c642b0f6e63eaf16 Mon Sep 17 00:00:00 2001
From: Andras Schmelczer <andras@schmelczer.dev>
Date: Sat, 12 Jul 2025 15:25:25 +0100
Subject: [PATCH] Change cursor/selection label

---
 examples/website/src/index.ts | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/examples/website/src/index.ts b/examples/website/src/index.ts
index 739d5af..9ed8470 100644
--- a/examples/website/src/index.ts
+++ b/examples/website/src/index.ts
@@ -74,13 +74,14 @@ function updateMergedText(): void {
     selectionStart = results.cursors![0].position;
     selectionEnd = results.cursors![1].position;
   }
+  const isSelection = selectionStart !== selectionEnd;
 
   const selectionSide = leftCursors ? 'left' : 'right';
   const fragment = document.createDocumentFragment();
 
   let currentPosition = 0;
   if (selectionEnd === 0) {
-    fragment.appendChild(createCaret(selectionSide === 'left'));
+    fragment.appendChild(createSelectionOverlay(selectionSide === 'left', isSelection));
   }
 
   for (const { text, history } of results.history) {
@@ -96,7 +97,9 @@ function updateMergedText(): void {
       fragment.appendChild(span);
 
       if (currentPosition === selectionEnd - 1) {
-        fragment.appendChild(createCaret(selectionSide === 'left'));
+        fragment.appendChild(
+          createSelectionOverlay(selectionSide === 'left', isSelection)
+        );
       }
 
       if (history !== 'RemovedFromLeft' && history !== 'RemovedFromRight') {
@@ -129,7 +132,7 @@ function getCursorsFromActiveTextArea() {
   return { leftCursors, rightCursors };
 }
 
-function createCaret(isLeft: boolean): HTMLSpanElement {
+function createSelectionOverlay(isLeft: boolean, isSelection: boolean): HTMLSpanElement {
   const caretSpan = document.createElement('span');
   caretSpan.className = `selection-caret selection-caret-${isLeft ? 'left' : 'right'}`;
 
@@ -143,7 +146,10 @@ function createCaret(isLeft: boolean): HTMLSpanElement {
 
   const infoDiv = document.createElement('div');
   infoDiv.className = 'info';
-  infoDiv.textContent = isLeft ? "Left user's cursor" : "Right user's cursor";
+  const selectionType = isSelection ? 'selection' : 'cursor';
+  infoDiv.textContent = isLeft
+    ? `Left user's ${selectionType}`
+    : `Right user's ${selectionType}`;
   caretSpan.appendChild(infoDiv);
 
   return caretSpan;