working on list and bullets

dist/assets/a-doc-editor2.css

@@ -38,7 +38,7 @@
 }
 .popover{
     position: absolute;
-    padding: 20px;
+    padding: 5px;
     background-color: gray;
     border: 1px solid purple;
     opacity: 0;
@@ -52,7 +52,15 @@
 .toolbar .item:hover {
     background: #5fad5f;
 }
-
+.option {
+    border: 1px solid black;
+    padding: 5px;
+    margin: 5px;
+    border-radius: 4px;
+}
+.option:hover {
+    background-color: #f5c468;
+}
 .page-list {
     position: relative;
     display: block;

dist/assets/a-doc-editor2.js

@@ -60,7 +60,10 @@ var ADocEditor = function (customConfig) {
         <select class="item" adc="font-select"></select>
         <div class="item" adc="list-handler" adc-target="list-popover">
             <span>L</span>
-            <div class="popover" adc="list-popover" adc-type="popover"></div>
+            <div class="popover" adc="list-popover" adc-type="popover">
+                <div class="option" adc-toggle="list-bullet">•&nbsp;&nbsp;Bullets&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
+                <div class="option" adc-toggle="list-number">1. Numbers</div>
+            </div>
         </div>
     </div>
 </div>
@@ -142,6 +145,25 @@ var ADocEditor = function (customConfig) {
 
         })()
 
+        !(function handleList(){
+            let toggleNumber = shadow.querySelector('[adc-toggle="list-number"]')
+            let toggleBullet = shadow.querySelector('[adc-toggle="list-bullet"]')
+            toggleNumber.addEventListener('click', (e)=>{
+                if (caretData.activeData){
+                    caretData.activeData.type = caretData.activeData.type==1?0:1
+                    caretData.blink=false
+                    reRenderCanvas()
+                }
+            })
+            toggleBullet.addEventListener('click', (e)=>{
+                if (caretData.activeData){
+                    caretData.activeData.type = caretData.activeData.type==1?0:1
+                    caretData.blink=false
+                    reRenderCanvas()
+                }
+            })
+        })()
+
         reConfigure(customConfig)
         reRenderCanvas()
         addGlobalEvents()
@@ -177,6 +199,7 @@ var ADocEditor = function (customConfig) {
 
     function reRenderCanvas() {
         if (isRendering) return
+        console.log('to rendering')
         let pageIndex = 0
         if (!pageList.length) {
             pageList[pageIndex] = { id: ++counter, el: createNewPage(), dataIndex: 0 }
@@ -437,11 +460,23 @@ var ADocEditor = function (customConfig) {
             else if (e.key == 'ArrowLeft') {
                 if (caretData.index) {
                     --caretData.index
+                }else{
+                    let dataIndex = dataList.findIndex( item => item.id == caretData.activeData.id )
+                    if (dataIndex>0){
+                        caretData.activeData = dataList[dataIndex-1]
+                        caretData.index = caretData.activeData.plainContent.length
+                    }
                 }
             }
             else if (e.key == 'ArrowRight') {
                 if (caretData.index < caretData.activeData.plainContent.length) {
                     ++caretData.index
+                }else{
+                    let dataIndex = dataList.findIndex( item => item.id == caretData.activeData.id )
+                    if (dataList[dataIndex+1]){
+                        caretData.activeData = dataList[dataIndex+1]
+                        caretData.index = 0
+                    }
                 }
             }
             else if (e.key == 'ArrowUp') {
@@ -509,7 +544,7 @@ var ADocEditor = function (customConfig) {
             // console.log('blur')
             caretData.blink = true
             focussedPage = null
-            renderCaret()
+            // renderCaret()
         }
     }
 
@@ -598,6 +633,11 @@ var ADocEditor = function (customConfig) {
             for (let i = 0; i < pagesToReturn.length; i++) pagesToReturn[i].canvas = pageList[i].canvas
             return pagesToReturn
         },
+        log(){
+            console.log('dataList', dataList)
+            console.log('lines', lines)
+            console.log('caretData', caretData)
+        }
     }
 
     initialize()

dist/index.html

@@ -8,6 +8,7 @@
     <script src="./assets/fontkit.umd.min.js"></script>
     <script src="./assets/pdf-lib.min.js" ></script>
     <script src="./assets/a-doc-editor2.js"></script>
+    <script src="./assets/html-docx.min.js"></script>
 
     <style>
         body {
@@ -22,7 +23,7 @@
 <body>
     <div class="body"></div>
     <p style="font-family: 'Calibri';">Click on the <span>canvas</span> and start typing
-        <button onclick="extractData()">Extract</button>
+        <button onclick="log()">Log</button>
         <button onclick="setData()">Set Data</button>
         <button onclick="generatePDF()">Generate PDF</button>
     </p>

dist/script.js

@@ -15,10 +15,8 @@ var editor = new ADocEditor({
 })
 var extractedData = null
 
-function extractData() {
-    let data = editor.getContent()
-    extractedData = data
-    console.log(data)
+function log() {
+    editor.log()
 }
 
 function setData() {