focus when adding list or bullets

dist/assets/a-doc-editor2.css

@@ -52,6 +52,9 @@
 .toolbar .item:hover {
     background: #5fad5f;
 }
+[adc-type="popover"] {
+    pointer-events: none;
+}
 .option {
     border: 1px solid black;
     padding: 5px;

dist/assets/a-doc-editor2.js

@@ -46,6 +46,7 @@ var ADocEditor = function (customConfig) {
         style: { ...dataList[0].style, x: config.format.margin, y: config.format.margin + (3 * config.style.fontSize / 4) },
     }
     var pageList = []
+    var pageScrollingDiv = null
     var focussedPage = null
     var lastFocussedPage = null
     var isRendering = false
@@ -67,7 +68,7 @@ var ADocEditor = function (customConfig) {
         </div>
     </div>
 </div>
-<div class="page-list"></div>
+<div class="page-list" adc="page-list"></div>
 <div class="footer">
 
     <div class="toolbar">
@@ -114,6 +115,7 @@ var ADocEditor = function (customConfig) {
             header: shadow.querySelector('.header'),
             pageList: shadow.querySelector('page-list')
         }
+        pageScrollingDiv = shadow.querySelector('[adc="page-list"]')
 
 
         !(function zoomHandles() {
@@ -132,10 +134,7 @@ var ADocEditor = function (customConfig) {
                     ...caretData.style,
                     fontFamily: e.target.value,
                 }
-                if (lastFocussedPage) {
-                    lastFocussedPage.focus()
-                    lastFocussedPage.scrollIntoView({ behavior: 'manual' })
-                }
+                focusOnPage()
             })
             addFonts(["./assets/fonts/Afacad-VariableFont_wght.woff2", "./assets/fonts/Afacad-VariableFont_wght.ttf"], 'Afacad')
             addFonts(["./assets/fonts/ArchitectsDaughter-Regular.woff2", "./assets/fonts/ArchitectsDaughter-Regular.ttf"], 'Architects Daughter')
@@ -148,11 +147,15 @@ var ADocEditor = function (customConfig) {
         !(function handleList(){
             let toggleNumber = shadow.querySelector('[adc-toggle="list-number"]')
             let toggleBullet = shadow.querySelector('[adc-toggle="list-bullet"]')
+            let popover = shadow.querySelector('[adc-type="popover"]')
             toggleNumber.addEventListener('click', (e)=>{
                 if (caretData.activeData){
                     caretData.activeData.type = caretData.activeData.type==1?0:1
                     caretData.blink=false
                     reRenderCanvas()
+                    popover.classList.remove('show')
+                    focusOnPage()
+                    
                 }
             })
             toggleBullet.addEventListener('click', (e)=>{
@@ -160,6 +163,8 @@ var ADocEditor = function (customConfig) {
                     caretData.activeData.type = caretData.activeData.type==1?0:1
                     caretData.blink=false
                     reRenderCanvas()
+                    popover.classList.remove('show')
+                    focusOnPage()
                 }
             })
         })()
@@ -259,7 +264,9 @@ var ADocEditor = function (customConfig) {
                 let tempWordWidth = 0
                 for (c = 0; c < dataBlock.plainContent.length; c++) {
                     let style = dataBlock?.formatedText?.[c]
+
                     if (/\s/.test(dataBlock.plainContent[c])) {
+                        // condition to check if a blank character is found.
                         wordEndIndex = c
                         lineObj.charEndIndex = c
                         tempWordWidth = 0
@@ -271,13 +278,19 @@ var ADocEditor = function (customConfig) {
                         ...style,
                         width: charWidth
                     }
+
+                    // // if with the current char the string could not fit on one line
                     if (tempLineWidth + charWidth > maxLineWidth){
                         // cannot add this// new line should be added//
+
                         if (tempWordWidth+charWidth>=maxLineWidth){
+                            // this is to manage the casse where there is a set of long string without any blank space. In that case the text is broken and moved to next line.
+
                             wordEndIndex = c
                             lineObj.charEndIndex = c
                             tempWordWidth = 0
                         }
+
                         lineObj.plainContent = dataBlock.plainContent.slice(lineObj.charStartIndex, lineObj.charEndIndex + 1)
                         lines.push(lineObj)
                         lineObj = new getLineObj()
@@ -293,6 +306,7 @@ var ADocEditor = function (customConfig) {
                         tempLineWidth = tempWordWidth
                     }
                     else{
+                        // if the char can fit in the same line. then it is well and good
                         tempLineWidth += charWidth
                         tempWordWidth += charWidth
                     }
@@ -325,6 +339,10 @@ var ADocEditor = function (customConfig) {
                 lines[l].y = y
                 ctx.save()
 
+                // this is to render the numbering and bullets etc
+
+
+
                 let setData = dataList[lines[l].dataIndex]
                 for (let c = lines[l].charStartIndex; c <= lines[l].charEndIndex; c++) {
                     let char = setData?.plainContent[c]
@@ -348,57 +366,6 @@ var ADocEditor = function (customConfig) {
             return
         }
 
-        function renderCaret(toLoop) {
-            clearTimeout(caretData.timeout)
-            let ctx = pageList[0].el.getContext('2d', { willReadFrequently: true })
-            ctx.save()
-            if (caretData.previousCaret) {
-                ctx.putImageData(caretData.previousCaret.imageData, caretData.previousCaret.x, caretData.previousCaret.y);
-                caretData.previousCaret = null
-            }
-            if (!caretData.blink) {
-                let x = config.format.margin * pxMmRatio
-                let y = (config.format.margin) * pxMmRatio
-                let height = config.style.fontSize * pxMmRatio * 5 / 4
-                let charData = caretData.activeData.formatedText[caretData.index - 1]
-                if (charData) {
-                    x = charData.x + charData.width
-                    y = charData.y - charData.fontSize * pxMmRatio
-                } else {
-                    let dataIndex = dataList.findIndex(item => item.id == caretData.activeData.id)
-                    let lineObj = lines.find(item => item.dataIndex == dataIndex && caretData.index >= item.charStartIndex)
-                    if (lineObj) {
-                        x += lineObj.tabWidth
-                        y = lineObj.y - lineObj.maxFontSize * pxMmRatio
-                    }
-                }
-
-                let width = height / 10
-
-                const imageData = ctx.getImageData(x, y, width, height);
-                const data = imageData.data;
-                caretData.previousCaret = { imageData: structuredClone(imageData), x, y }
-                // 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, x, y);
-                caretData.blink = true
-            } else {
-                caretData.blink = false
-            }
-
-            ctx.restore()
-            if (toLoop) {
-                caretData.timeout = setTimeout(() => {
-                    renderCaret(true)
-                }, caretData.timeoutDuration)
-            }
-            return
-        }
         function getCharacterWidth(char, style) {
             let canvas = pageList[0].el
             let ctx = canvas.getContext('2d', { willReadFrequently: true })
@@ -653,7 +620,7 @@ var ADocEditor = function (customConfig) {
     function globalMouseDownHandler(e){
         var elem = e.target
         var targetId = elem.getAttribute('adc-target')
-        if (elem.getAttribute('adc-type')=='popover') return
+        if (elem.getAttribute('adc-type')=='popover'){ return }
         while(!targetId && elem){
             elem = elem.parentNode
             if (elem?.getAttribute?.('adc-type')=='popover') return
@@ -666,6 +633,67 @@ var ADocEditor = function (customConfig) {
         } )
     }
 
+
+    function renderCaret(toLoop) {
+        clearTimeout(caretData.timeout)
+        let ctx = pageList[0].el.getContext('2d', { willReadFrequently: true })
+        ctx.save()
+        if (caretData.previousCaret) {
+            ctx.putImageData(caretData.previousCaret.imageData, caretData.previousCaret.x, caretData.previousCaret.y);
+            caretData.previousCaret = null
+        }
+        if (!caretData.blink) {
+            let x = config.format.margin * pxMmRatio
+            let y = (config.format.margin) * pxMmRatio
+            let height = config.style.fontSize * pxMmRatio * 5 / 4
+            let charData = caretData.activeData.formatedText[caretData.index - 1]
+            if (charData) {
+                x = charData.x + charData.width
+                y = charData.y - charData.fontSize * pxMmRatio
+            } else {
+                let dataIndex = dataList.findIndex(item => item.id == caretData.activeData.id)
+                let lineObj = lines.find(item => item.dataIndex == dataIndex && caretData.index >= item.charStartIndex)
+                if (lineObj) {
+                    x += lineObj.tabWidth
+                    y = lineObj.y - lineObj.maxFontSize * pxMmRatio
+                }
+            }
+
+            let width = height / 10
+
+            const imageData = ctx.getImageData(x, y, width, height);
+            const data = imageData.data;
+            caretData.previousCaret = { imageData: structuredClone(imageData), x, y }
+            // 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, x, y);
+            caretData.blink = true
+        } else {
+            caretData.blink = false
+        }
+
+        ctx.restore()
+        if (toLoop) {
+            caretData.timeout = setTimeout(() => {
+                renderCaret(true)
+            }, caretData.timeoutDuration)
+        }
+        return
+    }
+    function focusOnPage(){
+        caretData.blink = false
+        if (lastFocussedPage){
+            const scrollTop = pageScrollingDiv.scrollTop
+            lastFocussedPage.focus()
+            pageScrollingDiv.scrollTop = scrollTop
+        }
+    }
+
     var returnObj = {
         addFonts,
         getConfiguration() { return JSON.parse(JSON.stringify(config)) },

dist/index.html

@@ -24,6 +24,7 @@
 <body>
     <div class="body"></div>
     <p style="font-family: 'Calibri';">Click on the <span>canvas</span> and start typing
+        <input />
         <button onclick="log()">Log</button>
         <button onclick="setData()">Set Data</button>
         <button onclick="generatePDF()">Generate PDF</button>