mirror of
https://github.com/element-hq/element-web.git
synced 2024-12-14 05:03:06 +03:00
e0668e8517
this follows the documentation of {focus|anchor}{Offset|Node} better and was causing problems for creating ranges from the document selection when doing ctrl+A in firefox as the anchorNode/Offset was expressed as childNodes from the editor root.
194 lines
7.4 KiB
JavaScript
194 lines
7.4 KiB
JavaScript
/*
|
|
Copyright 2019 New Vector Ltd
|
|
Copyright 2019 The Matrix.org Foundation C.I.C.
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
you may not use this file except in compliance with the License.
|
|
You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
See the License for the specific language governing permissions and
|
|
limitations under the License.
|
|
*/
|
|
|
|
import {CARET_NODE_CHAR, isCaretNode} from "./render";
|
|
import DocumentOffset from "./offset";
|
|
|
|
export function walkDOMDepthFirst(rootNode, enterNodeCallback, leaveNodeCallback) {
|
|
let node = rootNode.firstChild;
|
|
while (node && node !== rootNode) {
|
|
const shouldDecend = enterNodeCallback(node);
|
|
if (shouldDecend && node.firstChild) {
|
|
node = node.firstChild;
|
|
} else if (node.nextSibling) {
|
|
node = node.nextSibling;
|
|
} else {
|
|
while (!node.nextSibling && node !== rootNode) {
|
|
node = node.parentElement;
|
|
if (node !== rootNode) {
|
|
leaveNodeCallback(node);
|
|
}
|
|
}
|
|
if (node !== rootNode) {
|
|
node = node.nextSibling;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
export function getCaretOffsetAndText(editor, sel) {
|
|
const {offset, text} = getSelectionOffsetAndText(editor, sel.focusNode, sel.focusOffset);
|
|
return {caret: offset, text};
|
|
}
|
|
|
|
function tryReduceSelectionToTextNode(selectionNode, selectionOffset) {
|
|
// if selectionNode is an element, the selected location comes after the selectionOffset-th child node,
|
|
// which can point past any childNode, in which case, the end of selectionNode is selected.
|
|
// we try to simplify this to point at a text node with the offset being
|
|
// a character offset within the text node
|
|
// Also see https://developer.mozilla.org/en-US/docs/Web/API/Selection
|
|
while (selectionNode && selectionNode.nodeType === Node.ELEMENT_NODE) {
|
|
const childNodeCount = selectionNode.childNodes.length;
|
|
if (childNodeCount) {
|
|
if (selectionOffset >= childNodeCount) {
|
|
selectionNode = selectionNode.lastChild;
|
|
if (selectionNode.nodeType === Node.TEXT_NODE) {
|
|
selectionOffset = selectionNode.textContent.length;
|
|
} else {
|
|
// this will select the last child node in the next iteration
|
|
selectionOffset = Number.MAX_SAFE_INTEGER;
|
|
}
|
|
} else {
|
|
selectionNode = selectionNode.childNodes[selectionOffset];
|
|
// this will select the first child node in the next iteration
|
|
selectionOffset = 0;
|
|
}
|
|
} else {
|
|
// here node won't be a text node,
|
|
// but characterOffset should be 0,
|
|
// this happens under some circumstances
|
|
// when the editor is empty.
|
|
// In this case characterOffset=0 is the right thing to do
|
|
break;
|
|
}
|
|
}
|
|
return {
|
|
node: selectionNode,
|
|
characterOffset: selectionOffset,
|
|
};
|
|
}
|
|
|
|
function getSelectionOffsetAndText(editor, selectionNode, selectionOffset) {
|
|
const {node, characterOffset} = tryReduceSelectionToTextNode(selectionNode, selectionOffset);
|
|
const {text, offsetToNode} = getTextAndOffsetToNode(editor, node);
|
|
const offset = getCaret(node, offsetToNode, characterOffset);
|
|
return {offset, text};
|
|
}
|
|
|
|
// gets the caret position details, ignoring and adjusting to
|
|
// the ZWS if you're typing in a caret node
|
|
function getCaret(node, offsetToNode, offsetWithinNode) {
|
|
let atNodeEnd = offsetWithinNode === node.textContent.length;
|
|
if (node.nodeType === Node.TEXT_NODE && isCaretNode(node.parentElement)) {
|
|
const zwsIdx = node.nodeValue.indexOf(CARET_NODE_CHAR);
|
|
if (zwsIdx !== -1 && zwsIdx < offsetWithinNode) {
|
|
offsetWithinNode -= 1;
|
|
}
|
|
// if typing in a caret node, you're either typing before or after the ZWS.
|
|
// In both cases, you should be considered at node end because the ZWS is
|
|
// not included in the text here, and once the model is updated and rerendered,
|
|
// that caret node will be removed.
|
|
atNodeEnd = true;
|
|
}
|
|
return new DocumentOffset(offsetToNode + offsetWithinNode, atNodeEnd);
|
|
}
|
|
|
|
// gets the text of the editor as a string,
|
|
// and the offset in characters where the selectionNode starts in that string
|
|
// all ZWS from caret nodes are filtered out
|
|
function getTextAndOffsetToNode(editor, selectionNode) {
|
|
let offsetToNode = 0;
|
|
let foundNode = false;
|
|
let text = "";
|
|
|
|
function enterNodeCallback(node) {
|
|
if (!foundNode) {
|
|
if (node === selectionNode) {
|
|
foundNode = true;
|
|
}
|
|
}
|
|
// usually newlines are entered as new DIV elements,
|
|
// but for example while pasting in some browsers, they are still
|
|
// converted to BRs, so also take these into account when they
|
|
// are not the last element in the DIV.
|
|
if (node.tagName === "BR" && node.nextSibling) {
|
|
if (!foundNode) {
|
|
offsetToNode += 1;
|
|
}
|
|
text += "\n";
|
|
}
|
|
const nodeText = node.nodeType === Node.TEXT_NODE && getTextNodeValue(node);
|
|
if (nodeText) {
|
|
if (!foundNode) {
|
|
offsetToNode += nodeText.length;
|
|
}
|
|
text += nodeText;
|
|
}
|
|
return true;
|
|
}
|
|
|
|
function leaveNodeCallback(node) {
|
|
// if this is not the last DIV (which are only used as line containers atm)
|
|
// we don't just check if there is a nextSibling because sometimes the caret ends up
|
|
// after the last DIV and it creates a newline if you type then,
|
|
// whereas you just want it to be appended to the current line
|
|
if (node.tagName === "DIV" && node.nextSibling && node.nextSibling.tagName === "DIV") {
|
|
text += "\n";
|
|
if (!foundNode) {
|
|
offsetToNode += 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
walkDOMDepthFirst(editor, enterNodeCallback, leaveNodeCallback);
|
|
|
|
return {text, offsetToNode};
|
|
}
|
|
|
|
// get text value of text node, ignoring ZWS if it's a caret node
|
|
function getTextNodeValue(node) {
|
|
const nodeText = node.nodeValue;
|
|
// filter out ZWS for caret nodes
|
|
if (isCaretNode(node.parentElement)) {
|
|
// typed in the caret node, so there is now something more in it than the ZWS
|
|
// so filter out the ZWS, and take the typed text into account
|
|
if (nodeText.length !== 1) {
|
|
return nodeText.replace(CARET_NODE_CHAR, "");
|
|
} else {
|
|
// only contains ZWS, which is ignored, so return emtpy string
|
|
return "";
|
|
}
|
|
} else {
|
|
return nodeText;
|
|
}
|
|
}
|
|
|
|
export function getRangeForSelection(editor, model, selection) {
|
|
const focusOffset = getSelectionOffsetAndText(
|
|
editor,
|
|
selection.focusNode,
|
|
selection.focusOffset,
|
|
).offset;
|
|
const anchorOffset = getSelectionOffsetAndText(
|
|
editor,
|
|
selection.anchorNode,
|
|
selection.anchorOffset,
|
|
).offset;
|
|
const focusPosition = focusOffset.asPosition(model);
|
|
const anchorPosition = anchorOffset.asPosition(model);
|
|
return model.startRange(focusPosition, anchorPosition);
|
|
}
|