caret blinking fix

dist/assets/a-doc-editor2.js

@@ -36,8 +36,8 @@ var ADocEditor = function (customConfig) {
     var caretData = {
         activeData: dataList[0],
         index: 0,
-        interval: null,
-        intervalDuration: 800,
+        timeout: null,
+        timeoutDuration: 800,
         blink: false,
         canvasIndex: 0,
         caretSize: config.style.fontSize,
@@ -165,6 +165,7 @@ var ADocEditor = function (customConfig) {
     }
 
     function reRenderCanvas() {
+        console.clear()
         console.log('to rerender the page')
         if (isRendering) return
         let pageIndex = 0
@@ -200,7 +201,46 @@ var ADocEditor = function (customConfig) {
         }
 
         function renderCaret(){
-            console.log('handle blinking')
+            clearTimeout( caretData.timeout )
+
+            let ctx = pageList[0].el.getContext('2d', { willReadFrequently: true })
+
+            if (caretData.previousCaret){
+                const imageData = ctx.getImageData(caretData.previousCaret.x, caretData.previousCaret.y, caretData.previousCaret.width, caretData.previousCaret.height);
+                const data = imageData.data;
+    
+                // Invert the color of the rectangular region
+                for (let i = 0; i < data.length; i += 4) {
+                    data[i] = 255 - data[i]; // Red
+                    data[i + 1] = 255 - data[i + 1]; // Green
+                    data[i + 2] = 255 - data[i + 2]; // Blue
+                    // Alpha channel remains unchanged (data[i + 3])
+                    ctx.putImageData(imageData, caretData.previousCaret.x, caretData.previousCaret.y);
+                }
+                caretData.previousCaret = null
+            }
+
+            if (!caretData.blink){
+                const imageData = ctx.getImageData(100, 200, 10, 300);
+                const data = imageData.data;
+    
+                // Invert the color of the rectangular region
+                for (let i = 0; i < data.length; i += 4) {
+                    data[i] = 255 - data[i]; // Red
+                    data[i + 1] = 255 - data[i + 1]; // Green
+                    data[i + 2] = 255 - data[i + 2]; // Blue
+                    // Alpha channel remains unchanged (data[i + 3])
+                    ctx.putImageData(imageData, 100, 200);
+                }
+                caretData.previousCaret = { x: 100, y: 200, width: 10, height: 300 }
+                caretData.blink = true
+            }else{
+                caretData.blink = false
+            }
+
+            caretData.timeout = setTimeout( ()=>{
+                renderCaret()
+            }, caretData.timeoutDuration )
         }