bold and italic added on the toolbar

dist/assets/a-doc-editor.css

@@ -50,6 +50,13 @@
 .a-doc-editor .header button{
     width: 25px;
 }
+.a-doc-editor .header .option-button{
+    width: 25px;
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    justify-content: center;
+}
 .a-doc-editor .header .option input{
     width: 25px;
 }
@@ -75,6 +82,13 @@
     background-color: white;
     cursor: pointer;
 }
+.a-doc-editor .header .option.selected{
+    padding: 1px;
+    background-color: #91d8bd;
+    cursor: pointer;
+}
+
+
 
 .a-doc-editor .footer {
     overflow: auto;

dist/assets/a-doc-editor.js

@@ -24,6 +24,9 @@ var ADocEditor = function (customConfig) {
     var fontSize;
     var fontColor;
     var fontColorLabel;
+    var fontBold;
+    var fontItalic;
+    var fontUnderline;
     var fullScreenLoadingOverlay;
 
     var defaultConfig = {
@@ -114,23 +117,33 @@ var ADocEditor = function (customConfig) {
             </div>
             <div class="option-bar">
                 <div class="option">
-                    <div class="dropdown-label" adc-target="#${fontFamilyDropdownId}" style="min-width:180px"></div>
-                    <div class="dropdown-list" id="${fontFamilyDropdownId}" adc-type="dropdown"></div>
+                    <div class="dropdown-label" ade-target="#${fontFamilyDropdownId}" style="min-width:180px"></div>
+                    <div class="dropdown-list" id="${fontFamilyDropdownId}" ade-type="dropdown"></div>
                 </div>
                 <div class="option">
-                    <button adc-action="font-size-minus">-</button>
-                    <input adc-action="font-size-set"/>
-                    <button adc-action="font-size-plus">+</button>
+                    <button ade-action="font-size-minus">-</button>
+                    <input ade-action="font-size-set"/>
+                    <button ade-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">
+                        <span class="color-bar" ade-label="font-color"></span>
+                        <input type="color" ade-action="font-color">
                     </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>
+                <div class="option" ade-action="font-underline">
+                    <div class="option-button"><u>U</u></div>
+                </div>
+
             </div>
         </div>
         <div class="body">
@@ -214,15 +227,23 @@ var ADocEditor = function (customConfig) {
             mainComponent.getElementsByClassName('toggle-sidebar')[1].addEventListener('click', (e) => {
                 rightSidebar.classList.toggle('hide')
             })
-            fontFamily = container.querySelector(`[adc-target="#${fontFamilyDropdownId}"]`)
+            fontFamily = container.querySelector(`[ade-target="#${fontFamilyDropdownId}"]`)
             fontFamilyDropdown = document.getElementById(fontFamilyDropdownId)
             fontFamilyDropdown.addEventListener('click', changeFontFamily)
             reRenderFontDropdown()
 
-            fontSize = container.querySelector('[adc-action="font-size-set"]') 
-            fontColor = container.querySelector('[adc-action="font-color"]')
+            fontSize = container.querySelector('[ade-action="font-size-set"]')
+
+            fontColor = container.querySelector('[ade-action="font-color"]')
             fontColor.addEventListener('input', changeFontColor)
-            fontColorLabel = container.querySelector('[adc-label="font-color"]')
+            fontColorLabel = container.querySelector('[ade-label="font-color"]')
+
+            fontBold = container.querySelector('[ade-action="font-bold"]')
+            fontBold.addEventListener('click', toggleBold)
+            fontItalic = container.querySelector('[ade-action="font-italic"]')
+            fontItalic.addEventListener('click', toggleItalic)
+            fontUnderline = container.querySelector('[ade-action="font-underline"]')
+            fontUnderline.addEventListener('click', toggleUnderline)
 
             fullScreenLoadingOverlay = document.createElement('div')
             fullScreenLoadingOverlay.innerText = 'Loading...'
@@ -602,6 +623,8 @@ var ADocEditor = function (customConfig) {
                 caretData.style.fontFamily = fontFamily.innerText
                 caretData.style.fontSize = Number(fontSize.value)
                 caretData.style.fontColor = fontColor.value
+                caretData.style.bold = fontBold.classList.contains('selected')
+                caretData.style.italic = fontItalic.classList.contains('selected')
                 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)
@@ -872,7 +895,7 @@ var ADocEditor = function (customConfig) {
                 caretData.activeData.style.fontFamily = e.target.innerText
             }
         } else {
-            let labels = container.querySelectorAll(`[adc-target="#${fontFamilyDropdown.id}"]`)
+            let labels = container.querySelectorAll(`[ade-target="#${fontFamilyDropdown.id}"]`)
             labels.forEach(item => item.innerText = caretData.style.fontFamily)
         }
     }
@@ -896,6 +919,31 @@ var ADocEditor = function (customConfig) {
         }
     }
 
+    function toggleBold(e){
+        let isBold = fontBold.classList.contains('selected')
+        caretData.style.bold = !isBold
+        if (!isBold) fontBold.classList.add('selected')
+        else fontBold.classList.remove('selected')
+        focusLastCanvas()
+        if (!caretData.activeData.plainContent.length) {
+            caretData.activeData.style.bold = !isBold
+        }
+        
+    }
+    function toggleItalic(e){
+        let isItalic = fontItalic.classList.contains('selected')
+        caretData.style.italic = !isItalic
+        if (!isItalic) fontItalic.classList.add('selected')
+        else fontItalic.classList.remove('selected')
+        focusLastCanvas()
+        if (!caretData.activeData.plainContent.length) {
+            caretData.activeData.style.italic = !isItalic
+        }
+    }
+    function toggleUnderline(e){
+        console.log('underline', fontUnderline)
+    }
+
     function focusLastCanvas(){
         if (!lastFocusCanvas) lastFocusCanvas = canvasList[0].el
         if (lastFocusCanvas) {
@@ -909,7 +957,7 @@ var ADocEditor = function (customConfig) {
             fontFamilyDropdown.innerHTML = ""
             fontList.forEach((font, i) => {
                 let optionTag = document.createElement('div')
-                optionTag.setAttribute('adc-type', 'option')
+                optionTag.setAttribute('ade-type', 'option')
                 optionTag.setAttribute('class', 'dropdown-option')
                 optionTag.setAttribute('value', font.name)
                 optionTag.style.fontFamily = font.name
@@ -924,9 +972,9 @@ var ADocEditor = function (customConfig) {
 
     function bindGlobalEvents() {
 
-        let options = container.querySelectorAll('[adc-target]')
+        let options = container.querySelectorAll('[ade-target]')
         options.forEach(option => {
-            let target = container.querySelector(option.getAttribute('adc-target'))
+            let target = container.querySelector(option.getAttribute('ade-target'))
             option.innerText = target?.children?.[0]?.innerText ? target?.children?.[0]?.innerText : ''
         })
         fontSize.value = caretData.style.fontSize
@@ -934,27 +982,27 @@ var ADocEditor = function (customConfig) {
         fontColorLabel.style.backgroundColor = caretData.style.fontColor
 
         container.addEventListener('click', (e) => {
-            if (e.target.getAttribute('adc-type') == 'option') {
+            if (e.target.getAttribute('ade-type') == 'option') {
                 let parent = e.target.parentElement
-                let labelList = container.querySelectorAll(`[adc-target="#${parent.id}"]`)
+                let labelList = container.querySelectorAll(`[ade-target="#${parent.id}"]`)
                 labelList.forEach(item => {
                     item.innerText = e.target.innerText
                 })
                 closeAllExcept()
             } else {
-                let target = container.querySelector(e.target.getAttribute('adc-target'))
+                let target = container.querySelector(e.target.getAttribute('ade-target'))
                 closeAllExcept(target)
             }
 
-            if (e.target.getAttribute('adc-action')=='font-size-minus'){
+            if (e.target.getAttribute('ade-action')=='font-size-minus'){
                 changeFontSize(Number(fontSize.value)-1)
             }
-            if (e.target.getAttribute('adc-action')=='font-size-plus'){
+            if (e.target.getAttribute('ade-action')=='font-size-plus'){
                 changeFontSize(Number(fontSize.value)+1)
             }
             function closeAllExcept(except) {
 
-                let dropdownLists = container.querySelectorAll('[adc-type="dropdown"]')
+                let dropdownLists = container.querySelectorAll('[ade-type="dropdown"]')
                 dropdownLists.forEach(item => {
                     if (item == except) {
                         item.classList.toggle('show')

dist/index.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>Custom Document Editor</title>
     <link rel="stylesheet" href="./assets/a-doc-editor.css">
     <script src="./assets/fontkit.umd.min.js"></script>
     <script src="./assets/pdf-lib.min.js" ></script>