blinking cursor

dist/assets/a-doc-editor.js

 let isModule = (typeof module != 'undefined') ? true : false
 var ADocEditor = function (customConfig) {
+    var counter = 0
     var container = null
     var mainComponent = null
     var defaultConfig = {
@@ -18,6 +19,7 @@ var ADocEditor = function (customConfig) {
     var canvasList = []
     var dataSet = [
         {
+            id: `${++counter}`,
             type: "text",
             plainContent: "Hello World"
         }
@@ -28,6 +30,10 @@ var ADocEditor = function (customConfig) {
         index: dataSet[0].plainContent.length,
         interval: null,
         blink: false,
+        canvasIndex: 0,
+        caretSize: 28,
+        x: 0,
+        y: 21,
     }
     var renderInProgress = false
 
@@ -55,7 +61,6 @@ var ADocEditor = function (customConfig) {
     }
 
     function reRenderPages(dataList, blinking = false) {
-        console.log('blink', caretData.blink)
         if (renderInProgress) return
         renderInProgress = true
 
@@ -65,7 +70,7 @@ var ADocEditor = function (customConfig) {
 
         // to clear the canvases
         for (let i = 0; i < canvasList.length; i++) {
-            let ctx = canvasList[i].getContext('2d')
+            let ctx = canvasList[i].getContext('2d', { willReadFrequently: true })
             ctx.clearRect(0, 0, canvasList[i].width, canvasList[i].height)
             ctx.fillStyle = config.format.background
             ctx.fillRect(0, 0, canvasList[i].width, canvasList[i].height)
@@ -75,6 +80,33 @@ var ADocEditor = function (customConfig) {
             let canvas = canvasList[canvasIndex]
             canvas.setAttribute("tabIndex", -1)
             renderText(canvas, dataList[i])
+
+            if (dataList[i].id == caretData.activeData.id) {
+                caretData.canvasIndex = canvasIndex
+                calculateCaretPosition()
+            }
+        }
+
+        if (!caretData.blink) renderCaret()
+        // to render caret
+        function renderCaret() {
+            let ctx = canvasList[caretData.canvasIndex].getContext('2d', { willReadFrequently: true })
+            let rectX = caretData.x;
+            let rectY = caretData.y-caretData.caretSize;
+            let rectWidth = 4;
+            let rectHeight = caretData.caretSize;
+
+            const imageData = ctx.getImageData(rectX, rectY, rectWidth, rectHeight);
+            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, rectX, rectY);
+            }
         }
 
         function createCanvas() {
@@ -89,7 +121,7 @@ var ADocEditor = function (customConfig) {
 
 
         function renderText(canvas, dataSet) {
-            let ctx = canvas.getContext('2d')
+            let ctx = canvas.getContext('2d',{ willReadFrequently: true })
             ctx.save()
 
             let fontSize = 28;
@@ -104,7 +136,6 @@ var ADocEditor = function (customConfig) {
 
         function keydownHandler(e) {
             caretData.blink = false
-            console.log(e)
             if (e.keyCode == 32) e.preventDefault()
             if (e.key.length == 1 || e.keyCode == 32) {
                 caretData.activeData.plainContent = caretData.activeData.plainContent.slice(0, caretData.index) + e.key + caretData.activeData.plainContent.slice(caretData.index)
@@ -116,6 +147,18 @@ var ADocEditor = function (customConfig) {
             }
 
             reRenderPages(dataList)
+            clearInterval(caretData.interval)
+            caretData.interval = setInterval(() => {
+                caretData.blink = !caretData.blink
+                reRenderPages(dataSet, true)
+            }, 1000)
+        }
+
+        function calculateCaretPosition() {
+            return {
+                x: 50,
+                y: 21
+            }
         }
 
         function mousedownHandler(e) {
@@ -127,7 +170,7 @@ var ADocEditor = function (customConfig) {
 
 
     inititalize(customConfig)
-    function destory(){
+    function destory() {
         clearInterval(caretData.interval)
     }
     return {