Open mxdldev opened 6 years ago
Just a note, this is not an EditText but a Webview
This might help https://stackoverflow.com/questions/6900408/get-cursor-position-in-android-in-edit-text
Here's how I am highlighting the button which we are using to select any style
Step 1: Move the cursor to the end of the text when the user clicks on the editor To ensure the cursor is positioned at the end of the text in the editor, use the following code:
-> richTextEditor?.let { it.post { it.focusEditor() it.loadUrl("javascript:document.execCommand('selectAll', false, null); document.getSelection().collapseToEnd();") } }
Step 2: Extract and display the tags at the end of the editor's content if any input is already present a) Extract the list of tags present at the end:
The function below extracts the tags from the end of the editor's content:
-> private suspend fun getLastClosedTags(richEditor: RichEditor?): MutableList
withContext(Dispatchers.IO) {
var richTextSize = richString.length - 1
var isClosingTagFound = false
var tagString = ""
while (richTextSize >= 0) {
val currentChar = richString[richTextSize]
if (!isClosingTagFound && currentChar == '>') {
isClosingTagFound = true
} else if (isClosingTagFound && currentChar == '<') {
tagList.add(tagString.reversed())
isClosingTagFound = false
tagString = ""
} else if (currentChar.isLetter()) {
if (isClosingTagFound) {
tagString += currentChar
} else {
break
}
}
richTextSize -= 1
}
}
return tagList
}
b) Parse the list and display the corresponding buttons:
Once the tags are extracted, use them to update the UI and highlight the relevant formatting buttons.
3) Step 3: Handle user clicks at different positions in the editor using the onDecorationChangeListener You can use onDecorationChangeListener to detect the selected tags and update the button states accordingly:
-> private fun setupDecorationChangeListener(richEditor: RichEditor?) {
richEditor?.setOnDecorationChangeListener { _, types ->
findViewTreeLifecycleOwner()?.lifecycleScope?.launch(Dispatchers.Main) {
var tagsList: MutableList
withContext(Dispatchers.IO) {
for (i in types) {
when (i.toString().lowercase()) {
"bold" -> {
tagsList.add("b")
}
"italic" -> {
tagsList.add("i")
}
"underline" -> {
tagsList.add("u")
}
"unorderedlist" -> {
tagsList.add("ul");
tagsList.remove("ol")
}
"orderedlist" -> {
tagsList.add("ol")
}
}
}
}
setTheRichLayoutStyle(tagsList)
}
}
}
to get the list of tags again and set the style of the button
Step 4: Maintain focus at the last character when the keyboard is opened When the keyboard opens for the first time, ensure the editor is focused at the end of the text. This behavior is already covered in Step 1, so no additional code is required here.
Let me know if you'd like further clarifications
How do I get the cursor's position?