andras/reconcile
1
0
Fork 0
Code Issues Pull requests 6 Projects Releases Packages Wiki Activity Actions

Change cursor/selection label

Browse source
This commit is contained in:
Andras Schmelczer 2025-07-12 15:25:25 +01:00
parent cf21219424
commit da2c5bc03b
No known key found for this signature in database
GPG key ID: FC8F2C3D3D1A718C
1 changed files with 10 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

14
examples/website/src/index.ts
View file

@ -74,13 +74,14 @@ function updateMergedText(): void {
selectionStart = results.cursors![0].position; selectionStart = results.cursors![0].position;
selectionEnd = results.cursors![1].position; selectionEnd = results.cursors![1].position;
} }
const isSelection = selectionStart !== selectionEnd;
const selectionSide = leftCursors ? 'left' : 'right'; const selectionSide = leftCursors ? 'left' : 'right';
const fragment = document.createDocumentFragment(); const fragment = document.createDocumentFragment();
let currentPosition = 0; let currentPosition = 0;
if (selectionEnd === 0) { if (selectionEnd === 0) {
fragment.appendChild(createCaret(selectionSide === 'left')); fragment.appendChild(createSelectionOverlay(selectionSide === 'left', isSelection));
} }
for (const { text, history } of results.history) { for (const { text, history } of results.history) {
@ -96,7 +97,9 @@ function updateMergedText(): void {
fragment.appendChild(span); fragment.appendChild(span);
if (currentPosition === selectionEnd - 1) { if (currentPosition === selectionEnd - 1) {
fragment.appendChild(createCaret(selectionSide === 'left')); fragment.appendChild(
createSelectionOverlay(selectionSide === 'left', isSelection)
);
} }
if (history !== 'RemovedFromLeft' && history !== 'RemovedFromRight') { if (history !== 'RemovedFromLeft' && history !== 'RemovedFromRight') {
@ -129,7 +132,7 @@ function getCursorsFromActiveTextArea() {
return { leftCursors, rightCursors }; return { leftCursors, rightCursors };
} }
function createCaret(isLeft: boolean): HTMLSpanElement { function createSelectionOverlay(isLeft: boolean, isSelection: boolean): HTMLSpanElement {
const caretSpan = document.createElement('span'); const caretSpan = document.createElement('span');
caretSpan.className = `selection-caret selection-caret-${isLeft ? 'left' : 'right'}`; caretSpan.className = `selection-caret selection-caret-${isLeft ? 'left' : 'right'}`;
@ -143,7 +146,10 @@ function createCaret(isLeft: boolean): HTMLSpanElement {
const infoDiv = document.createElement('div'); const infoDiv = document.createElement('div');
infoDiv.className = 'info'; 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); caretSpan.appendChild(infoDiv);
return caretSpan; return caretSpan;