Fix some editor issues in Firefox and possibly mobile browsers

When Firefox 93.0 was released, they broke the ability to edit text
across multiple chunks or across multiple paragraphs. If you tried,
nothing would happen.

Also, we are no longer using Mutation Observers to detect when a chunk
is modified. We are now using the beforeinput event.

static/application.js

@@ -71,7 +71,6 @@ var connected = false;
 var newly_loaded = true;
 var modified_chunks = new Set();
 var empty_chunks = new Set();
-var mutation_observer = null;
 var gametext_bound = false;
 var saved_prompt = "...";
 var override_focusout = false;
@@ -805,6 +804,48 @@ function chunkOnTextInput(event) {
 	}
 }
 
+// This gets run when one or more chunks are edited.  The event occurs before
+// the actual edits are made by the browser, so we are free to check which
+// nodes are selected or stop the event from occurring.
+function chunkOnBeforeInput(event) {
+	// Register all selected chunks as having been modified
+	applyChunkDeltas(getSelectedNodes());
+
+	// Fix editing across chunks and paragraphs in Firefox 93.0 and higher
+	if(event.originalEvent.inputType === "deleteContentBackward" && document.queryCommandSupported && document.execCommand && document.queryCommandSupported('delete')) {
+		event.preventDefault();
+		document.execCommand('delete');
+	}
+	var s = rangy.getSelection();
+	if(!s.isCollapsed) {
+		s.deleteFromDocument();
+	}
+	if(buildChunkSetFromNodeArray(getSelectedNodes()).size === 0) {
+		var s = rangy.getSelection();
+		var r = s.getRangeAt(0);
+		if(document.queryCommandSupported && document.execCommand && document.queryCommandSupported('insertHTML')) {
+			document.execCommand('insertHTML', false, '<span id="_EDITOR_SENTINEL_">|</span>');
+		} else {
+			var t = document.createTextNode('|');
+			var b = document.createElement('span');
+			b.id = "_EDITOR_SENTINEL_";
+			b.insertNode(t);
+			r.insertNode(b);
+		}
+		var sentinel = document.getElementById("_EDITOR_SENTINEL_");
+		if(sentinel.nextSibling && sentinel.nextSibling.tagName === "CHUNK") {
+			r.selectNodeContents(sentinel.nextSibling);
+			r.collapse(true);
+		} else if(sentinel.previousSibling && sentinel.previousSibling.tagName === "CHUNK") {
+			r.selectNodeContents(sentinel.previousSibling);
+			r.collapse(false);
+		}
+		s.removeAllRanges();
+		s.addRange(r);
+		sentinel.parentNode.removeChild(sentinel);
+	}
+}
+
 function chunkOnKeyDown(event) {
 	// Make escape commit the changes (Originally we had Enter here to but its not required and nicer for users if we let them type freely
 	// You can add the following after 27 if you want it back to committing on enter : || (!event.shiftKey && event.keyCode == 13)
@@ -1020,26 +1061,11 @@ function highlightEditingChunks() {
 	}
 }
 
-// This gets run every time the text in a chunk is edited
-// or a chunk is deleted
-function chunkOnDOMMutate(mutations, observer) {
-	if(!gametext_bound || !allowedit) {
-		return;
-	}
-	var nodes = [];
-	for(var i = 0; i < mutations.length; i++) {
-		var mutation = mutations[i];
-		nodes = nodes.concat(Array.from(mutation.addedNodes), Array.from(mutation.removedNodes));
-		nodes.push(mutation.target);
-	}
-	applyChunkDeltas(nodes);
-}
-
 // This gets run every time you try to paste text into the editor
 function chunkOnPaste(event) {
-	if(!gametext_bound) {
+	// Register the chunk we're pasting in as having been modified
-		return;
+	applyChunkDeltas(getSelectedNodes());
-	}
+
 	// If possible, intercept paste events into the editor in order to always
 	// paste as plaintext
 	if(event.originalEvent.clipboardData && document.queryCommandSupported && document.execCommand && document.queryCommandSupported('insertHTML')) {
@@ -1112,12 +1138,10 @@ function chunkOnFocusOut(event) {
 }
 
 function bindGametext() {
-	mutation_observer.observe(game_text[0], {characterData: true, childList: true, subtree: true});
 	gametext_bound = true;
 }
 
 function unbindGametext() {
-	mutation_observer.disconnect();
 	gametext_bound = false;
 }
 
@@ -1532,6 +1556,8 @@ $(document).ready(function(){
 	// Register editing events
 	game_text.on('textInput',
 		chunkOnTextInput
+	).on('beforeinput',
+		chunkOnBeforeInput
 	).on('keydown',
 		chunkOnKeyDown
 	).on('paste', 
@@ -1543,7 +1569,6 @@ $(document).ready(function(){
 	).on('focusout',
 		chunkOnFocusOut
 	);
-	mutation_observer = new MutationObserver(chunkOnDOMMutate);
 
 	// This is required for the editor to work correctly in Firefox on desktop
 	// because the gods of HTML and JavaScript say so

templates/index.html

@@ -6,7 +6,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<script src="static/jquery-3.6.0.min.js"></script>
 	<script src="static/socket.io.min.js"></script>
-	<script src="static/application.js?ver=1.16.4a"></script>
+	<script src="static/application.js?ver=1.16.4b"></script>
 	<script src="static/bootstrap.min.js"></script>
 	<script src="static/bootstrap-toggle.min.js"></script>
 	<script src="static/rangy-core.min.js"></script>