Update based on the MDN demo

MicrosoftEdge · Feb 1, 2024 · c692414 · c692414
1 parent 5335434
commit c692414
Showing 1 changed file with 25 additions and 33 deletions.
diff --git 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>