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

Implement correction panel with highlight functionality for error display

Browse Source
This commit is contained in:
Aljaž Grilc 2024-02-02 09:18:28 +01:00
parent aa3f025c7d
commit 4e2409fa38
3 changed files with 31 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -14,7 +14,9 @@
<div id="ed3" class="online-editor" contenteditable="true"><div>Popravite kar želite.</div></div>
<div id="ed4" class="online-editor" contenteditable="true"><div>Popravite <a href=".">kar želite</a>.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div></div>
<div id="ed5" class="online-editor" contenteditable="true">To je preiskus.</div>-->
<div id="ed6" class="online-editor" contenteditable="true"><div class="contextual"><p beschecked="true">Madžarski premier Orban je tako očitno vendarle <span class="typo-mistake">pristal na nadaljnjo makrofinančno pomoč Ukrajini</span> v okviru revizije dolgoročnega proračuna unije 2021-2027<span class="typo-mistake">.</span> Ta vključuje 50 milijard evrov za Ukrajino za prihodnja štiri leta, od tega 33 milijard evrov posojil in 17 milijard evrov nepovratnih sredstev.</p></div></div>
<!-- <div id="ed6" class="online-editor" contenteditable="true"><div class="contextual"><p>Madžarski premier Orban je tako očitno vendarle pristal na nadaljnjo makrofinančno pomoč Ukrajini v okviru revizije dolgoročnega proračuna unije 2021-2027. Ta vključuje 50 milijard evrov za Ukrajino za prihodnja štiri leta, od tega 33 milijard evrov posojil in 17 milijard evrov nepovratnih sredstev.</p></div></div> -->
<div id="correction-panel"></div>
<div id="ed7" class="online-editor" contenteditable="true"><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div></div>
<my-component></my-component>
</body>
</html>

30
online-editor.js
View File

@ -114,16 +114,26 @@ async function besCheckText(el)
}
}
const span = document.createElement('span')
span.classList.add('typo-mistake')
// Dirty hack, copied from: https://stackoverflow.com/questions/67634286/invalidstateerror-failed-to-execute-surroundcontents-on-range-the-range-ha
span.appendChild(range.extractContents());
range.insertNode(span);
// This is a better way to apply span elements,
// but it doesnt work when the range has partially selected a non-Text node.
// range.surroundContents(span)
const clientRects = range.getClientRects()
const correctionPanel = document.getElementById('correction-panel');
const rect = clientRects[0];
const highlight = document.createElement("div");
highlight.classList.add("typo-mistake");
highlight.dataset.info = match.message;
highlight.style.left = `${rect.left}px`;
highlight.style.top = `${rect.top}px`;
highlight.style.width = `${rect.width}px`;
highlight.style.height = `${rect.height}px`;
correctionPanel.appendChild(highlight);
// TODO: Find a solution to handle click events on the highlights
// const editor = document.querySelector('.online-editor')
// highlight.addEventListener("click", function(e) {
// console.log(e);
// editor.focus();
// besHandleClick(e);
// return true;
// });
})
el.setAttribute('besChecked', 'true')

12
styles.css
View File

@ -11,15 +11,19 @@
white-space: pre-wrap;
overflow-y: auto;
font-family: Arial, Helvetica, sans-serif;
z-index: 2;
}
/* Mistake types styles */
.typo-mistake {
text-decoration: underline;
border-bottom: 2px solid red;
position: absolute;
z-index: 2;
cursor: text;
/* pointer-events: none; */
/* text-decoration: underline;
text-decoration-color: red;
cursor: pointer;
position: relative;
z-index: 3;
cursor: text; */
}
.other-mistake {