added header footer, mainbody, sidebars

dist/assets/a-doc-editor.css

 .a-doc-editor {
-    background: #777;
+    display: flex;
+    flex-direction: column;
+    height: 400px;
 }
 
-.a-doc-editor canvas {
-    background: #fff;
-}
 .a-doc-editor canvas:focus-visible {
     outline: red auto 1px;
+}
+
+
+.a-doc-editor .header {
+    overflow: auto;
+    background-color: #f0f0f0;
+}
+
+.a-doc-editor .footer {
+    overflow: auto;
+    background-color: #91d8bd;
+}
+
+.a-doc-editor .body {
+    flex: 1;
+    position: relative;
+    background-color: #ccc;
+}
+
+.a-doc-editor .body .left-sidebar {
+    position: absolute;
+    height: 100%;
+    left: 0;
+    background-color: #be3737;
+}
+
+.a-doc-editor .body .right-sidebar {
+    position: absolute;
+    height: 100%;
+    right: 0;
+    background-color: #8abe37;
+}
+
+.a-doc-editor .body .scrolling-area {
+    position: absolute;
+    left: 20%;
+    right: 20%;
+    top: 0;
+    bottom: 0;
+    background-color: #3756be;
+    text-align: center;
+    align-items: center;
+    overflow: auto;
+}
+
+.a-doc-editor .body .scrolling-area canvas.page {
+    background: #f3f3f3;
+    margin-bottom: 10px;
+}
+
+.a-doc-editor .body .scrolling-area canvas.page:first-child {
+    margin-top: 10px;
 }
\ No newline at end of file

dist/assets/a-doc-editor.js

@@ -3,6 +3,11 @@ var ADocEditor = function (customConfig) {
     var counter = 0
     var container = null
     var mainComponent = null
+    var headerComponent = null
+    var footerComponent = null
+    var scrollingComponent = null
+    var leftSidebar = null
+    var rightSidebar = null
     var defaultConfig = {
         element: "",
         pageSetup: {
@@ -40,8 +45,18 @@ var ADocEditor = function (customConfig) {
         x: 0,
         y: 21,
     }
-    var renderInProgress = false
+    var renderInProgress = false;
     var focusedCanvas = false;
+    var domElement = {
+        header: {
+            el: document.createElement('div'),
+        },
+        body: {
+            el: document.createElement('div'),
+
+
+        }
+    }
 
     function inititalize(customConfig) {
         config = { ...defaultConfig, ...customConfig }
@@ -54,10 +69,43 @@ var ADocEditor = function (customConfig) {
         if (config.element instanceof HTMLElement) container = config.element
         if (!container) throw "undefined"
 
-
-        mainComponent = document.createElement('div')
-        mainComponent.setAttribute('class', 'a-doc-editor')
-        container.append(mainComponent)
+        let mainComponentId = `main-${new Date().getTime()}`
+        let headerComponentId = `header-${new Date().getTime()}`
+        let footerComponentId = `footer-${new Date().getTime()}`
+        let scrollingAreaId = `scrolling-area-${new Date().getTime()}`
+        let leftSidebarId = `left-sidebar-${new Date().getTime()}`
+        let rightSidebarId = `right-sidebar-${new Date().getTime()}`
+        let htmlSetup = /*html*/`
+        <div class="a-doc-editor" id="${mainComponentId}">
+          <div class="header" id="${headerComponentId}">
+            <div>Menu bar</div>
+            <div>Formating tools</div>
+            <div>Page tools</div>
+          </div>
+          <div class="body">
+            <div class="scrolling-area" id="${scrollingAreaId}">
+            </div>
+            <div class="left-sidebar" id="${leftSidebarId}">Left</div>
+            <div class="right-sidebar" id="${rightSidebarId}">Right</div>
+          </div>
+          <div class="footer" id="${footerComponentId}">
+            <div>Footer Data</div>
+          </div>
+        </div>
+        `
+        container.innerHTML = htmlSetup
+        mainComponent = document.getElementById(mainComponentId)
+        headerComponent = document.getElementById(headerComponentId)
+        scrollingComponent = document.getElementById(scrollingAreaId)
+        footerComponent = document.getElementById(footerComponentId)
+        leftSidebar = document.getElementById(leftSidebarId)
+        rightSidebar = document.getElementById(rightSidebarId)
+
+
+
+        // mainComponent = document.createElement('div')
+        // mainComponent.setAttribute('class', 'a-doc-editor')
+        // container.append(mainComponent)
 
         reRenderPages(dataSet)
         // caretData.interval = setInterval(() => {
@@ -108,16 +156,16 @@ var ADocEditor = function (customConfig) {
             let words = ""
             let wordsLength = 0;
             dataSet.formatedText = []
-            for (let i=0; i<dataSet.plainContent.length; i++){
+            for (let i = 0; i < dataSet.plainContent.length; i++) {
 
 
-                if ( /\s+/.test(dataSet.plainContent[i]) ){
+                if (/\s+/.test(dataSet.plainContent[i])) {
                     wordEndIndex = i
                 }
 
 
                 let style = { ...config.style, ...dataSet?.style?.[i] }
-                if (i==0){
+                if (i == 0) {
                     y += style.fontSize
                 }
                 ctx.save()
@@ -132,23 +180,23 @@ var ADocEditor = function (customConfig) {
                     y: y,
                     ...style,
                 }
-                x+= charWidth
+                x += charWidth
 
-                if (wordsLength+charWidth<=maxWidth){
-                    wordsLength+=charWidth
-                }else{
+                if (wordsLength + charWidth <= maxWidth) {
+                    wordsLength += charWidth
+                } else {
                     i = wordEndIndex
                     wordsLength = 0
-                    y+= style.fontSize
-                    x=0;
+                    y += style.fontSize
+                    x = 0;
                     wordStartIndex = wordEndIndex
-                    
+
                 }
 
 
             }
 
-            for (let i=0; i<dataSet.formatedText.length; i++){
+            for (let i = 0; i < dataSet.formatedText.length; i++) {
                 ctx.save()
                 ctx.font = `${dataSet.formatedText[i].fontSize}px ${dataSet.formatedText[i].fontFamily}`
                 console.log('dataSet.formatedText[i].fontColor', dataSet.formatedText[i].fontColor)
@@ -170,11 +218,11 @@ var ADocEditor = function (customConfig) {
         // to render caret
         function renderCaret() {
             let ctx = canvasList[caretData.canvasIndex].getContext('2d', { willReadFrequently: true })
-            let activeTextData = caretData.activeData.formatedText[caretData.index-1]
-            let rectX = activeTextData?.x+activeTextData?.width;
-            let rectY = activeTextData?.y-activeTextData?.fontSize;
-            rectX = rectX?rectX:0
-            rectY = rectY?rectY:0
+            let activeTextData = caretData.activeData.formatedText[caretData.index - 1]
+            let rectX = activeTextData?.x + activeTextData?.width;
+            let rectY = activeTextData?.y - activeTextData?.fontSize;
+            rectX = rectX ? rectX : 0
+            rectY = rectY ? rectY : 0
             let rectWidth = 2;
             let rectHeight = caretData.caretSize;
 
@@ -199,7 +247,7 @@ var ADocEditor = function (customConfig) {
             canvas.addEventListener('mousedown', mousedownHandler)
             canvas.addEventListener("focus", onFocusHandler)
             canvas.addEventListener("blur", onBlurHandler)
-            mainComponent.append(canvas)
+            scrollingComponent.append(canvas)
             return canvas
         }
 
@@ -279,10 +327,10 @@ var ADocEditor = function (customConfig) {
 
     var returnObj = {
         destory,
-        loadContent: function(data){
-            console.log('to load', JSON.parse( JSON.stringify( dataSet)))
-            dataSet = JSON.parse( JSON.stringify(data) )
-            console.log('new Data', JSON.parse( JSON.stringify( dataSet)))
+        loadContent: function (data) {
+            console.log('to load', JSON.parse(JSON.stringify(dataSet)))
+            dataSet = JSON.parse(JSON.stringify(data))
+            console.log('new Data', JSON.parse(JSON.stringify(dataSet)))
             caretData.activeData = null
             caretData.activeData = dataSet[0]
             caretData.index = dataSet[0].plainContent.length

dist/index.html

@@ -14,12 +14,11 @@
     </style>
 </head>
 <body>
-    <h1>Hello World!</h1>
     <h2>To create a custom doc editor</h2>
     <p>Click on the canvas and start typing</p>
     <div id="user-container-for-editor"></div>
-    <h1>Some other data</h1>
-    <h1>Random heading </h1>
+
+
     <script type="module" src="./script.js"></script>
 </body>
 </html>
\ No newline at end of file