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) { ...@@ -37,6 +37,7 @@ var ADocEditor = function (customConfig) {
y: 21, y: 21,
} }
var renderInProgress = false var renderInProgress = false
var focusedCanvas = false;
function inititalize(customConfig) { function inititalize(customConfig) {
config = { ...defaultConfig, ...customConfig } config = { ...defaultConfig, ...customConfig }
...@@ -87,7 +88,7 @@ var ADocEditor = function (customConfig) { ...@@ -87,7 +88,7 @@ var ADocEditor = function (customConfig) {
} }
} }
if (!caretData.blink) renderCaret() if (!caretData.blink && focusedCanvas) renderCaret()
// to render caret // to render caret
function renderCaret() { function renderCaret() {
let ctx = canvasList[caretData.canvasIndex].getContext('2d', { willReadFrequently: true }) let ctx = canvasList[caretData.canvasIndex].getContext('2d', { willReadFrequently: true })
...@@ -115,10 +116,23 @@ var ADocEditor = function (customConfig) { ...@@ -115,10 +116,23 @@ var ADocEditor = function (customConfig) {
canvas.height = config.pageSetup.canvasHeight canvas.height = config.pageSetup.canvasHeight
canvas.addEventListener('keydown', keydownHandler) canvas.addEventListener('keydown', keydownHandler)
canvas.addEventListener('mousedown', mousedownHandler) canvas.addEventListener('mousedown', mousedownHandler)
canvas.addEventListener("focus", onFocusHandler)
canvas.addEventListener("blur", onBlurHandler)
mainComponent.append(canvas) mainComponent.append(canvas)
return 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) { function renderText(canvas, dataSet) {
let ctx = canvas.getContext('2d', { willReadFrequently: true }) let ctx = canvas.getContext('2d', { willReadFrequently: true })
...@@ -136,9 +150,24 @@ var ADocEditor = function (customConfig) { ...@@ -136,9 +150,24 @@ var ADocEditor = function (customConfig) {
} }
function keydownHandler(e) { function keydownHandler(e) {
caretData.blink = false 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.activeData.plainContent = caretData.activeData.plainContent.slice(0, caretData.index) + e.key + caretData.activeData.plainContent.slice(caretData.index)
++caretData.index ++caretData.index
} }
...@@ -148,14 +177,13 @@ var ADocEditor = function (customConfig) { ...@@ -148,14 +177,13 @@ var ADocEditor = function (customConfig) {
} }
else if (e.keyCode == 37) { else if (e.keyCode == 37) {
caretData.index = (caretData.index <= 0) ? 0 : caretData.index - 1 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) { else if (e.keyCode == 39) {
console.log('move right')
caretData.index = (caretData.index >= caretData.activeData.plainContent.length) ? caretData.activeData.plainContent.length : caretData.index +1 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) reRenderPages(dataList)
clearInterval(caretData.interval) clearInterval(caretData.interval)
......
dist/index.html
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
<body> <body>
<h1>Hello World!</h1> <h1>Hello World!</h1>
<h2>To create a custom doc editor</h2> <h2>To create a custom doc editor</h2>
<p>Click on the canvas and start typing</p>
<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>
......
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