diff --git a/index.html b/index.html index 4cd2bcc..98aaff7 100644 --- a/index.html +++ b/index.html @@ -8,8 +8,7 @@ -
Lorem ipsum dolor sit amet consectetur adipisicing elit. -Tole je nov paragraf
+
diff --git a/online-editor.js b/online-editor.js index 1d41035..54b9881 100644 --- a/online-editor.js +++ b/online-editor.js @@ -1,33 +1,66 @@ window.onload = () => { const btnCheck = document.getElementById('btn-check') 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() { const textArea = document.getElementById('besana-editor') - const textAreaValue = textArea?.textContent - console.log(textAreaValue) - const paragraphs = separateParagraphs(textAreaValue) - console.log(paragraphs) + const textAreaContent = textArea?.innerHTML + const text = createFirstParagraph(textAreaContent) + const paragraphs = separateParagraphs(text) const modifiedParagraphs = paragraphs.map(paragraph => mockSpellChecker(paragraph) ) console.log(modifiedParagraphs) - textArea.innerHTML = modifiedParagraphs.join('\n') + textArea.innerHTML = modifiedParagraphs.join('') } function separateParagraphs(text) { - return text.split('\n') + let paragraphs = text.match(/
.*?<\/div>/g) + return paragraphs } function mockSpellChecker(text) { - const words = text.split(' ') - const specificWords = ['Tole', 'nov', 'dolor'] + const specificWords = ['Tole', 'nov', 'test'] + const words = text.split(/(?=<)|(?<=\>)|\s/g).filter(word => word !== '') const modifiedWords = words.map(word => { - if (specificWords.includes(word)) { + const wordWithoutTags = word.replace(/<[^>]*>/g, '') + if (specificWords.includes(wordWithoutTags)) { 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 = /]*>/i + const firstDiv = text.match(divRegex) + if (!firstDiv) return `
${text}
` + const slicedText = text?.slice(0, firstDiv.index) + const firstParagraph = `
${slicedText}
` + const newText = firstParagraph + text.slice(firstDiv.index) + return newText } diff --git a/styles.css b/styles.css index 26d2b0f..26da519 100644 --- a/styles.css +++ b/styles.css @@ -7,7 +7,6 @@ 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;