Skip to content

Touch Plugin - Handle entire flow of selection in editor #3174

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vinguyen12 merged 6 commits into from
Oct 7, 2025
Merged

Touch Plugin - Handle entire flow of selection in editor #3174

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f6315da
handle entire flow of touch selection
Oct 6, 2025
7c62e14
revert unrelated change
Oct 6, 2025
48495f0
directly use setDOMSelection
Oct 6, 2025
c3a8ee2
Merge branch 'master' of https://github.com/microsoft/roosterjs into …
Oct 6, 2025
9e1b240
remove empty space to trigger license check
Oct 7, 2025
867e3ad
Merge branch 'master' into u/nguyenvi/touch-selection-handle-entire-flow
vinguyen12 Oct 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
151 changes: 56 additions & 95 deletions packages/roosterjs-content-model-plugins/lib/touch/TouchPlugin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,10 @@
import type {
EditorPlugin,
IEditor,
PluginEvent,
ReadonlyContentModelDocument,
} from 'roosterjs-content-model-types';
import type { EditorPlugin, IEditor, PluginEvent } from 'roosterjs-content-model-types';
import { getNodePositionFromEvent } from '../utils/getNodePositionFromEvent';
import {
getSelectedSegmentsAndParagraphs,
mutateBlock,
createSelectionMarker,
} from 'roosterjs-content-model-dom';
import { adjustWordSelection } from 'roosterjs-content-model-api';

const MAX_TOUCH_MOVE_DISTANCE = 6; // the max number of offsets for the touch selection to move
const POINTER_DETECTION_DELAY = 150; // Delay time to wait for selection to be updated and also detect if pointerup is a tap or part of double tap
const PUNCTUATION_MATCHING_REGEX = /[.,;:!]/;
const SPACE_MATCHING_REGEX = /\s/;
const CARET_CSS_RULE = 'caret-color: transparent';
const HIDE_CURSOR_CSS_KEY = '_DOMSelectionHideCursor';

/**
* Touch plugin to manage touch behaviors
Expand Down Expand Up @@ -72,7 +59,7 @@ export class TouchPlugin implements EditorPlugin {
case 'pointerDown':
this.isDblClicked = false;
this.isTouchPenPointerEvent = true;
this.editor.setEditorStyle(HIDE_CURSOR_CSS_KEY, CARET_CSS_RULE);
event.originalEvent.preventDefault();

const targetWindow = this.editor.getDocument()?.defaultView || window;
if (this.timer) {
Expand All @@ -84,16 +71,66 @@ export class TouchPlugin implements EditorPlugin {

if (this.editor) {
if (!this.isDblClicked) {
this.editor.formatContentModel(model =>
this.repositionTouchSelection(model)
this.editor.focus();
const caretPosition = getNodePositionFromEvent(
this.editor,
event.rawEvent.x,
event.rawEvent.y
);

const newRange = this.editor.getDocument().createRange();
if (caretPosition) {
const { node, offset } = caretPosition;

// Place cursor at same position of browser handler by default
newRange.setStart(node, offset);
newRange.setEnd(node, offset);

const nodeTextContent = node.textContent || '';
const charAtSelection = nodeTextContent[offset];
if (
node.nodeType === Node.TEXT_NODE &&
charAtSelection &&
!SPACE_MATCHING_REGEX.test(charAtSelection) &&
!PUNCTUATION_MATCHING_REGEX.test(charAtSelection)
) {
const { wordStart, wordEnd } = findWordBoundaries(
nodeTextContent,
offset
);

// Move cursor to the calculated offset
const leftCursorWordLength = offset - wordStart;
const rightCursorWordLength = wordEnd - offset;
let movingOffset: number =
leftCursorWordLength >= rightCursorWordLength
? rightCursorWordLength
: -leftCursorWordLength;
movingOffset =
Math.abs(movingOffset) > MAX_TOUCH_MOVE_DISTANCE
? 0
: movingOffset;
const newOffsetPosition = offset + movingOffset;
if (
movingOffset !== 0 &&
nodeTextContent.length >= newOffsetPosition
) {
newRange.setStart(node, newOffsetPosition);
newRange.setEnd(node, newOffsetPosition);
}
}
}
this.editor.setDOMSelection({
type: 'range',
range: newRange,
isReverted: false,
});

// reset values
this.isTouchPenPointerEvent = false;
}
this.editor.setEditorStyle(HIDE_CURSOR_CSS_KEY, null);
}
}, POINTER_DETECTION_DELAY);

break;
case 'doubleClick':
if (this.isTouchPenPointerEvent) {
Expand Down Expand Up @@ -177,82 +214,6 @@ export class TouchPlugin implements EditorPlugin {
break;
}
}

repositionTouchSelection = (model: ReadonlyContentModelDocument) => {
const segmentAndParagraphs = getSelectedSegmentsAndParagraphs(
model,
false /*includingFormatHolder*/,
true /*includingEntity*/,
true /*mutate*/
);

const isCollapsedSelection =
segmentAndParagraphs.length >= 1 &&
segmentAndParagraphs.every(x => x[0].segmentType == 'SelectionMarker');

// 1. adjust selection to a word if selection is collapsed
if (isCollapsedSelection) {
const para = segmentAndParagraphs[0][1];
const segments = adjustWordSelection(model, segmentAndParagraphs[0][0]);

if (
segments.length > 2 &&
segments.some(x => x.segmentType == 'Text' && !x.isSelected) &&
para
) {
const selectionMarkerIndexInWord = segments.findIndex(
segment => segment.segmentType == 'SelectionMarker'
);
const selectionMarkerIndexInPara = para.segments.findIndex(
segment => segment.segmentType == 'SelectionMarker'
);
const leftSelectionSegmentsInWord = segments[selectionMarkerIndexInWord - 1];
const rightSelectionSegmentsInWord = segments[selectionMarkerIndexInWord + 1];
const leftCursorWordLength =
leftSelectionSegmentsInWord.segmentType == 'Text'
? leftSelectionSegmentsInWord.text.length
: 0;
const rightCursorWordLength =
rightSelectionSegmentsInWord.segmentType == 'Text'
? rightSelectionSegmentsInWord.text.length
: 0;

// Move the cursor to the closest edge of the word if the distance is within threshold = 6
if (rightCursorWordLength > leftCursorWordLength) {
if (leftCursorWordLength < MAX_TOUCH_MOVE_DISTANCE) {
// Move cursor to beginning of word
// Remove old marker
mutateBlock(para).segments.splice(selectionMarkerIndexInPara, 1);

// Add new marker
const indexSegmentBeforeMarker = para.segments.findIndex(
segment => segment === leftSelectionSegmentsInWord
);
const marker = createSelectionMarker(
segments[selectionMarkerIndexInPara]?.format || para.format
);
mutateBlock(para).segments.splice(indexSegmentBeforeMarker, 0, marker);
}
} else {
// Move cursor to end of word
if (rightCursorWordLength < MAX_TOUCH_MOVE_DISTANCE) {
// Add new marker
const indexSegmentAfterMarker = para.segments.findIndex(
segment => segment === rightSelectionSegmentsInWord
);
const marker = createSelectionMarker(
segments[selectionMarkerIndexInPara]?.format || para.format
);
mutateBlock(para).segments.splice(indexSegmentAfterMarker + 1, 0, marker);

// Remove old marker
mutateBlock(para).segments.splice(selectionMarkerIndexInPara, 1);
}
}
}
}
return true;
};
}

/**
Expand Down
Loading