list and bullet structure completed

dist/assets/a-doc-editor2.js

@@ -65,8 +65,8 @@ var ADocEditor = function (customConfig) {
         <div class="item" adc="list-handler" adc-target="list-popover">
             <span>L</span>
             <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 class="option" adc-toggle="listing-option" value="1">•&nbsp;&nbsp;Bullets&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
+                <div class="option" adc-toggle="listing-option" value="0">1. Numbers</div>
             </div>
         </div>
     </div>
@@ -148,13 +148,18 @@ var ADocEditor = function (customConfig) {
         })()
 
         !(function handleList() {
-            let toggleNumber = shadow.querySelector('[adc-toggle="list-number"]')
-            let toggleBullet = shadow.querySelector('[adc-toggle="list-bullet"]')
+            let listItems = shadow.querySelectorAll('[adc-toggle="listing-option"]')
             let popover = shadow.querySelector('[adc-type="popover"]')
-            toggleNumber.addEventListener('click', (e) => {
+            for(let i=0; i<listItems.length; i++){
+                listItems[i].addEventListener('click', (e) => {
+                    let value = Number(e.target.getAttribute('value'))
+                    value = value?value:0
                     if (caretData.activeData) {
-                    caretData.activeData.type = caretData.activeData.type == 1 ? 0 : 1
-                    caretData.activeData.listStyle = 0
+                        caretData.activeData.type = (caretData.activeData.type == 1 && caretData.activeData.listStyle==value) ? 0 : 1
+                        if (caretData.activeData.type==1){
+                            caretData.activeData.listStyle = value
+                        }
+                        changeListStyle()
                         caretData.blink = false
                         reRenderCanvas()
                         popover.classList.remove('show')
@@ -162,16 +167,7 @@ var ADocEditor = function (customConfig) {
     
                     }
                 })
-            toggleBullet.addEventListener('click', (e) => {
-                if (caretData.activeData) {
-                    caretData.activeData.type = caretData.activeData.type == 1 ? 0 : 1
-                    caretData.activeData.listStyle = 1
-                    caretData.blink = false
-                    reRenderCanvas()
-                    popover.classList.remove('show')
-                    focusOnPage()
             }
-            })
         })()
 
         reConfigure(customConfig)
@@ -351,7 +347,6 @@ var ADocEditor = function (customConfig) {
         }
 
         function renderLines() {
-            console.clear()
             let x = 0, y = config.format.margin * pxMmRatio;
             for (let l = 0; l < lines.length; l++) {
                 let setData = dataList[lines[l].dataIndex]
@@ -407,7 +402,7 @@ var ADocEditor = function (customConfig) {
                 else if (tabCount % 3 == 1) label = `${convertToLetter(dataList[dataIndex].listItemNumber)}.`
                 else label = `${convertToRoman(dataList[dataIndex].listItemNumber).toLowerCase()}.`
             }
-            else if (dataList[dataIndex].listStyle == 0) { // >
+            else if (dataList[dataIndex].listStyle == 1) { // >
                 label = `>`
             }
 
@@ -504,8 +499,12 @@ var ADocEditor = function (customConfig) {
                 if (caretData.index == 0) {
                     let activeDataIndex = dataList.findIndex(item => item.id == caretData.activeData.id)
                     if (caretData.activeData.tabCount) {
+                        if (caretData.activeData.type==1){
+                            caretData.activeData.type = 0
+                        }else{
                             caretData.activeData.tabCount--
                         }
+                    }
                     else if (activeDataIndex > 0) {
                         if (caretData.activeData.type == 0) {
                             if (!caretData.activeData.plainContent.length) { dataList.splice(activeDataIndex, 1) }
@@ -641,6 +640,21 @@ var ADocEditor = function (customConfig) {
         }
     }
 
+    function changeListStyle(){
+        let activeDataIndex = dataList.findIndex( item => item.id == caretData.activeData.id )
+        let d = activeDataIndex-1
+        
+        while( dataList?.[d]?.type==1){
+            dataList[d].listStyle = caretData.activeData.listStyle
+            --d
+        }
+        d = activeDataIndex+1
+        while(dataList?.[d]?.type==1){
+            dataList[d].listStyle = caretData.activeData.listStyle
+            ++d
+        }
+    }
+