Try using Range.surroundContents

fregante · fregante · commit 066402aa8a08 · 2020-01-27T16:39:49.000+07:00
diff --git a/source/features/show-whitespace.tsx b/source/features/show-whitespace.tsx
@@ -8,6 +8,7 @@ import getTextNodes from '../libs/get-text-nodes';
 
 // `splitText` is used before and after each whitespace group so a new whitespace-only text node is created. This new node is then wrapped in a <span>
 function showWhiteSpacesOn(line: Element): void {
+	const range = new Range();
 	for (const textNode of getTextNodes(line)) {
 		// `textContent` reads must be cached #2737
 		let text = textNode.textContent!;
@@ -21,29 +22,23 @@ function showWhiteSpacesOn(line: Element): void {
 				continue;
 			}
 
-			if (i < text.length - 1) {
-				textNode.splitText(i + 1);
-			}
+			range.setEnd(textNode, i + 1);
 
 			// Find the same character so they can be wrapped together
 			while (text[i - 1] === thisCharacter) {
 				i--;
 			}
 
-			textNode.splitText(i);
-
-			// Update cached variable here because it just changed
-			text = textNode.textContent!;
+			range.setStart(textNode, i);
 
-			const whitespace = textNode.nextSibling!.textContent!
+			const whitespace = range.toString()
 				.replace(/ /g, '·')
 				.replace(/\t/g, '→');
 
-			textNode.after(
-				<span data-rgh-whitespace={whitespace}>
-					{textNode.nextSibling}
-				</span>
-			);
+			range.surroundContents(<span data-rgh-whitespace={whitespace}/>);
+
+			// Update cached variable here because it just changed
+			text = textNode.textContent!;
 		}
 	}
 }
