paragraph wrapping

dist/assets/a-doc-editor.js

@@ -13,6 +13,7 @@ var ADocEditor = function (customConfig) {
             background: "#fff",
             margin: 20,
             border: "",
+            fontSize: 28,
         }
     }
     var config = null;
@@ -21,8 +22,13 @@ var ADocEditor = function (customConfig) {
         {
             id: `${++counter}`,
             type: "text",
-            plainContent: "Hello World"
-        }
+            plainContent: "Since they are still preserved in the rocks for us to see, they must have been formed quite recently, that is, geologically speaking. What can explain these striations and their common orientation?"
+        },
+        // {
+        //     id: `${++counter}`,
+        //     type: "text",
+        //     plainContent: "Did you ever hear about the Great Ice Age or the Pleistocene Epoch? Less than one million years ago, in fact, some 12,000 years ago, an ice sheet many thousands of feet thick rode over Burke Mountain in a southeastward direction."
+        // }
     ]
 
     var caretData = {
@@ -56,10 +62,10 @@ var ADocEditor = function (customConfig) {
         container.append(mainComponent)
 
         reRenderPages(dataSet)
-        caretData.interval = setInterval(() => {
-            caretData.blink = !caretData.blink
-            reRenderPages(dataSet, true)
-        }, caretData.intervalDuration)
+        // caretData.interval = setInterval(() => {
+        //     caretData.blink = !caretData.blink
+        //     reRenderPages(dataSet, true)
+        // }, caretData.intervalDuration)
     }
 
     function reRenderPages(dataList, blinking = false) {
@@ -68,6 +74,7 @@ var ADocEditor = function (customConfig) {
 
         let canvasIndex = 0
         if (!canvasList.length) canvasList[0] = createCanvas()
+        var x = 0, y = config.format.fontSize;
 
 
         // to clear the canvases
@@ -84,10 +91,59 @@ var ADocEditor = function (customConfig) {
             renderText(canvas, dataList[i])
 
             if (dataList[i].id == caretData.activeData.id) {
-                caretData.canvasIndex = canvasIndex
+                caretData.canvasIndex = canvasIndex;
             }
         }
 
+        function renderText(canvas, dataSet) {
+            let ctx = canvas.getContext('2d', { willReadFrequently: true })
+            ctx.save()
+
+
+
+            // make list of each word(separated withblank spaces)
+            // loop through every word.
+            // Check if those words can fit in the writable width
+            // if yes draw those words, on x, y
+            // else add increase y, reset x, letting the indentation level same
+            // repeat
+            let wordsList = dataSet.plainContent.split(/\s+/)
+            let textToDraw = "";
+            let textToDrawWidth = 0;
+            for (let i = 0; i < wordsList.length; i++) {
+
+                let fontSize = 28;
+                let fontFamily = "Arial"
+                // let writableWidth = config.pageSetup.canvasWidth
+                ctx.font = `${fontSize}px ${fontFamily}`
+                ctx.fillStyle = `#0005`
+
+                let nextText = (textToDraw ? (textToDraw + ' ') : '') + wordsList[i]
+                let drawWidth = ctx.measureText(nextText).width
+
+                if (drawWidth <= config.pageSetup.canvasWidth) {
+                    textToDraw = nextText
+                    textToDrawWidth = drawWidth
+                } else {
+                    ctx.fillText(textToDraw, x, y+config.format.fontSize)
+                    y+=config.format.fontSize
+                    textToDraw = wordsList[i]
+                    textToDrawWidth = ctx.measureText(wordsList[i]).width
+                }
+
+            }
+            if (textToDraw){
+                ctx.fillText(textToDraw, x, y+config.format.fontSize)
+            }
+
+
+
+
+
+            ctx.restore()
+            return true
+        }
+
         if (!caretData.blink && focusedCanvas) renderCaret()
         // to render caret
         function renderCaret() {
@@ -122,50 +178,39 @@ var ADocEditor = function (customConfig) {
             return canvas
         }
 
-        function onFocusHandler(e){
+        function onFocusHandler(e) {
             focusedCanvas = e.target
             caretData.blink = false
             reRenderPages(dataList)
         }
-        function onBlurHandler(e){
+        function onBlurHandler(e) {
             focusedCanvas = null
             caretData.blink = true
             reRenderPages(dataList)
         }
 
 
-        function renderText(canvas, dataSet) {
-            let ctx = canvas.getContext('2d', { willReadFrequently: true })
-            ctx.save()
-
-            let fontSize = 28;
-            let fontFamily = "Arial"
-            ctx.font = `${fontSize}px ${fontFamily}`
-            ctx.fillStyle = `#000`
-            caretData.x = ctx.measureText(dataSet.plainContent).width
-            ctx.fillText(dataSet.plainContent, 0, fontSize * (3 / 4))
-
-            ctx.restore()
-            return true
-        }
 
         function keydownHandler(e) {
 
             caretData.blink = false
 
-            if (e.shiftKey && e.ctrlKey){} // ctr+shift combination
-            else if (e.ctrlKey){
+            if (e.shiftKey && e.ctrlKey) { } // ctr+shift combination
+            else if (e.ctrlKey) {
                 if (e.keyCode == 8) { // ctrl+backspace: delete the entrite word
                     let separatedSentence = caretData.activeData.plainContent.slice(0, caretData.index)
                     let indexOfpreviousBlankChar = separatedSentence.search(/[^a-zA-Z0-9](?=[a-zA-Z0-9]*$)/)
-                    if (indexOfpreviousBlankChar<=0) caretData.activeData.plainContent = ""
+                    if (indexOfpreviousBlankChar <= 0) caretData.activeData.plainContent = ""
                     else caretData.activeData.plainContent = caretData.activeData.plainContent.slice(0, indexOfpreviousBlankChar) + caretData.activeData.plainContent.slice(caretData.index)
                     caretData.index = indexOfpreviousBlankChar <= 0 ? 0 : indexOfpreviousBlankChar
                 }
             }
-            else if (e.keyCode==9){// tab input // no need to add case for casesensitivity
+            else if (e.keyCode == 9) {// tab input // no need to add case for casesensitivity
                 e.preventDefault()
             }
+            else if (e.keyCode == 13) { // Enter Key
+                console.log('Enter')
+            }
             else if (e.key.length == 1 || e.keyCode == 32) {
                 e.preventDefault()
                 caretData.activeData.plainContent = caretData.activeData.plainContent.slice(0, caretData.index) + e.key + caretData.activeData.plainContent.slice(caretData.index)
@@ -178,12 +223,12 @@ var ADocEditor = function (customConfig) {
             else if (e.keyCode == 37) {
                 caretData.index = (caretData.index <= 0) ? 0 : caretData.index - 1
             }
-            else if (e.keyCode == 38) {}// up key
+            else if (e.keyCode == 38) { }// up key
             else if (e.keyCode == 39) {
-                caretData.index = (caretData.index >= caretData.activeData.plainContent.length) ? caretData.activeData.plainContent.length : caretData.index +1
+                caretData.index = (caretData.index >= caretData.activeData.plainContent.length) ? caretData.activeData.plainContent.length : caretData.index + 1
             }
-            else if (e.keyCode == 40) {}// down key
-            else{ } // unhandled cases
+            else if (e.keyCode == 40) { }// down key
+            else { } // unhandled cases
 
             reRenderPages(dataList)
             clearInterval(caretData.interval)