Clarify execCommand valid use cases without alternatives. (mdn#40263)

* Clarify `execCommand` valid use cases without alternatives.

* Fix some inconsistency

* Update index.md

* Update files/en-us/web/api/document/execcommand/index.md

Co-authored-by: lionel-rowe <lionel.rowe@gmail.com>

* Propagate note

* Update files/en-us/web/api/document/execcommand/index.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

---------

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
Co-authored-by: lionel-rowe <lionel.rowe@gmail.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: 4 people

files/en-us/web/api/document/execcommand/index.md

@@ -10,9 +10,12 @@ browser-compat: api.Document.execCommand
 
 {{ApiRef("DOM")}}{{deprecated_header}}
 
+> [!NOTE]
+> Although the `execCommand()` method is deprecated, there are still some valid use cases that do not yet have viable alternatives. For example, unlike direct DOM manipulation, modifications performed by `execCommand()` preserve the undo buffer (edit history). For these use cases, you can still use this method, but test to ensure cross-browser compatibility, such as by using {{domxref("document.queryCommandSupported()")}}.
+
 The **`execCommand`** method implements multiple different commands. Some of them provide access to the clipboard, while others are for editing [form inputs](/en-US/docs/Web/HTML/Reference/Elements/input), [`contenteditable`](/en-US/docs/Web/HTML/Reference/Global_attributes/contenteditable) elements or entire documents (when switched to [design mode](/en-US/docs/Web/API/Document/designMode)).
 
-To access the clipboard, the newer [Clipboard API](/en-US/docs/Web/API/Clipboard_API) is recommended over `execCommand()`. However, there is no replacement for the editing commands: unlike direct DOM manipulation, modifications performed by `execCommand()` preserve the undo buffer (edit history).
+To access the clipboard, the newer [Clipboard API](/en-US/docs/Web/API/Clipboard_API) is recommended over `execCommand()`.
 
 Most commands affect the document's [selection](/en-US/docs/Web/API/Selection). For example, some commands (bold, italics, etc.) format the currently selected text, while others delete the selection, insert new elements (replacing the selection) or affect an entire line (indenting). Only the currently active editable element can be modified, but some commands (e.g., `copy`) can work without an editable element.
 
@@ -218,7 +221,7 @@ function insertText(newText, selector) {
 
 ## Specifications
 
-{{Specifications}}
+This feature is not part of any current specification. It is no longer on track to become a standard. There is an unofficial [W3C execCommand spec draft](https://w3c.github.io/editing/docs/execCommand/).
 
 ## Browser compatibility
 
@@ -230,3 +233,6 @@ function insertText(newText, selector) {
 - MDN example: [execCommands supported in your browser](https://mdn.github.io/dom-examples/execcommand/)
 - {{domxref("HTMLElement.contentEditable")}}
 - {{domxref("document.designMode")}}
+- {{domxref("document.queryCommandEnabled()")}}
+- {{domxref("document.queryCommandState()")}}
+- {{domxref("document.queryCommandSupported()")}}

files/en-us/web/api/document/querycommandenabled/index.md

@@ -11,6 +11,9 @@ browser-compat: api.Document.queryCommandEnabled
 
 {{ApiRef("DOM")}}{{deprecated_header}}{{Non-standard_header}}
 
+> [!NOTE]
+> Although the {{domxref("Document/execCommand", "execCommand()")}} method is deprecated, if you do decide to use it for reasons given on that page, you should consider checking the command's availability using `queryCommandEnabled()` to ensure compatibility.
+
 The **`Document.queryCommandEnabled()`** method reports whether
 or not the specified editor command is enabled by the browser.
 
@@ -50,13 +53,13 @@ if (flg) {
 
 ## Specifications
 
-This feature is not part of any current specification. It is no longer on track to become a standard.
+This feature is not part of any current specification. It is no longer on track to become a standard. There is an unofficial [W3C execCommand spec draft](https://w3c.github.io/editing/docs/execCommand/).
 
 ## Browser compatibility
 
 {{Compat}}
 
 ## See also
 
-- {{domxref("Document.execCommand()")}}
-- {{domxref("Document.queryCommandSupported()")}}
+- {{domxref("document.execCommand()")}}
+- {{domxref("document.queryCommandSupported()")}}

files/en-us/web/api/document/querycommandstate/index.md

@@ -11,6 +11,9 @@ browser-compat: api.Document.queryCommandState
 
 {{ApiRef("DOM")}}{{deprecated_header}}{{Non-standard_header}}
 
+> [!NOTE]
+> Although the {{domxref("Document/execCommand", "execCommand()")}} method is deprecated, there are still some valid use cases that do not yet have viable alternatives, as mentioned in the `execCommand()` article. In these cases, you may find this method useful to implement a complete user experience, but test to ensure cross-browser compatibility.
+
 The **`queryCommandState()`** method will tell you if the current selection has a certain {{domxref("Document.execCommand()")}} command applied.
 
 ## Syntax
@@ -76,7 +79,7 @@ document.querySelector("button").addEventListener("click", makeBold);
 
 ## Specifications
 
-This feature is not part of any current specification. It is no longer on track to become a standard.
+This feature is not part of any current specification. It is no longer on track to become a standard. There is an unofficial [W3C execCommand spec draft](https://w3c.github.io/editing/docs/execCommand/).
 
 ## Browser compatibility
 
@@ -86,4 +89,5 @@ This feature is not part of any current specification. It is no longer on track
 
 - {{domxref("HTMLElement.contentEditable")}}
 - {{domxref("document.designMode")}}
+- {{domxref("document.execCommand()")}}
 - Browser bugs related to `queryCommandState()`: [Scribe's "Browser Inconsistencies" documentation](https://github.com/guardian/scribe/blob/master/BROWSERINCONSISTENCIES.md#documentquerycommandstate)

files/en-us/web/api/document/querycommandsupported/index.md

@@ -11,6 +11,9 @@ browser-compat: api.Document.queryCommandSupported
 
 {{ApiRef("DOM")}}{{deprecated_header}}{{Non-standard_header}}
 
+> [!NOTE]
+> Although the {{domxref("Document/execCommand", "execCommand()")}} method is deprecated, if you do decide to use it for reasons given on that page, you should consider checking the command's availability using `queryCommandSupported()` to ensure compatibility.
+
 The **`Document.queryCommandSupported()`** method reports
 whether or not the specified editor command is supported by the browser.
 
@@ -48,13 +51,13 @@ if (flg) {
 
 ## Specifications
 
-This feature is not part of any current specification. It is no longer on track to become a standard.
+This feature is not part of any current specification. It is no longer on track to become a standard. There is an unofficial [W3C execCommand spec draft](https://w3c.github.io/editing/docs/execCommand/).
 
 ## Browser compatibility
 
 {{Compat}}
 
 ## See also
 
-- {{domxref("Document.execCommand()")}}
-- {{domxref("Document.queryCommandEnabled()")}}
+- {{domxref("document.execCommand()")}}
+- {{domxref("document.queryCommandEnabled()")}}