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

12
online-editor.js
View File

@ -62,7 +62,8 @@ async function besCheckText(el)
return response.json()
})
.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 => {
let range = document.createRange()
@ -93,7 +94,14 @@ async function besCheckText(el)
const span = document.createElement('span')
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 => {