Restrict selection between paragraph - javascript

I´m working in a web application using angular, one of the sections is document section where the user is gonna be able to select the text and highlight the text, i´m using window.getSelection() to extract the selected text and appended in to a <mark> tag to highlight the text, but one of the requirements is that the is user is not gonna be able to select text between paragraphs for example:
In the image there is a selection between paragraph is there any way to avoid this, or stop the selection when the user jump from one paragraph another.

Ok i found small hack of how to do it, i attach some properties to the paragraph tag here i put the code.
<p oncut="return false" onpaste="return false"
onkeydown="if(event.metaKey) return true; return false;" contenteditable="true"
spellcheck="false" autocorrect="off">Text</p>
Using this the selection is not possible to select between elements.

Maybe you could calculate a substring before attaching it to the mark.
Using a regex like /\r?\n/ or something similar to keep only the first chunk of the copied text in both *NIX and Windows systems (user-agnostic, to some extent).

Related

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 to insert tags inside a input or textarea in html

I am going to design a textarea for writing some formula. Since typing entire formula may cause mistake in formula, I think its is better that users drag and drop variables from another panel. I believe that stackoverflow's tag option could be usefull for this purpose.
How it is possible to design a text area like this?
You cannot directly convert the text box into tag. But you can make it look like a text box by giving a container to have the tag inside and a text box.
<div id="container"><span id="tagContainer"></span>
<input type="text" id="inputText" placeholder="input here.." />
</div>
Using keypress event, you can grab the value of textbox and append it into tagContainer. You can see the implementation here: JSFiddle
You can't.
However you can put another text block with highlight content at same position with that textarea or input.
Reference:
Visit https://codepen.io/lonekorean/pen/gaLEMR
This plugin might be helpful for you. http://aehlke.github.io/tag-it/

Formatting buttons for contentEditable reflect selection formatting

We have a contenteditable="true" div which we use as a wysiwyg text editor. We added a basic formatting toolbar similar to the one that uses Medium.com
Using execCommand(), we're able to make the selected text bold if, for instance, the user presses the bold button. This works great.
However, something we haven't managed to do yet is to make the bold button highlighted if the user selects a part of the text which is in bold, like illustrated in the picture above. This could be easily done by passing a is-active class on the button of course, but how do we know that the selected text is, in this case, bold?
We think it could perhaps be done using the Selection API but this use case seems undocumented.
since the execCommand() use html tag wrappers like B tag for bold .
So when you are selecting the word i am sure you are using some sort of js to show that formating tollbar just add some more code in that function like this.
if(selectedElement.nodeName == "B"){
toolbarBoldButton.classlist.add("is-active");
}
Note: i am using js function "nodeName" to get the tag name which was wrapped around the execCommand() in this case bold/B then matching if it matches the tag and if true i am adding the is-active class to the toolbars Bold style element.

dynamic highlighting using javascript/uiwebview ios

I have some text content displayed on a UIWebView which is plain html. The current paragraph is highlighted in yellow and the user has selected the word 'If the'. (link to image: http://i.stack.imgur.com/GKp9h.png)
1) When the user selects some text on the uiwebiew, how do I perform dynamic highlighting? i.e. as the user is selecting text, what ever text is selected gets highlighted in purple?
For instance, I like the words 'If the' to be highlighted in purple (maybe using window.getSelection() ? ) and that this behaviour is dynamic such that as the user selects subsequent words, these words under selection gets highlighted in purple.
What I am struggling with at the moment is:
1) What event handler (JavaScript or iOS) should I listen to, when the user is selecting some text on the uiwebview? This is before the uimenucontroller opens up.
2) Once, I get the selected text (using window.getSelection(), how do I modify the DOM in a clean efficient way such that the selected text gets highlighted?
I suppose for 2) I cannot directly use style.backgroundColor=<hex code of purple>
There's a very similar question here: How to get selection text from UIWebView?
From the accepted answer there, looks like this might answer your question: http://zaldzbugz.posterous.com/how-to-mark-or-get-the-highlighted-string-ins/ There's a discussion about getting and styling the text selection in a web view.

Jquery: set style part of text in input text

I want to create some text based on user input, and when user enter some text, the first word will automatically set backgroundcolor, but the other words still remain same (no background color), can I do this ?
Thanks
WYSIWYG editor will be the best choice for previewing text and editing at the same time.
Some popular ones are
TinyMCE
STEditor
FCKeditor
You could do it with an iFrame if you turn designMode on, add an event listener for keypress then wrap the first word in the iFrames body with <span style='background-color: red'></span>. You would then have to have a hidden form field that mirrored the data that is typed into the iFrame (removing the span tag).
If you want to go this way let me know if you need any more help.

Categories