OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

clarify why use a BOM marker for the caret nodes

pull/21833/head
Bruno Windels 2019-06-21 16:37:29 +02:00
parent da766b8cba
commit c443dd7a32
2 changed files with 11 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/editor/dom.js
View File

@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import {ZERO_WIDTH_SPACE, isCaretNode} from "./render";
import {CARET_NODE_CHAR, isCaretNode} from "./render";
export function walkDOMDepthFirst(rootNode, enterNodeCallback, leaveNodeCallback) {
let node = rootNode.firstChild;
@ -57,7 +57,7 @@ export function getCaretOffsetAndText(editor, sel) {
function getCaret(focusNode, focusNodeOffset, focusOffset) {
let atNodeEnd = focusOffset === focusNode.textContent.length;
if (focusNode.nodeType === Node.TEXT_NODE && isCaretNode(focusNode.parentElement)) {
const zwsIdx = focusNode.nodeValue.indexOf(ZERO_WIDTH_SPACE);
const zwsIdx = focusNode.nodeValue.indexOf(CARET_NODE_CHAR);
if (zwsIdx !== -1 && zwsIdx < focusOffset) {
focusOffset -= 1;
}
@ -120,7 +120,7 @@ function getTextNodeValue(node) {
// 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(ZERO_WIDTH_SPACE, "");
return nodeText.replace(CARET_NODE_CHAR, "");
} else {
// only contains ZWS, which is ignored, so return emtpy string
return "";

13
src/editor/render.js
View File

@ -33,22 +33,25 @@ function insertAfter(node, nodeToInsert) {
}
}
// this is a BOM marker actually
export const ZERO_WIDTH_SPACE = "\ufeff";
// Use a BOM marker for caret nodes.
// On a first test, they seem to be filtered out when copying text out of the editor,
// but this could be platform dependent.
// As a precautionary measure, I chose the character that slate also uses.
export const CARET_NODE_CHAR = "\ufeff";
// a caret node is a node that allows the caret to be placed
// where otherwise it wouldn't be possible
// (e.g. next to a pill span without adjacent text node)
function createCaretNode() {
const span = document.createElement("span");
span.className = "caretNode";
span.appendChild(document.createTextNode(ZERO_WIDTH_SPACE));
span.appendChild(document.createTextNode(CARET_NODE_CHAR));
return span;
}
function updateCaretNode(node) {
// ensure the caret node contains only a zero-width space
if (node.textContent !== ZERO_WIDTH_SPACE) {
node.textContent = ZERO_WIDTH_SPACE;
if (node.textContent !== CARET_NODE_CHAR) {
node.textContent = CARET_NODE_CHAR;
}
}