simple left and right arrow fixed

dist/assets/a-doc-editor2.js

@@ -46,6 +46,8 @@ var ADocEditor = function (customConfig) {
         style: { ...dataList[0].style, x: config.format.margin, y: config.format.margin + (3 * config.style.fontSize / 4) },
     }
     var pageList = []
+    var focussedPage  = null
+    var lastFocussedPage = null
     var isRendering = false
     function initialize() {
         config = JSON.parse(JSON.stringify(defaultConfig))
@@ -195,7 +197,7 @@ var ADocEditor = function (customConfig) {
         calculateTextSizeAndPosition()
         renderLines()
         caretData.previousCaret = null
-        renderCaret()
+        renderCaret(true)
 
         function calculateTextSizeAndPosition() {
 
@@ -306,7 +308,7 @@ var ADocEditor = function (customConfig) {
             return
         }
 
-        function renderCaret() {
+        function renderCaret(toLoop) {
             clearTimeout(caretData.timeout)
             let ctx = pageList[0].el.getContext('2d', { willReadFrequently: true })
             ctx.save()
@@ -331,7 +333,7 @@ var ADocEditor = function (customConfig) {
                     }
                 }
 
-                let width = height/8
+                let width = height/10
                 const imageData = ctx.getImageData(x, y, width, height);
                 const data = imageData.data;
                 caretData.previousCaret = { imageData: structuredClone(imageData), x, y }
@@ -349,9 +351,11 @@ var ADocEditor = function (customConfig) {
             }
 
             ctx.restore()
+            if(toLoop){
                 caretData.timeout = setTimeout(() => {
-                renderCaret()
+                    renderCaret(true)
                 }, caretData.timeoutDuration)
+            }
             return
         }
         function getCharacterWidth(char, style) {
@@ -425,12 +429,34 @@ var ADocEditor = function (customConfig) {
                 caretData.activeData = dataObj
                 dataList.push(dataObj)
             }
-            else if (e.key.length == 1 && !e.ctrlKey && !e.metaKey) {
+            else if (e.key.length == 1 && !e.ctrlKey && !e.metaKey) { // displayable text
+                // ***** DISPLAYABLE TEXT **** //
+
                 e.preventDefault()
-                caretData.activeData.plainContent = caretData.activeData.plainContent.slice(0, caretData.index) + e.key + caretData.activeData.plainContent.slice(caretData.index + 1)
+                caretData.activeData.plainContent = caretData.activeData.plainContent.slice(0, caretData.index) + e.key + caretData.activeData.plainContent.slice(caretData.index)
                 caretData.activeData.formatedText.splice(caretData.index, 0, caretData.style)
                 ++caretData.index
             }
+            else if (e.key=='ArrowLeft'){
+                console.log('Left')
+                if (caretData.index){
+                    --caretData.index
+                    console.log('move')
+                }
+            }
+            else if (e.key=='ArrowRight'){
+                console.log('Right')
+                if (caretData.index<caretData.activeData.plainContent.length){
+                    console.log('move')
+                    ++caretData.index
+                }
+            }
+            else if (e.key=='ArrowUp'){
+                console.log('Up')
+            }
+            else if (e.key=='ArrowDown'){
+                console.log('Down')
+            }
             caretData.blink = false
             caretData.previousCaret = null
             reRenderCanvas(dataList)
@@ -439,10 +465,15 @@ var ADocEditor = function (customConfig) {
             // console.log('mouse down')
         }
         function onFocusHandler(e) {
+            focussedPage = e.target
+            lastFocussedPage = e.target
             reRenderCanvas()
         }
         function onBlurHandler(e) {
             // console.log('blur')
+            caretData.blink = true
+            focussedPage = null
+            renderCaret()
         }
     }