OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-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. limitations under the License.
*/ */
import {ZERO_WIDTH_SPACE, isCaretNode} from "./render"; import {CARET_NODE_CHAR, isCaretNode} from "./render";
export function walkDOMDepthFirst(rootNode, enterNodeCallback, leaveNodeCallback) { export function walkDOMDepthFirst(rootNode, enterNodeCallback, leaveNodeCallback) {
let node = rootNode.firstChild; let node = rootNode.firstChild;
@ -57,7 +57,7 @@ export function getCaretOffsetAndText(editor, sel) {
function getCaret(focusNode, focusNodeOffset, focusOffset) { function getCaret(focusNode, focusNodeOffset, focusOffset) {
let atNodeEnd = focusOffset === focusNode.textContent.length; let atNodeEnd = focusOffset === focusNode.textContent.length;
if (focusNode.nodeType === Node.TEXT_NODE && isCaretNode(focusNode.parentElement)) { 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) { if (zwsIdx !== -1 && zwsIdx < focusOffset) {
focusOffset -= 1; 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 // 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 // so filter out the ZWS, and take the typed text into account
if (nodeText.length !== 1) { if (nodeText.length !== 1) {
return nodeText.replace(ZERO_WIDTH_SPACE, ""); return nodeText.replace(CARET_NODE_CHAR, "");
} else { } else {
// only contains ZWS, which is ignored, so return emtpy string // only contains ZWS, which is ignored, so return emtpy string
return ""; return "";

13
src/editor/render.js
View File

@ -33,22 +33,25 @@ function insertAfter(node, nodeToInsert) {
} }
} }
// this is a BOM marker actually // Use a BOM marker for caret nodes.
export const ZERO_WIDTH_SPACE = "\ufeff"; // 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 // a caret node is a node that allows the caret to be placed
// where otherwise it wouldn't be possible // where otherwise it wouldn't be possible
// (e.g. next to a pill span without adjacent text node) // (e.g. next to a pill span without adjacent text node)
function createCaretNode() { function createCaretNode() {
const span = document.createElement("span"); const span = document.createElement("span");
span.className = "caretNode"; span.className = "caretNode";
span.appendChild(document.createTextNode(ZERO_WIDTH_SPACE)); span.appendChild(document.createTextNode(CARET_NODE_CHAR));
return span; return span;
} }
function updateCaretNode(node) { function updateCaretNode(node) {
// ensure the caret node contains only a zero-width space // ensure the caret node contains only a zero-width space
if (node.textContent !== ZERO_WIDTH_SPACE) { if (node.textContent !== CARET_NODE_CHAR) {
node.textContent = ZERO_WIDTH_SPACE; node.textContent = CARET_NODE_CHAR;
} }
} }