fixes like cursor, e nter, backspace, width, numbering count and font size

dist/assets/a-doc-editor.css

@@ -9,6 +9,10 @@
     justify-content: flex-start;
 }
 
+hidden {
+    display: none;
+}
+
 .header {
     position: relative;
     display: block;
@@ -21,7 +25,31 @@
     width: 100%;
     background: pink;
     display: flex;
-    gap: 10px;
+}
+
+.toolbar [adc-type="menu-options"] {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+    border-radius: 5px;
+    background-color: goldenrod;
+}
+
+.toolbar [adc-type="menu-item"]:hover [adc-type="menu-options"] {
+    opacity: 1;
+    z-index: 10;
+    pointer-events: auto;
+}
+
+.toolbar [adc-type="menu-options"] [adc-type="sub-menu"] {
+    border-radius: 5px;
+    min-width: 100px;
+    padding: 5px;
+    background-color: goldenrod;
+}
+
+.toolbar [adc-type="menu-options"] [adc-type="sub-menu"]:hover {
+    background-color: gold;
 }
 
 .toolbar .item {
@@ -36,7 +64,8 @@
     margin: 4px;
     cursor: pointer;
 }
-.popover{
+
+.popover {
     position: absolute;
     padding: 5px;
     background-color: gray;
@@ -44,32 +73,40 @@
     opacity: 0;
     pointer-events: none;
 }
-.popover.show{
+
+.popover.show {
     opacity: 1;
     pointer-events: auto;
     z-index: 10;
 }
+
 .toolbar .item:hover {
     background: #5fad5f;
 }
+
 [adc-type="popover"] {
     pointer-events: none;
 }
+
 .small-input {
     width: 50px;
 }
+
 .small-btn {
     width: 25px;
 }
+
 .option {
     border: 1px solid black;
     padding: 5px;
     margin: 5px;
     border-radius: 4px;
 }
+
 .option:hover {
     background-color: #f5c468;
 }
+
 .page-list {
     position: relative;
     display: block;

dist/assets/a-doc-editor.js

@@ -5,8 +5,8 @@ var ADocEditor = function (customConfig) {
     var paperSizes = {
         "A4": { mmWidth: 210, mmHeight: 297 },
     }
-    const letters = { "0": "a","1": "b","2": "c","3": "d","4": "e","5": "f","6": "g","7": "h","8": "i","9": "j","a": "k","b": "l","c": "m","d": "n","e": "o","f": "p","g": "q","h": "r","i": "s","j": "t","k": "u","l": "v","m": "w","n": "x","o": "y","p": "z" }
-    const romanNumerals = [ ["I", "IV", "V", "IX"], ["X", "XL", "L", "XC"], ["C", "CD", "D", "CM"], ["M"] ];
+    const letters = { "0": "a", "1": "b", "2": "c", "3": "d", "4": "e", "5": "f", "6": "g", "7": "h", "8": "i", "9": "j", "a": "k", "b": "l", "c": "m", "d": "n", "e": "o", "f": "p", "g": "q", "h": "r", "i": "s", "j": "t", "k": "u", "l": "v", "m": "w", "n": "x", "o": "y", "p": "z" }
+    const romanNumerals = [["I", "IV", "V", "IX"], ["X", "XL", "L", "XC"], ["C", "CD", "D", "CM"], ["M"]];
     var defaultConfig = {
         pageSetup: { size: "A4" }, zoom: 1,
         format: {
@@ -60,6 +60,25 @@ var ADocEditor = function (customConfig) {
 
         htmlStr = /*html*/`
 <div class="header">
+        
+    <div class="toolbar">
+        <div class="item" adc-target="file-menu" adc-type="menu-item">
+            <span>File</span>
+            <div adc="file-menu" adc-type="menu-options">
+                <div adc-type="sub-menu" adc-action="new-file">New</div>
+                <div adc-type="sub-menu" adc-action="open-file">Open</div>
+                <div adc-type="sub-menu" adc-action="save-file">Save</div>
+            </div>
+        </div>
+        <div class="item" adc-target="help-menu" adc-type="menu-item">
+            <span>Help</span>
+            <div adc="help-menu" adc-type="menu-options">
+                <div adc-type="sub-menu" adc-action="about">About</div>
+                <div adc-type="sub-menu" adc-action="tutorial">Tutorial</div>
+            </div>
+        </div>
+
+    </div>
     <div class="toolbar">
         <select class="item" adc="font-select"></select>
         <div class="item" adc="list-handler" adc-target="list-popover">
@@ -102,6 +121,10 @@ var ADocEditor = function (customConfig) {
         <span class="item">Pages : 1</span>
     </div>
 </div>
+<hidden>
+    <a adc="download-link">
+    <input adc="open-file" type="file" accept=".json"/>
+</hidden>
         `;
 
 
@@ -155,13 +178,13 @@ var ADocEditor = function (customConfig) {
         !(function handleList() {
             let listItems = shadow.querySelectorAll('[adc-toggle="listing-option"]')
             let popover = shadow.querySelector('[adc-type="popover"]')
-            for(let i=0; i<listItems.length; i++){
+            for (let i = 0; i < listItems.length; i++) {
                 listItems[i].addEventListener('click', (e) => {
                     let value = Number(e.target.getAttribute('value'))
-                    value = value?value:0
+                    value = value ? value : 0
                     if (caretData.activeData) {
-                        caretData.activeData.type = (caretData.activeData.type == 1 && caretData.activeData.listStyle==value) ? 0 : 1
-                        if (caretData.activeData.type==1){
+                        caretData.activeData.type = (caretData.activeData.type == 1 && caretData.activeData.listStyle == value) ? 0 : 1
+                        if (caretData.activeData.type == 1) {
                             caretData.activeData.listStyle = value
                         }
                         changeListStyle()
@@ -175,25 +198,25 @@ var ADocEditor = function (customConfig) {
             }
         })()
 
-        !(function fontSizeHandler(){
+        !(function fontSizeHandler() {
             let fontSizeInput = shadow.querySelector('[adc="font-size-input"]')
             fontSizeInput.value = caretData.style.fontSize
             let fontSizeChangers = shadow.querySelectorAll('[adc="font-size-change"]')
-            fontSizeChangers.forEach( btn => {
-                btn.addEventListener( 'click',(e)=>{
+            fontSizeChangers.forEach(btn => {
+                btn.addEventListener('click', (e) => {
                     let change = Number(e.target.getAttribute('value'))
-                    change = change?change:0
+                    change = change ? change : 0
                     change = caretData.style.fontSize + change
-                    change = change?change:config.style.fontSize
+                    change = change ? change : config.style.fontSize
                     caretData.style.fontSize = change
                     fontSizeInput.value = change
                     focusOnPage()
-                } )
-            } )
+                })
+            })
 
-            function changeFontEvent(e){
-                let value = Number( e.target.value )
-                value = value?value:config.style.fontSize
+            function changeFontEvent(e) {
+                let value = Number(e.target.value)
+                value = value ? value : config.style.fontSize
                 caretData.style.fontSize = value
                 if (e?.key == 'Enter') focusOnPage()
             }
@@ -202,6 +225,30 @@ var ADocEditor = function (customConfig) {
 
         })()
 
+        !(function menuHandler() {
+            shadow.querySelector('[adc-action="new-file"]')
+                .addEventListener('click', newDocument)
+
+            shadow.querySelector('[adc-action="save-file"]')
+                .addEventListener('click', downloadJSON)
+
+            let openFileInput = shadow.querySelector('[adc="open-file"]')
+            openFileInput.addEventListener('change', (e) => {
+                let file = e.target?.files?.[0]
+                if (file) {
+                    const reader = new FileReader()
+                    reader.onload = function (e) {
+                        const fileContent = e.target.result;
+                        let jsonData = JSON.parse(fileContent)
+                        setDocumentData(jsonData)
+                    };
+                    reader.readAsText(file);
+                }
+            })
+            shadow.querySelector('[adc-action="open-file"]')
+                .addEventListener('click', () => { openFileInput.click() })
+        })()
+
         reConfigure(customConfig)
         reRenderCanvas()
         addGlobalEvents()
@@ -313,7 +360,7 @@ var ADocEditor = function (customConfig) {
                 }
                 for (c = 0; c < dataBlock.plainContent.length; c++) {
                     let style = dataBlock?.formatedText?.[c]
-                    lineObj.maxFontSize = (lineObj.maxFontSize<dataBlock?.formatedText?.[c].fontSize)?dataBlock?.formatedText?.[c].fontSize:lineObj.maxFontSize
+                    lineObj.maxFontSize = (lineObj.maxFontSize < dataBlock?.formatedText?.[c].fontSize) ? dataBlock?.formatedText?.[c].fontSize : lineObj.maxFontSize
 
                     if (/\s/.test(dataBlock.plainContent[c])) {
                         // condition to check if a blank character is found.
@@ -346,10 +393,10 @@ var ADocEditor = function (customConfig) {
                         lineObj = new getLineObj()
                         lineObj.maxLineWidth = maxLineWidth
                         lineObj.maxFontSize = style.fontSize
-                        if (dataBlock.type == 1){
+                        if (dataBlock.type == 1) {
                             lineObj.tabWidth = tabWidth
                             lineObj.tabCount = dataBlock.tabCount
-                        }else{
+                        } else {
                             maxLineWidth = config.pageSetup.pxWidth - (config.format.margin * pxMmRatio * 2)
                             lineObj.tabWidth = 0
                             lineObj.tabCount = 0
@@ -444,9 +491,9 @@ var ADocEditor = function (customConfig) {
 
 
             function convertToLetter(num) {
-                num = (num-1).toString(26)
+                num = (num - 1).toString(26)
                 let label = ""
-                for(let i=0;i<num.length;i++) label+= letters[num[i]]
+                for (let i = 0; i < num.length; i++) label += letters[num[i]]
 
                 return label
             }
@@ -535,9 +582,9 @@ var ADocEditor = function (customConfig) {
                 if (caretData.index == 0) {
                     let activeDataIndex = dataList.findIndex(item => item.id == caretData.activeData.id)
                     if (caretData.activeData.tabCount) {
-                        if (caretData.activeData.type==1){
+                        if (caretData.activeData.type == 1) {
                             caretData.activeData.type = 0
-                        }else{
+                        } else {
                             caretData.activeData.tabCount--
                         }
                     }
@@ -568,10 +615,10 @@ var ADocEditor = function (customConfig) {
                 }
 
                 dataObj.plainContent = caretData.activeData.plainContent.slice(caretData.index)
-                caretData.activeData.plainContent = caretData.activeData.plainContent.slice(0,caretData.index)
+                caretData.activeData.plainContent = caretData.activeData.plainContent.slice(0, caretData.index)
                 dataObj.formatedText = caretData.activeData.formatedText.splice(caretData.index)
-                let activeDataIndex = dataList.findIndex( item => item.id==caretData.activeData.id )
-                dataList.splice( activeDataIndex+1, 0, dataObj )
+                let activeDataIndex = dataList.findIndex(item => item.id == caretData.activeData.id)
+                dataList.splice(activeDataIndex + 1, 0, dataObj)
 
                 if (e.ctrlKey || e.metaKey) dataObj.newPage = true
                 caretData.index = 0
@@ -665,7 +712,8 @@ var ADocEditor = function (customConfig) {
                 const pxY = (e.clientY - rect.top) * config.pageSetup.pxHeight / rect.height;
                 placeCaret({ x: pxX, y: pxY })
                 let style = caretData.activeData.formatedText[caretData.index]
-                if (style) caretData.style = { ...caretData.style,
+                if (style) caretData.style = {
+                    ...caretData.style,
                     fontSize: style.fontSize,
                 }
                 shadow.querySelector('[adc="font-size-input"]').value = caretData.style.fontSize
@@ -682,16 +730,16 @@ var ADocEditor = function (customConfig) {
         }
     }
 
-    function changeListStyle(){
-        let activeDataIndex = dataList.findIndex( item => item.id == caretData.activeData.id )
-        let d = activeDataIndex-1
+    function changeListStyle() {
+        let activeDataIndex = dataList.findIndex(item => item.id == caretData.activeData.id)
+        let d = activeDataIndex - 1
 
-        while( dataList?.[d]?.type==1){
+        while (dataList?.[d]?.type == 1) {
             dataList[d].listStyle = caretData.activeData.listStyle
             --d
         }
-        d = activeDataIndex+1
-        while(dataList?.[d]?.type==1){
+        d = activeDataIndex + 1
+        while (dataList?.[d]?.type == 1) {
             dataList[d].listStyle = caretData.activeData.listStyle
             ++d
         }
@@ -793,11 +841,11 @@ var ADocEditor = function (customConfig) {
 
             let charData = caretData.activeData.formatedText[caretData.index - 1]
             if (lineObj) {
-                x = (charData?(charData.x+charData.width):x)
-                if(charData){
-                    y = charData.y - (caretData.style.fontSize*pxMmRatio)
-                }else{
-                    y = lineObj.y - (lineObj.maxFontSize*pxMmRatio)
+                x = (charData ? (charData.x + charData.width) : x)
+                if (charData) {
+                    y = charData.y - (caretData.style.fontSize * pxMmRatio)
+                } else {
+                    y = lineObj.y - (lineObj.maxFontSize * pxMmRatio)
                 }
             }
 
@@ -836,28 +884,83 @@ var ADocEditor = function (customConfig) {
         }
     }
 
-    var returnObj = {
-        getDocumentData(){
-            let activeDataIndex = dataList.findIndex( item => item.id == caretData.activeData.id )
+    function newDocument(e) {
+        caretData.blink = true
+        dataList = [
+            {
+                id: ++counter,
+                type: 0,
+                formatedText: [],
+                plainContent: "",
+                tabCount: 0,
+                style: { ...config.style },
+                listItemNumber: 0,
+            },
+        ]
+
+        caretData = {
+            activeData: dataList[0],
+            index: 0,
+            timeout: null,
+            timeoutDuration: 800,
+            blink: true,
+            pageIndex: 0,
+            caretSize: config.style.fontSize,
+            previousCaret: null,
+            style: { ...dataList[0].style, x: config.format.margin, y: config.format.margin + (3 * config.style.fontSize / 4) },
+        }
+        pageList = []
+        shadow.querySelector('[adc="page-list"').innerHTML = ""
+        reRenderCanvas()
+    }
+
+    function downloadJSON() {
+        let data = compressDocJSON()
+        let jsonString = JSON.stringify(data)
+        const blob = new Blob([jsonString], { type: 'application/json' });
+
+        const a = shadow.querySelector('[adc="download-link"');
+        a.download = 'saved-data.json';
+        a.href = URL.createObjectURL(blob);
+        document.body.appendChild(a);
+        a.click();
+
+
+    }
+
+    function compressDocJSON() {
+        let activeDataIndex = dataList.findIndex(item => item.id == caretData.activeData.id)
         let returnObj = {
-                config: JSON.parse( JSON.stringify(config) ),
-                content: JSON.parse( JSON.stringify(dataList) ),
-                caretData: JSON.parse( JSON.stringify(caretData) )
+            config: JSON.parse(JSON.stringify(config)),
+            content: JSON.parse(JSON.stringify(dataList)),
+            caretData: JSON.parse(JSON.stringify(caretData))
         }
+        
         delete returnObj.caretData.activeData
+        delete returnObj.caretData.previousCaret
         returnObj.caretData.activeDataIndex = activeDataIndex
+        returnObj.compressed = true
+
         return returnObj
+    }
 
-        },
-        setDocumentData(data){
+
+    function setDocumentData(data) {
         // might need to change some configuration
-            dataList = JSON.parse( JSON.stringify( data.content ) )
-            config = JSON.parse( JSON.stringify( data.config ) )
-            caretData = JSON.parse( JSON.stringify( data.caretData ) )
+
+        dataList = JSON.parse(JSON.stringify(data.content))
+        config = JSON.parse(JSON.stringify(data.config))
+        caretData = JSON.parse(JSON.stringify(data.caretData))
         caretData.activeData = dataList[data.caretData.activeDataIndex]
         caretData.blink = false
         reRenderCanvas()
+    }
+
+    var returnObj = {
+        getDocumentData() {
+            return compressDocJSON()
         },
+        setDocumentData,
         addFonts,
         getConfiguration() { return JSON.parse(JSON.stringify(config)) },
         getPages() {
@@ -866,9 +969,7 @@ var ADocEditor = function (customConfig) {
             return pagesToReturn
         },
         log() {
-            console.log('dataList', dataList)
-            console.log('lines', lines)
-            console.log('caretData', caretData)
+            console.log(compressDocJSON())
         },
         focusOnPage,
     }