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

How do I highlight new text within a input field in html

Within Servicenow portals I am trying to create a input text field that has a few requirements when the user tries to make changes to the text. Within the form if the user wants to change the text that has already been added the new input text will have to be highlighted. Only the new changes can be highlighted. The previous text will stay the same without any highlights. I have looked into the html tag but that highlights the entire text field and also tried using a 'focus' within the css tag name.
HTML:
<input type="text" value={{data.text2}}>
CSS:
input:focus::first-line { background-color: #fff2ac;
}

You could use Javascript to position a dynamically generated span with the highlighting, on top of the input ... and then update that span's text whenever the underlying input changes.
See the last option in the top answer here for more details: How to highlight text inside an input field?.
It even mentions a jQuery plug-in with this effect that you could use, or examine the source of: https://github.com/garysieling/jquery-highlighttextarea.

How can I render HTML tags inside textarea in angular forms

I have an angular reactive form in which I have a textarea field named Acceptance Criteria.
What want to achieve is written below :
When I edit the Acceptance Criteria field with the below text :
Example : My content and click on Save, the value of the field gets updated to the new one.
But actually I only want the text in bold while viewing the field's content.
I should see only My content.
Note : Any tags can be there in the HTML control named Acceptance Criteria.

How to enter text in javascript div-style input box with casperjs

A website I'm accessing utilizes a javascript code editor (code mirror) attached to a textarea box. This results in a div-style input box. How do I use casperjs to enter text into the box?
I've already tried entering text into the hidden textarea using sendkeys and it doesn't find the selector (because it is hidden).
Update:
this.evaluate(function(input) {
window.$('.CodeMirror')[0].CodeMirror.setValue(input);
}, intent_schema);
enters the text into the box as expected, but when I submit the form, the values aren't saved. Something isn't firing properly.
Thanks!

hyperlink and bold word text display after form submission with innerhtml with javascript

i display a block of text(based on user input) after form submission using innerHTML. i just wanted to know how to make a bold hyperlink within the text block. The text is displayed in a hidden panel below the form.
Many Thanks

I'm not sure I fully understood you question, but...
you can use the old HTML tags (like <b> or <i>) directly into the innerHTML = ""; without them being stripped.