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="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="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="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> <my-component></my-component>
</body> </body>
</html> </html>

30
online-editor.js
View File

@ -114,16 +114,26 @@ async function besCheckText(el)
} }
} }
const span = document.createElement('span') const clientRects = range.getClientRects()
span.classList.add('typo-mistake') const correctionPanel = document.getElementById('correction-panel');
const rect = clientRects[0];
// Dirty hack, copied from: https://stackoverflow.com/questions/67634286/invalidstateerror-failed-to-execute-surroundcontents-on-range-the-range-ha const highlight = document.createElement("div");
span.appendChild(range.extractContents()); highlight.classList.add("typo-mistake");
range.insertNode(span); highlight.dataset.info = match.message;
highlight.style.left = `${rect.left}px`;
// This is a better way to apply span elements, highlight.style.top = `${rect.top}px`;
// but it doesnt work when the range has partially selected a non-Text node. highlight.style.width = `${rect.width}px`;
// range.surroundContents(span) 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') el.setAttribute('besChecked', 'true')

12
styles.css
View File

@ -11,15 +11,19 @@
white-space: pre-wrap; white-space: pre-wrap;
overflow-y: auto; overflow-y: auto;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
z-index: 2;
} }
/* Mistake types styles */ /* Mistake types styles */
.typo-mistake { .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; text-decoration-color: red;
cursor: pointer; cursor: text; */
position: relative;
z-index: 3;
} }
.other-mistake { .other-mistake {