Bug: toggle buttons don't show their state, and don't always change

[AndroidDeveloperLB]

Clicking on any of the toggle buttons (bold, italic, underline...), it doesn't always change to a new mode, and it doesn't have an indication that it's enabled or not. Examples:

1. If I type "Hel", and then enable underline, and continue typing "lo", it doesn't underline the "lo". If I continue typing on the next word, it doesn't underline it either
2. pressing on any of the toggle buttons, anytime, doesn't change their visual state, to show they are checked/unchecked.

See attached video: device-2018-02-26-101657.zip

[ShikherVerma]

Encountered the same problem. @AndroidDeveloperLB did you manage to fix it?

[AndroidDeveloperLB]

@ShikherVerma I decided to use a slightly better library. Not perfect at all, but better: https://github.com/1gravity/Android-RTEditor

[lixinxinlove]

这个问题谁解决了？

[gaurav9359]

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<String> { val tagList: MutableList<String> = mutableListOf() val richString = richEditor?.html ?: return tagList

    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<String> = mutableListOf()

            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