working on adding list

dist/assets/a-doc-editor.css

@@ -52,6 +52,29 @@
     padding: 1px;
     display: flex;
 }
+.a-doc-editor .header .option .list-label{
+    position: relative;
+    font-size: 0.5em;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.137);
+    padding: 1px;
+    display: flex;
+    flex-direction: column;
+    width: 25px;
+}
+.a-doc-editor .header .option .thumbnail-options{
+    display: none;
+    position: absolute;
+    z-index: 100;
+    background-color: #f5f5f5;
+    border-radius: 5px;
+    max-height: 300px;
+    overflow: auto;
+    top: 100%;
+}
+.a-doc-editor .header .option .thumbnail-options.show {
+    display: block;
+    width: max-content;
+}
 .a-doc-editor .header button{
     width: 25px;
 }

dist/assets/a-doc-editor.js

@@ -125,6 +125,14 @@ var ADocEditor = function (customConfig) {
                     <button ade-action="font-size-plus">+</button>
                 </div>
 
+
+                <div class="option" ade-action="font-bold">
+                    <div class="option-button"><strong>B</strong></div>
+                </div>
+                <div class="option" ade-action="font-italic">
+                    <div class="option-button"><em>I</em></div>
+                </div>
+
                 <div class="option">
                     <div class="font-color">
                         <span>A</span>
@@ -133,11 +141,23 @@ var ADocEditor = function (customConfig) {
                     </div>
                 </div>
 
-                <div class="option" ade-action="font-bold">
-                    <div class="option-button"><strong>B</strong></div>
-                </div>
-                <div class="option" ade-action="font-italic">
-                    <div class="option-button"><em>I</em></div>
+                <div class="option">
+                    <div class="list-label">
+                        <span>1&ndash;&ndash;&ndash;&ndash;</span>
+                        <span>2&ndash;&ndash;&ndash;&ndash;</span>
+                        <span>3&ndash;&ndash;&ndash;&ndash;</span>
+                    </div>
+                    <div class="thumbnail-options">
+                        <div>Item 1</div>
+                        <div>Item 2</div>
+                        <div>Item 3</div>
+                        <div>Item 4</div>
+                        <div>Item 5</div>
+                        <div>Item 6</div>
+                        <div>Item 7</div>
+                        <div>Item 8</div>
+                        <div>Item 9</div>
+                    </div>
                 </div>
 
             </div>
@@ -1036,6 +1056,10 @@ var ADocEditor = function (customConfig) {
         event.stopPropagation();
     }
 
+    function setupListItem(){
+
+    }
+
     inititalize(customConfig)
     function destory() {
         clearInterval(caretData.interval)