Develop Reference

How can I (re)calculate Range object's for pre-added annotation-elements in a given text

Context:
I'm currently working on a editor that also needs to be able to show 'dynamically' added annotations into it. These are not saved as part of this text/body but as seperate entities. These annotations (when rendered are basic mark-elements) are saved into a database from another page where this editable text is shown as rendered text to another group of end-users.
To be able to add annotations (from that other page) into the given text I check for the user's Range object (using window.getSelection().getRangeAt(0)) and serialize this Range-object to be able to save it (ex. 2/0:448,2/0:632). When page is being loaded I deserialize/reapply this range to the document.
(using Rangy: https://github.com/timdown/rangy)
Example of a text
<article>
<p>
Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nun<mark class="annotation" data-thread-id="47" data-encoded-range="0/0:497,0/0:519">c, quis gravida magna </mark>mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem n<mark class="annotation" data-thread-id="44" data-encoded-range="0/0:955,0/0:968">eque sed ipsu</mark>m. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum<mark class="annotation" data-thread-id="45" data-encoded-range="2/0:448,2/0:632"> purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci</mark> luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer
<mark class="annotation" data-encoded-range="6/0:74,0/2:7" data-thread-id="50">lacinia.</mark>
</p>
<h2><mark class="annotation" data-thread-id="50" data-encoded-range="6/0:74,0/2:7">Test</mark></h2>
<p>
<mark class="annotation" data-thread-id="50" data-encoded-range="6/0:74,0/2:7"> libero</mark>. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus<mark class="annotation" data-thread-id="48" data-encoded-range="0/2:231,0/2:253"> orci luctus et ultric</mark>es posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.
</p>
</article>
The problem:
Whenever any change is happening to the (editable) text an, any or all annotations become invalid (depends on where the edit is happening) because all Ranges (offsets and possibly it's start/end nodes) are different now.
The Question:
How can I 'recalculate' these serialized Range's so the offsets will stay correct with any change to the text?
What I have attempted / thought of:
simply add/decrease the offsets of 'following annotations' by 1 naively and directly in the serialized strings.
Sadly this is very error-prone and won't support many edgecases (like pasting in formatted text, deleting ranges of text, ...)
try to loop through all annotation-elements in text and try recreating Range object's
either by focussing innerText of element re-do getSelection().getRangeAt() but this gives wrong range (of inside the mark-element)
or trying to recalculating offsets and use Rangy's serializePosition(). This does not seem to give me the expected results (different nodeIndexes and incorrect offsets?)
(to illustrate attempt #2.2 a bit:
const parent = annotationElement.parentNode as Node
const subject:string = parent?.innerHTML ?? ""
const tag = annotationElement.innerHTML
? annotationElement.outerHTML.slice(0,annotationElement.outerHTML.indexOf(annotationElement.innerHTML))
: annotationElement.outerHTML
// With possible HTML tags
const newStartRaw = subject.indexOf(tag)
const newStartClean = subject.substring(0, newStartRaw).replace(/<\/?[^>]+(>|$)/g, "").length
const newEnd = newStartClean + annotationElement.innerHTML.length
// this serialized string is wrong
const serialized = rangy?.serializePosition(parent, newStartClean, referenceNode) + "," + rangy?.serializePosition(parent, newEnd, referenceNode)
)
I would really appreciate the help!
If I need to clarify more or can add anything, please do tell

It seems <html> element is like a pseudo window element or view container element?

If any webpage has 3000px tall of content, I would have expected both
document.body.offsetHeight
document.documentElement.offsetHeight
to be both 3000px. Note that document.documentElement is exactly the same as the <html> element:
document.documentElement === document.querySelector("html") // true
However, document.documentElement.offsetHeight is not 3000px. It is merely 800px or 600px (as tested on the current StackOverflow page), and it just depends on how tall the window of the content area (or viewport) roughly is.
In fact, document.documentElement.scrollTop changes when the webpage is scrolled up. document.body.scrollTop remains 0 all the time.
This is exactly the same behavior as if there is a container div of 200px × 200px, with overflow set to auto or scroll, and then the content div inside the container div is 2000px × 2000px. In such case, the container div has a small clientHeight or offsetHeight (about 200px) and scrollTop changes when the content is scrolled up and down.
Is this how it is originally designed to be? Maybe for many years I thought <html> and <body> elements have almost the same: the content displayed to user is the same (<head> isn't displayed) and their height and width are the same and it was a misconception? It feels like the design principle is that <html> is like a view container or a pseudo window.
Even the CSS participated in this:
getComputedStyle(document.documentElement)["height"] // 600px or small number
getComputedStyle(document.body)["height"] // 3000px
But perhaps one strange behavior is, if I add a scroll event listener, I have to add it to document or window but not document.documentElement:
document.documentElement.addEventListener("scroll", ... // won't work
And it is different if it is the case for the 200px × 200px container case above. The event handler would be added to this 200px × 200px container.
Example involving document.documentElement.scrollTop and document.documentElement.scrollHeight (when everything is scrolled up, then the background becomes yellow):
document.addEventListener("scroll", ev => {
// console.log(ev);
document.body.style.background = document.documentElement.scrollTop + document.documentElement.clientHeight === document.documentElement.scrollHeight ? "yellow" : "white";
})
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Vel risus commodo viverra maecenas accumsan lacus vel. Magnis dis parturient montes nascetur. Amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor. Nullam non nisi est sit amet facilisis magna etiam. Porttitor leo a diam sollicitudin tempor id eu. Turpis egestas sed tempus urna et pharetra pharetra massa massa. Phasellus egestas tellus rutrum tellus pellentesque. Arcu odio ut sem nulla pharetra diam. Felis imperdiet proin fermentum leo vel orci. Id donec ultrices tincidunt arcu non. Egestas pretium aenean pharetra magna ac placerat. Amet risus nullam eget felis.
Laoreet id donec ultrices tincidunt arcu non sodales neque. Dolor magna eget est lorem ipsum dolor. Interdum consectetur libero id faucibus nisl. Amet purus gravida quis blandit turpis cursus in hac habitasse. Ultrices gravida dictum fusce ut placerat. Tortor consequat id porta nibh venenatis cras sed felis. Sagittis eu volutpat odio facilisis mauris sit. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet. Vel quam elementum pulvinar etiam non quam lacus. Blandit turpis cursus in hac habitasse platea dictumst.
Amet justo donec enim diam vulputate. Cursus mattis molestie a iaculis at. Massa massa ultricies mi quis hendrerit dolor. Est ultricies integer quis auctor elit. Id venenatis a condimentum vitae. Amet mauris commodo quis imperdiet. Pretium viverra suspendisse potenti nullam ac. Ultrices dui sapien eget mi. Mattis molestie a iaculis at erat pellentesque adipiscing. Commodo quis imperdiet massa tincidunt. Arcu non sodales neque sodales. Nibh tortor id aliquet lectus proin. Nam at lectus urna duis convallis convallis. Faucibus nisl tincidunt eget nullam non nisi.
</div>
I got very different results for the following
console.log(document.body.offsetHeight);
console.log(document.documentElement.offsetHeight);
inside the current StackOverflow webpage (using Google Chrome's developer console). But if I create a very long plain HTML file, and do the above two lines in its <script> or in developer's console, I got similar numbers for <body> and <html>. So I am confused why a plain page and StackOverflow behave differently. It seems <html> can be used as a pseudo window or not as one.
But inside the long plain HTML page, if I do:
console.log(document.body.clientHeight);
console.log(document.documentElement.clientHeight);
I was able to get 2400px for the and 680px for <html>. So it looks like it is still using <html> as a pseudo window or view container. But I thought clientHeight and offsetHeight are very close but just the scrollbar size is included in offsetHeight. I wonder why they are so different in this case.
Example:
console.log(document.body.clientHeight);
console.log(document.documentElement.clientHeight);
body { font-size: 36px; }
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At quis risus sed vulputate odio ut enim blandit. Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis gravida. Sit amet purus gravida quis blandit. Et ultrices neque ornare aenean euismod elementum. Varius duis at consectetur lorem donec massa sapien faucibus et. In iaculis nunc sed augue. Platea dictumst quisque sagittis purus sit amet. Tortor at risus viverra adipiscing at in tellus. Mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien. Rhoncus est pellentesque elit ullamcorper dignissim cras. Porttitor lacus luctus accumsan tortor posuere. Velit sed ullamcorper morbi tincidunt ornare massa eget egestas. Sed nisi lacus sed viverra tellus. Et ligula ullamcorper malesuada proin libero. Velit scelerisque in dictum non consectetur a erat nam. Non tellus orci ac auctor augue mauris augue neque gravida. Proin libero nunc consequat interdum varius sit. Hac habitasse platea dictumst quisque sagittis purus sit amet.
Dolor morbi non arcu risus. Elit duis tristique sollicitudin nibh sit amet commodo nulla. Tincidunt praesent semper feugiat nibh sed pulvinar. Amet consectetur adipiscing elit pellentesque habitant morbi tristique. Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit. Lectus mauris ultrices eros in cursus turpis massa tincidunt dui. Sit amet nisl suscipit adipiscing. Amet nulla facilisi morbi tempus iaculis. Suspendisse sed nisi lacus sed viverra. Nullam ac tortor vitae purus. Risus quis varius quam quisque id diam vel quam. Enim ut sem viverra aliquet eget. Ridiculus mus mauris vitae ultricies leo integer malesuada nunc vel. Dictum varius duis at consectetur lorem donec massa. Eu feugiat pretium nibh ipsum consequat nisl vel. Amet risus nullam eget felis eget nunc lobortis. Egestas purus viverra accumsan in nisl.
Dignissim diam quis enim lobortis. Eget duis at tellus at urna condimentum mattis pellentesque. Eu nisl nunc mi ipsum faucibus vitae aliquet nec. Lectus urna duis convallis convallis tellus id interdum velit laoreet. Velit ut tortor pretium viverra suspendisse. Euismod in pellentesque massa placerat duis ultricies lacus sed turpis. Et sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque. Id faucibus nisl tincidunt eget nullam non nisi est. Ut venenatis tellus in metus vulputate. Lectus proin nibh nisl condimentum. Bibendum at varius vel pharetra vel. Quam vulputate dignissim suspendisse in. Ut etiam sit amet nisl purus in mollis nunc. Blandit volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque.
Ac ut consequat semper viverra nam libero justo. Lacus vel facilisis volutpat est velit egestas. Amet aliquam id diam maecenas ultricies. Enim tortor at auctor urna. Magna etiam tempor orci eu. Sollicitudin tempor id eu nisl nunc mi ipsum. Etiam tempor orci eu lobortis elementum nibh tellus. Velit ut tortor pretium viverra suspendisse potenti nullam ac tortor. Nulla facilisi cras fermentum odio eu feugiat pretium nibh. Eu tincidunt tortor aliquam nulla facilisi cras fermentum. Proin libero nunc consequat interdum varius sit amet mattis. Semper risus in hendrerit gravida rutrum quisque non tellus orci. Risus nullam eget felis eget nunc lobortis.
Risus sed vulputate odio ut enim blandit volutpat maecenas volutpat. In nulla posuere sollicitudin aliquam. Sagittis nisl rhoncus mattis rhoncus urna neque viverra. Sit amet justo donec enim diam vulputate. Ut faucibus pulvinar elementum integer. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing elit. A condimentum vitae sapien pellentesque habitant morbi tristique. Vel fringilla est ullamcorper eget nulla facilisi. Vitae purus faucibus ornare suspendisse sed nisi lacus sed viverra. Aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque. Ultricies integer quis auctor elit sed vulputate mi. Euismod quis viverra nibh cras pulvinar mattis. Sapien pellentesque habitant morbi tristique senectus et netus et malesuada. Mi tempus imperdiet nulla malesuada pellentesque elit eget.
Tincidunt augue interdum velit euismod in pellentesque massa placerat duis. Nam libero justo laoreet sit amet. Feugiat pretium nibh ipsum consequat nisl vel pretium lectus. Facilisi etiam dignissim diam quis enim. Augue lacus viverra vitae congue eu. Velit scelerisque in dictum non consectetur a erat nam. Amet purus gravida quis blandit turpis cursus in. Tortor pretium viverra suspendisse potenti nullam ac. Dolor sit amet consectetur adipiscing elit ut. Proin sed libero enim sed faucibus turpis in eu. Amet nulla facilisi morbi tempus iaculis urna id volutpat. Ut pharetra sit amet aliquam id diam maecenas ultricies mi. At in tellus integer feugiat. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Dui nunc mattis enim ut tellus. Elit duis tristique sollicitudin nibh. Ac odio tempor orci dapibus ultrices in. Netus et malesuada fames ac turpis egestas sed. Quam lacus suspendisse faucibus interdum posuere lorem ipsum. A lacus vestibulum sed arcu non odio euismod lacinia.
</div>
One thing we also need to be careful about, is as stated in JavaScript Definitive Guide 6th Ed p.395 and p.903 and on the specs, clientWidth and clientHeight behaves differently if it is on the <html> element, which is to give the viewport's width and height excluding any scrollbar. So when the page is studied, this needs to be kept in mind.
Likewise, there is even such an exception on scrollTop on <html>. It is the scrollY of window in such a case..
I think one conclusion so far is, it seems <html> is somehow treated as a pseudo window or viewing area programmatically, as how its properties are specified in the specs.

First, if here in Stack Overflow's page you get the .offsetHeight and getComputedStyle()['height'] to be the size of the viewport, it is because there is a rule stating html { height: 100%; }.
Without this rule, you'd have it the same size as the body:
console.log( "height:auto" );
console.log( "offsetHeight", document.documentElement.offsetHeight );
document.documentElement.classList.add( "SO" );
console.log( "height:100%" );
console.log( "offsetHeight", document.documentElement.offsetHeight );
body {
height: 1000vh;
}
html.SO {
height: 100%;
}
Now for the scroll related values, the document.documentElement element is the de-facto document.scrollingElement in a normal web-page:
console.log( document.scrollingElement === document.documentElement );
and it is the document.body in quirks mode.
Given this special status, the scroll related values of the scrollingElement actually return the root node's ones, which has its containing block's dimensions set to the viewport's dimensions in normal web pages.

javascript properly split html string mantaining tags

I'm in need to split HTML string for further processing by my side. I have a string that contains all the HTML.
My needs keeps only in split all of them in an array, mantaining the tags. It should be splitted by <p>
As my further searches, it's better to not use regular expressions for that, so I need to find a proper way to do it in javascript or jquery without using external libs.
What's the best way to do it.
If it would be to use regex, it would be something like this:
str.match(/<p(.)>.*?<\/h\1>/g);
HTML example:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porttitor quam ut ullamcorper aliquam. Morbi in dapibus tellus. Phasellus lobortis ex sapien, nec malesuada ante vulputate blandit. Nullam lacinia neque mi, at iaculis ante condimentum sed. Sed luctus purus vel dictum posuere. Ut auctor lorem a <b>congue tincidunt</b>. Nulla ut ipsum libero. Aliquam erat volutpat. Donec gravida dui quis pulvinar molestie. Duis nec lacus sem. Mauris tellus nibh, tempus at mauris id, tempus eleifend libero. Nam laoreet congue suscipit. Duis sollicitudin ex eu elementum commodo.</p>
<p>Cras finibus imperdiet sapien, id sodales enim tempus sit amet. Vivamus ac ligula sagittis ante sollicitudin viverra. Pellentesque accumsan placerat massa, et aliquet purus commodo et. Aliquam molestie orci nec vehicula fermentum. In gravida ligula tempor dolor feugiat, vitae facilisis nisi facilisis. Vivamus sodales eros non vehicula scelerisque. Mauris suscipit vitae erat eu fermentum. Aenean pellentesque ut arcu consectetur malesuada. Aenean posuere ante sit amet nibh rhoncus mattis. Fusce at aliquam elit, sit amet ultrices purus. Quisque quis risus eleifend, commodo est auctor, tincidunt dui. Aliquam eros urna, tristique nec felis vel, varius eleifend nulla. Suspendisse vestibulum posuere felis in vestibulum. Nunc sit amet maximus libero. <i>Nulla placerat congue</i> lectus a ultrices.</p>
But since we shouldn't use it, how can I achieve this?
Thanks.

CKEditor - text in image preview dialog in English

I'm using CKEditor on my site and I want to change text in the Image->Properties->Preview to English.
I want to change this text:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, nulla. Aenean dictum lacinia tortor. Nunc iaculis, nibh non iaculis aliquam, orci felis euismod neque, sed ornare massa mauris sed velit. Nulla pretium mi et risus. Fusce mi pede, tempor id, cursus ac, ullamcorper nec, enim. Sed tortor. Curabitur molestie. Duis velit augue, condimentum at, ultrices a, luctus ut, orci. Donec pellentesque egestas eros. Integer cursus, augue in cursus faucibus, eros pede bibendum sem, in tempus tellus justo quis ligula. Etiam eget tortor. Vestibulum rutrum, est ut placerat elementum, lectus nisl aliquam velit, tempor aliquam eros nunc nonummy metus. In eros metus, gravida a, gravida sed, lobortis id, turpis. Ut ultrices, ipsum at venenatis fringilla, sem nulla lacinia tellus, eget aliquet turpis mauris non enim. Nam turpis. Suspendisse lacinia. Curabitur ac tortor ut ipsum egestas elementum. Nunc imperdiet gravida mauris.
Thanks

You can set this text using the config.image_previewText option.
E.g.
config.image_previewText = 'In publishing and graphic design, lorem ipsum is' +
'placeholder text (filler text) commonly used to demonstrate the graphic' +
'elements of a document or visual presentation';

try to change in path\ckeditor\plugins\image\dialogs and edit file image.js ,you can ctrl+f and search "Lorem ipsum dolor sit amet, consectetuer"

resize textbox automatically according to the content

http://jsfiddle.net/h2vMN/1/
I have a text box text inside it already, in the actual application this will be filled dynamically, but for the sake of this question it has been pre filled.
<textarea id="textarea">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor commodo ornare. Donec lobortis dui sed lectus egestas tristique. Vivamus vel metus turpis, faucibus varius risus. Aenean ante mauris, ultrices id facilisis vitae, dignissim eget sem. Quisque sed justo lectus, eget aliquet leo. Curabitur in mauris et diam fermentum venenatis. Proin ullamcorper, neque a vehicula euismod, odio enim aliquam ipsum, eu tristique urna sapien nec erat.
Aliquam erat volutpat. In in lacus cursus dolor pellentesque posuere. Cras eu metus urna, a rhoncus ligula. Ut hendrerit orci in arcu dignissim id fermentum orci vulputate. Sed ante ligula, volutpat eu convallis vel, auctor in metus. Mauris euismod, metus eget venenatis sodales, risus tellus volutpat elit, et aliquet massa tellus ut sapien. Mauris tempor posuere massa et consectetur. Duis dignissim enim a nulla ultricies vitae vulputate felis commodo. Phasellus mollis est eget odio porttitor consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus ut nibh auctor libero sagittis semper vitae quis erat.
</textarea>​
When I run the above code, it shows a tiny text area with scroll bars all over it. In other words, completely useless in terms of being user friendly. How do I automatically resize the text box according to the amount of content their is and it has a set width of 600px.
#textarea{width:600px;}​
I would like a javascript/jquery solution.
I have tried the .autoresize solution unsuccessfully, which can be found here:
http://james.padolsey.com/demos/plugins/jQuery/autoresize.jquery.js/view
Note, the height should be resized automatically

Thy this:
$(document).ready(function(){
tx = $('#textarea')
tx.height(tx.prop('scrollHeight'));
})
DEMO

$(document).ready(function(){
var heightFudgeFactor = 10;
var id = 'tempid' + Date.now();
$('#textarea').after( $('<div>').css('font-family','monospace').css('white-space','pre-wrap').css('word-wrap','break-word').attr('id',id).css('width',$('#textarea').width()).text( $('#textarea').text() ) );
$('#textarea').css('height',$('#'+id).outerHeight() + heightFudgeFactor).next().remove();
});​
Here's one way of doing it, I'm creating a secondary div that's the height of the textarea, based on content, but you'll need to play with it a little more to get it to your actual liking

I once used this plugin: http://www.jacklmoore.com/autosize
It worked fine.