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> <script src="online-editor.js"></script>
</head> </head>
<body> <body>
<textarea id="besana-editor"> <div id="besana-editor" class="online-editor" contenteditable="true">Lorem ipsum dolor sit amet consectetur adipisicing elit.
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! Tole je nov paragraf</div>
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 <button id="btn-check">Preveri txt</button>
>
</body> </body>
</html> </html>

34
online-editor.js
View File

@ -1,5 +1,33 @@
window.onload = () => { window.onload = () => {
const textArea = document.getElementById('besana-editor') const btnCheck = document.getElementById('btn-check')
const textAreaValue = textArea.value btnCheck.addEventListener('click', checkText)
console.log(textAreaValue) }
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 { /* Besana online editor */
width: 100%; .online-editor {
height: 100%; 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 */ /* Mistake types styles */
.typo-mistake { .typo-mistake {
text-decoration: underline; text-decoration: underline;
text-decoration-color: red; text-decoration-color: red;
cursor: pointer;
position: relative;
z-index: 3;
} }
.other-mistake { .other-mistake {