Amebis/BesService
2
2
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Support initial and periodic grammar checks

Browse Source
This commit is contained in:
Simon Rozman 2024-01-30 15:40:44 +01:00
parent 1ce46bf8a2
commit 3e4a4e6e91
2 changed files with 108 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@ -9,8 +9,10 @@
<script src="popup.js"></script> <script src="popup.js"></script>
</head> </head>
<body> <body>
<div id="besana-editor" 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>
<button id="btn-check">Preveri txt</button> <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="ed4" class="online-editor" contenteditable="true"><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo.</div></div>
<my-component></my-component> <my-component></my-component>
</body> </body>
</html> </html>

139
online-editor.js
View File

@ -1,22 +1,21 @@
let editors = {} // Collection of all editors on page
window.onload = () => { window.onload = () => {
const btnCheck = document.getElementById('btn-check') // Search and prepare all our editors found in the document.
btnCheck.addEventListener('click', checkText) document.querySelectorAll('.online-editor').forEach(ed => {
let editor = {
ignoreInput: false,
timer: null
}
editors[ed.id] = editor
checkText(ed.id)
const textArea = document.getElementById('besana-editor') ed.addEventListener('beforeinput', e => beforeTextChange(ed.id, e), false)
textArea.addEventListener('click', e => {
handleClick(e) ed.addEventListener('click', e => {
handleClick(e)
})
}) })
let timerId = null
// textArea.addEventListener('focus', () => {
// timerId = setTimeout(checkText, 2000)
// })
// textArea.addEventListener('input', () => {
// clearTimeout(timerId)
// timerId = setTimeout(checkText, 2000)
// })
} }
function handleClick(e) { function handleClick(e) {
@ -31,16 +30,88 @@ function handleClick(e) {
} }
} }
function checkText() { async function checkText(editorId) {
const textArea = document.getElementById('besana-editor') let text = ''
const textAreaContent = textArea?.innerHTML let editor = editors[editorId]
const text = createFirstParagraph(textAreaContent) let ed = document.getElementById(editorId)
const paragraphs = separateParagraphs(text) let paragraphs = []
const modifiedParagraphs = paragraphs.map( let divElements = ed.getElementsByTagName('div')
async paragraph => await ajaxCheck(paragraph) if (divElements.length === 0) {
) // Editor is empty or has plain text only
console.log(modifiedParagraphs) text = ed.textContent
textArea.innerHTML = modifiedParagraphs.join('') } 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 beforeTextChange(editorId, event)
{
let editor = editors[editorId]
if (editor.ignoreInput) return
if (editor.timer) clearTimeout(editor.timer)
editor.timer = setTimeout(function(){ checkText(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
}
})
} }
function createFirstParagraph(text) { function createFirstParagraph(text) {
@ -61,7 +132,7 @@ function separateParagraphs(text) {
async function ajaxCheck(paragraph) { async function ajaxCheck(paragraph) {
const url = 'http://localhost:225/api/v2/check' const url = 'http://localhost:225/api/v2/check'
const data = { const data = {
format: 'html', format: 'plain',
text: paragraph, text: paragraph,
language: 'sl', language: 'sl',
level: 'picky' level: 'picky'
@ -73,20 +144,18 @@ async function ajaxCheck(paragraph) {
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: formData body: formData
}) })
fetch(request) return fetch(request)
.then(response => { .then(response => {
console.log(response.status, response.statusText)
if (!response.ok) { if (!response.ok) {
throw new Error('Network response was not ok') throw new Error('Backend server response was not OK')
} }
console.log(response)
return response.json() return response.json()
}) })
.then(data => {
return data
})
.catch(error => { .catch(error => {
console.error( throw new Error('Request to backend server failed: ' + error)
'Napaka pri pošiljanju zahteve za preverjanje besedila',
error
)
}) })
} }