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

Improve paragraph splitting logic

Browse Source
This commit is contained in:
Aljaž Grilc 2024-01-29 14:18:16 +01:00
parent f733f73509
commit db9785744f
3 changed files with 44 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@ -8,8 +8,7 @@
<script src="online-editor.js"></script> <script src="online-editor.js"></script>
</head> </head>
<body> <body>
<div id="besana-editor" class="online-editor" contenteditable="true">Lorem ipsum dolor sit amet consectetur adipisicing elit. <div id="besana-editor" class="online-editor" contenteditable="true"></div>
Tole je nov paragraf</div>
<button id="btn-check">Preveri txt</button> <button id="btn-check">Preveri txt</button>
</body> </body>
</html> </html>

53
online-editor.js
View File

@ -1,33 +1,66 @@
window.onload = () => { window.onload = () => {
const btnCheck = document.getElementById('btn-check') const btnCheck = document.getElementById('btn-check')
btnCheck.addEventListener('click', checkText) btnCheck.addEventListener('click', checkText)
const textArea = document.getElementById('besana-editor')
let timerId = null
// textArea.addEventListener('focus', () => {
// timerId = setTimeout(checkText, 2000)
// })
// textArea.addEventListener('input', () => {
// clearTimeout(timerId)
// timerId = setTimeout(checkText, 2000)
// })
} }
function checkText() { function checkText() {
const textArea = document.getElementById('besana-editor') const textArea = document.getElementById('besana-editor')
const textAreaValue = textArea?.textContent const textAreaContent = textArea?.innerHTML
console.log(textAreaValue) const text = createFirstParagraph(textAreaContent)
const paragraphs = separateParagraphs(textAreaValue) const paragraphs = separateParagraphs(text)
console.log(paragraphs)
const modifiedParagraphs = paragraphs.map(paragraph => const modifiedParagraphs = paragraphs.map(paragraph =>
mockSpellChecker(paragraph) mockSpellChecker(paragraph)
) )
console.log(modifiedParagraphs) console.log(modifiedParagraphs)
textArea.innerHTML = modifiedParagraphs.join('\n') textArea.innerHTML = modifiedParagraphs.join('')
} }
function separateParagraphs(text) { function separateParagraphs(text) {
return text.split('\n') let paragraphs = text.match(/<div>.*?<\/div>/g)
return paragraphs
} }
function mockSpellChecker(text) { function mockSpellChecker(text) {
const words = text.split(' ') const specificWords = ['Tole', 'nov', 'test']
const specificWords = ['Tole', 'nov', 'dolor'] const words = text.split(/(?=<)|(?<=\>)|\s/g).filter(word => word !== '')
const modifiedWords = words.map(word => { const modifiedWords = words.map(word => {
if (specificWords.includes(word)) { const wordWithoutTags = word.replace(/<[^>]*>/g, '')
if (specificWords.includes(wordWithoutTags)) {
return `<span class="typo-mistake">${word}</span>` return `<span class="typo-mistake">${word}</span>`
} }
return word return word
}) })
return modifiedWords.join(' ')
// This is necessary to remove spaces between opening and closing tags
// TODO: improve this or find a better way to do it
return modifiedWords
.map((word, index) => {
if (index === 0 || index === 1 || index === modifiedWords.length - 1) {
return word
}
return ' ' + word
})
.join('')
}
function createFirstParagraph(text) {
const divRegex = /<div\b[^>]*>/i
const firstDiv = text.match(divRegex)
if (!firstDiv) return `<div>${text}</div>`
const slicedText = text?.slice(0, firstDiv.index)
const firstParagraph = `<div>${slicedText}</div>`
const newText = firstParagraph + text.slice(firstDiv.index)
return newText
} }

1
styles.css
View File

@ -7,7 +7,6 @@
border-radius: 10px; border-radius: 10px;
background-color: #f5f5f5; background-color: #f5f5f5;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
font-family: 'Courier New', Courier, monospace;
line-height: 1.6; line-height: 1.6;
white-space: pre-wrap; white-space: pre-wrap;
overflow-y: auto; overflow-y: auto;