font color option added on toolbar

dist/assets/a-doc-editor.css

@@ -53,7 +53,23 @@
 .a-doc-editor .header .option input{
     width: 25px;
 }
-
+.a-doc-editor .header .option .font-color{
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+}
+.a-doc-editor .header .option .color-bar{
+    display: block;
+    width: 20px;
+    height: 8px;
+    background-color: green;
+}
+.a-doc-editor .header .option .font-color input{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+}
 .a-doc-editor .header .option:hover{
     padding: 1px;
     background-color: white;

dist/assets/a-doc-editor.js

@@ -22,6 +22,8 @@ var ADocEditor = function (customConfig) {
     var fontFamilyDropdown = null
     var fontList = []
     var fontSize;
+    var fontColor;
+    var fontColorLabel;
     var fullScreenLoadingOverlay;
 
     var defaultConfig = {
@@ -121,6 +123,14 @@ var ADocEditor = function (customConfig) {
                     <button adc-action="font-size-plus">+</button>
                 </div>
 
+                <div class="option">
+                    <div class="font-color">
+                        <span>A</span>
+                        <span class="color-bar" adc-label="font-color"></span>
+                        <input type="color" adc-action="font-color">
+                    </div>
+                </div>
+
             </div>
         </div>
         <div class="body">
@@ -210,6 +220,9 @@ var ADocEditor = function (customConfig) {
             reRenderFontDropdown()
 
             fontSize = container.querySelector('[adc-action="font-size-set"]') 
+            fontColor = container.querySelector('[adc-action="font-color"]')
+            fontColor.addEventListener('input', changeFontColor)
+            fontColorLabel = container.querySelector('[adc-label="font-color"]')
 
             fullScreenLoadingOverlay = document.createElement('div')
             fullScreenLoadingOverlay.innerText = 'Loading...'
@@ -588,6 +601,7 @@ var ADocEditor = function (customConfig) {
                 e.preventDefault()
                 caretData.style.fontFamily = fontFamily.innerText
                 caretData.style.fontSize = Number(fontSize.value)
+                caretData.style.fontColor = fontColor.value
                 caretData.activeData.formatedText[caretData.index] = { ...caretData.style }
 
                 caretData.activeData.plainContent = caretData.activeData.plainContent.slice(0, caretData.index) + e.key + caretData.activeData.plainContent.slice(caretData.index)
@@ -853,9 +867,7 @@ var ADocEditor = function (customConfig) {
         if (e) {
             caretData.style.fontFamily = e.target.innerText
             caretData.styleModified = false
-            if (lastFocusCanvas) {
-                lastFocusCanvas.focus({ preventScroll: true })
-            }
+            focusLastCanvas()
             if (!caretData.activeData.plainContent.length) {
                 caretData.activeData.style.fontFamily = e.target.innerText
             }
@@ -868,15 +880,29 @@ var ADocEditor = function (customConfig) {
     function changeFontSize(change){
         fontSize.value = change
         caretData.style.fontSize = change
-        if (lastFocusCanvas) {
-            lastFocusCanvas.focus({ preventScroll: true })
-        }
+        focusLastCanvas()
         if (!caretData.activeData.plainContent.length) {
             caretData.activeData.style.fontSize = change
         }
         
     }
 
+    function changeFontColor(e){
+        fontColorLabel.style.backgroundColor = e.target.value
+        caretData.style.fontColor = e.target.value
+        focusLastCanvas()
+        if (!caretData.activeData.plainContent.length) {
+            caretData.activeData.style.fontColor = e.target.value
+        }
+    }
+
+    function focusLastCanvas(){
+        if (!lastFocusCanvas) lastFocusCanvas = canvasList[0].el
+        if (lastFocusCanvas) {
+            lastFocusCanvas.focus({ preventScroll: true })
+        }
+    }
+
 
     function reRenderFontDropdown() {
         if (fontFamilyDropdown) {
@@ -904,6 +930,8 @@ var ADocEditor = function (customConfig) {
             option.innerText = target?.children?.[0]?.innerText ? target?.children?.[0]?.innerText : ''
         })
         fontSize.value = caretData.style.fontSize
+        fontColor.value = caretData.style.fontColor
+        fontColorLabel.style.backgroundColor = caretData.style.fontColor
 
         container.addEventListener('click', (e) => {
             if (e.target.getAttribute('adc-type') == 'option') {