Skip to content

A
a-doc-editor
Commit 7065804e by ramdayalmunda
Options

selection fixes, caret fixes, heading fixes, arrow keys fixes, backspace fixes

parent f5d9a42e
Showing with 569 additions and 143 deletions
dist/assets/a-doc-editor.css
......@@ -127,20 +127,21 @@ canvas:focus-visible {
width: 200px;
background-color: #408640;
padding: 5px;
white-space: nowrap; /* Prevent text wrapping */
text-overflow: ellipsis; /* Add ellipsis ( ... ) */
white-space: nowrap;
/* Prevent text wrapping */
text-overflow: ellipsis;
/* Add ellipsis ( ... ) */
}
.content-area .left-sidebar,
.content-area .page-list,
.content-area .right-sidebar {
flex-shrink: 0;
height: 100%;
overflow-x: hidden;
overflow-y: hidden;
text-wrap: nowrap;
transition: 0.5s;
margin-top: 0;
border-radius: 0 10px 10px 0;
}
.left-sidebar .toggle-btn,
......@@ -150,6 +151,13 @@ canvas:focus-visible {
top: 0;
width: 100%;
text-align: center;
font-size: 25px;
padding: 0;
margin: 0;
border: none;
background: none;
cursor: pointer;
transition: 400ms;
}
.left-sidebar .content,
......@@ -160,7 +168,7 @@ canvas:focus-visible {
.left-sidebar.hide,
.right-sidebar.hide {
width: 50px;
width: 30px;
}
.left-sidebar.hide .content,
......@@ -172,37 +180,55 @@ canvas:focus-visible {
position: relative;
display: block;
overflow-y: auto;
overflow-x: auto;
background: #858585;
gap: 20px;
align-items: center;
overflow-x: hidden;
}
.page-list .page{
background-color: #fff;
width: fit-content;
height: fit-content;
display: block;
position: relative;
margin: 20px 2px 20px 2px;
}
.page-list canvas {
.page-list .page canvas {
background-color: #fff;
width: 210mm;
height: auto;
display: block;
position: relative;
margin-top: 20px;
margin-bottom: 20px;
margin-right: 2px;
position: absolute;
margin: 0;
}
.page-list .page canvas.selection {
background-color: transparent;
width: 210mm;
height: auto;
display: block;
position: absolute;
margin: 0;
pointer-events: none;
}
.footer {
position: relative;
display: block;
width: 100%;
background-color: red;
}
.toolbar .item ul.dropdown {
position: absolute;
max-height: 300px;
width: max-content;
min-width: 100px;
padding: 0;
border: 1px #000 solid;
padding: 10px 5px;
border: 1px rgba(0, 0, 0, 0.2) solid;
border-radius: 10px;
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.5);
overflow-y: auto;
overflow-x: hidden;
list-style-type: none;
......@@ -210,17 +236,17 @@ canvas:focus-visible {
display: none;
background: white;
}
.toolbar .item ul.dropdown.show
{
.toolbar .item ul.dropdown.show {
display: block;
}
.toolbar .item ul.dropdown li{
.toolbar .item ul.dropdown li {
padding: 5pt;
width: 100%;
border-radius: 5px;
}
.toolbar .item ul.dropdown li:hover,
.toolbar .item ul.dropdown li.selected {
.toolbar .item ul.dropdown li:hover {
background: #09f;
}
......@@ -232,6 +258,10 @@ a#submit {
z-index: 1;
}
.rotate{
transform: rotate(180deg);
transition: 400ms;
}
@keyframes shineAnimation {
0% {
......
dist/assets/a-doc-editor.js
let isModule = (typeof module != 'undefined') ? true : false
if (!isModule) console.log('Browser Environment')
if (!isModule) console.warn('Browser Environment')
var ADocEditor = function (customConfig) {
var container, counter = 0, shadow, pxMmRatio, config, htmlStr, htmlTag, htmlObj = {}, fontList = [];
const mmPtRatio = 254 / 720; // this is used for font size
......@@ -10,13 +10,13 @@ var ADocEditor = function (customConfig) {
const romanNumerals = [["I", "IV", "V", "IX"], ["X", "XL", "L", "XC"], ["C", "CD", "D", "CM"], ["M"]];
const textStyleList = [
{ type: "Normal Text", fontFamily: "Calibri", fontSize: 11, fontColor: "#000", bold: false, italic: false, spaces: 10 },
{ type: "Title", fontFamily: "Calibri", fontSize: 26, fontColor: "#000", bold: false, italic: false, spaces: 0 },
{ type: "Subtitle", fontFamily: "Calibri", fontSize: 15, fontColor: "#555", bold: false, italic: false, spaces: 4 },
{ type: "Heading 1", fontFamily: "Calibri", fontSize: 20, fontColor: "#000", bold: false, italic: false, spaces: 2 },
{ type: "Normal Text", fontFamily: "Libre Franklin", fontSize: 11, fontColor: "#000", bold: false, italic: false, spaces: 10 },
{ type: "Title", fontFamily: "Libre Franklin", fontSize: 26, fontColor: "#000", bold: false, italic: false, spaces: 0 },
{ type: "Subtitle", fontFamily: "Libre Franklin", fontSize: 15, fontColor: "#555", bold: false, italic: false, spaces: 4 },
{ type: "Heading 1", fontFamily: "Libre Franklin", fontSize: 20, fontColor: "#000", bold: false, italic: false, spaces: 2 },
]
const styleName = {};
textStyleList.forEach((sty, s) => { styleName[sty.type] = s })
textStyleList.forEach((style, s) => { styleName[style.type] = s })
const listStyles = [
{ type: "Number", value: 0 },
......@@ -35,7 +35,7 @@ var ADocEditor = function (customConfig) {
style: {
type: textStyleList[0].type,
// fontSize: 11, // this is in pt // 1pt = 1/72 inch // 1pt = 254/72 mm
// fontFamily: 'Calibri',
// fontFamily: 'Libre Franklin',
// bold: false,
// italic: false,
// fontColor: "#f01",
......@@ -68,13 +68,27 @@ var ADocEditor = function (customConfig) {
dimension: {
x: config.format.margin,
y: config.format.margin + (3 * config.style.fontSize / 4)
}
}
},
dragging: {
is: false, // to check if mouse is down for dragging,
started: false, // to check if the mouse has moved for dragging
startX: null, // start and end are coordinated of opposite corner
startY: null,
endX: null,
endY: null,
startingDataIndex: null,
endDataIndex: null,
startingCharIndex: null,
endIndex: null,
}
}
var upDownArrowX = null
var pageList = []
var pageScrollingDiv = null
var focussedPage = null
var lastFocussedPage = null
var isRendering = false
var isSelectionRendering = false
function initialize() {
config = JSON.parse(JSON.stringify(defaultConfig))
container = customConfig.container
......@@ -82,7 +96,6 @@ var ADocEditor = function (customConfig) {
htmlStr = /*html*/`
<div class="header">
<div class="toolbar">
<div class="item" adc-target="file-menu" adc-type="menu-item">
<span>File</span>
......@@ -117,8 +130,8 @@ var ADocEditor = function (customConfig) {
</div>
<div class="content-area">
<div class="left-sidebar">
<button class="toggle-btn" adc="toggle-left-sidebar">X</button>
<div class="left-sidebar hide">
<button class="toggle-btn rotate" adc="toggle-left-sidebar">&#10554;</button>
<div class="content" adc="left-sidebar-content"></div>
</div>
<div class="page-list" adc="page-list"></div>
......@@ -190,12 +203,20 @@ var ADocEditor = function (customConfig) {
})()
!(function fontSelectHandle() {
addFonts(["./assets/fonts/Afacad-VariableFont_wght.woff2", "./assets/fonts/Afacad-VariableFont_wght.ttf"], 'Afacad')
addFonts(["./assets/fonts/ArchitectsDaughter-Regular.woff2", "./assets/fonts/ArchitectsDaughter-Regular.ttf"], 'Architects Daughter')
addFonts(["./assets/fonts/Assistant-VariableFont_wght.woff2", "./assets/fonts/Assistant-VariableFont_wght.ttf"], 'Assistant')
addFonts(["./assets/fonts/Bitter-VariableFont_wght.woff2", "./assets/fonts/Bitter-VariableFont_wght.ttf"], 'Bitter')
addFonts(["./assets/fonts/calibri-regular.woff2", "./assets/fonts/calibri-regular.ttf"], 'Calibri')
addFonts(["./assets/fonts/CrimsonText-Regular.woff2", "./assets/fonts/CrimsonText-Regular.ttf"], 'Crimson Text')
addFonts(["./assets/fonts/EduTASBeginner-VariableFont_wght.woff2", "./assets/fonts/EduTASBeginner-VariableFont_wght.ttf"], 'Edu TAS Beginner')
addFonts(["./assets/fonts/IndieFlower-Regular.woff2", "./assets/fonts/IndieFlower-Regular.ttf"], 'Indie Flower')
addFonts(["./assets/fonts/Karla-VariableFont_wght.woff2", "./assets/fonts/Karla-VariableFont_wght.ttf"], 'Karla')
addFonts(["./assets/fonts/Kenia-Regular.woff2", "./assets/fonts/Kenia-Regular.ttf"], 'Kenia')
addFonts(["./assets/fonts/Lato-Regular.woff2", "./assets/fonts/Lato-Regular.ttf"], 'Lato')
addFonts(["./assets/fonts/LibreFranklin-VariableFont_wght.woff2", "./assets/fonts/LibreFranklin-VariableFont_wght.ttf"], 'Libre Franklin')
addFonts(["./assets/fonts/Lora-Regular.woff2", "./assets/fonts/Lora-Regular.ttf"], 'Lora')
addFonts(["./assets/fonts/Macondo-Regular.woff2", "./assets/fonts/Macondo-Regular.ttf"], 'Macondo')
addFonts(["./assets/fonts/Outfit-VariableFont_wght.woff2", "./assets/fonts/Outfit-VariableFont_wght.ttf"], 'Outfit')
addFonts(["./assets/fonts/TitilliumWeb-Regular.woff2", "./assets/fonts/TitilliumWeb-Regular.ttf"], 'Titillium Web')
addFonts(["./assets/fonts/VarelaRound-Regular.woff2", "./assets/fonts/VarelaRound-Regular.ttf"], 'Varela Round')
})()
!(function handleList() {
......@@ -206,7 +227,7 @@ var ADocEditor = function (customConfig) {
let selection = document.createElement('span')
selection.setAttribute('value', null)
selection.setAttribute('adc-type', 'selection')
selection.innerHTML = "[List-Style]"
selection.innerHTML = "[No-List]"
listStyleElem.append(selection)
let ul = document.createElement('ul')
......@@ -226,7 +247,7 @@ var ADocEditor = function (customConfig) {
} else {
e.stopPropagation()
ul.classList.remove('show')
selection.innerHTML = "[List-Style]"
selection.innerHTML = "[No-List]"
}
changeListStyle()
caretData.blink = false
......@@ -348,6 +369,7 @@ var ADocEditor = function (customConfig) {
let toggleLeft = shadow.querySelector('[adc="toggle-left-sidebar"]')
toggleLeft.addEventListener('click', () => {
leftSidebar.classList.toggle('hide')
toggleLeft.classList[leftSidebar.classList.contains('hide') ? 'add' : 'remove']('rotate')
})
// let rightSidebar = shadow.querySelector('.right-sidebar')
......@@ -388,6 +410,9 @@ var ADocEditor = function (customConfig) {
for (let p = 0; p < pageList.length; p++) {
pageList[p].el.style.width = `${config.pageSetup.uiWidth}mm`
pageList[p].selectionCanvas.style.width = `${config.pageSetup.uiWidth}mm`
pageList[p].page.style.width = `${config.pageSetup.uiWidth}mm`
pageList[p].page.style.height = `${config.pageSetup.uiHeight}mm`
}
pxMmRatio = config.pageSetup.pxWidth / config.pageSetup.mmWidth;
......@@ -398,8 +423,9 @@ var ADocEditor = function (customConfig) {
if (isRendering) return
let pageIndex = 0
if (!pageList.length) {
pageList[pageIndex] = { id: ++counter, el: createNewPage(), dataIndex: 0 }
shadow.querySelector('[adc="page-list"]').append(pageList[pageIndex].el)
let newPage = createNewPage()
pageList[pageIndex] = { id: ++counter, el: newPage.el, page: newPage.page, selectionCanvas: newPage.selectionCanvas, dataIndex: 0 }
shadow.querySelector('[adc="page-list"]').append(pageList[pageIndex].page)
}
......@@ -431,8 +457,8 @@ var ADocEditor = function (customConfig) {
y: 0, // this is the starting y coordinate; it will change based on the max font size
plainContent: "",
dataIndex: d,
charStartIndex: 0, // index from where to check
charEndIndex: 0, // index till where to check// not including this index.
startingCharIndex: 0, // index from where to check
endingCharIndex: 0, // index till where to check// not including this index.
listItemNumber: 0,
}
newLineObj.maxFontSize = newLineObj.fontSize
......@@ -478,7 +504,7 @@ var ADocEditor = function (customConfig) {
if (/\s/.test(dataBlock.plainContent[c])) {
// condition to check if a blank character is found.
wordEndIndex = c
lineObj.charEndIndex = c
lineObj.endingCharIndex = c
tempWordWidth = 0
}
let charWidth = getCharacterWidth(dataBlock.plainContent[c], style)
......@@ -493,14 +519,14 @@ var ADocEditor = function (customConfig) {
// this is to manage the casse where there is a set of long string without any blank space. In that case the text is broken and moved to next line.
wordEndIndex = c
lineObj.charEndIndex = c
lineObj.endingCharIndex = c
tempWordWidth = 0
}
lineObj.plainContent = dataBlock.plainContent.slice(lineObj.charStartIndex, lineObj.charEndIndex + 1)
lineObj.plainContent = dataBlock.plainContent.slice(lineObj.startingCharIndex, lineObj.endingCharIndex + 1)
lineObj.maxLineWidth = maxLineWidth
lines.push(lineObj)
lineObj = new getLineObj()
lineObj.maxLineWidth = maxLineWidth
lineObj.maxFontSize = style.fontSize
if (dataBlock.type == 1) {
lineObj.tabWidth = tabWidth
......@@ -510,9 +536,10 @@ var ADocEditor = function (customConfig) {
lineObj.tabWidth = 0
lineObj.tabCount = 0
}
lineObj.charStartIndex = wordEndIndex + 1
lineObj.charEndIndex = wordEndIndex + 1
lineObj.startingCharIndex = wordEndIndex + 1
lineObj.endingCharIndex = wordEndIndex + 1
tempLineWidth = tempWordWidth
lineObj.maxLineWidth = maxLineWidth
}
else {
// if the char can fit in the same line. then it is well and good
......@@ -523,12 +550,12 @@ var ADocEditor = function (customConfig) {
}
lineObj.plainContent = dataBlock.plainContent.slice(lineObj.charStartIndex, lineObj.charEndIndex + 1)
lineObj.plainContent = dataBlock.plainContent.slice(lineObj.startingCharIndex, lineObj.endingCharIndex + 1)
// there is chance that the last line is not at the width// so we need to handle the last line separately
if (lineObj.charEndIndex <= dataBlock.plainContent.length) {
lineObj.charEndIndex = dataBlock.plainContent.length
if (lineObj.endingCharIndex <= dataBlock.plainContent.length) {
lineObj.endingCharIndex = dataBlock.plainContent.length
}
lineObj.plainContent = dataBlock.plainContent.slice(lineObj.charStartIndex, lineObj.charEndIndex)
lineObj.plainContent = dataBlock.plainContent.slice(lineObj.startingCharIndex, lineObj.endingCharIndex)
lines.push(lineObj)
......@@ -542,6 +569,7 @@ var ADocEditor = function (customConfig) {
let maxHeight = config.pageSetup.pxHeight - config.format.margin * pxMmRatio * 2
let pageIndex = 0
let x = 0, y = config.format.margin * pxMmRatio;
let firstLineOnPage = true
for (let l = 0; l < lines.length; l++) {
let setData = dataList[lines[l].dataIndex]
let ctx = pageList[pageIndex].el.getContext('2d', { willReadFrequently: true })
......@@ -555,19 +583,30 @@ var ADocEditor = function (customConfig) {
if (maxHeight < y) {
pageIndex++
if (!pageList?.[pageIndex]) {
pageList[pageIndex] = { id: ++counter, el: createNewPage(), dataIndex: lines[l].dataIndex }
shadow.querySelector('[adc="page-list"]').append(pageList[pageIndex].el)
let newPage = createNewPage()
pageList[pageIndex] = { id: ++counter, el: newPage.el, page: newPage.page, selectionCanvas: newPage.selectionCanvas, dataIndex: lines[l].dataIndex }
shadow.querySelector('[adc="page-list"]').append(pageList[pageIndex].page)
}
ctx = pageList[pageIndex].el.getContext('2d', { willReadFrequently: true })
y = config.format.margin * pxMmRatio + (lines[l].maxFontSize * pxMmRatio * mmPtRatio);
lastFocussedPage = pageList[pageIndex].el
caretData.blink = false
focusOnPage({ scroll: true })
firstLineOnPage = true
}
lines[l].pageIndex = pageIndex
ctx.save()
if (!firstLineOnPage) {
y = y + ((lines[l - 1].maxFontSize / 3) * pxMmRatio * mmPtRatio)
lines[l].y = y
} else {
pageList[pageIndex].startingLineIndex = l
pageList[pageIndex].startingDataIndex = lines[l].dataIndex
pageList[pageIndex].startingCharIndex = lines[l].startingCharIndex
}
lines[l].apparentY = y
// this is to render the numbering and bullets etc
if (lines[l].dataType == 1) {
......@@ -585,7 +624,7 @@ var ADocEditor = function (customConfig) {
for (let c = lines[l].charStartIndex; c <= lines[l].charEndIndex; c++) {
for (let c = lines[l].startingCharIndex; c <= lines[l].endingCharIndex; c++) {
let char = setData?.plainContent[c]
if (char) {
let style = getFullStyle(setData.formatedText[c].style)
......@@ -603,6 +642,7 @@ var ADocEditor = function (customConfig) {
}
ctx.restore()
firstLineOnPage = false
}
return
}
......@@ -621,7 +661,7 @@ var ADocEditor = function (customConfig) {
function createNewPage() {
let canvas;
let page, canvas, selectionCanvas;
if (isModule) {
const { createCanvas } = require('canvas')
canvas = createCanvas(config.pageSetup.canvasWidth, config.pageSetup.canvasHeight)
......@@ -634,6 +674,7 @@ var ADocEditor = function (customConfig) {
canvas.setAttribute('tabIndex', '-1')
canvas.width = config.pageSetup.pxWidth
canvas.height = config.pageSetup.pxHeight
canvas.style.width = `${config.pageSetup.uiWidth}mm`
let ctx = canvas.getContext('2d', { willReadFrequently: true })
......@@ -642,11 +683,25 @@ var ADocEditor = function (customConfig) {
canvas.addEventListener('keydown', keydownHandler)
canvas.addEventListener('mousedown', mousedownHandler)
canvas.addEventListener('mousemove', mouseMoveHandler)
canvas.addEventListener("focus", onFocusHandler)
canvas.addEventListener("blur", onBlurHandler)
selectionCanvas = document.createElement('canvas')
selectionCanvas.setAttribute('class', 'selection')
selectionCanvas.width = config.pageSetup.pxWidth
selectionCanvas.height = config.pageSetup.pxHeight
selectionCanvas.style.width = `${config.pageSetup.uiWidth}mm`
page = document.createElement('div')
page.setAttribute('class', 'page')
page.style.width = `${config.pageSetup.uiWidth}mm`
page.style.height = `${config.pageSetup.uiHeight}mm`
page.append(canvas)
page.append(selectionCanvas)
}
return canvas
return { page, el: canvas, selectionCanvas }
}
function keydownHandler(e) {
......@@ -659,6 +714,7 @@ var ADocEditor = function (customConfig) {
manageIndentation(e.key == '[' ? -1 : 1)
}
else if (e.key == 'Backspace') {
if (caretData.index == 0) {
let activeDataIndex = dataList.findIndex(item => item.id == caretData.activeData.id)
if (caretData.activeData.tabCount) {
......@@ -668,20 +724,27 @@ var ADocEditor = function (customConfig) {
caretData.activeData.tabCount--
}
}
else if (activeDataIndex > 0) {
else if (activeDataIndex >= 0) {
if (caretData.activeData.type == 0) {
if (activeDataIndex != 0) {
if (!caretData.activeData.plainContent.length) { dataList.splice(activeDataIndex, 1) }
caretData.activeData = dataList[activeDataIndex - 1]
caretData.index = caretData.activeData.plainContent.length
}
} else if (caretData.activeData.type == 1) {
caretData.activeData.type = 0
}
}
} else if (e.ctrlKey || e.metaKey) {
} else {
caretData.activeData.plainContent = caretData.activeData.plainContent.slice(0, caretData.index - 1) + caretData.activeData.plainContent.slice(caretData.index)
caretData.activeData.formatedText.splice(caretData.index - 1, 1)
--caretData.index;
}
setCaretStyle()
setToolbarData({ ...caretData.style, dataSetType: caretData.activeData.type, listStyle: caretData.activeData.listStyle })
}
else if (e.key == 'Enter') {
let dataObj = {
......@@ -705,11 +768,15 @@ var ADocEditor = function (customConfig) {
caretData.index = 0
caretData.activeData = dataObj
if (dataObj.type == 0) dataObj.tabCount = 0
if (!dataObj.formatedText.length){
if (!dataObj.formatedText.length && caretData.style.type) {
caretData.style = { type: textStyleList[0].type }
caretData.activeData.style = { type: textStyleList[0].type }
} else {
dataObj.style = { ...caretData.style }
}
// dataList.push(dataObj)
setCaretStyle()
setToolbarData({ ...caretData.style, dataSetType: caretData.activeData.type, listStyle: caretData.activeData.listStyle })
}
else if (e.key.length == 1 && !e.ctrlKey && !e.metaKey) { // displayable text
// ***** DISPLAYABLE TEXT **** //
......@@ -721,6 +788,7 @@ var ADocEditor = function (customConfig) {
++caretData.index
}
else if (e.key == 'ArrowLeft') {
e.preventDefault()
if (caretData.index) {
--caretData.index
} else {
......@@ -730,8 +798,22 @@ var ADocEditor = function (customConfig) {
caretData.index = caretData.activeData.plainContent.length
}
}
upDownArrowX = null
setCaretStyle()
setToolbarData({ ...caretData.style, dataSetType: caretData.activeData.type, listStyle: caretData.activeData.listStyle })
caretData.blink = false
renderCaret(true)
return
}
else if (e.key == 'ArrowRight') {
e.preventDefault()
if (e.shiftKey && !caretData.dragging.is) {
caretData.dragging.startingDataIndex = dataList.findIndex(item => item.id == caretData.activeData.id)
caretData.dragging.startingCharIndex = caretData.index
caretData.dragging.is = true
} else {
stopDragging(true)
}
if (caretData.index < caretData.activeData.plainContent.length) {
++caretData.index
} else {
......@@ -741,12 +823,51 @@ var ADocEditor = function (customConfig) {
caretData.index = 0
}
}
upDownArrowX = null
setCaretStyle()
setToolbarData({ ...caretData.style, dataSetType: caretData.activeData.type, listStyle: caretData.activeData.listStyle })
caretData.blink = false
renderCaret(true)
return
}
else if (e.key == 'ArrowUp') {
console.log('Up')
e.preventDefault()
let currentX = getCurrentX(true);
upDownArrowX = currentX
let dataIndex = dataList.findIndex(item => item.id == caretData.activeData.id)
let lineIndex = lines.findIndex(item => {
return item.dataIndex == dataIndex && item.endingCharIndex >= caretData.index
})
if (lineIndex > 0) {
placeCaret({
dataSetIndex: lines[lineIndex-1].dataIndex,
index: getCharIndexByLineAndX(lineIndex-1, currentX)
})
}
caretData.blink = false
renderCaret(true)
return
}
else if (e.key == 'ArrowDown') {
console.log('Down')
e.preventDefault()
let currentX = getCurrentX(true);
upDownArrowX = currentX
let dataIndex = dataList.findIndex(item => item.id == caretData.activeData.id)
let lineIndex = lines.findIndex(item => {
return item.dataIndex == dataIndex && item.endingCharIndex >= caretData.index
})
if (lineIndex < lines.length-1) {
placeCaret({
dataSetIndex: lines[lineIndex+1].dataIndex,
index: getCharIndexByLineAndX(lineIndex+1, currentX)
})
}
caretData.blink = false
renderCaret(true)
return
}
function manageIndentation(value) {
......@@ -761,55 +882,135 @@ var ADocEditor = function (customConfig) {
reRenderCanvas()
}
function placeCaret(cursor = { x: 0, y: 0 }) {
function getCurrentX(allowUpDownArrow){
if (!allowUpDownArrow || upDownArrowX==null){
let currentX = caretData.activeData.formatedText[caretData.index]?.dimension?.x
if (!currentX) currentX = caretData.activeData.formatedText[caretData.index - 1]?.dimension?.x
return currentX
}else return upDownArrowX
}
function getCharIndexByLineAndX( lineIndex, refX ){
let dataSet = dataList[lines[lineIndex].dataIndex]
let charIndex = lines[lineIndex].startingCharIndex
for (let c = lines[lineIndex].startingCharIndex; c <= lines[lineIndex].endingCharIndex; c++) {
charIndex = c;
let width = dataSet.formatedText?.[c]?.dimension?.width
width = width ? width : 0
let x = dataSet.formatedText?.[c]?.dimension?.x
x = x ? x : 0
if (refX <= x + width / 2) break;
}
let found = false
for (let l = 0; l < lines.length; l++) {
if ((cursor.y <= lines[l].y) && (cursor.y >= (lines[l].maxFontSize * pxMmRatio * mmPtRatio))) {
let dataSet = dataList[lines[l].dataIndex]
for (let c = lines[l].charStartIndex; c <= lines[l].charEndIndex; c++) {
if ((cursor.x >= dataSet.formatedText[c]?.dimension?.x) && (cursor.x <= (dataSet.formatedText[c]?.dimension?.width + dataSet.formatedText[c]?.dimension?.x))) {
caretData.activeData = dataSet
if (cursor.x <= dataSet.formatedText[c]?.dimension?.x + dataSet.formatedText[c]?.dimension?.width / 2) {
caretData.index = c
} else {
caretData.index = c + 1
return charIndex
}
found = true
function getCaretPosition(e, coordinates, pageIndex) {
let cursor = coordinates
if (!cursor) cursor = getCoordinates(e)
if (!pageIndex) pageIndex = pageList.findIndex(item => item.el == e.target)
let lineIndex = pageList[pageIndex].startingLineIndex
for (let l = pageList[pageIndex].startingLineIndex; lines[l]?.pageIndex == pageIndex; l++) {
if (!lines[l]) break
lineIndex = l
if (cursor.y <= lines[l].apparentY) break
}
let lineObj = lines[lineIndex]
let dataSet = dataList[lineObj.dataIndex]
let charIndex = lineObj.startingCharIndex
for (let c = lineObj.startingCharIndex; c <= lineObj.endingCharIndex; c++) {
charIndex = c;
let width = dataSet.formatedText?.[c]?.dimension?.width
width = width ? width : 0
let x = dataSet.formatedText?.[c]?.dimension?.x
x = x ? x : 0
if (cursor.x <= x + width / 2) break;
}
cursor = {
dataSetIndex: lineObj.dataIndex,
index: charIndex ? charIndex : 0,
...cursor,
}
return cursor
}
function placeCaret(pos) {
if (typeof pos.dataSetIndex == 'number' && typeof pos.index == 'number') {
caretData.activeData = dataList[pos.dataSetIndex]
caretData.index = pos.index
caretData.blink = false
renderCaret(true)
return
}
}
if (found) break; // break only when the caret index is determined
console.warn('no char found')
}
function setDragStartPosition() {
caretData.dragging.startingDataIndex = dataList.findIndex(item => item.id == caretData.activeData.id)
caretData.dragging.startingCharIndex = caretData.index
}
if (!found) {
console.log('no char found')
function getCoordinates(e) {
const rect = e.target.getBoundingClientRect(); // Get the position of the canvas
return {
x: (e.clientX - rect.left) * config.pageSetup.pxWidth / rect.width,
y: (e.clientY - rect.top) * config.pageSetup.pxHeight / rect.height,
}
}
function mousedownHandler(e) {
stopDragging(true)
if (focussedPage) {
const rect = e.target.getBoundingClientRect(); // Get the position of the canvas
const pxX = (e.clientX - rect.left) * config.pageSetup.pxWidth / rect.width;
const pxY = (e.clientY - rect.top) * config.pageSetup.pxHeight / rect.height;
placeCaret({ x: pxX, y: pxY })
e.stopPropagation()
let caretPos = getCaretPosition(e)
placeCaret(caretPos)
let style = caretData.activeData.formatedText[caretData.index]?.style
if (style){
if (!style) style = caretData.activeData.formatedText[caretData.index - 1]?.style
if (!style) style = caretData.activeData.style
if (style) {
caretData.style = { ...style }
let fullStyle = getFullStyle(style)
let fontInput = shadow.querySelector('[adc="font-size-input"]')
if (caretData?.style?.fontSize) fontInput.value = fullStyle.fontSize
else if (style?.fontSize) fontInput.value = fullStyle.fontSize
caretData.blink = false
renderCaret(true)
setToolbarData({
...caretData.style,
dataSetType: caretData.activeData.type,
listStyle: caretData.activeData.listStyle
})
}
caretData.dragging.is = true
caretData.dragging.startX = caretPos.x
caretData.dragging.startY = caretPos.y
upDownArrowX = null
}
if (e.button == 2) {
stopDragging()
}
if (caretData.dragging.is) setDragStartPosition()
}
function mouseMoveHandler(e) {
if (e.button == 0 && e.buttons == 1 && caretData.dragging.is) {
caretData.dragging.started = true
let caretPos = getCaretPosition(e)
caretData.dragging.endX = caretPos.x
caretData.dragging.endY = caretPos.y
if (caretPos) {
caretData.dragging.endDataIndex = caretPos.dataSetIndex
caretData.dragging.endIndex = caretPos.index
renderSelection()
}
}
}
function onFocusHandler(e) {
focussedPage = e.target
lastFocussedPage = e.target
......@@ -821,6 +1022,161 @@ var ADocEditor = function (customConfig) {
}
}
function renderSelection(clear) {
if (isSelectionRendering) return
isSelectionRendering = true
for (let p = 0; p < pageList.length; p++) {
// to clear previous selection
let ctx = pageList[p].selectionCanvas.getContext('2d', { willReadFrequently: true })
ctx.clearRect(0, 0, pageList[p].selectionCanvas.width, pageList[p].selectionCanvas.height)
}
if (clear) {
isSelectionRendering = false
return
}
let startingChar = {}, endChar = {};
if (caretData.dragging.startingDataIndex < caretData.dragging.endDataIndex) {
startingChar = { dataSetIndex: caretData.dragging.startingDataIndex, index: caretData.dragging.startingCharIndex }
endChar = { dataSetIndex: caretData.dragging.endDataIndex, index: caretData.dragging.endIndex }
}
else if (caretData.dragging.startingDataIndex > caretData.dragging.endDataIndex) {
startingChar = { dataSetIndex: caretData.dragging.endDataIndex, index: caretData.dragging.endIndex }
endChar = { dataSetIndex: caretData.dragging.startingDataIndex, index: caretData.dragging.startingCharIndex }
} else if (caretData.dragging.startingCharIndex < caretData.dragging.endIndex) {
startingChar = { dataSetIndex: caretData.dragging.startingDataIndex, index: caretData.dragging.startingCharIndex }
endChar = { dataSetIndex: caretData.dragging.endDataIndex, index: caretData.dragging.endIndex }
} else if (caretData.dragging.startingCharIndex > caretData.dragging.endIndex) {
startingChar = { dataSetIndex: caretData.dragging.endDataIndex, index: caretData.dragging.endIndex }
endChar = { dataSetIndex: caretData.dragging.startingDataIndex, index: caretData.dragging.startingCharIndex }
} else {
isSelectionRendering = false
return
}
let firstLineRendered = false
let x = 0, y = config.format.margin * pxMmRatio;
let maxHeight = config.pageSetup.pxHeight - config.format.margin * pxMmRatio * 2
for (let l = 0; l < lines.length; l++) {
let lineObj = lines[l]
x = config.format.margin * pxMmRatio
// y = lines[l].y
let setData = dataList[lineObj.dataIndex]
let lineHeight = (lineObj.maxFontSize * 4 / 3) * mmPtRatio * pxMmRatio
// if (maxHeight < y) {
// y = config.format.margin * pxMmRatio + (lines[l].maxFontSize * pxMmRatio * mmPtRatio);
// }
y = lines[l].y + (lineObj.maxFontSize / 3) * mmPtRatio * pxMmRatio
if (lineObj.dataIndex >= startingChar.dataSetIndex && lineObj.dataIndex <= endChar.dataSetIndex) {
let ctx = pageList[lineObj.pageIndex].selectionCanvas.getContext('2d', { willReadFrequently: true })
ctx.save()
ctx.fillStyle = "#0000ff55"
let startingCharInThisLine = false, endCharInThisLine = false;
if (
startingChar.dataSetIndex == lineObj.dataIndex &&
startingChar.index >= lineObj.startingCharIndex &&
startingChar.index <= lineObj.endingCharIndex
) {
startingCharInThisLine = true
}
if (
endChar.dataSetIndex == lineObj.dataIndex &&
endChar.index >= lineObj.startingCharIndex &&
endChar.index <= lineObj.endingCharIndex
) endCharInThisLine = true
if (startingCharInThisLine && endCharInThisLine) {
let drawY = y - lineHeight
let drawX = setData.formatedText[startingChar.index].dimension.x
let midChar = setData.formatedText[endChar.index]
let midX = midChar?.dimension?.x
midX = midX ? midX : 0
let lastChar = setData.formatedText[lineObj.endingCharIndex]
let endX = lastChar?.dimension?.x;
endX = endX ? endX : 0
ctx.fillRect(drawX, drawY, midX - drawX, lineHeight)
break
} else if (startingCharInThisLine) {
firstLineRendered = true
let drawY = y - lineHeight
let drawX = setData.formatedText?.[startingChar?.index]?.dimension?.x
drawX = drawX ? drawX : x
let lastChar = setData.formatedText[lineObj.endingCharIndex - 1]
let endX = lastChar?.dimension?.x + lastChar?.dimension?.width;
endX = endX ? endX : (drawX + lineObj.maxFontSize * mmPtRatio * pxMmRatio / 3)
ctx.fillRect(drawX, drawY, endX - drawX, lineHeight)
} else if (endCharInThisLine) {
let drawY = y - lineHeight
let midChar = setData.formatedText[endChar.index]
let midX = midChar?.dimension?.x + midChar?.dimension?.width
midX = midX ? (midX) : 0
ctx.fillRect(x, drawY, midX - x, lineHeight)
break
} else if (firstLineRendered) {
let drawY = y - lineHeight
let drawX = setData.formatedText?.[lineObj?.startingCharIndex]?.dimension?.x
drawX = drawX ? drawX : x
let lastChar = setData.formatedText[lineObj.endingCharIndex - 1]
let endX = lastChar?.dimension?.x + lastChar?.dimension?.width;
endX = endX ? endX : (drawX + lineObj.maxFontSize * mmPtRatio * pxMmRatio / 3)
ctx.fillRect(drawX, drawY, endX - drawX, lineHeight)
}
ctx.restore()
}
}
isSelectionRendering = false
}
function stopDragging(reset) {
if (reset) {
caretData.dragging.startX = null
caretData.dragging.startY = null
caretData.dragging.endX = null
caretData.dragging.endY = null
caretData.dragging.startingDataIndex = null
caretData.dragging.startingCharIndex = null
caretData.dragging.endDataIndex = null
caretData.dragging.endIndex = null
}
caretData.dragging.is = false
caretData.dragging.started = false
renderSelection(reset)
}
function setToolbarData(style) {
let fullStyle = getFullStyle(style)
let fontSizeInput = shadow.querySelector('[adc="font-size-input"]')
fontSizeInput.value = fullStyle.fontSize
let fontFamilyValue = shadow.querySelector('[adc="font-family"] [adc-type="selection"]')
if (fullStyle.fontFamily) {
fontFamilyValue.innerHTML = fullStyle.fontFamily
} else {
fontFamilyValue.innerHTML = ""
}
let listStyle = shadow.querySelector('[adc="list-style"] [adc-type="selection"]')
let listStyleValue = listStyles.find(item => item.value == style.listStyle)
if (style.dataSetType == 1 && listStyleValue) {
listStyle.innerHTML = listStyleValue.type
} else {
listStyle.innerHTML = '[No-List]'
}
let textStyle = shadow.querySelector('[adc="style-handler"] [adc-type="selection"]')
let textStyleValue = textStyleList.find(item => item.type == style?.type)
if (textStyleValue) {
textStyle.innerHTML = textStyleValue.type
} else {
textStyle.innerHTML = textStyleList[0]?.type
}
}
function getLabel(dataIndex) {
let label = "x."
if (dataList[dataIndex].listStyle == 0) { // 1. a. i.
......@@ -969,10 +1325,16 @@ var ADocEditor = function (customConfig) {
function addGlobalEvents(e) {
shadow.querySelector('[adc="page-list"]').addEventListener('wheel', onMouseWheelHandler)
// shadow.addEventListener('mousedown', globalMouseDownHandler)
shadow.addEventListener('click', globalClickDownHandler)
shadow.addEventListener('mouseover', globalMouseOverHandler)
shadow.addEventListener('mouseup', globalMouseUpHandler)
}
function globalMouseUpHandler(e) {
caretData.dragging.is = false
console.log('drag', caretData.dragging)
}
function globalClickDownHandler(e) {
// these is to handle the dropdown items
......@@ -1003,6 +1365,15 @@ var ADocEditor = function (customConfig) {
}
function findSpecialCharacterIndex(str, startingCharIndex, forward) {
let delta = forward ? 1 : -1
let curIndex = startingCharIndex + delta
while (str[curIndex]) {
if (str[curIndex] == " ") return curIndex
curIndex += delta
}
return null
}
function globalMouseOverHandler(e) {
let menuItems = shadow.querySelectorAll('[adc-type="menu-item"]')
......@@ -1021,6 +1392,24 @@ var ADocEditor = function (customConfig) {
}
}
function getCaretStyle(customStyle) {
let style = { type: textStyleList[0].type }
if (customStyle) style = { ...customStyle }
else if (caretData.activeData) {
if (caretData?.activeData?.formatedText?.[caretData.index - 1]) {
style = { ...caretData.activeData.formatedText[caretData.index - 1]?.style }
} else {
style = { ...caretData.activeData.style }
}
}
return style
}
function setCaretStyle(customStyle) {
caretData.style = { ...getCaretStyle(customStyle) }
return caretData.style
}
function getFullStyle(refStyle) {
let style = {}
if (refStyle.type) {
......@@ -1036,7 +1425,7 @@ var ADocEditor = function (customConfig) {
function renderCaret(toLoop) {
clearTimeout(caretData.timeout)
let dataIndex = dataList.findIndex(item => item.id == caretData.activeData.id)
let lineIndex = lines.findIndex(item => item.dataIndex == dataIndex && caretData.index <= item.charEndIndex)
let lineIndex = lines.findIndex(item => item.dataIndex == dataIndex && caretData.index <= item.endingCharIndex)
let lineObj = lines[lineIndex]
let prevLine = lines[lineIndex - 1]
......@@ -1048,7 +1437,7 @@ var ADocEditor = function (customConfig) {
}
if (!caretData.blink) {
let dataIndex = dataList.findIndex(item => item.id == caretData.activeData.id)
let lineObj = lines.find(item => item.dataIndex == dataIndex && caretData.index >= item.charStartIndex)
let lineObj = lines.find(item => item.dataIndex == dataIndex && caretData.index >= item.startingCharIndex)
let x = (config.format.margin * pxMmRatio) + lineObj.tabWidth
let y = (config.format.margin) * pxMmRatio
......@@ -1105,15 +1494,15 @@ var ADocEditor = function (customConfig) {
}
function focusOnPage(options = { scroll: false }) {
caretData.blink = false
if (!lastFocussedPage) lastFocussedPage = pageList[0].el
if (lastFocussedPage) {
const scrollTop = pageScrollingDiv.scrollTop
lastFocussedPage.focus(); // comment this
pageScrollingDiv.scrollTop = scrollTop
if (options.scroll) {
lastFocussedPage.scrollIntoView({ behavior: "smooth" })
}
}
// if (!lastFocussedPage) lastFocussedPage = pageList[0].el
// if (lastFocussedPage) {
// const scrollTop = pageScrollingDiv.scrollTop
// // lastFocussedPage.focus(); // comment this
// pageScrollingDiv.scrollTop = scrollTop
// if (options.scroll) {
// lastFocussedPage.scrollIntoView({ behavior: "smooth" })
// }
// }
}
function newDocument(e) {
......@@ -1145,6 +1534,18 @@ var ADocEditor = function (customConfig) {
x: config.format.margin,
y: config.format.margin + (3 * config.style.fontSize / 4)
},
dragging: {
is: false, // to check if mouse is down for dragging,
started: false, // to check if the mouse has moved for dragging
startX: null, // start and end are coordinated of opposite corner
startY: null,
endX: null,
endY: null,
startingDataIndex: null,
endDataIndex: null,
startingCharIndex: null,
endIndex: null,
}
}
pageList = []
shadow.querySelector('[adc="page-list"').innerHTML = ""
......@@ -1157,7 +1558,7 @@ var ADocEditor = function (customConfig) {
const blob = new Blob([jsonString], { type: 'application/json' });
const a = shadow.querySelector('[adc="download-link"');
a.download = 'saved-data.json';
a.download = 'a-saved-data.json';
a.href = URL.createObjectURL(blob);
document.body.appendChild(a);
a.click();
......@@ -1172,7 +1573,8 @@ var ADocEditor = function (customConfig) {
pxMmRatio: pxMmRatio,
config: JSON.parse(JSON.stringify(config)),
content: JSON.parse(JSON.stringify(dataList)),
caretData: JSON.parse(JSON.stringify(caretData))
caretData: JSON.parse(JSON.stringify(caretData)),
pageList: pageList,
}
delete returnObj.caretData.activeData
......@@ -1186,7 +1588,7 @@ var ADocEditor = function (customConfig) {
function setDocumentData(data) {
// might need to change some configuration
for (let d = 0; d < data.content.length; d++) data.content[d].id = ++counter
dataList = JSON.parse(JSON.stringify(data.content))
config = JSON.parse(JSON.stringify(data.config))
caretData = JSON.parse(JSON.stringify(data.caretData))
......@@ -1195,7 +1597,6 @@ var ADocEditor = function (customConfig) {
reRenderCanvas()
}
// http://localhost:3910/assets/fonts/calibri-regular.woff2
async function printDoc() {
// pdf dimention in pdf-lib is based on 'pt' or 'points' by default.
// 1pt = 1/72 inch
......@@ -1240,7 +1641,7 @@ var ADocEditor = function (customConfig) {
}
for (let c = lines[l].charStartIndex; c < lines[l].charEndIndex; c++) {
for (let c = lines[l].startingCharIndex; c < lines[l].endingCharIndex; c++) {
let fontObj = fontList.find(item => item.name == dataSet.formatedText[c]?.style?.fontFamily)
let font = embeddedFonts[fontObj.name]
if (!font) {
......@@ -1289,18 +1690,18 @@ var ADocEditor = function (customConfig) {
link.click();
}
async function setupHeaders(){
async function setupHeaders() {
let headerList = shadow.querySelector('[adc="left-sidebar-content"]')
headerList.innerHTML = ""
for(let d=0; d<dataList.length; d++){
let styleIndex = textStyleList.findIndex( item => item.type == dataList[d]?.style?.type )
if (styleIndex>0 && dataList[d].plainContent.length){
for (let d = 0; d < dataList.length; d++) {
let styleIndex = textStyleList.findIndex(item => item.type == dataList[d]?.style?.type)
if (styleIndex > 0 && dataList[d].plainContent.length) {
let headingItem = document.createElement('div')
headingItem.innerHTML = dataList[d].plainContent
headingItem.innerHTML = "&nbsp;".repeat(textStyleList[styleIndex].spaces)+headingItem.innerHTML
headingItem.innerHTML = "&nbsp;".repeat(textStyleList[styleIndex].spaces*3) + headingItem.innerHTML
headerList.append(headingItem)
let headingStyle = getFullStyle(dataList[d].style)
headingItem.style.fontSize = `${headingStyle.fontSize/1.2}pt`
// let headingStyle = getFullStyle(dataList[d].style)
// headingItem.style.fontSize = `${headingStyle.fontSize / 1.2}pt`
headingItem.style.width = '100%'
headingItem.style.whiteSpace = 'nowrap'
headingItem.style.overflow = "hidden"
......
dist/script.js
......@@ -35,46 +35,40 @@ function setData() {
if (!extractedData) extractedData = JSON.parse( localStorage.getItem('oldData') )
if(extractedData){
editor.setDocumentData(extractedData)
editor.focusOnPage()
}
}
setTimeout( ()=>{
setData()
}, 500 )
function generatePDF() {
editor.generatePDF("your_doc-pdf-lib.pdf")
}
editor.addFonts(["./assets/fonts/Caveat-VariableFont_wght.woff2", "./assets/fonts/Caveat-VariableFont_wght.ttf"], 'Caveat')
editor.addFonts(["./assets/fonts/Comfortaa-VariableFont_wght.woff2", "./assets/fonts/Comfortaa-VariableFont_wght.ttf"], 'Comfortaa')
editor.addFonts(["./assets/fonts/CrimsonText-Regular.woff2", "./assets/fonts/CrimsonText-Regular.ttf"], 'Crimson Text')
editor.addFonts(["./assets/fonts/EduTASBeginner-VariableFont_wght.woff2", "./assets/fonts/EduTASBeginner-VariableFont_wght.ttf"], 'Edu TAS Beginner')
editor.addFonts(["./assets/fonts/FiraSans-Regular.woff2", "./assets/fonts/FiraSans-Regular.ttf"], 'Fira Sans')
editor.addFonts(["./assets/fonts/IndieFlower-Regular.woff2", "./assets/fonts/IndieFlower-Regular.ttf"], 'Indie Flower')
editor.addFonts(["./assets/fonts/Kanit-Regular.woff2", "./assets/fonts/Kanit-Regular.ttf"], 'Kanit')
editor.addFonts(["./assets/fonts/Karla-VariableFont_wght.woff2", "./assets/fonts/Karla-VariableFont_wght.ttf"], 'Karla')
editor.addFonts(["./assets/fonts/Kenia-Regular.woff2", "./assets/fonts/Kenia-Regular.ttf"], 'Kenia')
editor.addFonts(["./assets/fonts/Lato-Regular.woff2", "./assets/fonts/Lato-Regular.ttf"], 'Lato')
editor.addFonts(["./assets/fonts/LibreFranklin-VariableFont_wght.woff2", "./assets/fonts/LibreFranklin-VariableFont_wght.ttf"], 'Libre Franklin')
editor.addFonts(["./assets/fonts/Lora-Regular.woff2", "./assets/fonts/Lora-Regular.ttf"], 'Lora')
editor.addFonts(["./assets/fonts/Macondo-Regular.woff2", "./assets/fonts/Macondo-Regular.ttf"], 'Macondo')
editor.addFonts(["./assets/fonts/Merriweather-Regular.woff2", "./assets/fonts/Merriweather-Regular.ttf"], 'Merriweather')
editor.addFonts(["./assets/fonts/Montserrat-VariableFont_wght.woff2", "./assets/fonts/Montserrat-VariableFont_wght.ttf"], 'Montserrat')
editor.addFonts(["./assets/fonts/Mulish-VariableFont_wght.woff2", "./assets/fonts/Mulish-VariableFont_wght.ttf"], 'Mulish')
editor.addFonts(["./assets/fonts/NotoSans-VariableFont_wdth,wght.woff2", "./assets/fonts/NotoSans-VariableFont_wdth,wght.ttf"], 'Noto Sans')
editor.addFonts(["./assets/fonts/Nunito-VariableFont_wght.woff2", "./assets/fonts/Nunito-VariableFont_wght.ttf"], 'Nunito')
editor.addFonts(["./assets/fonts/OpenSans-VariableFont_wdth,wght.woff2", "./assets/fonts/OpenSans-VariableFont_wdth,wght.ttf"], 'Open Sans')
editor.addFonts(["./assets/fonts/Outfit-VariableFont_wght.woff2", "./assets/fonts/Outfit-VariableFont_wght.ttf"], 'Outfit')
editor.addFonts(["./assets/fonts/Pacifico-Regular.woff2", "./assets/fonts/Pacifico-Regular.ttf"], 'Pacifico')
editor.addFonts(["./assets/fonts/Poppins-Regular.woff2", "./assets/fonts/Poppins-Regular.ttf"], 'Poppins')
editor.addFonts(["./assets/fonts/Prompt-Regular.woff2", "./assets/fonts/Prompt-Regular.ttf"], 'Prompt')
editor.addFonts(["./assets/fonts/Rajdhani-Regular.woff2", "./assets/fonts/Rajdhani-Regular.ttf"], 'Rajdhani')
editor.addFonts(["./assets/fonts/Roboto-Regular.woff2", "./assets/fonts/Roboto-Regular.ttf"], 'Roboto')
editor.addFonts(["./assets/fonts/Rubik-VariableFont_wght.woff2", "./assets/fonts/Rubik-VariableFont_wght.ttf"], 'Rubik')
editor.addFonts(["./assets/fonts/SourceCodePro-VariableFont_wght.woff2", "./assets/fonts/SourceCodePro-VariableFont_wght.ttf"], 'Source Code Pro')
editor.addFonts(["./assets/fonts/Teko-VariableFont_wght.woff2", "./assets/fonts/Teko-VariableFont_wght.ttf"], 'Teko')
editor.addFonts(["./assets/fonts/TitilliumWeb-Regular.woff2", "./assets/fonts/TitilliumWeb-Regular.ttf"], 'Titillium Web')
editor.addFonts(["./assets/fonts/Ubuntu-Regular.woff2", "./assets/fonts/Ubuntu-Regular.ttf"], 'Ubuntu')
editor.addFonts(["./assets/fonts/VarelaRound-Regular.woff2", "./assets/fonts/VarelaRound-Regular.ttf"], 'Varela Round')
editor.addFonts(["./assets/fonts/WorkSans-Regular.woff2", "./assets/fonts/WorkSans-Regular.ttf"], 'Work Sans')
// editor.addFonts(["./assets/fonts/Caveat-VariableFont_wght.woff2", "./assets/fonts/Caveat-VariableFont_wght.ttf"], 'Caveat')
// editor.addFonts(["./assets/fonts/Comfortaa-VariableFont_wght.woff2", "./assets/fonts/Comfortaa-VariableFont_wght.ttf"], 'Comfortaa')
// editor.addFonts(["./assets/fonts/FiraSans-Regular.woff2", "./assets/fonts/FiraSans-Regular.ttf"], 'Fira Sans')
// editor.addFonts(["./assets/fonts/Kanit-Regular.woff2", "./assets/fonts/Kanit-Regular.ttf"], 'Kanit')
// editor.addFonts(["./assets/fonts/Merriweather-Regular.woff2", "./assets/fonts/Merriweather-Regular.ttf"], 'Merriweather')
// editor.addFonts(["./assets/fonts/Montserrat-VariableFont_wght.woff2", "./assets/fonts/Montserrat-VariableFont_wght.ttf"], 'Montserrat')
// editor.addFonts(["./assets/fonts/Mulish-VariableFont_wght.woff2", "./assets/fonts/Mulish-VariableFont_wght.ttf"], 'Mulish')
// editor.addFonts(["./assets/fonts/NotoSans-VariableFont_wdth,wght.woff2", "./assets/fonts/NotoSans-VariableFont_wdth,wght.ttf"], 'Noto Sans')
// editor.addFonts(["./assets/fonts/Nunito-VariableFont_wght.woff2", "./assets/fonts/Nunito-VariableFont_wght.ttf"], 'Nunito')
// editor.addFonts(["./assets/fonts/OpenSans-VariableFont_wdth,wght.woff2", "./assets/fonts/OpenSans-VariableFont_wdth,wght.ttf"], 'Open Sans')
// editor.addFonts(["./assets/fonts/Pacifico-Regular.woff2", "./assets/fonts/Pacifico-Regular.ttf"], 'Pacifico')
// editor.addFonts(["./assets/fonts/Poppins-Regular.woff2", "./assets/fonts/Poppins-Regular.ttf"], 'Poppins')
// editor.addFonts(["./assets/fonts/Prompt-Regular.woff2", "./assets/fonts/Prompt-Regular.ttf"], 'Prompt')
// editor.addFonts(["./assets/fonts/Rajdhani-Regular.woff2", "./assets/fonts/Rajdhani-Regular.ttf"], 'Rajdhani')
// editor.addFonts(["./assets/fonts/Roboto-Regular.woff2", "./assets/fonts/Roboto-Regular.ttf"], 'Roboto')
// editor.addFonts(["./assets/fonts/Rubik-VariableFont_wght.woff2", "./assets/fonts/Rubik-VariableFont_wght.ttf"], 'Rubik')
// editor.addFonts(["./assets/fonts/SourceCodePro-VariableFont_wght.woff2", "./assets/fonts/SourceCodePro-VariableFont_wght.ttf"], 'Source Code Pro')
// editor.addFonts(["./assets/fonts/Teko-VariableFont_wght.woff2", "./assets/fonts/Teko-VariableFont_wght.ttf"], 'Teko')
// editor.addFonts(["./assets/fonts/Ubuntu-Regular.woff2", "./assets/fonts/Ubuntu-Regular.ttf"], 'Ubuntu')
// editor.addFonts(["./assets/fonts/WorkSans-Regular.woff2", "./assets/fonts/WorkSans-Regular.ttf"], 'Work Sans')
// editor.addFonts(["./assets/fonts/Afacad-VariableFont_wght.woff2", "./assets/fonts/Afacad-VariableFont_wght.ttf"], 'Afacad')
// editor.addFonts(["./assets/fonts/Bitter-VariableFont_wght.woff2", "./assets/fonts/Bitter-VariableFont_wght.ttf"], 'Bitter')
// end of file
\ 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