Select the text content of an element

Apart from clearing a contenteditable element, selecting all text within it can be useful in other situations as well. For instance, you may want to copy or delete all the text at once. Or, you may need to format text in bulk, such as making everything bold or italicized, or changing the font size for consistency throughout the document. Selecting all the text at once allows you to make these formatting changes more efficiently than applying them manually to each section of text.

Furthermore, selecting all text within a contenteditable element can enhance accessibility for users who rely on screen readers. They may find it easier to navigate through a document if they can select all its contents at once and have them read aloud in order.

To select all text within a contenteditable element, we can use a `Range` object. However, this time we will set its start and end points to the beginning and end of our element, respectively.

Here's an example function that selects all text within a contenteditable element:

const selectAllText = (contentEle) => {
    const range = document.createRange();
    range.selectNodeContents(contentEle);
    const selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
};

First, we create a new `Range` object by calling `document.createRange()`. Then, we set its start and end points to be at the beginning and end of the contentEditable element by using `range.selectNodeContents(contentEle)`.

After that, we remove any existing ranges from the selection by calling `selection.removeAllRanges()`. Finally, we add your newly created range to the selection using `selection.addRange(range)`.

That's it! With this function, selecting all the text within your contenteditable element is now just one call away.