Attempt to extend grammar checking to HTML
This commit is contained in:
parent
4470c4fccf
commit
9447faa024
@ -12,7 +12,7 @@
|
|||||||
<!--<div id="ed1" class="online-editor" contenteditable="true">Tukaj vpišite besedilo ki ga želite popraviti.</div>
|
<!--<div id="ed1" class="online-editor" contenteditable="true">Tukaj vpišite besedilo ki ga želite popraviti.</div>
|
||||||
<div id="ed2" class="online-editor" contenteditable="true"></div>
|
<div id="ed2" class="online-editor" contenteditable="true"></div>
|
||||||
<div id="ed3" class="online-editor" contenteditable="true"><div>Popravite kar želite.</div></div>-->
|
<div id="ed3" class="online-editor" contenteditable="true"><div>Popravite kar želite.</div></div>-->
|
||||||
<div id="ed4" class="online-editor" contenteditable="true"><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo.</div></div>
|
<div id="ed4" class="online-editor" contenteditable="true"><div>Popravite <a href=".">kar</a> želite.</div><div>Na mizo nisem položil knjigo.</div></div>
|
||||||
<my-component></my-component>
|
<my-component></my-component>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
238
online-editor.js
238
online-editor.js
@ -1,23 +1,137 @@
|
|||||||
|
const besUrl = 'http://localhost:225/api/v2/check'
|
||||||
|
|
||||||
let besEditors = {} // Collection of all editors on page
|
let besEditors = {} // Collection of all editors on page
|
||||||
|
|
||||||
window.onload = () => {
|
window.onload = () => {
|
||||||
// Search and prepare all our editors found in the document.
|
// Search and prepare all our editors found in the document.
|
||||||
document.querySelectorAll('.online-editor').forEach(ed => {
|
document.querySelectorAll('.online-editor').forEach(edit => {
|
||||||
let editor = {
|
let editor = {
|
||||||
ignoreInput: false,
|
ignoreInput: false,
|
||||||
timer: null
|
timer: null
|
||||||
}
|
}
|
||||||
besEditors[ed.id] = editor
|
besEditors[edit.id] = editor
|
||||||
besCheckText(ed.id)
|
besCheckText(edit)
|
||||||
|
|
||||||
ed.addEventListener('beforeinput', e => besBeforeInput(ed.id, e), false)
|
//edit.addEventListener('beforeinput', e => besBeforeInput(edit.id, e), false)
|
||||||
|
|
||||||
ed.addEventListener('click', e => {
|
edit.addEventListener('click', e => {
|
||||||
besHandleClick(e)
|
besHandleClick(e)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function besCheckText(el)
|
||||||
|
{
|
||||||
|
switch (el.nodeType) {
|
||||||
|
case Node.TEXT_NODE:
|
||||||
|
return [{ text: el.textContent, el: el }]
|
||||||
|
|
||||||
|
case Node.ELEMENT_NODE:
|
||||||
|
let data = []
|
||||||
|
for (const el2 of el.childNodes) {
|
||||||
|
data = data.concat(await besCheckText(el2))
|
||||||
|
}
|
||||||
|
let defaultView = document.defaultView;
|
||||||
|
switch (defaultView.getComputedStyle(el, null).getPropertyValue('display'))
|
||||||
|
{
|
||||||
|
case 'inline':
|
||||||
|
case 'inline-block':
|
||||||
|
data.splice(0, 0, { markup: '<'+el.tagName+'>', el: el })
|
||||||
|
data.splice(data.length, 0, { markup: '</'+el.tagName+'>' })
|
||||||
|
return data;
|
||||||
|
default:
|
||||||
|
let regAllWhitespace = /^\s*$/
|
||||||
|
if (data.some(x => 'text' in x && !regAllWhitespace.test(x.text))) {
|
||||||
|
const requestData = {
|
||||||
|
format: 'plain',
|
||||||
|
data: JSON.stringify({annotation: data}),
|
||||||
|
language: 'sl',
|
||||||
|
level: 'picky'
|
||||||
|
}
|
||||||
|
const request = new Request(besUrl, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||||||
|
body: new URLSearchParams(requestData)
|
||||||
|
})
|
||||||
|
fetch(request)
|
||||||
|
.then(response => {
|
||||||
|
if (!response.ok) {
|
||||||
|
// TODO: Make connectivity and BesStr issues non-fatal.
|
||||||
|
throw new Error('Backend server response was not OK')
|
||||||
|
}
|
||||||
|
return response.json()
|
||||||
|
})
|
||||||
|
.then(responseData => {
|
||||||
|
responseData.matches.sort((a, b) => a.offset < b.offset ? -1 : a.offset > b.offset ? +1 : 0)
|
||||||
|
responseData.matches.forEach(match => {
|
||||||
|
let range = document.createRange()
|
||||||
|
|
||||||
|
// Locate start of the grammar mistake.
|
||||||
|
for (let idx = 0, startingOffset = 0; ; ) {
|
||||||
|
if ('text' in data[idx]) {
|
||||||
|
if (startingOffset <= match.offset && match.offset < startingOffset + data[idx].text.length) {
|
||||||
|
range.setStart(data[idx].el, match.offset - startingOffset)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
startingOffset += data[idx++].text.length
|
||||||
|
}
|
||||||
|
else startingOffset += data[idx++].markup.length
|
||||||
|
}
|
||||||
|
|
||||||
|
// Locate end of the grammar mistake.
|
||||||
|
let endOffset = match.offset + match.length
|
||||||
|
for (let idx = 0, startingOffset = 0; ; ) {
|
||||||
|
if ('text' in data[idx]) {
|
||||||
|
if (startingOffset <= endOffset && endOffset <= startingOffset + data[idx].text.length) {
|
||||||
|
range.setEnd(data[idx].el, endOffset - startingOffset)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
startingOffset += data[idx++].text.length
|
||||||
|
}
|
||||||
|
else startingOffset += data[idx++].markup.length
|
||||||
|
}
|
||||||
|
|
||||||
|
const span = document.createElement('span')
|
||||||
|
span.classList.add('typo-mistake')
|
||||||
|
//range.insertNode(span)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
// TODO: Make parsing issues non-fatal.
|
||||||
|
throw new Error('Request to backend server failed: ' + error)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return [{ markup: '<'+el.tagName+'/>', el: el }]
|
||||||
|
}
|
||||||
|
|
||||||
|
default:
|
||||||
|
return [{ markup: '<?'+el.nodeType+'>', el: el }]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function besBeforeInput(editorId, event)
|
||||||
|
{
|
||||||
|
let editor = besEditors[editorId]
|
||||||
|
if (editor.ignoreInput) return
|
||||||
|
|
||||||
|
if (editor.timer) clearTimeout(editor.timer)
|
||||||
|
editor.timer = setTimeout(function(){ besCheckText(editorId) }, 1000)
|
||||||
|
|
||||||
|
let edit = document.getElementById(editorId)
|
||||||
|
event.getTargetRanges().forEach(range => {
|
||||||
|
if (range.startContainer === edit)
|
||||||
|
return
|
||||||
|
for (var el = range.startContainer; el ; el = el.nextSibling) {
|
||||||
|
for (var el2 = el; el2 && el2 !== edit; el2 = el2.parentElement) {
|
||||||
|
if (!(el2 instanceof HTMLElement) || el2.tagName !== 'DIV') continue
|
||||||
|
el2.removeAttribute('data-info')
|
||||||
|
}
|
||||||
|
if (el === range.endContainer) break
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
function besHandleClick(e) {
|
function besHandleClick(e) {
|
||||||
switch (e.target) {
|
switch (e.target) {
|
||||||
case e.target.closest('span'):
|
case e.target.closest('span'):
|
||||||
@ -29,117 +143,3 @@ function besHandleClick(e) {
|
|||||||
break
|
break
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function besCheckText(editorId) {
|
|
||||||
let text = ''
|
|
||||||
let editor = besEditors[editorId]
|
|
||||||
let ed = document.getElementById(editorId)
|
|
||||||
let paragraphs = []
|
|
||||||
let divElements = ed.getElementsByTagName('div')
|
|
||||||
if (divElements.length === 0) {
|
|
||||||
// Editor is empty or has plain text only
|
|
||||||
text = ed.textContent
|
|
||||||
} else {
|
|
||||||
// Editor contains <div> paragraphs
|
|
||||||
for (const para of divElements) {
|
|
||||||
if (para.getAttribute('data-info') === 'checked') continue
|
|
||||||
let p = { start: text.length }
|
|
||||||
text += para.textContent.replace(/\r?\n/g, ' ')
|
|
||||||
text += '\n\n'
|
|
||||||
p.end = text.length
|
|
||||||
paragraphs.push(p)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
let result = await ajaxCheck(text)
|
|
||||||
result.matches.sort((a, b) => a.offset < b.offset ? -1 : a.offset > b.offset ? +1 : 0)
|
|
||||||
if (divElements.length === 0) {
|
|
||||||
// Editor is empty or has plain text only
|
|
||||||
let textOut = ''
|
|
||||||
let offset = 0
|
|
||||||
for (var mistakeIdx = 0; mistakeIdx < result.matches.length; ++mistakeIdx) {
|
|
||||||
let mistakeStart = result.matches[mistakeIdx].offset
|
|
||||||
let mistakeEnd = mistakeStart + result.matches[mistakeIdx].length
|
|
||||||
textOut += text.substring(offset, mistakeStart)
|
|
||||||
textOut += '<span class="typo-mistake">' + text.substring(mistakeStart, mistakeEnd) + '</span>'
|
|
||||||
offset = mistakeEnd
|
|
||||||
}
|
|
||||||
textOut += text.substring(offset)
|
|
||||||
editor.ignoreInput = true
|
|
||||||
ed.innerHTML = textOut
|
|
||||||
editor.ignoreInput = false
|
|
||||||
} else {
|
|
||||||
// Editor contains <div> paragraphs
|
|
||||||
let idx = 0
|
|
||||||
let mistakeIdx = 0
|
|
||||||
for (const para of divElements) {
|
|
||||||
if (para.getAttribute('data-info') === 'checked') continue
|
|
||||||
let p = paragraphs[idx++]
|
|
||||||
let textOut = ''
|
|
||||||
let offset = p.start
|
|
||||||
for (; mistakeIdx < result.matches.length && result.matches[mistakeIdx].offset < p.end; ++mistakeIdx) {
|
|
||||||
let mistakeStart = result.matches[mistakeIdx].offset
|
|
||||||
let mistakeEnd = mistakeStart + result.matches[mistakeIdx].length
|
|
||||||
textOut += text.substring(offset, mistakeStart)
|
|
||||||
textOut += '<span class="typo-mistake">' + text.substring(mistakeStart, mistakeEnd) + '</span>'
|
|
||||||
offset = mistakeEnd
|
|
||||||
}
|
|
||||||
textOut += text.substring(offset, p.end - 2 /* Compensate for '\n\n' we appended to each paragraph. */)
|
|
||||||
editor.ignoreInput = true
|
|
||||||
para.innerHTML = textOut
|
|
||||||
editor.ignoreInput = false
|
|
||||||
para.setAttribute('data-info', 'checked')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function besBeforeInput(editorId, event)
|
|
||||||
{
|
|
||||||
let editor = besEditors[editorId]
|
|
||||||
if (editor.ignoreInput) return
|
|
||||||
|
|
||||||
if (editor.timer) clearTimeout(editor.timer)
|
|
||||||
editor.timer = setTimeout(function(){ besCheckText(editorId) }, 1000)
|
|
||||||
|
|
||||||
let ed = document.getElementById(editorId)
|
|
||||||
event.getTargetRanges().forEach(range => {
|
|
||||||
if (range.startContainer === ed)
|
|
||||||
return
|
|
||||||
for (var el = range.startContainer; el ; el = el.nextSibling) {
|
|
||||||
for (var el2 = el; el2 && el2 !== ed; el2 = el2.parentElement) {
|
|
||||||
if (!(el2 instanceof HTMLElement) || el2.tagName !== 'DIV') continue
|
|
||||||
el2.removeAttribute('data-info')
|
|
||||||
}
|
|
||||||
if (el === range.endContainer) break
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
async function ajaxCheck(paragraph) {
|
|
||||||
const url = 'http://localhost:225/api/v2/check'
|
|
||||||
const data = {
|
|
||||||
format: 'plain',
|
|
||||||
text: paragraph,
|
|
||||||
language: 'sl',
|
|
||||||
level: 'picky'
|
|
||||||
}
|
|
||||||
|
|
||||||
const formData = new URLSearchParams(data)
|
|
||||||
const request = new Request(url, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
|
||||||
body: formData
|
|
||||||
})
|
|
||||||
return fetch(request)
|
|
||||||
.then(response => {
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error('Backend server response was not OK')
|
|
||||||
}
|
|
||||||
return response.json()
|
|
||||||
})
|
|
||||||
.then(data => {
|
|
||||||
return data
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
throw new Error('Request to backend server failed: ' + error)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user