Google Chrome and Safari on MacOS grabs the character preceding the selected text when you drag'n'drop it into <textarea> - html

Question

Clean textarea code (as in sandbox) without any side factors (like scripts and specific styles) its work via drag'n'drop in the Chrome browser is followed by a strange phenomenon.
<textarea cols="80" rows="10">
row1w1 row1w2 row1w3 row1w4 row1w5
row2w1 row2w2 row2w3 row2w4 row2w5
row3w1 row3w2 row3w3 row3w4 row3w5
row4w1 row4w2 row4w3 row4w4 row4w5
row5w1 row5w2 row5w3 row5w4 row5w5
row6w1 row6w2 row6w3 row6w4 row6w5
row7w1 row7w2 row7w3 row7w4 row7w5
</textarea>
For example, I drag the first word from any line somewhere like in the GIF image.
Along with the word, for some reason the drag-n-drop event grabs the character before the word (in this case, it's a line break character), even though that character was not selected. It is "compensated", if I may say so, by a space put before the word inserted in the new place. In some cases, this space can stand before the word, after the word and even turn into two spaces on both sides of the word, and sometimes does not appear at all.
The actual question is. Is there a way to make Chrome behave like a text editor or like Firefox? Is there a standard somewhere, or at least some description of how the phenomenon works, when it puts a space and when it doesn't?
I tried to solve this problem with a script. But the code works very crudely. For example, I can not track the difference between moving the selected text one character forward or backward. I think there is a better solution.
// If Google Chrome used
if (/Chrome/.test(window.navigator.userAgent)) {
// This variable handles source drag info
let dragging = null;
// This flag indicates whether the browser has captured a character before the word
let captureFlag = null;
// DragStart event handler
textarea.ondragstart = (e) => {
// First of all, аt this point we can read the initial state before dragging
const {
value,
selectionStart,
selectionEnd
} = textarea;
// Selected text
const selectionData = value.substring(selectionStart, selectionEnd);
// And keep the symbol before of the selected word
const selectionBefore = selectionStart ? value[selectionStart - 1] : '';
dragging = {
selectionStart,
selectionEnd,
selectionData,
selectionBefore
};
}
// Input event handler
textarea.oninput = (e) => {
// When dragging, this event is triggered twice
if (e.inputType == 'deleteByDrag') {
// At this point the highlighted word has already been deleted.
const {
selectionStart
} = textarea;
// If the cursor moved one character backward,
// the browser has definitely captured this character
captureFlag = dragging && selectionStart == (dragging.selectionStart - 1);
} else if (e.inputType == 'insertFromDrop') {
// At this point, the selected word is already inserted in its new location.
if (dragging) {
// Chrome browser leaves the word selected.
const {
value,
selectionStart,
selectionEnd
} = textarea;
// First we cut out what is inserted from the value
let newValue = value.substr(0, selectionStart) + value.substr(selectionEnd);
// If the browser does grab a character before selecting
if (captureFlag && dragging.selectionStart > 0) {
// Let's calculate his position
const insertPos = dragging.selectionStart - 1;
// Put the missing symbol back in place
newValue = newValue.substr(0, insertPos) +
dragging.selectionBefore +
newValue.substr(insertPos);
}
// Next, we have to determine the offset.
// If the pasted text was inserted somewhere after the deletion,
// we need to add to the offset one character that we just inserted
const offset = (captureFlag && (selectionStart > dragging.selectionStart)) ? 1 : 0;
// Now let's count the positions where we insert the originally selected text
const newSelectionStart = selectionStart + offset;
const newSelectionEnd = dragging.selectionEnd - dragging.selectionStart +
selectionStart + offset;
// Insert text that was originally selected (still in the dragstart event)
newValue = newValue.substr(0, newSelectionStart) +
dragging.selectionData +
newValue.substr(newSelectionStart);
// Apply the new value
textarea.value = newValue;
// And let's select this area of text like the browser
textarea.setSelectionRange(newSelectionStart, newSelectionEnd, "none");
}
}
}
// Reset the variables when the drag is finished
textarea.ondragend = () => {
dragging = null;
captureFlag = null
};
}
<textarea id="textarea" cols="80" rows="10">
row1w1 row1w2 row1w3 row1w4 row1w5
row2w1 row2w2 row2w3 row2w4 row2w5
row3w1 row3w2 row3w3 row3w4 row3w5
row4w1 row4w2 row4w3 row4w4 row4w5
row5w1 row5w2 row5w3 row5w4 row5w5
row6w1 row6w2 row6w3 row6w4 row6w5
row7w1 row7w2 row7w3 row7w4 row7w5
</textarea>
UPDATE
I was fixed to track the dragging of the word one character backward or forward.
// If Google Chrome used
if (/Chrome/.test(window.navigator.userAgent)) {
// This variable handles source drag info
let dragging = null;
// This flag indicates whether the browser has captured a character before the word
let captureFlag = null;
// DragStart event handler
textarea.ondragstart = (e) => {
// First of all, аt this point we can read the initial state before dragging
const {
value,
selectionStart,
selectionEnd
} = textarea;
// Selected text
const selectionData = value.substring(selectionStart, selectionEnd);
// And keep the symbol before of the selected word
const selectionBefore = selectionStart ? value[selectionStart - 1] : '';
// Save drag position
dragging = {
selectionStart,
selectionEnd,
selectionData,
selectionBefore,
dragLayerX: e.layerX,
dragLayerY: e.layerY,
dropLayerX: -1,
dropLayerY: -1,
};
}
// drop event handler
textarea.ondrop = (e) => {
// Save drop position
dragging.dropLayerX = e.layerX;
dragging.dropLayerY = e.layerY;
}
// Input event handler
textarea.oninput = (e) => {
// When dragging, this event is triggered twice
if (e.inputType == 'deleteByDrag') {
// At this point the highlighted word has already been deleted.
const {
selectionStart
} = textarea;
// If the cursor moved one character backward,
// the browser has definitely captured this character
captureFlag = dragging && selectionStart == (dragging.selectionStart - 1);
} else if (e.inputType == 'insertFromDrop') {
// At this point, the selected word is already inserted in its new location.
if (dragging) {
// Chrome browser leaves the word selected.
const {
value,
selectionStart,
selectionEnd
} = textarea;
// First we cut out what is inserted from the value
let newValue = value.substr(0, selectionStart) + value.substr(selectionEnd);
// If the browser does grab a character before selecting
if (captureFlag && dragging.selectionStart > 0) {
// Let's calculate his position
const insertPos = dragging.selectionStart - 1;
// Put the missing symbol back in place
newValue = newValue.substr(0, insertPos) +
dragging.selectionBefore +
newValue.substr(insertPos);
}
// Next, we have to determine the offset.
let offset;
// If text was dragged from end of row and dropped to start of next row
if(selectionStart == dragging.selectionStart){
offset = 1;
}
// If text was dragging on one char backward or forward
// It was need to be calculated
else if(selectionStart - dragging.selectionStart == -1){
// First of all, lets calculate one text line height
let ctx = document.createElement('canvas').getContext('2d');
ctx.font = getComputedStyle(textarea).font;
const measure = ctx.measureText(textarea.value);
const lineHeight = measure.fontBoundingBoxAscent + measure.fontBoundingBoxDescent;
// Then set offset 0 if text moved backward or 2 if forward
if(Math.abs(dragging.dragLayerY - dragging.dropLayerY) > 0.6 * lineHeight){
offset = dragging.dragLayerY < dragging.dropLayerY ? 2 : 0;
}
else {
offset = dragging.dragLayerX < dragging.dropLayerX ? 2 : 0;
}
}
else {
// If the pasted text was inserted somewhere after the deletion,
// we need to add to the offset one character that we just inserted
offset = (captureFlag && (selectionStart > dragging.selectionStart)) ? 1 : 0;
}
// Now let's count the positions where we insert the originally selected text
const newSelectionStart = selectionStart + offset;
const newSelectionEnd = dragging.selectionEnd - dragging.selectionStart +
selectionStart + offset;
// Insert text that was originally selected (still in the dragstart event)
newValue = newValue.substr(0, newSelectionStart) +
dragging.selectionData +
newValue.substr(newSelectionStart);
// Apply the new value
textarea.value = newValue;
// And let's select this area of text like the browser
textarea.setSelectionRange(newSelectionStart, newSelectionEnd, "none");
}
}
}
// Reset the variables when the drag is finished
textarea.ondragend = () => {
dragging = null;
captureFlag = null
};
}
<textarea id="textarea" cols="80" rows="10">
row1w1 row1w2 row1w3 row1w4 row1w5
row2w1 row2w2 row2w3 row2w4 row2w5
row3w1 row3w2 row3w3 row3w4 row3w5
row4w1 row4w2 row4w3 row4w4 row4w5
row5w1 row5w2 row5w3 row5w4 row5w5
row6w1 row6w2 row6w3 row6w4 row6w5
row7w1 row7w2 row7w3 row7w4 row7w5
</textarea>