changes in document editor

dist/assets/a-doc-editor.css

 .a-doc-editor {
-    background: #6fc;
+    background: #777;
+}
+
+.a-doc-editor canvas {
+    background: #fff;
+}
+.a-doc-editor canvas:focus-visible {
+    outline: red auto 1px;
 }
\ No newline at end of file

dist/assets/a-doc-editor.js

-let isModule = (typeof module !='undefined')?true:false
-var ADocEditor = function(customConfig){
+let isModule = (typeof module != 'undefined') ? true : false
+var ADocEditor = function (customConfig) {
+    var container = null
+    var mainComponent = null
+    var defaultConfig = {
+        element: "",
+        pageSetup: {
+            width: 210,
+            height: 297,
+        },
+        format: {
+            background: "#fff",
+            margin: 20,
+            border: "",
+        }
+    }
+    var config = null;
+    var canvasList = []
+    var dataSet = [
+        {
+            type: "text",
+            plainContent: "Hello World"
+        }
+    ]
 
+    var caretData = {
+        activeData: dataSet[0],
+        index: dataSet[0].plainContent.length,
+        interval: null,
+        blink: false,
+    }
+    var renderInProgress = false
 
-    return {
+    function inititalize(customConfig) {
+        config = { ...defaultConfig, ...customConfig }
+        config.pageSetup.canvasMultiplier = Math.round(720 / config.pageSetup.width)
+        config.pageSetup.canvasWidth = config.pageSetup.canvasMultiplier * config.pageSetup.width
+        config.pageSetup.canvasHeight = config.pageSetup.canvasMultiplier * config.pageSetup.height
+
+        if (!config.element) throw "'container' not provided in the config"
+        if (typeof config.element == 'string') container = document.querySelector(config.element)
+        if (config.element instanceof HTMLElement) container = config.element
+        if (!container) throw "undefined"
+
+
+        mainComponent = document.createElement('div')
+        mainComponent.setAttribute('class', 'a-doc-editor')
+        container.append(mainComponent)
+
+        reRenderPages(dataSet)
+        caretData.interval = setInterval(() => {
+            caretData.blink = !caretData.blink
+            reRenderPages(dataSet, true)
+        }, 1000)
+    }
+
+    function reRenderPages(dataList, blinking = false) {
+        console.log('blink', caretData.blink)
+        if (renderInProgress) return
+        renderInProgress = true
+
+        let canvasIndex = 0
+        if (!canvasList.length) canvasList[0] = createCanvas()
+
+
+        // to clear the canvases
+        for (let i = 0; i < canvasList.length; i++) {
+            let ctx = canvasList[i].getContext('2d')
+            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)
+        }
+
+        for (let i = 0; i < dataList.length; i++) {
+            let canvas = canvasList[canvasIndex]
+            canvas.setAttribute("tabIndex", -1)
+            renderText(canvas, dataList[i])
+        }
+
+        function createCanvas() {
+            let canvas = document.createElement('canvas')
+            canvas.width = config.pageSetup.canvasWidth
+            canvas.height = config.pageSetup.canvasHeight
+            canvas.addEventListener('keydown', keydownHandler)
+            canvas.addEventListener('mousedown', mousedownHandler)
+            mainComponent.append(canvas)
+            return canvas
+        }
+
+
+        function renderText(canvas, dataSet) {
+            let ctx = canvas.getContext('2d')
+            ctx.save()
+
+            let fontSize = 28;
+            let fontFamily = "Arial"
+            ctx.font = `${fontSize}px ${fontFamily}`
+            ctx.fillStyle = `#000`
+            ctx.fillText(dataSet.plainContent, 0, fontSize * (3 / 4))
+
+            ctx.restore()
+            return true
+        }
+
+        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)
+                ++caretData.index
+            }
+            else if (e.keyCode == 8) { // backspace
+                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
+            }
 
+            reRenderPages(dataList)
+        }
+
+        function mousedownHandler(e) {
+            e.target.focus({ preventScroll: true });
+        }
+        renderInProgress = false
+    }
+
+
+
+    inititalize(customConfig)
+    function destory(){
+        clearInterval(caretData.interval)
+    }
+    return {
+        destory,
     }
 }
 

dist/index.html

@@ -6,9 +6,16 @@
     <title>Document</title>
     <link rel="stylesheet" href="./assets/a-doc-editor.css">
     <script src="./assets/a-doc-editor.js"></script>
+
+    <style>
+        body {
+            background: #aaa;
+        }
+    </style>
 </head>
 <body>
-    <h1>Hello A dOc EdiTor</h1>
+    <h1>Hello World!</h1>
+    <h2>To create a custom doc editor</h2>
     <div id="user-container-for-editor"></div>
     <h1>Some other data</h1>
     <h1>Random heading </h1>

dist/script.js

 !(async function(){
 
-    let editor = new ADocEditor({ element: "#user-container-for-editor" })
+    let editor = new ADocEditor({ element: document.getElementById("user-container-for-editor") })
     console.log('to run', editor)
 })()
\ No newline at end of file