font size on toolbar added

dist/assets/a-doc-editor.css

@@ -24,9 +24,11 @@
     border-radius: 5px;
     height: 300px;
     overflow: auto;
+    top: 100%;
 }
 .a-doc-editor .dropdown-list.show {
     display: block;
+    width: max-content;
 }
 .a-doc-editor .dropdown-list .dropdown-option{
     padding: 10px;
@@ -40,9 +42,18 @@
     display:flex;
 }
 .a-doc-editor .header .option{
+    position: relative;
     border-bottom: 1px solid rgba(0, 0, 0, 0.137);
     padding: 1px;
+    display: flex;
+}
+.a-doc-editor .header button{
+    width: 25px;
 }
+.a-doc-editor .header .option input{
+    width: 25px;
+}
+
 .a-doc-editor .header .option:hover{
     padding: 1px;
     background-color: white;

dist/assets/a-doc-editor.js

@@ -21,6 +21,8 @@ var ADocEditor = function (customConfig) {
     var fontFamily = null;
     var fontFamilyDropdown = null
     var fontList = []
+    var fontSize;
+
     var defaultConfig = {
         element: "",
         pageSetup: {
@@ -108,13 +110,15 @@ var ADocEditor = function (customConfig) {
                 <div class="option">Help</div>
             </div>
             <div class="option-bar">
-                <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-label" adc-target="#${fontFamilyDropdownId}" style="min-width:180px"></div>
                     <div class="dropdown-list" id="${fontFamilyDropdownId}" adc-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>
+                </div>
 
             </div>
         </div>
@@ -144,44 +148,44 @@ var ADocEditor = function (customConfig) {
     </div>
             `;
 
+            addFonts(["./assets/fonts/Afacad-VariableFont_wght.woff2", "./assets/fonts/Afacad-VariableFont_wght.ttf"], 'Afacad')
             addFonts(["./assets/fonts/ArchitectsDaughter-Regular.woff2", "./assets/fonts/ArchitectsDaughter-Regular.ttf"], 'Architects Daughter')
+            addFonts(["./assets/fonts/Assistant-VariableFont_wght.woff2", "./assets/fonts/Assistant-VariableFont_wght.ttf"], 'Assistant')
+            addFonts(["./assets/fonts/Bitter-VariableFont_wght.woff2", "./assets/fonts/Bitter-VariableFont_wght.ttf"], 'Bitter')
             addFonts(["./assets/fonts/calibri-regular.woff2", "./assets/fonts/calibri-regular.ttf"], 'Calibri')
             addFonts(["./assets/fonts/Caveat-VariableFont_wght.woff2", "./assets/fonts/Caveat-VariableFont_wght.ttf"], 'Caveat')
+            addFonts(["./assets/fonts/Comfortaa-VariableFont_wght.woff2", "./assets/fonts/Comfortaa-VariableFont_wght.ttf"], 'Comfortaa')
+            addFonts(["./assets/fonts/CrimsonText-Regular.woff2", "./assets/fonts/CrimsonText-Regular.ttf"], 'Crimson Text')
             addFonts(["./assets/fonts/EduTASBeginner-VariableFont_wght.woff2", "./assets/fonts/EduTASBeginner-VariableFont_wght.ttf"], 'Edu TAS Beginner')
+            addFonts(["./assets/fonts/FiraSans-Regular.woff2", "./assets/fonts/FiraSans-Regular.ttf"], 'Fira Sans')
             addFonts(["./assets/fonts/IndieFlower-Regular.woff2", "./assets/fonts/IndieFlower-Regular.ttf"], 'Indie Flower')
             addFonts(["./assets/fonts/Kanit-Regular.woff2", "./assets/fonts/Kanit-Regular.ttf"], 'Kanit')
+            addFonts(["./assets/fonts/Karla-VariableFont_wght.woff2", "./assets/fonts/Karla-VariableFont_wght.ttf"], 'Karla')
             addFonts(["./assets/fonts/Kenia-Regular.woff2", "./assets/fonts/Kenia-Regular.ttf"], 'Kenia')
             addFonts(["./assets/fonts/Lato-Regular.woff2", "./assets/fonts/Lato-Regular.ttf"], 'Lato')
+            addFonts(["./assets/fonts/LibreFranklin-VariableFont_wght.woff2", "./assets/fonts/LibreFranklin-VariableFont_wght.ttf"], 'Libre Franklin')
             addFonts(["./assets/fonts/Lora-Regular.woff2", "./assets/fonts/Lora-Regular.ttf"], 'Lora')
             addFonts(["./assets/fonts/Macondo-Regular.woff2", "./assets/fonts/Macondo-Regular.ttf"], 'Macondo')
             addFonts(["./assets/fonts/Merriweather-Regular.woff2", "./assets/fonts/Merriweather-Regular.ttf"], 'Merriweather')
             addFonts(["./assets/fonts/Montserrat-VariableFont_wght.woff2", "./assets/fonts/Montserrat-VariableFont_wght.ttf"], 'Montserrat')
-            addFonts(["./assets/fonts/OpenSans-VariableFont_wdth,wght.woff2", "./assets/fonts/OpenSans-VariableFont_wdth,wght.ttf"], 'Open Sans')
-            addFonts(["./assets/fonts/Pacifico-Regular.woff2", "./assets/fonts/Pacifico-Regular.ttf"], 'Pacifico')
-            addFonts(["./assets/fonts/Poppins-Regular.woff2", "./assets/fonts/Poppins-Regular.ttf"], 'Poppins')
-            addFonts(["./assets/fonts/Rubik-VariableFont_wght.woff2", "./assets/fonts/Rubik-VariableFont_wght.ttf"], 'Rubik')
-            addFonts(["./assets/fonts/Ubuntu-Regular.woff2", "./assets/fonts/Ubuntu-Regular.ttf"], 'Ubuntu')
-            addFonts(["./assets/fonts/WorkSans-Regular.woff2", "./assets/fonts/WorkSans-Regular.ttf"], 'Work Sans')
-
-            addFonts(["./assets/fonts/Afacad-VariableFont_wght.woff2", "./assets/fonts/Afacad-VariableFont_wght.ttf"], 'Afacad')
-            addFonts(["./assets/fonts/Assistant-VariableFont_wght.woff2", "./assets/fonts/Assistant-VariableFont_wght.ttf"], 'Assistant')
-            addFonts(["./assets/fonts/Bitter-VariableFont_wght.woff2", "./assets/fonts/Bitter-VariableFont_wght.ttf"], 'Bitter')
-            addFonts(["./assets/fonts/Comfortaa-VariableFont_wght.woff2", "./assets/fonts/Comfortaa-VariableFont_wght.ttf"], 'Comfortaa')
-            addFonts(["./assets/fonts/CrimsonText-Regular.woff2", "./assets/fonts/CrimsonText-Regular.ttf"], 'Crimson Text')
-            addFonts(["./assets/fonts/FiraSans-Regular.woff2", "./assets/fonts/FiraSans-Regular.ttf"], 'Fira Sans')
-            addFonts(["./assets/fonts/Karla-VariableFont_wght.woff2", "./assets/fonts/Karla-VariableFont_wght.ttf"], 'Karla')
-            addFonts(["./assets/fonts/LibreFranklin-VariableFont_wght.woff2", "./assets/fonts/LibreFranklin-VariableFont_wght.ttf"], 'Libre Franklin')
             addFonts(["./assets/fonts/Mulish-VariableFont_wght.woff2", "./assets/fonts/Mulish-VariableFont_wght.ttf"], 'Mulish')
             addFonts(["./assets/fonts/NotoSans-VariableFont_wdth,wght.woff2", "./assets/fonts/NotoSans-VariableFont_wdth,wght.ttf"], 'Noto Sans')
             addFonts(["./assets/fonts/Nunito-VariableFont_wght.woff2", "./assets/fonts/Nunito-VariableFont_wght.ttf"], 'Nunito')
+            addFonts(["./assets/fonts/OpenSans-VariableFont_wdth,wght.woff2", "./assets/fonts/OpenSans-VariableFont_wdth,wght.ttf"], 'Open Sans')
             addFonts(["./assets/fonts/Outfit-VariableFont_wght.woff2", "./assets/fonts/Outfit-VariableFont_wght.ttf"], 'Outfit')
+            addFonts(["./assets/fonts/Pacifico-Regular.woff2", "./assets/fonts/Pacifico-Regular.ttf"], 'Pacifico')
+            addFonts(["./assets/fonts/Poppins-Regular.woff2", "./assets/fonts/Poppins-Regular.ttf"], 'Poppins')
             addFonts(["./assets/fonts/Prompt-Regular.woff2", "./assets/fonts/Prompt-Regular.ttf"], 'Prompt')
             addFonts(["./assets/fonts/Rajdhani-Regular.woff2", "./assets/fonts/Rajdhani-Regular.ttf"], 'Rajdhani')
             addFonts(["./assets/fonts/Roboto-Regular.woff2", "./assets/fonts/Roboto-Regular.ttf"], 'Roboto')
+            addFonts(["./assets/fonts/Rubik-VariableFont_wght.woff2", "./assets/fonts/Rubik-VariableFont_wght.ttf"], 'Rubik')
             addFonts(["./assets/fonts/SourceCodePro-VariableFont_wght.woff2", "./assets/fonts/SourceCodePro-VariableFont_wght.ttf"], 'Source Code Pro')
             addFonts(["./assets/fonts/Teko-VariableFont_wght.woff2", "./assets/fonts/Teko-VariableFont_wght.ttf"], 'Teko')
             addFonts(["./assets/fonts/TitilliumWeb-Regular.woff2", "./assets/fonts/TitilliumWeb-Regular.ttf"], 'Titillium Web')
+            addFonts(["./assets/fonts/Ubuntu-Regular.woff2", "./assets/fonts/Ubuntu-Regular.ttf"], 'Ubuntu')
             addFonts(["./assets/fonts/VarelaRound-Regular.woff2", "./assets/fonts/VarelaRound-Regular.ttf"], 'Varela Round')
+            addFonts(["./assets/fonts/WorkSans-Regular.woff2", "./assets/fonts/WorkSans-Regular.ttf"], 'Work Sans')
+
 
             container.innerHTML = htmlSetup
             container.append(styleTag)
@@ -200,11 +204,15 @@ var ADocEditor = function (customConfig) {
                 rightSidebar.classList.toggle('hide')
             })
             fontFamily = container.querySelector(`[adc-target="#${fontFamilyDropdownId}"]`)
-            bindGlobalEvents()
             fontFamilyDropdown = document.getElementById(fontFamilyDropdownId)
             fontFamilyDropdown.addEventListener('click', changeFontFamily)
             reRenderFontDropdown()
 
+            fontSize = container.querySelector('[adc-action="font-size-set"]') 
+
+
+            bindGlobalEvents()
+
         }
 
 
@@ -315,7 +323,7 @@ var ADocEditor = function (customConfig) {
                     width: charWidth
                 }
 
-                lineObj.maxFontSize = style.fontSize
+                lineObj.maxFontSize = (!lineObj.maxFontSize)?style.fontSize:( style.fontSize>lineObj.maxFontSize?style.fontSize:lineObj.maxFontSize )
                 // lineObj.fontSize = style.fontSize
                 tempLineWidth += charWidth
                 if (tempLineWidth <= maxLineWidth) {
@@ -355,7 +363,7 @@ var ADocEditor = function (customConfig) {
             let ctx = canvasList[canvasIndex].el.getContext('2d', { willReadFrequently: true })
             let x = 0
             let y = (config.format.margin * config.pageSetup.canvasMultiplier)
-            let maxVericalWidth = (config.pageSetup.canvasHeight - config.format.margin * config.pageSetup.canvasMultiplier * 2)
+            let maxVericalWidth = (config.pageSetup.canvasHeight - config.format.margin * config.pageSetup.canvasMultiplier * 2); // this is the height of writable area; so this excludes the margin from top and bottom.
             for (let l = 0; l < lines.length; l++) {
                 x = (config.format.margin * config.pageSetup.canvasMultiplier);
 
@@ -574,7 +582,7 @@ var ADocEditor = function (customConfig) {
             else if (e.key.length == 1 || e.keyCode == 32) { // these are printable characters key
                 e.preventDefault()
                 caretData.style.fontFamily = fontFamily.innerText
-
+                caretData.style.fontSize = Number(fontSize.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)
@@ -706,8 +714,8 @@ var ADocEditor = function (customConfig) {
         function embedFont(name) {
             return new Promise((res, rej) => {
                 let fontObj = fontList.find(item => item.name == name)
-                let url = fontObj.paths.find( item => item.slice(-4)=='.ttf' )
-                if(!url) fontObj.paths[0]
+                let url = fontObj.paths.find(item => item.slice(-4) == '.ttf')
+                if (!url) fontObj.paths[0]
                 fetch(url)
                     .then(async (data) => {
                         let arrayBuffer = await data.arrayBuffer()
@@ -836,7 +844,7 @@ var ADocEditor = function (customConfig) {
 
     // // these are methods related to the toolbar items
     function changeFontFamily(e) {
-        if (e){
+        if (e) {
             caretData.style.fontFamily = e.target.innerText
             caretData.styleModified = false
             if (lastFocusCanvas) {
@@ -845,12 +853,24 @@ var ADocEditor = function (customConfig) {
             if (!caretData.activeData.plainContent.length) {
                 caretData.activeData.style.fontFamily = e.target.innerText
             }
-        }else{
+        } else {
             let labels = container.querySelectorAll(`[adc-target="#${fontFamilyDropdown.id}"]`)
-            labels.forEach( item => item.innerText = caretData.style.fontFamily )
+            labels.forEach(item => item.innerText = caretData.style.fontFamily)
         }
     }
 
+    function changeFontSize(change){
+        fontSize.value = change
+        caretData.style.fontSize = change
+        if (lastFocusCanvas) {
+            lastFocusCanvas.focus({ preventScroll: true })
+        }
+        if (!caretData.activeData.plainContent.length) {
+            caretData.activeData.style.fontSize = change
+        }
+        
+    }
+
 
     function reRenderFontDropdown() {
         if (fontFamilyDropdown) {
@@ -870,35 +890,43 @@ var ADocEditor = function (customConfig) {
 
     }
 
-    function bindGlobalEvents(){
+    function bindGlobalEvents() {
 
         let options = container.querySelectorAll('[adc-target]')
-        options.forEach( option=>{
+        options.forEach(option => {
             let target = container.querySelector(option.getAttribute('adc-target'))
-            option.innerText = target?.children?.[0]?.innerText?target?.children?.[0]?.innerText:''
-        } )
+            option.innerText = target?.children?.[0]?.innerText ? target?.children?.[0]?.innerText : ''
+        })
+        fontSize.value = caretData.style.fontSize
 
-        container.addEventListener('click', (e)=>{
-            if (e.target.getAttribute('adc-type')=='option'){
+        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=> {
+                labelList.forEach(item => {
                     item.innerText = e.target.innerText
-                } )
+                })
                 closeAllExcept()
-            }else{
+            } else {
                 let target = container.querySelector(e.target.getAttribute('adc-target'))
                 closeAllExcept(target)
             }
-            function closeAllExcept(except){
+
+            if (e.target.getAttribute('adc-action')=='font-size-minus'){
+                changeFontSize(Number(fontSize.value)-1)
+            }
+            if (e.target.getAttribute('adc-action')=='font-size-plus'){
+                changeFontSize(Number(fontSize.value)+1)
+            }
+            function closeAllExcept(except) {
 
                 let dropdownLists = container.querySelectorAll('[adc-type="dropdown"]')
-                dropdownLists.forEach( item => {
-                    if (item==except){
+                dropdownLists.forEach(item => {
+                    if (item == except) {
                         item.classList.toggle('show')
                     }
                     else item.classList.remove('show')
-                } )
+                })
             }
         })