We Keep Coding

JavaScript: How to correctly handle content break in contenteditable when user hits enter and caret is within html nodes?

I'm working on a simple block editor system and I'm struggling on moving / styling the content between blocks when the user hits enter in the middle of it.
Let's say I have this editable div, with the caret being shown as "|" below:
<p contenteditable="true">this is my <strong><em>content |with</em> some styles</strong></p>
If I hit enter, I want to achieve this:
<p contenteditable="true">this is my <strong><em>content </em></strong></p>
<p contenteditable="true"><strong><em>with</em> some styles</strong></p>
More precisely, I'm already handling the node creation (p tags above on enter key for instance).
Where I'm struggling is with the content itself when user hits enter and that the cursor is within html nodes. Here, the caret is positioned within a strong and em nodes. I find it really hard to (1) determine its exact position if there are multiple HTML child nodes involved like above and (2) split the inner content accordingly ("this is my content with some styles") and reassigning the <strong> and <em> tags where they are logically supposed to be on both lines.
Also, having multiple contenteditable elements is on purpose and a current constraint.
Would greatly appreciate some guidance on this in pure JavaScript. Thanks!

In case someone is having the same issue, here's how I solved it:
// START: Somewhere in my code
const wrapper = document.querySelector('.wrapper') // Content wrapper
wrapper.addEventListener('keydown', handleKeyDown)
const handleKeyDown = (e) => {
if (e.keyCode === 13) { // User hits enter
e.preventDefault() // cancel enter
// ... other logic
splitContent(e.target) // call my method to split content if required
}
}
// END: Somewhere in my code
// the method that solved my issue, using Range and Selection objects
const splitContent = (node) => {
const range = window.getSelection().getRangeAt(0)
// Select the end node and its offset from the caret
range.setStart(range.endContainer, range.endOffset);
// End the selected range at the end of the node content
range.setEnd(node, node.childNodes.length)
// Extract content from the defined range (the key is here)
const content = range.extractContents()
// Call another method to use this extracted content with formatting intact
doWhateverWithTheExtractedContent(content)
}

Cannot delete HTML element in contentEditable parent if said element is the first child

The problem
I am building a custom boolean search input that should accept the boolean tags under the form of some "boolean tag bubbles" that can be added to the query via a click. Basically, instead of typing {AND} the user can click on the "AND" boolean tag and it is added to the input. Please see the picture attached to understand the layout - https://i.imgur.com/Fwa00zA.png
LE:This behaviour appears to happen only on Chrome.
Regarding the problem: if a tag is added first in the input, (like in the layout example picture) and after adding the tag the types characters only to return before the tag and press backspace, the tag is not going to get deleted.
The tag can be removed via backspace only if the user deletes all the characters added - basically moving the caret at the end and then via backspace deleting everything.
What I have already tried
Initially I made a connection between the problem and all the spans that were generated when I was moving between with my "left/right" arrow keys between the characters toward the boolean tag. Therefore I wrote some code that every time I press a key, I scans the contentEditable parent and clears all the spans and brs created. This cleared some strange cases but I am still stuck with not being able to delete the tag if it's the first element and if there are characters or other elements after the boolean tag.
Several hours ago I found this - contenteditable div backspace and deleting text node problems.
The function that inserts my boolean tag creates the tag as an element. I tried creating the node element as a as suggested in that post. Even as a button, if my element is the first element and it has characters after, it cannot be deleted.
Some of my code
For my current version with the boolean tags as elements, this is the method that creates, on click, my boolean tags and adds them to the parent element.
addBooleanTag($event){
this.$refs.divInput.focus();
if(this.typed == false & this.input_length == 0){
this.$refs.divInput.innerHTML = ''
var space = '';
this.typed = true
this.saveCursorLocation();
}
rangy.restoreSelection(this.saved_sel);
var node = document.createElement('img');
node.src = $event.img;
node.className = "boolean-button--img boolean-button--no-margin";
node.addEventListener('click', () => {
this.$refs.divInput.removeChild(node);
})
this.insertNode(node);
this.saveCursorLocation();
},
This is how the contentEditable parent element looks like
<div
#keydown.enter.prevent
#blur="addPlaceholder"
#keyup="saveCursorLocation(); clearHtmlElem($event)"
#input="updateBooleanInput($event); clearHtmlElem($event)"
#paste="pasted"
v-on:click="clearPlaceholder(); saveCursorLocation(); deleteBooleanTag();"
class="input__boolean input__boolean--no-focus"
ref="divInput"
contenteditable="true">Boolean search..</div>
This is the method that clears my contentEditable parent of breaks and spans
clearHtmlElem($event){
var i = 0;
var temp = $event.target.querySelectorAll("span, br");
if(temp.length > 0){
for(i = 0; i < temp.length; i++){
if(!temp[i].classList.contains('rangySelectionBoundary')){
if (temp[i].tagName == "br"){
temp[i].parentNode.removeChild(temp[i]);
} else {
temp[i].outerHTML = temp[i].innerHTML;
}
}
}
}
},
Expected behaviour vs actual results
I expect that when I press backspace with the caret being after the boolean tag (img element) to delete the element. A normal behaviour.
Instead, it does nothing. The only way to delete that added element/boolean tag is if the tag is the last thing to be deleted.
Please see this gif that I made while reproducing the problem. https://imgur.com/a/vAXop2s - when the console "freaks out" it's basically me pressing backspace against that img element/boolean tag and the element refusing to be deleted.

With some help, I managed to figure this out. I am posting this here for anyone who has problems with contentEditable.
Do not style the contentEditable element. I had some style on the contentEditable div and that was messing a lot of stuff like caret positioning, backspace not working properly etc. Make a wrap around it and move the styling on that wrapper.
LE: One (and probably the main) reason why the contentEditable element was misbehaving was due to having display: flex attached to it.

How to fix cursor position when prevent browser's default paste action

There is a custom method to insert HTML(html fragment not just plain text) into an editor (Rich Text Editor), but for some reason I have to use e.preventDefault to prevent browser default paste action and insert the copy data later. My code looks like below:
editor.addEventListener('paste', function(e) {
var data = e.clipboardData.getData('text/html'),
newData;
e.preventDefault();
newData = custom.handle(data);
custom.insert(newData);
}, false);
After custom.insert(newData), cursor is still blinking at the origin position. I expected it to have moved the end of newData.
Can anybody help me fix that?

Your question may already have an answer here:
Use JavaScript to place cursor at end of text in text input element
Set focus and cursor to end of text input field / string w. Jquery
With Mike Berrow's example, you can replace the input value with itself to set the carret to the end of the input. This would seem to be the most reliable way to do it, event if it is slightly hackish.
myInput.value = myInput.value;
With browsers that support it, you can rather use the setSelectionRange method. Since you already use clipboardData, this shouldn't be a problem.
myInput.setSelectionRange(myInput.value.length, myInput.value.length);
Pay attention to the fact that the value length may be harder to get if you are working with a textarea.
https://developer.mozilla.org/fr/docs/Web/API/HTMLInputElement/setSelectionRange

I don't know what properties of functions your custom has, but you can use this the code to move the cursor to the end of the text in an input and textarea:
custom.selectionStart = custom.selectionEnd;
If newData is pasted in the middle or beginning of the text, then you will have to calculate the length of newData and move the cursor by that many characters. Something like:
custom.selectionStart = custom.selectionStart + newData.length;
custom.selectionEnd = custom.selectionStart;
Edit to answer your question: How to calculate the length of text with HTML tags?
Well, this will be a bit tricky. You can create a temporary HTML element in memory, add the newData in it, and calculate the length of its innerText property. Something like this:
var temp = document.createElement("div");
temp.innerHTML = newData;
custom.selectionStart = custom.selectionStart + temp.innerText.length;
custom.selectionEnd = custom.selectionStart;
Note: innerText is was introduced by Microsoft and is not a W3C standard. The implementation varies across browsers although most replicate IE's behavior. innerText is style-aware and will only return the visible text.

how to get selected text, but can I get surrounding context in javascript?

I am able to grab the text that a user has selected on a web page,
using this code:
function getSelected() {
var userSelection;
if (window.getSelection) {
selection = window.getSelection();
} else if (document.selection) {
selection = document.selection.createRange();
}
}
is it posible for me to get the words around the
selected word.
Take these sentences for example: "If you need to
framglubble the zartbox, then you should buy the red widget.
Otherwise you can buy the blue widget and save some money."
My code will tell me if the person has selected the word "widget".
But I'd like to know if the selection is after "red" or "blue". Is
this possible? I've been scouring the Internet for some advice, and
I'm having trouble finding an answer.
thank you for your help

I have written quick script that can identify the part before selection and after selection inside the same DIV element.
However if the same DIV contains the same word more than one time and you select only that word, the current code I wrote can't identify if it's the first or second selected word so bottom line it will not answer your needs.
Anyway, you can see/copy/test the code here: http://jsfiddle.net/kvHxJ/ just select something and see the alert that appears.
If it's enough for your needs after all then great, accept this answer and move on... otherwise I need to know: can we assume the user will select whole words only, one word only? If the answer is yes I do have idea how to go around this.

The way to do this in non-IE browsers is to obtain a Range object from the selection. The range has a start and end boundary, and each boundary of the range is expressed as an offset within a node; if the boundary is within a text node, this offset will be a character offset.
For example, if the following was a text node and the selection is delimited by pipes:
"red |widget| blue widget"
... then the range you'd get from the selection would have a start offset of 4 within the text node.
The following will get you a Range representing the selection and alert the start boundary:
var sel = window.getSelection();
var selectedRange = sel.rangeCount ? sel.getRangeAt(0) : null;
if (range) {
alert("Offset " + selectedRange.startOffset
+ " in node " + selectedRange.startContainer.nodeName);
}
Ranges may be compared to other Ranges, so if you wanted to know, for example, if the current selection came after the word "blue" in the above text node, you could create a Range encompassing the word "blue" and compare it with the selected Range:
// Assume the text node is stored in a variable called textNode
var blueRange = document.createRange();
blueRange.setStart(textNode, 11);
blueRange.setEnd(textNode, 15);
var selectionIsAfterBlue =
(selectedRange.compareBoundaryPoints(Range.END_TO_START, blueRange) == 1);
In IE, none of this works and everything is done differently, generally with much more difficulty. To normalize this to single consistent interface, you could use my Rangy library.

IE has the move set of methods, which reduces this problem to just a couple of lines to expand the selection forward or backward any number of words (see http://www.webreference.com/js/column12/trmethods.html). From there, it's just a matter of comparing text against any arbitrary list of values. Other browsers don't have this feature AFAIK. Fate of the browser wars: one develops an awesome feature ignored or barred by patent from any other, so the feature is forever lost and avoided as burden of cross-browser support for all these innovations inevitably falls squarely on the website designers.
So, below is a generalized function to only get the ID of the parent element of the selected text. And, to work with this cross-browser solution, you have to wrap each word in it's own element complete with unique ID or other attribute. With this setup, it should then be a relatively painless jump to looking ahead and back at sibling or sequentially ID'd/named elements.
The catch here is that the client has to click/drag from the start of the word or phrase to the end, and absolutely no bordering spaces. Even double-clicking on a word will cause it to reference the next element (or in the case of IE, the parent DIV). Additionally, you should add code to restrict the selection boundary to a single parent DIV, as the below code may also expand the selection to surrounding elements. But hopefully you can take fixing that up from here. Otherwise, it's up to using vectors to pinpoint the coordinates of a text compared to all surrounding text.
<script type="text/javascript">
function get_selected_element_id() {
if (window.getSelection) {
// FF
var range = window.getSelection();
}
else if (document.selection) {
// IE
var range = document.selection.createRange();
}
if (range.focusNode) {
// FF
var test_value = range.focusNode.parentNode.id;
}
else {
// IE
var test_value = range.parentElement().id;
}
return test_value;
}
</script>
</head>
<body>
<div id="test_div">
<span id="test1">test</span> <span id="test2">asdf</span> <span id="test3">test2</span> <span id="test4">bla</span>
</div>
<button onclick="alert(get_selected_element_id());">go</button>

Div Editable and More... More

Well,
I need to replace a word, in a div contentEdible property on, by the same word but formatted...
Like this:
<div> My balls are big </div>
To this (replace the word: balls):
<div> My <font style="color:blue;">balls</font> are big </div>
In a contentEditable this happens dinamically, while the user type the text the replacements happens. I think that a simple event onkeydown, onkeyup, or onkey press, can solve this part.
But, the trouble is with the caret, that after all that i tryed, it stay before the word replaced, when should be stay after. I tryed write some js code, tryed find some jquery scripts, but all them failed in this situation...
Any one has some ideia, or trick ?
I think:
--> Record the length of the word unformatted.
--> Delete this word
--> Put new word formatted.
--> Walk with the caret, to position based this formatted word length.
--> Is it?
PS: I have to considerate a word in any place of this div.
I don't know how to write this code that do what i say above.
Correct me, if i'm wrong.
Since yet, thanks!
Edit[1]: I want that this works on Mozilla Firefox, specificlly;

I only have IE6/7 on this machine, but maybe you can apply the concept to other browser versions of Ranges (or maybe this is cross-browser?).
Basically we store the cursor position, make our search/replacement, then put the cursor back where it was:
html:
<div id="content" contentEditable="true" onkeyup="highlight(this)">This is some area to type.</div>
and the script:
function highlight(elem) {
// store cursor position
var cursorPos=document.selection.createRange().duplicate();
var clickx = cursorPos.getBoundingClientRect().left;
var clicky = cursorPos.getBoundingClientRect().top;
// copy contents of div
var content = elem.innerHTML;
var replaceStart = '<font style="color:blue">';
var replaceEnd = '</font>';
// only replace/move cursor if any matches
// note the spacebands - this prevents duplicates
if(content.match(/ test /)) {
elem.innerHTML = content.replace(/ test /g,' '+replaceStart+'test'+replaceEnd+' ');
// reset cursor and focus
cursorPos = document.body.createTextRange();
cursorPos.moveToPoint(clickx, clicky);
cursorPos.select();
}
}