How to get the selected text

[WuShengXi]

How to get the selected text

[justokay]

@WuShengXi https://stackoverflow.com/a/35503426

[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