now font-family will be visible when choosing

dist/assets/a-doc-editor.css

@@ -11,10 +11,33 @@
 
 
 .a-doc-editor .header {
-    overflow: auto;
     background-color: #f0f0f0;
     padding: 3px;
-    cursor:default
+    cursor:default;
+}
+.a-doc-editor .dropdown-list {
+    display: none;
+    position: absolute;
+    z-index: 100;
+    background-color: #f5f5f5;
+    padding: 5px;
+    border-radius: 5px;
+    height: 300px;
+    overflow: auto;
+}
+.a-doc-editor .dropdown-list.show {
+    display: block;
+}
+.a-doc-editor .dropdown-list .dropdown-option{
+    padding: 10px;
+    border-radius: 5px;
+}
+.a-doc-editor .dropdown-list .dropdown-option:hover{
+    background: #91d8bd;
+}
+
+.a-doc-editor .header .option-bar{
+    display:flex;
 }
 .a-doc-editor .header .option{
     border-bottom: 1px solid rgba(0, 0, 0, 0.137);

dist/assets/a-doc-editor.js

@@ -18,6 +18,7 @@ var ADocEditor = function (customConfig) {
     var footerComponent = null
     var leftSidebar = null
     var rightSidebar = null
+    var fontFamily = null;
     var fontFamilyDropdown = null
     var fontList = []
     var defaultConfig = {
@@ -74,6 +75,7 @@ var ADocEditor = function (customConfig) {
         x: config.format.margin,
         y: config.format.margin + (3 * config.style.fontSize / 4),
         previousCaret: null,
+        style: { ...dataSet[0].style },
     }
     var renderInProgress = false;
 
@@ -101,25 +103,19 @@ var ADocEditor = function (customConfig) {
     <div class="a-doc-editor" id="${mainComponentId}">
         <div class="header" id="${headerComponentId}">
             <div class="option-bar">
-                <span class="option">File</span>
-                <span class="option">Edit</span>
-                <span class="option">Insert</span>
-                <span class="option">Help</span>
+                <div class="option">File</div>
+                <div class="option">Edit</div>
+                <div class="option">Help</div>
             </div>
             <div class="option-bar">
-                <span class="option">Search</span>
-                <span class="option">Undo</span>
-                <span class="option">Redo</span>
-                <span class="option">Heading</span>
-                <span class="option">
-                    <select id="${fontFamilyDropdownId}"></select>
-                </span>
-                <span class="option">Font Size</span>
-                <span class="option">Bold</span>
-                <span class="option">Italic</span>
-                <span class="option">Undeline</span>
-                <span class="option">Font Color</span>
-                <span class="option">Highlight Color</span>
+                <div class="option">File</div>
+                <div class="option">File</div>
+                <div class="option">File</div>
+                <div class="option">
+                    <div class="dropdown-label" adc-target="#${fontFamilyDropdownId}"></div>
+                    <div class="dropdown-list" id="${fontFamilyDropdownId}" adc-type="dropdown"></div>
+                </div>
+
             </div>
         </div>
         <div class="body">
@@ -203,9 +199,12 @@ var ADocEditor = function (customConfig) {
             mainComponent.getElementsByClassName('toggle-sidebar')[1].addEventListener('click', (e) => {
                 rightSidebar.classList.toggle('hide')
             })
+            fontFamily = container.querySelector(`[adc-target="#${fontFamilyDropdownId}"]`)
+            bindGlobalEvents()
             fontFamilyDropdown = document.getElementById(fontFamilyDropdownId)
-            fontFamilyDropdown.addEventListener('change', changeFontFamily)
+            fontFamilyDropdown.addEventListener('click', changeFontFamily)
             reRenderFontDropdown()
+
         }
 
 
@@ -574,8 +573,7 @@ var ADocEditor = function (customConfig) {
             }
             else if (e.key.length == 1 || e.keyCode == 32) { // these are printable characters key
                 e.preventDefault()
-
-                caretData.style.fontFamily = fontFamilyDropdown.value
+                caretData.style.fontFamily = fontFamily.innerText
 
                 caretData.activeData.formatedText[caretData.index] = { ...caretData.style }
 
@@ -838,13 +836,18 @@ var ADocEditor = function (customConfig) {
 
     // // these are methods related to the toolbar items
     function changeFontFamily(e) {
-        caretData.style.fontFamily = e.target.value
-        caretData.styleModified = false
-        if (lastFocusCanvas) {
-            lastFocusCanvas.focus({ preventScroll: true })
-        }
-        if (!caretData.activeData.plainContent.length) {
-            caretData.activeData.style.fontFamily = e.target.value
+        if (e){
+            caretData.style.fontFamily = e.target.innerText
+            caretData.styleModified = false
+            if (lastFocusCanvas) {
+                lastFocusCanvas.focus({ preventScroll: true })
+            }
+            if (!caretData.activeData.plainContent.length) {
+                caretData.activeData.style.fontFamily = e.target.innerText
+            }
+        }else{
+            let labels = container.querySelectorAll(`[adc-target="#${fontFamilyDropdown.id}"]`)
+            labels.forEach( item => item.innerText = caretData.style.fontFamily )
         }
     }
 
@@ -853,12 +856,51 @@ var ADocEditor = function (customConfig) {
         if (fontFamilyDropdown) {
             fontFamilyDropdown.innerHTML = ""
             fontList.forEach((font, i) => {
-                let optionTag = document.createElement('option')
+                let optionTag = document.createElement('div')
+                optionTag.setAttribute('adc-type', 'option')
+                optionTag.setAttribute('class', 'dropdown-option')
                 optionTag.setAttribute('value', font.name)
-                optionTag.innerHTML = font.name
+                optionTag.style.fontFamily = font.name
+                optionTag.value = font.name
+                optionTag.innerText = font.name
                 fontFamilyDropdown.append(optionTag)
             })
         }
+        changeFontFamily()
+
+    }
+
+    function bindGlobalEvents(){
+
+        let options = container.querySelectorAll('[adc-target]')
+        options.forEach( option=>{
+            let target = container.querySelector(option.getAttribute('adc-target'))
+            option.innerText = target?.children?.[0]?.innerText?target?.children?.[0]?.innerText:''
+        } )
+
+        container.addEventListener('click', (e)=>{
+            if (e.target.getAttribute('adc-type')=='option'){
+                let parent = e.target.parentElement
+                let labelList = container.querySelectorAll(`[adc-target="#${parent.id}"]`)
+                labelList.forEach( item=> {
+                    item.innerText = e.target.innerText
+                } )
+                closeAllExcept()
+            }else{
+                let target = container.querySelector(e.target.getAttribute('adc-target'))
+                closeAllExcept(target)
+            }
+            function closeAllExcept(except){
+
+                let dropdownLists = container.querySelectorAll('[adc-type="dropdown"]')
+                dropdownLists.forEach( item => {
+                    if (item==except){
+                        item.classList.toggle('show')
+                    }
+                    else item.classList.remove('show')
+                } )
+            }
+        })
 
     }