Merge branch 'main' into sanitize-MessageChannel-input

.prettierignore

@@ -0,0 +1,2 @@
+**/*.html
+**/*.md

.prettierrc.json

@@ -0,0 +1,3 @@
+{
+  "bracketSameLine": true
+}

audiocontext-setsinkid/style.css

@@ -1,46 +1,53 @@
-button, select, label {
-	font-weight: 400;
-	line-height: 1.5;
-	font-size: 1rem;
-	font-family: sans-serif;
-  }
-
-  button, select {
-	padding: 6px 12px;
-	text-align: center;
-	background-color: transparent;
-	border-radius: .25rem;
-  }
-
-  button {
-	color: #0d6efd;
-	border: 1px solid transparent;
-	border-color: #0d6efd;
-	cursor: pointer;
-	outline: 0;
-	display: inline-block;
-	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
-	margin-bottom: 20px;
-  }
-
-  button:hover {
-	color: #fff;
-	background-color: #0d6efd;
-	border-color: #0d6efd;
-  }
-
-  button:disabled {
-	color: #999;
-	border-color: #999;
-	background: white;
-	cursor: not-allowed;
-  }
-
-  label {
-	padding-right: 24px;
-  }
-
-  .select-container p {
-	color: red;
-	margin-bottom: 36px;
-  }
+button,
+select,
+label {
+  font-weight: 400;
+  line-height: 1.5;
+  font-size: 1rem;
+  font-family: sans-serif;
+}
+
+button,
+select {
+  padding: 6px 12px;
+  text-align: center;
+  background-color: transparent;
+  border-radius: 0.25rem;
+}
+
+button {
+  color: #0d6efd;
+  border: 1px solid transparent;
+  border-color: #0d6efd;
+  cursor: pointer;
+  outline: 0;
+  display: inline-block;
+  transition:
+    color 0.15s ease-in-out,
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
+  margin-bottom: 20px;
+}
+
+button:hover {
+  color: #fff;
+  background-color: #0d6efd;
+  border-color: #0d6efd;
+}
+
+button:disabled {
+  color: #999;
+  border-color: #999;
+  background: white;
+  cursor: not-allowed;
+}
+
+label {
+  padding-right: 24px;
+}
+
+.select-container p {
+  color: red;
+  margin-bottom: 36px;
+}

channel-messaging-multimessage/style.css

@@ -1,6 +1,7 @@
-html,body {
-	margin: 0;
-	font-family: 'Open Sans Condensed', sans-serif;
+html,
+body {
+  margin: 0;
+  font-family: "Open Sans Condensed", sans-serif;
 }
 
 body {
@@ -15,7 +16,7 @@ form {
 }
 
 form input {
-	width: 55%;
+  width: 55%;
 }
 
 form label {
@@ -24,7 +25,7 @@ form label {
 }
 
 form button {
-	width: 60%;
+  width: 60%;
   display: block;
   margin: 10px auto 0;
 }
@@ -33,14 +34,15 @@ p {
   margin: 10px 0;
 }
 
-h1, p {
+h1,
+p {
   text-align: center;
 }
 
 h1 {
-  font-family: 'Lobster Two', cursive;
+  font-family: "Lobster Two", cursive;
 }
 
 ul {
   width: 90%;
-}
+}

css-painting/half-highlight-fixed-size/style.css

@@ -1,4 +1,3 @@
 .fancy {
-    background-image: paint(headerHighlight);
-  }
-
+  background-image: paint(headerHighlight);
+}

document-picture-in-picture/main.css

@@ -1,13 +1,33 @@
 #contents {
-	width: 600px;
-	font: 14px "Open Sans", sans-serif;
+  width: 600px;
+  font:
+    14px "Open Sans",
+    sans-serif;
 }
 
 #credits {
-	padding: 0 0 10px 0;
-	font: italic 10px "Open Sans", sans-serif;
+  padding: 0 0 10px 0;
+  font:
+    italic 10px "Open Sans",
+    sans-serif;
 }
 
 #in-pip-message {
-	display: none;
+  display: none;
+}
+
+@media (display-mode: picture-in-picture) and (prefers-color-scheme: light) {
+	body {
+		background: antiquewhite;
+	}
+}
+
+@media (display-mode: picture-in-picture) and (prefers-color-scheme: dark) {
+	body {
+		background: #333;
+	}
+
+	a {
+		color: antiquewhite;
+	}
 }

document-picture-in-picture/main.js

@@ -22,7 +22,7 @@ async function togglePictureInPicture() {
 		// Open a Picture-in-Picture window.
 		const pipWindow = await window.documentPictureInPicture.requestWindow({
 			width: videoPlayer.clientWidth,
-			height: videoPlayer.clientHeight,
+			height: videoPlayer.clientHeight + 50,
 		});
 
 		// Add pagehide listener to handle the case of the pip window being closed using the browser X button

edit-context/html-editor/converter.js

@@ -0,0 +1,96 @@
+// The EditContext object only knows about a plain text string and about
+// character offsets. However, our editor view renders the text by using
+// DOM nodes. So we sometimes need to convert between the two.
+// This function converts from a DOM selection object to character offsets.
+export function fromSelectionToOffsets(selection, editorEl) {
+  const treeWalker = document.createTreeWalker(editorEl, NodeFilter.SHOW_TEXT);
+
+  let anchorNodeFound = false;
+  let extentNodeFound = false;
+  let anchorOffset = 0;
+  let extentOffset = 0;
+
+  while (treeWalker.nextNode()) {
+    const node = treeWalker.currentNode;
+    if (node === selection.anchorNode) {
+      anchorNodeFound = true;
+      anchorOffset += selection.anchorOffset;
+    }
+
+    if (node === selection.extentNode) {
+      extentNodeFound = true;
+      extentOffset += selection.extentOffset;
+    }
+
+    if (!anchorNodeFound) {
+      anchorOffset += node.textContent.length;
+    }
+    if (!extentNodeFound) {
+      extentOffset += node.textContent.length;
+    }
+  }
+
+  if (!anchorNodeFound || !extentNodeFound) {
+    return null;
+  }
+
+  return { start: anchorOffset, end: extentOffset };
+}
+
+// The EditContext object only knows about a plain text string and about
+// character offsets. However, our editor view renders the text by using
+// DOM nodes. So we sometimes need to convert between the two.
+// This function converts character offsets to a DOM selection object.
+export function fromOffsetsToSelection(start, end, editorEl) {
+  const treeWalker = document.createTreeWalker(editorEl, NodeFilter.SHOW_TEXT);
+
+  let offset = 0;
+  let anchorNode = null;
+  let anchorOffset = 0;
+  let extentNode = null;
+  let extentOffset = 0;
+
+  while (treeWalker.nextNode()) {
+    const node = treeWalker.currentNode;
+
+    if (!anchorNode && offset + node.textContent.length >= start) {
+      anchorNode = node;
+      anchorOffset = start - offset;
+    }
+
+    if (!extentNode && offset + node.textContent.length >= end) {
+      extentNode = node;
+      extentOffset = end - offset;
+    }
+
+    if (anchorNode && extentNode) {
+      break;
+    }
+
+    offset += node.textContent.length;
+  }
+
+  return { anchorNode, anchorOffset, extentNode, extentOffset };
+}
+
+// The EditContext object only knows about character offsets. But out editor
+// view renders HTML tokens as DOM nodes. This function finds DOM node tokens
+// that are in the provided EditContext offset range.
+export function fromOffsetsToRenderedTokenNodes(renderedTokens, start, end) {
+  const tokenNodes = [];
+
+  for (let offset = start; offset < end; offset++) {
+    const token = renderedTokens.find(
+      (token) => token.pos <= offset && token.pos + token.value.length > offset
+    );
+    if (token) {
+      tokenNodes.push({
+        node: token.node,
+        nodeOffset: token.pos,
+        charOffset: offset,
+      });
+    }
+  }
+
+  return tokenNodes;
+}