handling new page on enter

dist/assets/a-doc-editor.css

@@ -5,8 +5,8 @@
 }
 
 .a-doc-editor canvas:focus-visible {
-    /* outline: auto rgb(0, 68, 255, 50%); */
-    outline: none;
+    outline: auto rgb(0, 68, 255, 50%);
+    /* outline: none; */
     background: #fff;
 }
 
@@ -109,7 +109,7 @@
 }
 
 .a-doc-editor .body .scrolling-area canvas.page {
-    background: #f3f3f3;
+    background: #dd8181;
     margin-bottom: 10px;
     width: 100%;
     box-shadow: 4px 0px 10px 4px rgba(0, 0, 0, 0.4);

dist/assets/a-doc-editor.js

@@ -31,7 +31,7 @@ var ADocEditor = function (customConfig) {
         },
     }
     defaultConfig.style.y = defaultConfig.style.fontSize
-    var config = JSON.parse( JSON.stringify( defaultConfig ) );
+    var config = JSON.parse(JSON.stringify(defaultConfig));
     var canvasList = []
     const dataTypes = [
         "paragraph", // simple text filled line by line
@@ -55,7 +55,7 @@ var ADocEditor = function (customConfig) {
         canvasIndex: 0,
         caretSize: config.style.fontSize,
         x: config.style.margin,
-        y: 3*config.style.fontSize/4,
+        y: 3 * config.style.fontSize / 4,
     }
     var renderInProgress = false;
 
@@ -131,10 +131,10 @@ var ADocEditor = function (customConfig) {
         footerComponent = document.getElementById(footerComponentId)
         leftSidebar = document.getElementById(leftSidebarId)
         rightSidebar = document.getElementById(rightSidebarId)
-        mainComponent.getElementsByClassName('toggle-sidebar')[0].addEventListener('click',(e)=>{
+        mainComponent.getElementsByClassName('toggle-sidebar')[0].addEventListener('click', (e) => {
             leftSidebar.classList.toggle('hide')
         })
-        mainComponent.getElementsByClassName('toggle-sidebar')[1].addEventListener('click',(e)=>{
+        mainComponent.getElementsByClassName('toggle-sidebar')[1].addEventListener('click', (e) => {
             rightSidebar.classList.toggle('hide')
         })
 
@@ -152,7 +152,7 @@ var ADocEditor = function (customConfig) {
         renderInProgress = true
 
         let canvasIndex = 0
-        if (!canvasList.length) canvasList[0] = { el: createCanvas(), dataIndex: 0 }
+        if (!canvasList.length) canvasList[0] = { id: ++counter, el: createCanvas(), dataIndex: 0 }
         var x = 0, y = 0;
 
 
@@ -167,24 +167,24 @@ var ADocEditor = function (customConfig) {
         }
 
         for (let i = 0; i < dataList.length; i++) {
-            if (dataList[i].plainContent.length ==0 ){
-                y += ( dataList?.[i].style.fontSize )
+            if (dataList[i].plainContent.length == 0) {
+                y += (dataList?.[i].style.fontSize)
             }
             let canvas = canvasList[canvasIndex].el
             canvas.setAttribute("tabIndex", -1)
-            renderText(canvas, dataList[i])
+            calculateTextPositions(canvas, dataList[i])
             x = 0;
             if (dataList[i].id == caretData.activeData.id) {
                 caretData.canvasIndex = canvasIndex;
             }
         }
+        renderFormattedData()
 
-        function renderText(canvas, dataBlock) {
+        function calculateTextPositions(canvas, dataBlock) {
             let ctx = canvas.getContext('2d', { willReadFrequently: true })
             ctx.save()
 
             let maxWidth = config.pageSetup.canvasWidth
-            let wordStartIndex = 0
             let wordEndIndex = 0
             let wordsLength = 0;
             dataBlock.formatedText = []
@@ -222,27 +222,39 @@ var ADocEditor = function (customConfig) {
                     wordsLength = 0
                     y += style.fontSize
                     x = 0;
-                    wordStartIndex = wordEndIndex
 
                 }
 
 
             }
-            for (let i = 0; i < dataBlock.formatedText.length; i++) {
-                ctx.save()
-                ctx.font = `${dataBlock.formatedText[i].fontSize}px ${dataBlock.formatedText[i].fontFamily}`
-                ctx.fillStyle = dataBlock.formatedText[i].fontColor
-                ctx.fillText(dataBlock.formatedText[i].char, dataBlock.formatedText[i].x, dataBlock.formatedText[i].y)
-                ctx.restore()
-            }
-
 
+            ctx.restore()
+            return true
+        }
 
+        function renderFormattedData() {
+            let canvasIndex = 0;
+            let pageYOffset = 0;
+            for (let j = 0; j < dataSet.length; j++) {
+                let dataBlock = dataSet[j]
+                
+                if ( dataBlock.style.y - pageYOffset>= config.pageSetup.canvasHeight ){
+                    pageYOffset = dataBlock.style.y - dataBlock.style.fontSize
+                    canvasIndex++;
+                    if (!canvasList[canvasIndex]) canvasList[canvasIndex] = { id: ++counter, el: createCanvas(), dataIndex: j }
 
+                }
 
 
-            ctx.restore()
-            return true
+                let ctx = canvasList[canvasIndex].el.getContext('2d', { willReadFrequently: true })
+                ctx.save()
+                for (let i = 0; i < dataBlock.formatedText.length; i++) {
+                    ctx.font = `${dataBlock.formatedText[i].fontSize}px ${dataBlock.formatedText[i].fontFamily}`
+                    ctx.fillStyle = dataBlock.formatedText[i].fontColor
+                    ctx.fillText(dataBlock.formatedText[i].char, dataBlock.formatedText[i].x, (dataBlock.formatedText[i].y-pageYOffset))
+                }
+                ctx.restore()
+            }
         }
 
         if (!caretData.blink && caretData.activeData) renderCaret()
@@ -256,7 +268,7 @@ var ADocEditor = function (customConfig) {
             rectX = rectX ? rectX : 0
             rectY = rectY ? rectY : 0
             let rectWidth = 2;
-            let rectHeight = caretData.caretSize + activeTextData?.fontSize/3;
+            let rectHeight = caretData.caretSize + activeTextData?.fontSize / 3;
 
             const imageData = ctx.getImageData(rectX, rectY, rectWidth, rectHeight);
             const data = imageData.data;
@@ -274,13 +286,19 @@ var ADocEditor = function (customConfig) {
         function createCanvas() {
             let canvas = document.createElement('canvas')
             canvas.setAttribute('class', 'page')
+            canvas.setAttribute('id', `canvas_${++counter}`)
             canvas.width = config.pageSetup.canvasWidth
             canvas.height = config.pageSetup.canvasHeight
             canvas.addEventListener('keydown', keydownHandler)
             canvas.addEventListener('mousedown', mousedownHandler)
-            canvas.addEventListener("focus", onFocusHandler)
-            canvas.addEventListener("blur", onBlurHandler)
+            // canvas.addEventListener("focus", onFocusHandler)
+            // canvas.addEventListener("blur", onBlurHandler)
             scrollingComponent.append(canvas)
+
+            let ctx = canvas.getContext('2d', { willReadFrequently: true })
+            ctx.fillStyle = config.format.background
+            ctx.fillRect(0, 0, canvas.width, canvas.height)
+
             return canvas
         }
 
@@ -308,7 +326,7 @@ var ADocEditor = function (customConfig) {
             caretData.blink = false
 
             if (e.shiftKey && e.ctrlKey) { } // ctr+shift combination
-            if (e.keyCode == 16 || e.keyCode==18 || e.keyCode==20) {
+            if (e.keyCode == 16 || e.keyCode == 18 || e.keyCode == 20) {
                 return
             }
             else if (e.ctrlKey) {
@@ -324,16 +342,16 @@ var ADocEditor = function (customConfig) {
                 e.preventDefault()
             }
             else if (e.keyCode == 13) { // Enter Key
-                if (caretData){
-                    if (caretData.activeData.type == 0){ // for plain text // just go to next line
-                        let style = caretData?.activeData?.formatedText?.[caretData.activeData.formatedText.length-1]
+                if (caretData) {
+                    if (caretData.activeData.type == 0) { // for plain text // just go to next line
+                        let style = caretData?.activeData?.formatedText?.[caretData.activeData.formatedText.length - 1]
                         if (!style) style = caretData?.activeData?.style
                         if (!style) style = config.style
                         let newLineData = {
                             id: ++counter,
                             type: 0,
                             plainContent: "",
-                            style: JSON.parse( JSON.stringify(style) )
+                            style: JSON.parse(JSON.stringify(style))
                         }
                         newLineData.style.y += newLineData.style.fontSize
                         newLineData.style.x = 0
@@ -350,32 +368,32 @@ var ADocEditor = function (customConfig) {
                 ++caretData.index
             }
             else if (e.keyCode == 8) { // backspace
-                if (caretData.index <= 0){
-                    let currentIndex = dataSet.findIndex( item => item.id == caretData.activeData.id )
-                    if (currentIndex>0){
-                        caretData.activeData = dataSet[currentIndex-1]
-                        caretData.index = dataSet[currentIndex-1].plainContent.length
-                        if (dataSet[currentIndex].plainContent.length!=0){
+                if (caretData.index <= 0) {
+                    let currentIndex = dataSet.findIndex(item => item.id == caretData.activeData.id)
+                    if (currentIndex > 0) {
+                        caretData.activeData = dataSet[currentIndex - 1]
+                        caretData.index = dataSet[currentIndex - 1].plainContent.length
+                        if (dataSet[currentIndex].plainContent.length != 0) {
                             caretData.activeData.plainContent += dataSet[currentIndex].plainContent
-                            caretData.activeData.formatedText.push( ...dataSet[currentIndex].formatedText )
+                            caretData.activeData.formatedText.push(...dataSet[currentIndex].formatedText)
                         }
                         dataSet.splice(currentIndex, 1)
                     }
-                }else{
+                } else {
                     caretData.activeData.plainContent = caretData.activeData.plainContent.slice(0, caretData.index - 1) + caretData.activeData.plainContent.slice(caretData.index)
                     caretData.index = caretData.index - 1
                 }
             }
             else if (e.keyCode == 37) { // left key
                 e.preventDefault()
-                if (caretData.index<=0){
-                    let currentIndex = dataSet.findIndex( item => item.id == caretData.activeData.id )
-                    let previousData = dataSet[currentIndex-1]
-                    if (previousData){
+                if (caretData.index <= 0) {
+                    let currentIndex = dataSet.findIndex(item => item.id == caretData.activeData.id)
+                    let previousData = dataSet[currentIndex - 1]
+                    if (previousData) {
                         caretData.activeData = previousData
                         caretData.index = previousData.plainContent.length
                     }
-                }else{
+                } else {
                     caretData.index = (caretData.index <= 0) ? 0 : caretData.index - 1
                 }
             }
@@ -384,12 +402,12 @@ var ADocEditor = function (customConfig) {
             }
             else if (e.keyCode == 39) { // right key
                 e.preventDefault()
-                if (caretData.index <= caretData.activeData.plainContent.length-1){
+                if (caretData.index <= caretData.activeData.plainContent.length - 1) {
                     caretData.index = (caretData.index >= caretData.activeData.plainContent.length) ? caretData.activeData.plainContent.length : caretData.index + 1
-                }else{
-                    let currentIndex = dataSet.findIndex( item => item.id == caretData.activeData.id )
-                    let nextData = dataSet[currentIndex+1]
-                    if (nextData){
+                } else {
+                    let currentIndex = dataSet.findIndex(item => item.id == caretData.activeData.id)
+                    let nextData = dataSet[currentIndex + 1]
+                    if (nextData) {
                         caretData.index = 0
                         caretData.activeData = nextData
                     }
@@ -410,20 +428,20 @@ var ADocEditor = function (customConfig) {
             // }, caretData.intervalDuration)
         }
 
-        function setCaretPosition(e){
+        function setCaretPosition(e) {
 
             let rect = e.target.getBoundingClientRect()
             let position = {
-                xP: e.offsetX/rect.width,
-                yP: e.offsetY/rect.height,
+                xP: e.offsetX / rect.width,
+                yP: e.offsetY / rect.height,
             }
-            let canvasData = canvasList.find( item => item.el == e.target )
-            position.x = position.xP*config.pageSetup.canvasWidth
-            position.y = position.yP*config.pageSetup.canvasHeight
+            let canvasData = canvasList.find(item => item.el == e.target)
+            position.x = position.xP * config.pageSetup.canvasWidth
+            position.y = position.yP * config.pageSetup.canvasHeight
             let lineY = dataSet[canvasData.dataIndex].style.y
-            for (let i=canvasData.dataIndex; i<dataSet.length; i++){
-                for ( let j=0; j< dataSet[i].formatedText.length; j++ ){
-                    if ( Math.floor( dataSet[i].formatedText[j].x ) == Math.floor(position.x) ){
+            for (let i = canvasData.dataIndex; i < dataSet.length; i++) {
+                for (let j = 0; j < dataSet[i].formatedText.length; j++) {
+                    if (Math.floor(dataSet[i].formatedText[j].x) == Math.floor(position.x)) {
                         break;
                     }
                 }
@@ -453,8 +471,8 @@ var ADocEditor = function (customConfig) {
             caretData.activeData = null
             caretData.activeData = dataSet[0]
         },
-        getContent: function (){
-            return JSON.parse( JSON.stringify( dataSet ) )
+        getContent: function () {
+            return JSON.parse(JSON.stringify(dataSet))
         }
     }
     return returnObj