header changes

dist/assets/a-doc-editor.css

@@ -119,20 +119,22 @@ canvas:focus-visible {
     overflow-x: auto;
     overflow-y: hidden;
 }
-.content-area .left-sidebar{
+
+.content-area .left-sidebar {
     width: 200px;
-    background-color:#408640;
+    background-color: #408640;
     padding: 5px;
 }
 
-.content-area .right-sidebar{
+.content-area .right-sidebar {
     width: 200px;
     background-color: #f5c468;
     padding: 5px;
 }
+
 .content-area .left-sidebar,
 .content-area .page-list,
-.content-area .right-sidebar{
+.content-area .right-sidebar {
     flex-shrink: 0;
     height: 100%;
     overflow-x: hidden;
@@ -143,15 +145,16 @@ canvas:focus-visible {
 }
 
 .left-sidebar .toggle-btn,
-.right-sidebar .toggle-btn{
+.right-sidebar .toggle-btn {
     display: block;
     position: static;
     top: 0;
     width: 100%;
     text-align: center;
 }
+
 .left-sidebar .content,
-.right-sidebar .content{
+.right-sidebar .content {
     opacity: 1;
     position: relative;
     left: 0%;
@@ -159,14 +162,15 @@ canvas:focus-visible {
 }
 
 .left-sidebar.hide,
-.right-sidebar.hide{
+.right-sidebar.hide {
     width: 50px;
 }
 
 .left-sidebar.hide .content,
-.right-sidebar.hide .content{
+.right-sidebar.hide .content {
     opacity: 0;
 }
+
 .page-list {
     position: relative;
     display: block;
@@ -185,6 +189,7 @@ canvas:focus-visible {
     position: relative;
     margin-top: 20px;
     margin-bottom: 20px;
+    margin-right: 2px;
 }
 
 .footer {
@@ -198,10 +203,26 @@ canvas:focus-visible {
     0% {
         background: #fff;
     }
+
     50% {
         background: #ddd;
     }
+
     100% {
         background: #fff;
     }
 }
+
+*::-webkit-scrollbar {
+    background: transparent;
+}
+
+*::-webkit-scrollbar-track {
+    background-color: #00000022;
+    border-radius: 5px;
+}
+
+*::-webkit-scrollbar-thumb {
+    background: #7dbbb3;
+    border-radius: 5px;
+}
\ No newline at end of file

dist/assets/a-doc-editor.js

 let isModule = (typeof module != 'undefined') ? true : false
 if (!isModule) console.log('Browser Environment')
 var ADocEditor = function (customConfig) {
-    var container, counter = 0, shadow, pxMmRatio, config, htmlStr, htmlTag, htmlObj = {}, fontList = [], headerToolbar = [];
+    var container, counter = 0, shadow, pxMmRatio, config, htmlStr, htmlTag, htmlObj = {}, fontList = [];
     const mmPtRatio = 254 / 720; // this is used for font size
     var paperSizes = {
         "A4": { mmWidth: 210, mmHeight: 297 },
@@ -10,11 +10,15 @@ var ADocEditor = function (customConfig) {
     const romanNumerals = [["I", "IV", "V", "IX"], ["X", "XL", "L", "XC"], ["C", "CD", "D", "CM"], ["M"]];
 
     const styleList = [
-        { name: "Normal Text", fontFamily: "Calibri", fontSize: 11, fontColor: "#000", bold: false, italic: false },
-        { name: "Title", fontFamily: "Calibri", fontSize: 26, fontColor: "#000", bold: false, italic: false },
+        { name: "Normal Text", fontFamily: "Calibri", fontSize: 11, fontColor: "#f00", bold: false, italic: false },
+        { name: "Title", fontFamily: "Calibri", fontSize: 26, fontColor: "#0f0", bold: false, italic: false },
         { name: "Subtitle", fontFamily: "Calibri", fontSize: 15, fontColor: "#555", bold: false, italic: false },
-        { name: "Heading 1", fontFamily: "Calibri", fontSize: 20, fontColor: "#000", bold: false, italic: false },
+        { name: "Heading 1", fontFamily: "Calibri", fontSize: 20, fontColor: "#00f", bold: false, italic: false },
     ]
+
+    const styleName = { };
+    styleList.forEach( (sty, s)=> { styleName[sty.name] = s } )
+
     var defaultConfig = {
         pageSetup: { size: "A4" }, zoom: 1,
         format: {
@@ -54,7 +58,7 @@ var ADocEditor = function (customConfig) {
         pageIndex: 0,
         caretSize: config.style.fontSize,
         previousCaret: null,
-        style: null,
+        style: { type: "Normal Text" },
         dimension: {
             x: config.format.margin,
             y: config.format.margin + (3 * config.style.fontSize / 4)
@@ -123,10 +127,10 @@ var ADocEditor = function (customConfig) {
     </div>
     <div class="page-list" adc="page-list"></div>
 
-    <div class="right-sidebar hide">
+    <!-- <div class="right-sidebar hide">
         <button class="toggle-btn" adc="toggle-right-sidebar">X</button>
         <div class="content" adc="right-sidebar-content"></div>
-    </div>
+    </div> -->
 </div>
 <div class="footer">
 
@@ -191,13 +195,17 @@ var ADocEditor = function (customConfig) {
 
         !(function fontSelectHandle() {
             let fontSelect = shadow.querySelector('[adc="font-select"]')
-            headerToolbar.push(fontSelect)
+            let caretStyle = getFullStyle(caretData.style)
+            fontSelect.value = caretStyle.fontFamily
             fontSelect.addEventListener('change', (e) => {
+                if (e.target.value){
                     caretData.style = {
-                    ...caretData.style,
+                        ...caretStyle,
                         fontFamily: e.target.value,
                     }
+                    delete caretData.style.type
                     focusOnPage()
+                }
             })
             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')
@@ -232,7 +240,8 @@ var ADocEditor = function (customConfig) {
 
         !(function fontSizeHandler() {
             let fontSizeInput = shadow.querySelector('[adc="font-size-input"]')
-            fontSizeInput.value = (caretData?.style?caretData:config).style.fontSize
+            let caretStyle = getFullStyle(caretData.style)
+            fontSizeInput.value = caretStyle.fontSize
             let fontSizeChangers = shadow.querySelectorAll('[adc="font-size-change"]')
             fontSizeChangers.forEach(btn => {
                 btn.addEventListener('click', (e) => {
@@ -314,12 +323,12 @@ var ADocEditor = function (customConfig) {
                 leftSidebar.classList.toggle('hide')
             })
 
-            let rightSidebar = shadow.querySelector('.right-sidebar')
-            let toggleRight = shadow.querySelector('[adc="toggle-right-sidebar"]')
-            toggleRight.addEventListener('click', ()=>{
-                rightSidebar.classList.toggle('hide')
-                toggleRight.scrollIntoView({behavior: 'smooth'})
-            })
+            // let rightSidebar = shadow.querySelector('.right-sidebar')
+            // let toggleRight = shadow.querySelector('[adc="toggle-right-sidebar"]')
+            // toggleRight.addEventListener('click', ()=>{
+            //     rightSidebar.classList.toggle('hide')
+            //     toggleRight.scrollIntoView({behavior: 'smooth'})
+            // })
         })()
 
 
@@ -433,8 +442,7 @@ var ADocEditor = function (customConfig) {
                     }
                 }
                 for (c = 0; c < dataBlock.plainContent.length; c++) {
-                    let style = dataBlock?.formatedText?.[c].style
-                    if (!style) style = { ...config.style }
+                    let style = getFullStyle(dataBlock?.formatedText?.[c].style)
                     lineObj.maxFontSize = (lineObj.maxFontSize < style.fontSize) ? style.fontSize : lineObj.maxFontSize
 
                     if (/\s/.test(dataBlock.plainContent[c])) {
@@ -445,15 +453,7 @@ var ADocEditor = function (customConfig) {
                     }
                     let charWidth = getCharacterWidth(dataBlock.plainContent[c], style)
 
-                    dataBlock.formatedText[c] = {
-                        style: {
-                            ...config.style,
-                            ...style,
-                        },
-                        dimension: {
-                            width: charWidth,
-                        },
-                    }
+                    dataBlock.formatedText[c].dimension.width = charWidth
 
                     // // if with the current char the string could not fit on one line
                     if (tempLineWidth + charWidth > maxLineWidth) {
@@ -541,9 +541,10 @@ var ADocEditor = function (customConfig) {
 
                 // this is to render the numbering and bullets etc
                 if (lines[l].dataType == 1) {
+                    let setStyle = getFullStyle(setData.style)
                     ctx.save()
-                    ctx.font = `${setData.style.fontSize * pxMmRatio * mmPtRatio}px ${setData.style.fontFamily}`
-                    ctx.fillStyle = `${setData.style.fontColor}`
+                    ctx.font = `${setStyle.fontSize * pxMmRatio * mmPtRatio}px ${setStyle.fontFamily}`
+                    ctx.fillStyle = `${setStyle.fontColor}`
                     let label = getLabel(lines[l].dataIndex)
                     let labelWidth = ctx.measureText(label).width
                     labelWidth += mmPtRatio * pxMmRatio * 5
@@ -557,7 +558,7 @@ var ADocEditor = function (customConfig) {
                 for (let c = lines[l].charStartIndex; c <= lines[l].charEndIndex; c++) {
                     let char = setData?.plainContent[c]
                     if (char) {
-                        let style = setData.formatedText[c].style
+                        let style = getFullStyle(setData.formatedText[c].style)
                         ctx.save()
                         ctx.font = `${style?.bold ? 'bold ' : ''}${style?.italic ? 'italic ' : ''} ${style.fontSize * pxMmRatio * mmPtRatio}px ${style.fontFamily}`
                         ctx.fillStyle = `${style?.fontColor}`
@@ -681,7 +682,6 @@ var ADocEditor = function (customConfig) {
                 caretData.activeData.plainContent = caretData.activeData.plainContent.slice(0, caretData.index) + e.key + caretData.activeData.plainContent.slice(caretData.index)
                 let style = caretData.style
                 style = style?style:null
-                console.log(style)
                 caretData.activeData.formatedText.splice(caretData.index, 0, { style : style, dimension: {} })
                 ++caretData.index
             }
@@ -768,7 +768,9 @@ var ADocEditor = function (customConfig) {
                     ...caretData.style,
                     fontSize: style.fontSize,
                 }
-                shadow.querySelector('[adc="font-size-input"]').value = caretData.style.fontSize
+                let fontInput = shadow.querySelector('[adc="font-size-input"]')
+                if (caretData?.style?.fontSize) fontInput.value = caretData.style.fontSize
+                else if (style?.fontSize) fontInput.value = style.fontSize
             }
         }
         function onFocusHandler(e) {
@@ -886,7 +888,7 @@ var ADocEditor = function (customConfig) {
         }
 
         function reRenderFontDropdown() {
-            let fontFamilyDropdown = headerToolbar.find(item => item.getAttribute('adc') == 'font-select')
+            let fontFamilyDropdown = shadow.querySelector('[adc="font-select"]')
             if (fontFamilyDropdown) {
                 fontFamilyDropdown.innerHTML = ""
                 fontList.forEach((font, i) => {
@@ -901,8 +903,9 @@ var ADocEditor = function (customConfig) {
 
         }
         function changeFontFamily() {
-            let fontFamilyDropdown = headerToolbar.find(item => item.getAttribute('adc') == 'font-select')
-            if (fontFamilyDropdown) fontFamilyDropdown.value = (caretData?.style?caretData:config).style.fontFamily
+            let fontFamilyDropdown = shadow.querySelector('[adc="font-select"]')
+            let caretStyle = getFullStyle(caretData.style)
+            if (fontFamilyDropdown) fontFamilyDropdown.value = caretStyle.fontFamily
         }
 
     }
@@ -951,6 +954,17 @@ var ADocEditor = function (customConfig) {
         }
     }
 
+    function getFullStyle(refStyle){
+        let style = {  }
+        if (refStyle.type){
+            style = { ...styleList[styleName[refStyle.type]  ] }
+        }
+        style = { ...style, ...refStyle }
+        style = JSON.parse( JSON.stringify(style) )
+        if (Object.keys(style).length > 1) delete style.type
+        return style
+    }
+
 
     function renderCaret(toLoop) {
         clearTimeout(caretData.timeout)
@@ -971,14 +985,15 @@ var ADocEditor = function (customConfig) {
             let x = (config.format.margin * pxMmRatio) + lineObj.tabWidth
             let y = (config.format.margin) * pxMmRatio
 
-            let height = (caretData?.style?caretData:config).style.fontSize * pxMmRatio * mmPtRatio * 5 / 4
+            let caretStyle = getFullStyle(caretData.style)
+            let height = caretStyle.fontSize * pxMmRatio * mmPtRatio * 5 / 4
             let width = height / 10
 
             let charDimension = caretData.activeData.formatedText[caretData.index - 1]?.dimension
             if (lineObj) {
                 x = (charDimension ? (charDimension.x + charDimension.width) : x)
                 if (charDimension) {
-                    y = charDimension.y - ((caretData?.style?caretData:config).style.fontSize * pxMmRatio * mmPtRatio)
+                    y = charDimension.y - (caretStyle.fontSize * pxMmRatio * mmPtRatio)
                 } else {
                     if (prevLine && prevLine.pageIndex != lineObj.pageIndex) {
                         y = (config.format.margin) * pxMmRatio