Skip to content

A
a-doc-editor
Commit cfd2e36d by ramdayalmunda
Options

backspace key and ctrl+backspace key added

parent 5fbc768e
Showing with 36 additions and 7 deletions
dist/assets/a-doc-editor.js
......@@ -37,6 +37,7 @@ var ADocEditor = function (customConfig) {
y: 21,
}
var renderInProgress = false
var focusedCanvas = false;
function inititalize(customConfig) {
config = { ...defaultConfig, ...customConfig }
......@@ -87,7 +88,7 @@ var ADocEditor = function (customConfig) {
}
}
if (!caretData.blink) renderCaret()
if (!caretData.blink && focusedCanvas) renderCaret()
// to render caret
function renderCaret() {
let ctx = canvasList[caretData.canvasIndex].getContext('2d', { willReadFrequently: true })
......@@ -115,10 +116,23 @@ var ADocEditor = function (customConfig) {
canvas.height = config.pageSetup.canvasHeight
canvas.addEventListener('keydown', keydownHandler)
canvas.addEventListener('mousedown', mousedownHandler)
canvas.addEventListener("focus", onFocusHandler)
canvas.addEventListener("blur", onBlurHandler)
mainComponent.append(canvas)
return canvas
}
function onFocusHandler(e){
focusedCanvas = e.target
caretData.blink = false
reRenderPages(dataList)
}
function onBlurHandler(e){
focusedCanvas = null
caretData.blink = true
reRenderPages(dataList)
}
function renderText(canvas, dataSet) {
let ctx = canvas.getContext('2d', { willReadFrequently: true })
......@@ -136,9 +150,24 @@ var ADocEditor = function (customConfig) {
}
function keydownHandler(e) {
caretData.blink = false
if (e.keyCode == 32) e.preventDefault()
if (e.key.length == 1 || e.keyCode == 32) {
if (e.shiftKey && e.ctrlKey){} // ctr+shift combination
else if (e.ctrlKey){
if (e.keyCode == 8) { // ctrl+backspace: delete the entrite word
let separatedSentence = caretData.activeData.plainContent.slice(0, caretData.index)
let indexOfpreviousBlankChar = separatedSentence.search(/[^a-zA-Z0-9](?=[a-zA-Z0-9]*$)/)
if (indexOfpreviousBlankChar<=0) caretData.activeData.plainContent = ""
else caretData.activeData.plainContent = caretData.activeData.plainContent.slice(0, indexOfpreviousBlankChar) + caretData.activeData.plainContent.slice(caretData.index)
caretData.index = indexOfpreviousBlankChar <= 0 ? 0 : indexOfpreviousBlankChar
}
}
else if (e.keyCode==9){// tab input // no need to add case for casesensitivity
e.preventDefault()
}
else if (e.key.length == 1 || e.keyCode == 32) {
e.preventDefault()
caretData.activeData.plainContent = caretData.activeData.plainContent.slice(0, caretData.index) + e.key + caretData.activeData.plainContent.slice(caretData.index)
++caretData.index
}
......@@ -148,14 +177,13 @@ var ADocEditor = function (customConfig) {
}
else if (e.keyCode == 37) {
caretData.index = (caretData.index <= 0) ? 0 : caretData.index - 1
console.log('move left')
}
else if (e.keyCode == 38) {}
else if (e.keyCode == 38) {}// up key
else if (e.keyCode == 39) {
console.log('move right')
caretData.index = (caretData.index >= caretData.activeData.plainContent.length) ? caretData.activeData.plainContent.length : caretData.index +1
}
else if (e.keyCode == 40) {}
else if (e.keyCode == 40) {}// down key
else{ } // unhandled cases
reRenderPages(dataList)
clearInterval(caretData.interval)
......
dist/index.html
......@@ -16,6 +16,7 @@
<body>
<h1>Hello World!</h1>
<h2>To create a custom doc editor</h2>
<p>Click on the canvas and start typing</p>
<div id="user-container-for-editor"></div>
<h1>Some other data</h1>
<h1>Random heading </h1>
......
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