fix: Add sandbox attrs to live samples that call prompt() and confirm() (#38253)

* feat(api): better example for window.prompt

* feat(api): better example for prompt()

* feat(api): better example for prompt()

* feat(api): better example for prompt()

* feat(api): Revert notes changes to help reviewers

* feat(api): Align notes

* feat(api): Don't mix quote styles in macros

* Apply suggestions from code review

Co-authored-by: Vadim Makeev <hi@pepelsbey.dev>

---------

Co-authored-by: Vadim Makeev <hi@pepelsbey.dev>

Author: bsmth

files/en-us/learn_web_development/core/scripting/strings/index.md

@@ -121,12 +121,12 @@ Joining strings together like this is called _concatenation_.
 
 Let's have a look at concatenation being used in action:
 
-```html
+```html live-sample___string-concat
 <button>Press me</button>
 <div id="greeting"></div>
 ```
 
-```js
+```js live-sample___string-concat
 const button = document.querySelector("button");
 
 function greet() {
@@ -138,7 +138,7 @@ function greet() {
 button.addEventListener("click", greet);
 ```
 
-{{ EmbedLiveSample('Concatenation_in_context', '100%', 50) }}
+{{EmbedLiveSample('string-concat', , '50', , , , , 'allow-modals')}}
 
 Here, we are using the {{domxref("window.prompt()", "window.prompt()")}} function, which prompts the user to answer a question via a popup dialog box and then stores the text they enter inside a given variable — in this case `name`. We then display a string that inserts the name into a generic greeting message.
 

files/en-us/learn_web_development/core/scripting/what_is_javascript/index.md

@@ -44,15 +44,15 @@ It is the third layer of the layer cake of standard web technologies, two of whi
 
 The three layers build on top of one another nicely. Let's take a button as an example. We can mark it up using HTML to give it structure and purpose:
 
-```html
+```html live-sample___string-concat-name
 <button type="button">Player 1: Chris</button>
 ```
 
 ![Button showing Player 1: Chris with no styling](just-html.png)
 
 Then we can add some CSS into the mix to get it looking nice:
 
-```css
+```css live-sample___string-concat-name
 button {
   font-family: "helvetica neue", helvetica, sans-serif;
   letter-spacing: 1px;
@@ -71,7 +71,7 @@ button {
 
 And finally, we can add some JavaScript to implement dynamic behavior:
 
-```js
+```js live-sample___string-concat-name
 function updateName() {
   const name = prompt("Enter a new name");
   button.textContent = `Player 1: ${name}`;
@@ -82,9 +82,10 @@ const button = document.querySelector("button");
 button.addEventListener("click", updateName);
 ```
 
-{{ EmbedLiveSample('A_high-level_definition', '100%', 80) }}
+You can click "Play" to see and edit the example in the MDN Playground.
+Try clicking on the text label to see what happens.
 
-Try clicking on this last version of the text label to see what happens (note also that you can find this demo on GitHub — see the [source code](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/what-is-js/javascript-label.html), or [run it live](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/javascript-label.html))!
+{{EmbedLiveSample('string-concat-name', , '80', , , , , 'allow-modals')}}
 
 JavaScript can do a lot more than that — let's explore what in more detail.
 

files/en-us/web/api/htmltextareaelement/index.md

@@ -7,7 +7,7 @@ browser-compat: api.HTMLTextAreaElement
 
 {{APIRef("HTML DOM")}}
 
-The **`HTMLTextAreaElement`** interface provides special properties and methods for manipulating the layout and presentation of {{HTMLElement("textarea")}} elements.
+The **`HTMLTextAreaElement`** interface provides properties and methods for manipulating the layout and presentation of {{HTMLElement("textarea")}} elements.
 
 {{InheritanceDiagram}}
 
@@ -134,27 +134,25 @@ textarea.no-scrollbars {
 
 ### Insert HTML tags example
 
-Insert some HTML tags in a textarea.
+Insert some HTML tags in a textarea:
 
-#### JavaScript
-
-```js
+```js live-sample___insert-html
 function insert(startTag, endTag) {
-  const textArea = document.myForm.myTxtArea;
-  const selectionStart = textArea.selectionStart;
-  const selectionEnd = textArea.selectionEnd;
+  const textArea = document.myForm.myTextArea;
+  const start = textArea.selectionStart;
+  const end = textArea.selectionEnd;
   const oldText = textArea.value;
 
-  const prefix = oldText.substring(0, selectionStart);
-  const inserted =
-    startTag + oldText.substring(selectionStart, selectionEnd) + endTag;
-  const suffix = oldText.substring(selectionEnd);
+  const prefix = oldText.substring(0, start);
+  const inserted = startTag + oldText.substring(start, end) + endTag;
+  const suffix = oldText.substring(end);
+
   textArea.value = `${prefix}${inserted}${suffix}`;
 
-  const newSelectionStart = selectionStart + startTag.length;
-  const newSelectionEnd = selectionEnd + startTag.length;
-  textArea.setSelectionRange(newSelectionStart, newSelectionEnd);
+  const newStart = start + startTag.length;
+  const newEnd = end + startTag.length;
 
+  textArea.setSelectionRange(newStart, newEnd);
   textArea.focus();
 }
 
@@ -163,7 +161,7 @@ function insertURL() {
   if (newURL) {
     insert(`<a href="${newURL}">`, "</a>");
   } else {
-    document.myForm.myTxtArea.focus();
+    document.myForm.myTextArea.focus();
   }
 }
 
@@ -175,42 +173,38 @@ const code = document.querySelector("#format-code");
 strong.addEventListener("click", (e) => insert("<strong>", "</strong>"));
 em.addEventListener("click", (e) => insert("<em>", "</em>"));
 link.addEventListener("click", (e) => insertURL());
-code.addEventListener("click", (e) => insert("\n<code>\n", "\n</code>\n"));
+code.addEventListener("click", (e) => insert("<code>", "</code>"));
 ```
 
-#### CSS
+Decorate the span to behave like a link:
 
-CSS to decorate the internal span to behave like a link:
-
-```css
+```css live-sample___insert-html
 .intLink {
   cursor: pointer;
   text-decoration: underline;
   color: #0000ff;
 }
 ```
 
-HTML:
-
-```html
+```html live-sample___insert-html
 <form name="myForm">
   <p>
-    [&nbsp;
+    [
     <span class="intLink" id="format-strong"><strong>Bold</strong></span> |
     <span class="intLink" id="format-em"><em>Italic</em></span> |
     <span class="intLink" id="format-link">URL</span> |
-    <span class="intLink" id="format-code">code</span> &nbsp;]
+    <span class="intLink" id="format-code">code</span> ]
   </p>
 
   <p>
-    <textarea name="myTxtArea" rows="10" cols="50">
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut facilisis, arcu vitae adipiscing placerat, nisl lectus accumsan nisi, vitae iaculis sem neque vel lectus. Praesent tristique commodo lorem quis fringilla. Sed ac tellus eros. Sed consectetur eleifend felis vitae luctus. Praesent sagittis, est eget bibendum tincidunt, ligula diam tincidunt augue, a fermentum odio velit eget mi. Phasellus mattis, elit id fringilla semper, orci magna cursus ligula, non venenatis lacus augue sit amet dui. Pellentesque lacinia odio id nisi pulvinar commodo tempus at odio. Ut consectetur eros porttitor nunc mollis ultrices. Aenean porttitor, purus sollicitudin viverra auctor, neque erat blandit sapien, sit amet tincidunt massa mi ac nibh. Proin nibh sem, bibendum ut placerat nec, cursus et lacus. Phasellus vel augue turpis. Nunc eu mauris eu leo blandit mollis interdum eget lorem.
+    <textarea name="myTextArea" rows="10" cols="50">
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut facilisis, arcu vitae adipiscing placerat, nisl lectus accumsan nisi, vitae iaculis sem neque vel lectus. Praesent tristique commodo lorem quis fringilla. Sed ac tellus eros. 
     </textarea>
   </p>
 </form>
 ```
 
-{{EmbedLiveSample('Insert_HTML_tags_example', 600, 300)}}
+{{EmbedLiveSample('insert-html', , '300', , , , , 'allow-modals')}}
 
 ## Specifications
 

files/en-us/web/api/subtlecrypto/derivebits/index.md

@@ -149,7 +149,7 @@ We then use Alice's private key and Bob's public key to derive a secret, and com
 
 #### HTML
 
-The HTML is defines two buttons.
+The HTML defines two buttons.
 The "Change keys" button is pressed to generate new key pairs for Alice and Bob.
 The "Derive bits" button is pressed to derive a shared secret with the current set of key pairs.
 

files/en-us/web/api/window/confirm/index.md

@@ -26,30 +26,41 @@ confirm(message)
 
 ### Return value
 
-A boolean indicating whether OK (`true`) or Cancel (`false`) was
-selected. If a browser is ignoring in-page dialogs, then the returned value is always
-`false`.
+A boolean indicating whether OK (`true`) or Cancel (`false`) was selected.
+If a browser is ignoring in-page dialogs, then the returned value is always `false`.
 
 ## Examples
 
-```js
-if (window.confirm("Do you really want to leave?")) {
-  window.open("exit.html", "Thanks for Visiting!");
-}
+### Confirming before an action
+
+The following example shows how to check the returned value of a confirmation dialog.
+When the user clicks the OK button, we call {{domxref("window.open()")}}, and if the user clicks Cancel, we print some text to a {{htmlelement("pre")}} element.
+
+```html live-sample___confirm
+<button id="windowButton">Open new tab</button>
+<pre id="log"></pre>
 ```
 
-Produces:
+```js live-sample___confirm
+const windowButton = document.querySelector("#windowButton");
+const log = document.querySelector("#log");
+
+windowButton.addEventListener("click", () => {
+  if (window.confirm("Do you want to open in new tab?")) {
+    window.open("https://developer.mozilla.org/en-US/docs/Web/API/Window/open");
+  } else {
+    log.innerText = "Glad you're staying!";
+  }
+});
+```
 
-![Firefox confirm](firefox_confirm_dialog.png)
+{{EmbedLiveSample('confirm', , , , , , , 'allow-modals allow-popups')}}
 
 ## Notes
 
-Dialog boxes are modal windows — they
-prevent the user from accessing the rest of the program's interface until the dialog box
-is closed. For this reason, you should not overuse any function that creates a dialog
-box (or modal window). Regardless, there are good reasons to [avoid using dialog boxes for confirmation](https://alistapart.com/article/neveruseawarning/).
-
-Alternatively {{HTMLElement("dialog")}} element can be used for confirmations.
+Dialog boxes are modal windows — they prevent the user from accessing the rest of the program's interface until the dialog box is closed.
+For this reason, you should not overuse any function that creates a dialog box or a modal window.
+Alternatively, a {{HTMLElement("dialog")}} element can be used for confirmations.
 
 ## Specifications
 
@@ -64,3 +75,4 @@ Alternatively {{HTMLElement("dialog")}} element can be used for confirmations.
 - {{HTMLElement("dialog")}} element
 - {{domxref("window.alert()")}}
 - {{domxref("window.prompt()")}}
+- [Never Use a Warning When you Mean Undo](https://alistapart.com/article/neveruseawarning/) on A List Apart (2017)

files/en-us/web/api/window/prompt/index.md

@@ -10,7 +10,7 @@ browser-compat: api.Window.prompt
 
 `window.prompt()` instructs the browser to display a dialog with an optional message prompting the user to input some text, and to wait until the user either submits the text or cancels the dialog.
 
-Under some conditions — for example, when the user switches tabs — the browser may not actually display a dialog, or may not wait for the user to submit text or to cancel the dialog.
+Under some conditions (when the user switches tabs, for example) the browser may not display a dialog, or may not wait for the user to submit text or to cancel the dialog.
 
 ## Syntax
 
@@ -34,48 +34,68 @@ A string containing the text entered by the user, or `null`.
 
 ## Examples
 
-```js
-let sign = prompt("What's your sign?");
+### Using a prompt with a message and default value
+
+The following example shows how to check the returned value of a prompt.
+When the user clicks the OK button, text entered in the input field is returned.
+If the user clicks OK without entering any text, an empty string is returned.
+If the user clicks the Cancel button, this function returns `null`.
 
-if (sign.toLowerCase() === "scorpio") {
-  alert("Wow! I'm a Scorpio too!");
-}
+```html live-sample___prompt
+<button id="signButton">Check star sign</button>
+<pre id="log"></pre>
+```
 
-// there are many ways to use the prompt feature
-sign = window.prompt(); // open the blank prompt window
-sign = prompt(); //  open the blank prompt window
-sign = window.prompt("Are you feeling lucky"); // open the window with Text "Are you feeling lucky"
-sign = window.prompt("Are you feeling lucky", "sure"); // open the window with Text "Are you feeling lucky" and default value "sure"
+```js live-sample___prompt
+const signButton = document.querySelector("#signButton");
+const log = document.querySelector("#log");
+
+signButton.addEventListener("click", () => {
+  let sign = prompt("What's your sign?");
+
+  if (sign === null) {
+    log.innerText = "OK, maybe next time.";
+  } else if (sign.toLowerCase() === "") {
+    log.innerText = "Don't be shy, enter your sign!";
+  } else if (sign.toLowerCase() === "scorpio") {
+    log.innerText = "Wow! I'm a Scorpio too!";
+  } else {
+    log.innerText = `${sign} is my favorite!`;
+  }
+});
 ```
 
-When the user clicks the OK button, text entered in the input field is returned. If the
-user clicks OK without entering any text, an empty string is returned. If the user
-clicks the Cancel button, this function returns `null`.
+{{EmbedLiveSample('prompt', , , , , , , 'allow-modals')}}
+
+### Prompt messages and default values
 
-The above prompt appears as follows (in Chrome on macOS):
+There are multiple ways to use a prompt, using `prompt`, `window.prompt`, and providing a message and default values:
 
-![prompt() dialog in Chrome on macOS](prompt.png)
+```js
+// open a blank prompt window
+sign = prompt();
+// open a blank prompt window
+sign = window.prompt();
+// open a prompt with the text "Are you feeling lucky"
+sign = window.prompt("Are you feeling lucky");
+// open a prompt with the text "Are you feeling lucky" and "sure" as the default value
+sign = prompt("Are you feeling lucky", "sure");
+```
 
 ## Notes
 
-A prompt dialog contains a single-line textbox, a Cancel button, and an OK button, and
-returns the (possibly empty) text the user entered into that textbox.
+Dialog boxes are modal windows — they prevent the user from accessing the rest of the program's interface until the dialog box is closed.
+For this reason, you should not overuse any function that creates a dialog box or a modal window.
+Alternatively, a {{HTMLElement("dialog")}} element can be used for confirmations.
 
-Please note that result is a string. That means you should sometimes cast the value
-given by the user. For example, if their answer should be a Number, you should cast the
-value to Number.
+A prompt dialog contains a single-line textbox, a Cancel button, and an OK button, and returns the (possibly empty) text the user entered into that textbox.
+The result is a string, which means you should sometimes cast the value given by the user.
+For example, if their answer should be a Number, you should cast the value to Number.
 
 ```js
 const aNumber = Number(window.prompt("Type a number", ""));
 ```
 
-Dialog boxes are modal windows; they
-prevent the user from accessing the rest of the program's interface until the dialog box
-is closed. For this reason, you should not overuse any function that creates a dialog
-box (or modal window).
-
-Alternatively {{HTMLElement("dialog")}} element can be used to take user inputs.
-
 ## Specifications
 
 {{Specifications}}
@@ -89,3 +109,4 @@ Alternatively {{HTMLElement("dialog")}} element can be used to take user inputs.
 - {{HTMLElement("dialog")}} element
 - {{domxref("window.alert", "alert")}}
 - {{domxref("window.confirm", "confirm")}}
+- [Never Use a Warning When you Mean Undo](https://alistapart.com/article/neveruseawarning/) on A List Apart (2017)