left roght arrow keys functionality

dist/assets/a-doc-editor.js

@@ -36,7 +36,7 @@ var ADocEditor = function (customConfig) {
     ]
     var dataSet = [
         {
-            id: 1,
+            id: ++counter,
             type: 0,
             plainContent: "",
             style: {
@@ -323,6 +323,7 @@ var ADocEditor = function (customConfig) {
                 if (caretData){
                     if (caretData.activeData.type == 0){ // for plain text // just go to next line
                         let newLineData = {
+                            id: ++counter,
                             type: 0,
                             plainContent: "",
                             style: JSON.parse( JSON.stringify(caretData.activeData.formatedText[caretData.activeData.formatedText.length-1]) )
@@ -345,14 +346,40 @@ var ADocEditor = function (customConfig) {
                 caretData.activeData.plainContent = caretData.activeData.plainContent.slice(0, caretData.index - 1) + caretData.activeData.plainContent.slice(caretData.index)
                 caretData.index = caretData.index <= 0 ? 0 : caretData.index - 1
             }
-            else if (e.keyCode == 37) {
-                caretData.index = (caretData.index <= 0) ? 0 : 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){
+                        caretData.activeData = previousData
+                        caretData.index = previousData.plainContent.length
+                    }
+                }else{
+                    caretData.index = (caretData.index <= 0) ? 0 : caretData.index - 1
+                }
+            }
+            else if (e.keyCode == 38) { // up key
+                e.preventDefault()
+            }
+            else if (e.keyCode == 39) { // right key
+                e.preventDefault()
+                if (caretData.index <= caretData.activeData.plainContent.length-1){
+                    caretData.index = (caretData.index >= caretData.activeData.plainContent.length) ? caretData.activeData.plainContent.length : caretData.index + 1
+                }else{
+                    caretData.index = 0;
+                    let currentIndex = dataSet.findIndex( item => item.id == caretData.activeData.id )
+                    let nextData = dataSet[currentIndex+1]
+                    if (nextData){
+                        caretData.index = 0
+                        caretData.activeData = nextData
+                    }
+
+                }
             }
-            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
+            else if (e.keyCode == 40) { // down key
+                e.preventDefault()
             }
-            else if (e.keyCode == 40) { }// down key
             else { } // unhandled cases
 
             reRenderPages(dataSet)

dist/script.js

@@ -8,16 +8,32 @@ function extractData() {
 function setData() {
     var tempDocData = [
         {
-            id: `1`,
-            type: "text",
-            plainContent: "Hello World!",
-
+            "id": 1,
+            "type": 0,
+            "plainContent": "Hello World!",
+            "style": {
+                "fontSize": 28,
+                "fontFamily": "Arial",
+                "bold": false,
+                "italic": false,
+                "fontColor": "#1e1f77"
+            },
         },
         {
-            id: `2`,
-            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.",
-
+            "id": 2,
+            "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.",
+            "style": {
+                "char": "!",
+                "width": 0,
+                "x": 0,
+                "y": 56,
+                "fontSize": 28,
+                "fontFamily": "Arial",
+                "bold": false,
+                "italic": false,
+                "fontColor": "#1e1f77"
+            },
         },
     ]
     editor.loadContent(tempDocData)