new commit

dist/assets/a-doc-editor2.css

+.scale{
+    position: absolute;
+    display: block;
+    width: 100mm;
+    height: 100mm;
+    z-index: -1;
+    opacity: 0;
+    pointer-events: none;
+}
+.main {
+    position: relative;
+    display: block;
+    width: 100%;
+    background-color: #858585;
+}
+.page-list {
+    display: block;
+    width: 100mm;
+    height: 100mm;
+    background: #b1b1b1;
+}
\ No newline at end of file

dist/assets/a-doc-editor2.js

+let isModule = (typeof module != 'undefined') ? true : false
+if (!isModule) console.log('Browser Environment')
+var ADocEditor = function (customConfig) {
+    var container, shadow, pxMmRatio, configuration, htmlStr, htmlTag;
+    var paperSizes = {
+        "A4": { mmWidth: 210, mmHeight: 297 },
+    }
+    var defaultConfig = {
+        pageSetup: { size: "A4" }
+    }
+    var pageList = []
+    function initialize(){
+        configuration = JSON.parse( JSON.stringify(defaultConfig) )
+        container = customConfig.container
+        shadow = container.attachShadow({ mode: "open" })
+        console.log('configuration', configuration)
+
+        htmlStr = /*html*/`
+<div class="scale"></div>
+<div class="header">
+
+</div>
+<div class="page-list">
+
+</div>
+        `;
+
+
+        let styleSheets = customConfig?.styleSheet?.length?customConfig.styleSheet:[]
+        styleSheets.splice(0,0,  "/assets/a-doc-editor2.css")
+        for ( let i=0; i<styleSheets.length; i++ ){
+            let link = document.createElement('link')
+            link.setAttribute('rel', 'stylesheet');
+            link.setAttribute('href', styleSheets[i]);
+            shadow.append(link)
+        }
+
+        htmlTag = document.createElement('div')
+        htmlTag.setAttribute('class', 'main')
+        htmlTag.innerHTML = htmlStr
+        shadow.append(htmlTag)
+
+
+        reConfigure( customConfig )
+        createNewPage(0)
+    }
+    function reConfigure(newConfig){
+        if (newConfig.size && paperSizes[ newConfig.size ]){ configuration.pageSetup = { ...paperSizes[newConfig.size], size: newConfig.size } }
+        else if ( newConfig.width && newConfig.height ){
+            configuration.pageSetup = { size: "Custom", mmWidth: newConfig.width, mmHeight: newConfig.height }
+        }
+        else { configuration.pageSetup = { size: "A4", ...paperSizes['A4'] } }
+
+        if (typeof window == 'object'){
+            configuration.pageSetup.multipler = configuration.pageSetup.mmHeight/configuration.pageSetup.mmWidth
+            configuration.pageSetup.pxWidth = 2480
+            configuration.pageSetup.pxHeight = Math.ceil(configuration.pageSetup.pxWidth*configuration.pageSetup.multipler)
+        }else{
+            configuration.pageSetup.pxHeight = configuration.pageSetup.mmHeight
+            configuration.pageSetup.pxWidth = configuration.pageSetup.mmWipxWidth
+        }
+
+        let scale = shadow.querySelector('.scale')
+        scale.setAttribute('style', `position: absolute; display: block; width: 100mm; height: 100mm; z-index: -1; opacity: 0; pointer-events: none;`)
+        let rect = scale.getBoundingClientRect()
+        pxMmRatio = rect.width/100; 
+
+        return configuration
+    }
+
+    function createNewPage(index){
+        console.log('to create new page on', index)
+        let pageObj = {
+            canvas: null,
+            firstDataIndex: null,
+            firstCharIndex: null,
+            lastDataIndex: null,
+            lastCharIndex: null
+        }
+        if (!isModule){
+            pageObj.canvas = document.createElement('canvas')
+            pageObj.canvas.width = configuration.pageSetup.pxWidth
+            pageObj.canvas.height = configuration.pageSetup.pxHeight
+            pageList.push( pageObj )
+            console.log('container', container.querySelector('[adc="pages"]'))
+        }
+    }
+    
+    
+    var returnObj = {
+        
+    }
+    initialize()
+    return returnObj
+}
+
+
+if (isModule) module.exports = ADocEditor
\ No newline at end of file

dist/index.html

@@ -4,10 +4,10 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Custom Document Editor</title>
-    <link rel="stylesheet" href="./assets/a-doc-editor.css">
+    <link rel="stylesheet" href="./assets/a-doc-editor2.css">
     <script src="./assets/fontkit.umd.min.js"></script>
     <script src="./assets/pdf-lib.min.js" ></script>
-    <script src="./assets/a-doc-editor.js"></script>
+    <script src="./assets/a-doc-editor2.js"></script>
 
     <style>
         body {
@@ -15,6 +15,7 @@
         }
         #user-container-for-editor{
             margin: 20px;
+            height: 480px;
         }
     </style>
 </head>

dist/script.js

@@ -10,7 +10,9 @@ var tempDocData = [
         plainContent: "Sarah: Alex, we need some groceries from the store. Could you please go and get them?",
     }
 ]
-var editor = new ADocEditor({ element: document.getElementById("user-container-for-editor") })
+var editor = new ADocEditor({
+    container: document.getElementById("user-container-for-editor")
+})
 var extractedData = null
 
 function extractData() {