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

Implement basic spell checking functionality

Browse Source
This commit is contained in:
Aljaž Grilc 2024-01-29 11:04:39 +01:00
parent 93d3dbfd8f
commit f733f73509
3 changed files with 50 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
index.html
View File

@ -8,9 +8,8 @@
<script src="online-editor.js"></script>
</head>
<body>
<textarea id="besana-editor">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo eaque magnam, alias sed consequatur officia ullam aspernatur laborum nostrum autem rerum? Eveniet quam placeat, minus magni nihil temporibus asperiores ipsa!
Nov odstavek lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam harum quis suscipit, culpa eius voluptatibus eaque, perferendis pariatur illo, est quos sit incidunt quia possimus delectus ea aperiam eum sint?</textarea
>
<div id="besana-editor" class="online-editor" contenteditable="true">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Tole je nov paragraf</div>
<button id="btn-check">Preveri txt</button>
</body>
</html>

34
online-editor.js
View File

@ -1,5 +1,33 @@
window.onload = () => {
const textArea = document.getElementById('besana-editor')
const textAreaValue = textArea.value
console.log(textAreaValue)
const btnCheck = document.getElementById('btn-check')
btnCheck.addEventListener('click', checkText)
}
function checkText() {
const textArea = document.getElementById('besana-editor')
const textAreaValue = textArea?.textContent
console.log(textAreaValue)
const paragraphs = separateParagraphs(textAreaValue)
console.log(paragraphs)
const modifiedParagraphs = paragraphs.map(paragraph =>
mockSpellChecker(paragraph)
)
console.log(modifiedParagraphs)
textArea.innerHTML = modifiedParagraphs.join('\n')
}
function separateParagraphs(text) {
return text.split('\n')
}
function mockSpellChecker(text) {
const words = text.split(' ')
const specificWords = ['Tole', 'nov', 'dolor']
const modifiedWords = words.map(word => {
if (specificWords.includes(word)) {
return `<span class="typo-mistake">${word}</span>`
}
return word
})
return modifiedWords.join(' ')
}

19
styles.css
View File

@ -1,12 +1,25 @@
#besana-editor {
width: 100%;
height: 100%;
/* Besana online editor */
.online-editor {
width: 80%;
height: 300px;
margin: 0 auto;
padding: 20px;
border-radius: 10px;
background-color: #f5f5f5;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
font-family: 'Courier New', Courier, monospace;
line-height: 1.6;
white-space: pre-wrap;
overflow-y: auto;
}
/* Mistake types styles */
.typo-mistake {
text-decoration: underline;
text-decoration-color: red;
cursor: pointer;
position: relative;
z-index: 3;
}
.other-mistake {