2019-05-06 19:21:28 +03:00
|
|
|
/*
|
|
|
|
Copyright 2019 New Vector Ltd
|
2019-05-22 17:16:32 +03:00
|
|
|
Copyright 2019 The Matrix.org Foundation C.I.C.
|
2019-05-06 19:21:28 +03:00
|
|
|
|
|
|
|
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.
|
|
|
|
*/
|
|
|
|
|
2021-06-29 15:11:58 +03:00
|
|
|
import { needsCaretNodeBefore, needsCaretNodeAfter } from "./render";
|
2019-09-04 17:04:06 +03:00
|
|
|
import Range from "./range";
|
2020-07-15 11:45:45 +03:00
|
|
|
import EditorModel from "./model";
|
2021-06-29 15:11:58 +03:00
|
|
|
import DocumentPosition, { IPosition } from "./position";
|
|
|
|
import { Part } from "./parts";
|
2019-09-04 17:04:06 +03:00
|
|
|
|
2020-07-15 11:45:45 +03:00
|
|
|
export type Caret = Range | DocumentPosition;
|
|
|
|
|
|
|
|
export function setSelection(editor: HTMLDivElement, model: EditorModel, selection: Range | IPosition) {
|
2019-09-04 17:04:06 +03:00
|
|
|
if (selection instanceof Range) {
|
|
|
|
setDocumentRangeSelection(editor, model, selection);
|
|
|
|
} else {
|
|
|
|
setCaretPosition(editor, model, selection);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-07-15 11:45:45 +03:00
|
|
|
function setDocumentRangeSelection(editor: HTMLDivElement, model: EditorModel, range: Range) {
|
2019-09-04 17:04:06 +03:00
|
|
|
const sel = document.getSelection();
|
|
|
|
sel.removeAllRanges();
|
|
|
|
const selectionRange = document.createRange();
|
|
|
|
const start = getNodeAndOffsetForPosition(editor, model, range.start);
|
|
|
|
selectionRange.setStart(start.node, start.offset);
|
|
|
|
const end = getNodeAndOffsetForPosition(editor, model, range.end);
|
|
|
|
selectionRange.setEnd(end.node, end.offset);
|
|
|
|
sel.addRange(selectionRange);
|
|
|
|
}
|
2019-06-19 18:36:17 +03:00
|
|
|
|
2020-07-15 11:45:45 +03:00
|
|
|
export function setCaretPosition(editor: HTMLDivElement, model: EditorModel, caretPosition: IPosition) {
|
2019-05-13 18:42:00 +03:00
|
|
|
const range = document.createRange();
|
2021-06-29 15:11:58 +03:00
|
|
|
const { node, offset } = getNodeAndOffsetForPosition(editor, model, caretPosition);
|
2019-09-04 17:04:06 +03:00
|
|
|
range.setStart(node, offset);
|
|
|
|
range.collapse(true);
|
2020-03-04 17:35:01 +03:00
|
|
|
|
|
|
|
const sel = document.getSelection();
|
|
|
|
if (sel.rangeCount === 1) {
|
|
|
|
const existingRange = sel.getRangeAt(0);
|
|
|
|
if (
|
|
|
|
existingRange.startContainer === range.startContainer &&
|
|
|
|
existingRange.startOffset === range.startOffset &&
|
|
|
|
existingRange.collapsed === range.collapsed
|
|
|
|
) {
|
|
|
|
// If the selection matches, it's important to leave it alone.
|
|
|
|
// Recreating the selection state in at least Chrome can cause
|
|
|
|
// strange side effects, like touch bar flickering on every key.
|
2020-08-03 18:02:26 +03:00
|
|
|
// See https://github.com/vector-im/element-web/issues/9299
|
2020-03-04 17:35:01 +03:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
sel.removeAllRanges();
|
2019-09-04 17:04:06 +03:00
|
|
|
sel.addRange(range);
|
|
|
|
}
|
|
|
|
|
2020-07-15 11:45:45 +03:00
|
|
|
function getNodeAndOffsetForPosition(editor: HTMLDivElement, model: EditorModel, position: IPosition) {
|
2021-06-29 15:11:58 +03:00
|
|
|
const { offset, lineIndex, nodeIndex } = getLineAndNodePosition(model, position);
|
2019-06-19 18:36:17 +03:00
|
|
|
const lineNode = editor.childNodes[lineIndex];
|
|
|
|
|
|
|
|
let focusNode;
|
|
|
|
// empty line with just a <br>
|
|
|
|
if (nodeIndex === -1) {
|
|
|
|
focusNode = lineNode;
|
|
|
|
} else {
|
|
|
|
focusNode = lineNode.childNodes[nodeIndex];
|
|
|
|
// make sure we have a text node
|
|
|
|
if (focusNode.nodeType === Node.ELEMENT_NODE && focusNode.firstChild) {
|
|
|
|
focusNode = focusNode.firstChild;
|
|
|
|
}
|
|
|
|
}
|
2021-06-29 15:11:58 +03:00
|
|
|
return { node: focusNode, offset };
|
2019-06-19 18:36:17 +03:00
|
|
|
}
|
|
|
|
|
2020-07-15 11:45:45 +03:00
|
|
|
export function getLineAndNodePosition(model: EditorModel, caretPosition: IPosition) {
|
2021-06-29 15:11:58 +03:00
|
|
|
const { parts } = model;
|
2019-06-19 18:36:17 +03:00
|
|
|
const partIndex = caretPosition.index;
|
|
|
|
const lineResult = findNodeInLineForPart(parts, partIndex);
|
2021-06-29 15:11:58 +03:00
|
|
|
const { lineIndex } = lineResult;
|
|
|
|
let { nodeIndex } = lineResult;
|
|
|
|
let { offset } = caretPosition;
|
2019-06-19 18:36:17 +03:00
|
|
|
// we're at an empty line between a newline part
|
|
|
|
// and another newline part or end/start of parts.
|
|
|
|
// set offset to 0 so it gets set to the <br> inside the line container
|
|
|
|
if (nodeIndex === -1) {
|
|
|
|
offset = 0;
|
|
|
|
} else {
|
|
|
|
// move caret out of uneditable part (into caret node, or empty line br) if needed
|
2021-06-29 15:11:58 +03:00
|
|
|
({ nodeIndex, offset } = moveOutOfUneditablePart(parts, partIndex, nodeIndex, offset));
|
2019-06-19 18:36:17 +03:00
|
|
|
}
|
2021-06-29 15:11:58 +03:00
|
|
|
return { lineIndex, nodeIndex, offset };
|
2019-06-19 18:36:17 +03:00
|
|
|
}
|
|
|
|
|
2020-07-20 18:33:53 +03:00
|
|
|
function findNodeInLineForPart(parts: Part[], partIndex: number) {
|
2019-05-13 18:42:00 +03:00
|
|
|
let lineIndex = 0;
|
|
|
|
let nodeIndex = -1;
|
2019-06-19 18:36:17 +03:00
|
|
|
|
|
|
|
let prevPart = null;
|
|
|
|
// go through to parts up till (and including) the index
|
|
|
|
// to find newline parts
|
|
|
|
for (let i = 0; i <= partIndex; ++i) {
|
2019-05-13 18:42:00 +03:00
|
|
|
const part = parts[i];
|
2019-06-19 18:36:17 +03:00
|
|
|
if (part.type === "newline") {
|
|
|
|
lineIndex += 1;
|
|
|
|
nodeIndex = -1;
|
|
|
|
prevPart = null;
|
2019-05-13 18:42:00 +03:00
|
|
|
} else {
|
|
|
|
nodeIndex += 1;
|
2019-06-19 18:36:17 +03:00
|
|
|
if (needsCaretNodeBefore(part, prevPart)) {
|
|
|
|
nodeIndex += 1;
|
|
|
|
}
|
|
|
|
// only jump over caret node if we're not at our destination node already,
|
|
|
|
// as we'll assume in moveOutOfUneditablePart that nodeIndex
|
|
|
|
// refers to the node corresponding to the part,
|
|
|
|
// and not an adjacent caret node
|
|
|
|
if (i < partIndex) {
|
|
|
|
const nextPart = parts[i + 1];
|
|
|
|
const isLastOfLine = !nextPart || nextPart.type === "newline";
|
|
|
|
if (needsCaretNodeAfter(part, isLastOfLine)) {
|
|
|
|
nodeIndex += 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
prevPart = part;
|
2019-05-08 12:12:47 +03:00
|
|
|
}
|
2019-05-06 19:21:28 +03:00
|
|
|
}
|
2019-06-19 18:36:17 +03:00
|
|
|
|
2021-06-29 15:11:58 +03:00
|
|
|
return { lineIndex, nodeIndex };
|
2019-06-19 18:36:17 +03:00
|
|
|
}
|
|
|
|
|
2020-07-20 18:33:53 +03:00
|
|
|
function moveOutOfUneditablePart(parts: Part[], partIndex: number, nodeIndex: number, offset: number) {
|
2019-06-19 18:36:17 +03:00
|
|
|
// move caret before or after uneditable part
|
|
|
|
const part = parts[partIndex];
|
|
|
|
if (part && !part.canEdit) {
|
|
|
|
if (offset === 0) {
|
|
|
|
nodeIndex -= 1;
|
|
|
|
const prevPart = parts[partIndex - 1];
|
|
|
|
// if the previous node is a caret node, it's empty
|
|
|
|
// so the offset can stay at 0
|
|
|
|
// only when it's not, we need to set the offset
|
|
|
|
// at the end of the node
|
|
|
|
if (!needsCaretNodeBefore(part, prevPart)) {
|
|
|
|
offset = prevPart.text.length;
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
nodeIndex += 1;
|
|
|
|
offset = 0;
|
2019-05-13 18:42:00 +03:00
|
|
|
}
|
2019-05-13 17:21:57 +03:00
|
|
|
}
|
2021-06-29 15:11:58 +03:00
|
|
|
return { nodeIndex, offset };
|
2019-05-06 19:21:28 +03:00
|
|
|
}
|