We Keep Coding

How to select text and then perform a cypress test on it?

I have a small application to test on cypress. It has a editor for user to add description and stuff. The user can make the text bold, italic etc. The user can also remove the formatting added so far on the text. But to remove the formatting the text should be selected like we normally do in any word editor.
My question is how can I test this feature while keeping the text selected.
A simple code example would be as follows:
<p>This is the description text</p>
So far I have got this but this does not keep the text selected of course, any idea how to cater this?
cy.get('p').contains('This is the description text');
cy.get('.remove-formats').click();
cy.get('.tools')
.within(() => cy.get('button').should('not.have.class', 'is-active'));
What change should I make in the first line that the text stays selected when the second line executes as I want the remove formats to be performed on the text only. Any help would be appreciated.
Edit:
The text editor is very simple just like the one we have for stackoverflow.
Similar to how we need to select the text first and then click bold to get the text bold, otherwise it does not imply to the text. How would I structure cypress tests for this?
I have selected the text through dblclick() but as soon as I click on any option to test that feature the text does not stay selected in cypress tests.

You can use double click to select the text.
cy.contains('This is the description text').dblclick()
You can also use a combination of ctrl+A
cy.contains('This is the description text').click().type('{ctrl+a}')

Try to use
.type("{selectall}{leftarrow}")
from cypress docs {selectall} - Selects all text by creating a selection range

Using a Chrome extension to replace characters spanning more than one line in a Facebook status update

I have created a Google Chrome extension to allow users to select text in a component. This works great for most sites. However, Facebook handles its status updates differently. It seems that even though you are filling in what seems to be a single text box, it is actually using a div > div > span > span construct for every single line in this text box. I have no idea why they chose to do this but it makes replacing multiple lines of text much more complex.
Is there a way to select multiple lines (or even contiguous portions of multiple lines) of text in a Facebook status update and replace the data?
The relevant portion of my code looks like this:
function replace_text(language){
let selection = window.getSelection();
string = selection.toString();
/* This section contains code that uses string.replace to replace characters in the string. */
document.execCommand("insertText", false, string);
}
Based on the way my code works now, if I replace text on a single line I have no problems. But, if I replace text that spans multiple lines I end up with a blank unusable input box. Undoubtedly it is because it is removing portions of the html code. How can I fix my code so that the replacement process works properly not only for other sites but also for Facebook?

As of this moment, the one common theme among all status updates (and comments) are that their texts reside within a single or set of span elements with the attribute data-text set to true. So let's target those:
document.querySelectorAll("span[data-text='true']");
For me, I've typed into the status field 3 lines and comment field 1 line of dummy text. So when I execute the above code into the console it returns an array of those four cumulative lines:
>>> (4) [span, span, span, span]
With that array, I can use the Array.prototype.forEach() method to iterate through the spans and replace the innerText:
document.querySelectorAll("span[data-text='true']").forEach(function(element) {
element.innerText = element.innerText.replace('Lorem ipsum','Hello world');
});
However, it is important to note that these changes are being made in the HTML itself and Facebook doesn't store all of its data directly in the HTML. Therefore it can cause undesirable events to occur when you type text into a field, unfocus, change the text in the field, and refocus that field. When you refocus I believe it grabs data of what the text was, before you unfocused that field, from an ulterior source like React's Virtual DOM. To deter it from doing that, the changes either need to be made after clicking the field (real or simulate) or as the user is typing using some sort of MutationObserver (src).

javascript: show share button by selecting of text from an article

If a user select some text from the article of a webpage then show share and copy button for the following selected text.
I want to do something like this..
the guardian

There is no inbuilt event for text selection but you can use
onmouseup this would be invoked whenever user releases his left mouse button. After every such event we can check if the user has selected any text or not
window.getSelection() to test for any text selection. If the selected text is not an empty string, you can invoke your function which would show up required buttons
Here is an example with code (note - uses jQuery)
SOURCE

Javascript Manual Selection doesn't replace

I have some text in a textbox. I automatically select some of it by calling textbox.setSelectionRange(a, b). But then, when I start typing again, the letters are appended on the right of the selection instead of replacing the selected text. Is there any way I can make the selection 'replaceable' by the user?
edit: it seems that if you execute the function twice on the same piece of text, the text doesn't replace any more. So that's what happened

How to prevent multiple html selection box displayed on screen?

I have been working on the last bit of my php + ajax based datagrid project.Everything works as I designed except one thing : I cannot stop user opening multiple selection boxes...
Go my research page and use username "ChenxiMao" and password "accedo" to login(without double quotes).
Note that perhaps the images used in this datagrid would not be displayed when page is loaded for the first time(weird, I am trying to fix this, browser incompatibilities, perhaps).
If you double click on one cell in the "CONSULTANT" column, a html select box would be displayed, you can select one consultant to assign him to this task or unassign the consultant from this task. No problem for this.
The problem is : when user leaves this selection box OPEN, he/she can still open another selection box... My jquery code cannot stop people from opening multiple selection boxes.
You can ctrl-U to see the source code on this page, and check the content inside the "gridview-helper.js" for what I have been done.
I want to let user only open a single selection box. When he/she leaves the cell, the selection box should be closed, without changing the html inside...
Puzzled, screwed up for this afternoon...
Thanks for any suggestons in advance!

JavaScript is single-threaded, so you can add a mutex variable and check its value before opening a new select box.
At the top of gridview-helper.js:
var is_choice_visible = false;
In your double-click handler:
$(this).dblclick(function()
{
if (is_choice_visible)
return;
is_choice_visible = true;
...
For your select box, add an onblur handler which sets is_choice_visible back to false and deletes itself.
Unrelated tip: Growing a string in a loop is slow on older versions of Internet Explorer. It's more efficient to append to an array and join the array, e.g.:
var html = ["<select>..."];
for (var i in consultantnames)
{
html.push("<option>...</option>");
}
html.push("</select>");
return html.join("");

Have you tried using the onmouseout event on the cell, and removing the child dropdown box element if mouse out is triggered? Seems that should work.