Commit f8c25208 by ramdayalmunda

a doc editor

parent ec6c9505
...@@ -29,7 +29,8 @@ var ADocEditor = function (customConfig) { ...@@ -29,7 +29,8 @@ var ADocEditor = function (customConfig) {
{ {
id: `${++counter}`, id: `${++counter}`,
type: "text", 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}`, // id: `${++counter}`,
...@@ -106,14 +107,56 @@ var ADocEditor = function (customConfig) { ...@@ -106,14 +107,56 @@ var ADocEditor = function (customConfig) {
let ctx = canvas.getContext('2d', { willReadFrequently: true }) let ctx = canvas.getContext('2d', { willReadFrequently: true })
ctx.save() 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++){ 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.font = `28px Arial`
ctx.fillStyle = '#0007' ctx.fillStyle = '#0007'
let charWidth = ctx.measureText(dataSet.plainContent[i]).width let charWidth = ctx.measureText(dataSet.plainContent[i]).width
ctx.fillText(dataSet.plainContent[i], x, y+config.style.fontSize) ctx.restore()
x += charWidth 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()
} }
......
...@@ -20,6 +20,6 @@ ...@@ -20,6 +20,6 @@
<div id="user-container-for-editor"></div> <div id="user-container-for-editor"></div>
<h1>Some other data</h1> <h1>Some other data</h1>
<h1>Random heading </h1> <h1>Random heading </h1>
<script src="./script.js"></script> <script type="module" src="./script.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
var tempDocData = [
{
"id": "1",
"type": "text",
"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.",
"formatedText": [
{
"char": "D",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 20.220703125
},
{
"char": "i",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 6.220703125
},
{
"char": "d",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": " ",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "y",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 14
},
{
"char": "o",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "u",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": " ",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "e",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "v",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 14
},
{
"char": "e",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "r",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 9.32421875
},
{
"char": " ",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "h",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "e",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "a",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "r",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 9.32421875
},
{
"char": " ",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "a",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "b",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "o",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "u",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "t",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": " ",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "t",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "h",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "e",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": " ",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "G",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 21.779296875
},
{
"char": "r",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 9.32421875
},
{
"char": "e",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "a",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "t",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": " ",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "I",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "c",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 14
},
{
"char": "e",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": " ",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "A",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 18.67578125
},
{
"char": "g",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "e",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": " ",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "o",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "r",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 9.32421875
},
{
"char": " ",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "t",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "h",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "e",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": " ",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "P",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 18.67578125
},
{
"char": "l",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 6.220703125
},
{
"char": "e",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "i",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 6.220703125
},
{
"char": "s",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 14
},
{
"char": "t",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "o",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "c",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 14
},
{
"char": "e",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "n",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "e",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": " ",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "E",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 18.67578125
},
{
"char": "p",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "o",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "c",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 14
},
{
"char": "h",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "?",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": " ",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "L",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "e",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "s",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 14
},
{
"char": "s",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 14
},
{
"char": " ",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "t",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "h",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "a",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "n",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": " ",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "o",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "n",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "e",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": " ",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "m",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 23.32421875
},
{
"char": "i",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 6.220703125
},
{
"char": "l",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 6.220703125
},
{
"char": "l",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 6.220703125
},
{
"char": "i",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 6.220703125
},
{
"char": "o",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "n",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": " ",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "y",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 14
},
{
"char": "e",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "a",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "r",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 9.32421875
},
{
"char": "s",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 14
},
{
"char": " ",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "a",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "g",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "o",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": ",",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": " ",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "i",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 6.220703125
},
{
"char": "n",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": " ",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "f",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "a",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "c",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 14
},
{
"char": "t",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": ",",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": " ",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "s",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 14
},
{
"char": "o",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "m",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 23.32421875
},
{
"char": "e",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": " ",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "1",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "2",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": ",",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "0",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "0",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "0",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": " ",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "y",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 14
},
{
"char": "e",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "a",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "r",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 9.32421875
},
{
"char": "s",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 14
},
{
"char": " ",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "a",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "g",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "o",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": ",",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": " ",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "a",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "n",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": " ",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "i",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 6.220703125
},
{
"char": "c",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 14
},
{
"char": "e",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": " ",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "s",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 14
},
{
"char": "h",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "e",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "e",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "t",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": " ",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "m",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 23.32421875
},
{
"char": "a",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "n",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "y",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 14
},
{
"char": " ",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "t",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "h",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "o",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "u",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "s",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 14
},
{
"char": "a",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "n",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "d",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "s",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 14
},
{
"char": " ",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "o",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "f",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": " ",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "f",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "e",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "e",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "t",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": " ",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "t",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "h",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "i",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 6.220703125
},
{
"char": "c",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 14
},
{
"char": "k",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 14
},
{
"char": " ",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "r",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 9.32421875
},
{
"char": "o",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "d",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "e",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": " ",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "o",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "v",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 14
},
{
"char": "e",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "r",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 9.32421875
},
{
"char": " ",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "B",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 18.67578125
},
{
"char": "u",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "r",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 9.32421875
},
{
"char": "k",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 14
},
{
"char": "e",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": " ",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "M",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 23.32421875
},
{
"char": "o",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "u",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "n",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "t",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "a",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "i",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 6.220703125
},
{
"char": "n",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": " ",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "i",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 6.220703125
},
{
"char": "n",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": " ",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "a",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": " ",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "s",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 14
},
{
"char": "o",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "u",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "t",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "h",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "e",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "a",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "s",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 14
},
{
"char": "t",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "w",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 20.220703125
},
{
"char": "a",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "r",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 9.32421875
},
{
"char": "d",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": " ",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "d",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "i",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 6.220703125
},
{
"char": "r",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 9.32421875
},
{
"char": "e",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "c",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 14
},
{
"char": "t",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
},
{
"char": "i",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 6.220703125
},
{
"char": "o",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": "n",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 15.572265625
},
{
"char": ".",
"style": {
"fontSize": 28,
"fontFamily": "Arial",
"bold": false,
"italic": false,
"fontColor": "#0007"
},
"width": 7.779296875
}
]
}
]
export {
tempDocData,
}
\ No newline at end of file
import { tempDocData } from "./randomDataSet.js"
!(async function(){ !(async function(){
let editor = new ADocEditor({ element: document.getElementById("user-container-for-editor") }) let editor = new ADocEditor({ element: document.getElementById("user-container-for-editor") })
console.log('to run', editor)
})() })()
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment