diff --git a/edit-context/index.html b/edit-context/index.html
index 7424d64..3aa9a68 100644
--- a/edit-context/index.html
+++ b/edit-context/index.html
@@ -1,12 +1,13 @@
+<!-- IMPORTANT: this demo is also available at https://github.com/mdn/dom-examples/tree/main/edit-context/html-editor
+The demo is used for a tutorial on MDN, which is why the code needed to also be on an MDN repository.
+It's more likely that the MDN demo is up to date than this one. This one should probably be removed at some stage. -->
 <!DOCTYPE html>
 <html lang="en">
 
 <head>
   <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Edit Context API: HTML editor demo</title>
-  <link rel="icon" type="image/png" href="https://edgestatic.azureedge.net/welcome/static/favicon.png">
 
   <style>
     html,
@@ -142,14 +143,6 @@
       text-decoration: underline 2px;
     }
 
-    ::highlight(ime-double-thin) {
-      text-decoration: underline double 1px;
-    }
-
-    ::highlight(ime-double-thick) {
-      text-decoration: underline double 2px;
-    }
-
     ::highlight(ime-dotted-thin) {
       text-decoration: underline dotted 1px;
     }
@@ -230,8 +223,6 @@
     const imeHighlights = {
       "solid-thin": null,
       "solid-thick": null,
-      "double-thin": null,
-      "double-thick": null,
       "dotted-thin": null,
       "dotted-thick": null,
       "dashed-thin": null,
@@ -377,22 +368,17 @@
 
       // Handle key presses that are not already handled by the EditContext.
       editorEl.addEventListener("keydown", e => {
+        const start = Math.min(editContext.selectionStart, editContext.selectionEnd);
+        const end = Math.max(editContext.selectionStart, editContext.selectionEnd);
+
         if (e.key === "Tab") {
           e.preventDefault();
-          editContext.updateText(
-            editContext.selectionStart,
-            editContext.selectionEnd,
-            "\t"
-          );
-          updateSelection(editContext.selectionStart + 1, editContext.selectionStart + 1);
+          editContext.updateText(start, end, "\t");
+          updateSelection(start + 1, start + 1);
           render();
         } else if (e.key === "Enter") {
-          editContext.updateText(
-            editContext.selectionStart,
-            editContext.selectionEnd,
-            "\n"
-          );
-          updateSelection(editContext.selectionStart + 1, editContext.selectionStart + 1);
+          editContext.updateText(start, end, "\n");
+          updateSelection(start + 1, start + 1);
           render();
         }
       });
@@ -458,14 +444,14 @@
           return null;
         }
 
-        if (anchorOffset > extentOffset) {
-          [anchorOffset, extentOffset] = [extentOffset, anchorOffset];
-        }
-
         return { start: anchorOffset, end: extentOffset };
       }
 
       function convertFromOffsetsToSelection(start, end) {
+        const isBackwards = start > end;
+        const orderedStart = isBackwards ? end : start;
+        const orderedEnd = isBackwards ? start : end;
+
         const treeWalker = document.createTreeWalker(editorEl, NodeFilter.SHOW_TEXT);
 
         let offset = 0;
@@ -477,25 +463,31 @@
         while (treeWalker.nextNode()) {
           const node = treeWalker.currentNode;
 
-          if (!anchorNode && offset + node.textContent.length >= start) {
+          if (!anchorNode && offset + node.textContent.length >= orderedStart) {
             anchorNode = node;
-            anchorOffset = start - offset;
+            anchorOffset = orderedStart - offset;
           }
 
-          if (offset + node.textContent.length >= end) {
+          if (offset + node.textContent.length >= orderedEnd) {
             extentNode = node;
-            extentOffset = end - offset;
+            extentOffset = orderedEnd - offset;
             break;
           }
 
           offset += node.textContent.length;
         }
 
-        return { anchorNode, anchorOffset, extentNode, extentOffset };
+        return {
+          anchorNode: isBackwards ? extentNode : anchorNode,
+          anchorOffset: isBackwards ? extentOffset : anchorOffset,
+          extentNode: isBackwards ? anchorNode : extentNode,
+          extentOffset: isBackwards ? anchorOffset : extentOffset
+        };
       }
 
       // Render the initial view.
       render();
+      setInterval(render, 1000);
     })();
   </script>
 </body>
