a doc editor

dist/assets/a-doc-editor.js

@@ -29,7 +29,8 @@ var ADocEditor = function (customConfig) {
         {
             id: `${++counter}`,
             type: "text",
-            plainContent: "Hello World"
+            plainContent: "Did you ever hear about the Great Ice Age or the Pleistocene Epoch? Less than one million years ago, in fact, some 12,000 years ago, an ice sheet many thousands of feet thick rode over Burke Mountain in a southeastward direction.",
+
         },
         // {
         //     id: `${++counter}`,
@@ -106,14 +107,56 @@ var ADocEditor = function (customConfig) {
             let ctx = canvas.getContext('2d', { willReadFrequently: true })
             ctx.save()
 
-            
+            let maxWidth = config.pageSetup.canvasWidth
+            let lines = []
+            let wordStartIndex = 0
+            let wordEndIndex = 0
+            let words = ""
+            let wordsLength = 0;
+            dataSet.formatedText = []
             for (let i=0; i<dataSet.plainContent.length; i++){
-                console.log('i',i, dataSet.plainContent[i])
+
+
+                if ( /\s+/.test(dataSet.plainContent[i]) ){
+                    wordEndIndex = i
+                }
+
+
+                let style = { ...config.style, ...dataSet?.style?.[i] }
+                ctx.save()
                 ctx.font = `28px Arial`
                 ctx.fillStyle = '#0007'
                 let charWidth = ctx.measureText(dataSet.plainContent[i]).width
-                ctx.fillText(dataSet.plainContent[i], x, y+config.style.fontSize)
-                x += charWidth
+                ctx.restore()
+                dataSet.formatedText[i] = {
+                    char: dataSet.plainContent[i],
+                    width: charWidth,
+                    x: x,
+                    y: y+style.fontSize,
+                    ...style,
+                }
+                x+= charWidth
+
+                if (wordsLength+charWidth<=maxWidth){
+                    wordsLength+=charWidth
+                }else{
+                    i = wordEndIndex
+                    wordsLength = 0
+                    y+= style.fontSize
+                    x=0;
+                    wordStartIndex = wordEndIndex
+                    
+                }
+
+
+            }
+
+            for (let i=0; i<dataSet.formatedText.length; i++){
+                ctx.save()
+                ctx.font = `${dataSet.formatedText[i].fontSize}px ${dataSet.formatedText[i].fontFamily}`
+                ctx.fillStyle = dataSet.formatedText[i].fontColor
+                ctx.fillText(dataSet.formatedText[i].char, dataSet.formatedText[i].x, dataSet.formatedText[i].y)
+                ctx.restore()
             }
 
 

dist/index.html

@@ -20,6 +20,6 @@
     <div id="user-container-for-editor"></div>
     <h1>Some other data</h1>
     <h1>Random heading </h1>
-    <script src="./script.js"></script>
+    <script type="module" src="./script.js"></script>
 </body>
 </html>
\ No newline at end of file

dist/script.js

+import { tempDocData } from "./randomDataSet.js"
 !(async function(){
 
     let editor = new ADocEditor({ element: document.getElementById("user-container-for-editor") })
-    console.log('to run', editor)
 })()
\ No newline at end of file