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

Reverse sorting order and find a way to apply spans when the range has partially selected a non-text node

Browse Source
This commit is contained in:
Aljaž Grilc 2024-01-31 14:59:15 +01:00
parent 9447faa024
commit 8fe954993b
2 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -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 <a href=".">kar</a> ž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. Popravite kar želite.</div></div>
<my-component></my-component> <my-component></my-component>
</body> </body>
</html> </html>

12
online-editor.js
View File

@ -62,7 +62,8 @@ async function besCheckText(el)
return response.json() return response.json()
}) })
.then(responseData => { .then(responseData => {
responseData.matches.sort((a, b) => a.offset < b.offset ? -1 : a.offset > b.offset ? +1 : 0) // responseData.matches.sort((a, b) => a.offset < b.offset ? -1 : a.offset > b.offset ? +1 : 0)
responseData.matches.sort((a, b) => a.offset < b.offset ? +1 : a.offset > b.offset ? -1 : 0);
responseData.matches.forEach(match => { responseData.matches.forEach(match => {
let range = document.createRange() let range = document.createRange()
@ -93,7 +94,14 @@ async function besCheckText(el)
const span = document.createElement('span') const span = document.createElement('span')
span.classList.add('typo-mistake') span.classList.add('typo-mistake')
//range.insertNode(span)
// 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)
}) })
}) })
.catch(error => { .catch(error => {