[SOLVED] Create new DOM element if a specific height was reached with part of the old content from DOM element before

Create new DOM element if a specific height was reached with part of the old content from DOM element before

Update: 27th December 2016

I did change the heading, since every DOM element could be the target (it actually doesn't matter if it is a  element or not).
I've provided some more information about what I'm using and what I'm trying to achieve. Maybe there are native electron ways to achieve this? Or libs which could help me too?

Product: I'm going to extract tgz files with XMLs in it. Those XMLs will be used to automatically fill tables in the finished product. After that the tables and paragraphs will be editable where users can add new rows to the tables and also add new paragraphs to the page.

Framework: I'm using electron to fire the whole thing up.

Backend: NodeJS 7.x.x to make use of ES6 features

Libraries: jQuery, Bootstrap, Angular, Materialize, lodash, async, moment

Please keep in mind that I already did achieve all of my product needs. My original question was and still is if there is a more performant way of doing this:

I have a html page which can have 'n' containers called pages. A page can hold multiple  elements. This  elements are set to contenteditable="true".

Now I'm trying to create a JavaScript function which is checking the single page height with something like this:

// Set max container height to 10cm.
let containerMaxHeight = 377.95276 // 1 cm = 37.795276px;

if(containerElement.clientHeight > containerMaxHeight){
/**
 * do desired stuff.
 */
}

everything easy so far. The function is getting the innerHTML of the  element which is currently being edited and "break the site" into a new site if the page height is above the limit. I have thought out a recursion which is removing words (most of the time 1-3) of the old  element and inserting them to a newly created page with a  element until the maximum height of the old page is set to its maximum value.

Here is an example of my recursion (simplified) which is removing words from the end of innerHTML like this:

let lastWordToBeRemoved = oldParagraphElement.split("\\s+").pop();

// append old value to new <p>
newParagraphElement.innerHTML += lastWordToBeRemoved;

// remove last Word from old <p>
oldParagraphElement.innerHTML.slice(0, -lastWordToBeRemoved.length);

/**
* Recheck height of old page container if it is above the 
* maximum redo above code
*/

I've started out with this example: https://delight-im.github.io/HTML-Sheets-of-Paper/ as you can see the pages are getting bigger and bigger if you edit them. I've already prevented that with my JS function.

Now that you have an idea of what I'm doing: Is there a more performant and or elegant way of doing this? I'm highly interested to hear how you would solve this problem.

If there is anything still unclear let me know, I will update my answer.

Thank you in advance!

Solution

Instead of splitting words, I think you should insert another p element into the expected position instead. Then you can easily move the exceeding paragraph into the new page. For example

paragraphElement.innerHTML = paragraphElement.innerHTML.replace(lastWordToBeRemoved, '</p><p class="exceeding-paragraph">' + lastWordToBeRemoved);
newPage.insertBefore(oldPage.querySelector('.exceeding-paragraph'), newPage.firstElementChild);