Detect the style enabled

[rbcodes]

I want to let the user know if Bold or Italic or any other style is currently active. Switching the states of style on button press can achieved. But when the user erases content, the preceding style is activated by default and there is no way to detect it.

Ex : Bold Text Normal text. Now if I delete the Normal Text, the old style that is bold will be activated. Bold Tex There is no way I can detect the current style and let the user know that bold is now active again.

[conciloorbis]

we can change background colour of button when clicking button by using it we can identify which style is active.

[walid-ashik]

but how can we deselect that button or restore that color if user chooses other style? Thanks

[Albert-Jan]

Looking for the same thing. Did you manage to figure it out?

[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