idea updated

dist/assets/idea.js

+var counter = 0; // counter is used to generate unique ids. and everytime a newId is assigned counter is increased, ++counter.
+
+var defaultConfig = {
+    element: "",
+    pageSetup: {
+        // mm // these are in mm. //this is for user to see or when PDF will be required
+        width: 210,
+        height: 297,
+
+        // these will be calculated with the abloeve value so that the content is sharp and clearly visible to the user on browser UI
+        canvasWidth: 210,
+        canvasWidth: 297,
+    },
+    format: {
+        background: "#fff",
+        margin: 20, // mm //
+        canvasMargin: 20, // px //
+        border: "", // could be image or anything
+    },
+    style: {
+        fontSize: 70,
+        fontFamily: 'Arial',
+        bold: false,
+        italic: false,
+        fontColor: "#1e1f77"
+    },
+}
+
+var dataType = [
+    "plainText", // plain text, normal text in a pdf or doc text
+    "list", // items displayed in a list format
+]
+
+// dataSet will hold the plain data. This will help us traverse the.
+var dataSet = [
+    {
+        type: 0, // type 0, denotes it is plain text,
+        tabNumber: 0, // tab number by default is zero
+        plainText: "This is the plain text. This will be used to manage and handle the caret position on the canvas UI",
+    },
+    {
+        type: 1, // type 1, denotes it is a list,
+        itemType: "",
+        tabNumber: 0, // tab number by default is zero
+        items: [
+            {
+                plainText: "This is the first item in the list. it can be wrapped around the line if necessary"
+            },
+            {
+                plainText: "Second item is here."
+            },
+            {
+                plainText: "The list can be nested like this",
+                items: [
+                    {
+                        plainText: "First nested item is here"
+                    },
+                    {
+                        plainText: "This is the second nested item"
+                    }
+                ]
+            }
+        ]
+
+    },
+    {
+        type: 0, // this is just a blank line that is added
+        plainText: "",
+    },
+]
+
+// external Media set
+var mediaAlignmentOptions = [
+    "In line", // the image will be considered as an character, // can be placed in between a word// dragging will show the new caret position.
+    "Wrap text", // image will cause the text to wrap around it,
+    "Break text", // image be placed between the lines, not affecting any other thing other than their y position.
+    "Behind text", // image will be placed behind text,
+    "In front of text", // image will be placed in front of the text,
+]
+var mediaSet = [
+    {
+        url: `${window.origin}/assets/img.jpg`,
+        style: {
+            dataSetIndex: 1, // meaning this belongs to the dataSet[1]
+            plainIndex: 100, // meaning this should be rendered after the 100th characters
+            alignment: 0, // this means// mediaAlignmentOptions[0]; which is "In line"
+            x: 100, // px // this will not work if alignment in 0
+            y: 100, // px // this will not work if alignment in 0
+            width: 200, // px
+            height: 200, // px
+        }
+    }
+]
+
+// this will hold data related to the canvas that is shown on the browser UI
+var canvasList = [
+    {
+        id: ++counter, // everytime a canvas in created it is given some id like this,
+        el: document.createElement('canvas'), // this hold the canvas DOM element.
+        startingLineIndex: 0, // this tell what line the page starts from drawing.
+    }
+]
+
+// lines // this holds the array of each line// each element holds the styleing of each character present on tthat line
+var formattedLines = [
+    {
+        chars: [
+            {
+                value: "T", x: 0, y: 28, style: {
+                    fontSize: 70,
+                    fontFamily: 'Arial',
+                    bold: false,
+                    italic: false,
+                    fontColor: "#1e1f77"
+                }
+            },
+            {
+                value: "h", x: 10, y: 28, style: {
+                    fontSize: 70,
+                    fontFamily: 'Arial',
+                    bold: false,
+                    italic: false,
+                    fontColor: "#1e1f77"
+                }
+            },
+            {
+                value: "i", x: 19, y: 28, style: {
+                    fontSize: 70,
+                    fontFamily: 'Arial',
+                    bold: false,
+                    italic: false,
+                    fontColor: "#1e1f77"
+                }
+            },
+            {
+                value: "s", x: 24, y: 28, style: {
+                    fontSize: 70,
+                    fontFamily: 'Arial',
+                    bold: false,
+                    italic: false,
+                    fontColor: "#1e1f77"
+                }
+            },
+            {
+                value: " ", x: 30, y: 28, style: {
+                    fontSize: 70,
+                    fontFamily: 'Arial',
+                    bold: false,
+                    italic: false,
+                    fontColor: "#1e1f77"
+                }
+            },
+
+            // and so on ...
+        ],
+        x: 0, // is the x coordinate of the starting point of the line.
+        y: 28, // is the y coordinate of the starting point of the line.
+        style: {
+            fontSize: 28,
+            bold: false,
+            italic: false,
+        },
+    }
+]
+
+// if a character does not have a style object then, it will share the style object from the previous character.
+// if a character does not have a style and is the first character of the dataSet, then the default style will be picked
+
+
+
+