Determine the exact index of the selected text

[Aron Ko]

Hi. In RichTextEditor, I am using the GetSelectionAsync(); method to get the selected text and save this selection to a variable. Then I do some actions with this selected text which is saved in the variable. Then I use the IndexOf method. The problem is that the IndexOf method always returns the index of the first occurrence of the substring in the string. If there are several same phrases in the text, IndexOf will always point to the first one, which causes problems when I try to apply customizations to subsequent same phrases. I need something that can determine the exact index of the selected fragment to identify exactly which piece of text the user wanted to select.

Thank you.


public async Task ApplyChanges()
{
    string selectedText = await RteObj.GetSelectionAsync();
    if (!string.IsNullOrEmpty(selectedText))
    {
        string fullText = await RteObj.GetTextAsync();
        int startIndex = fullText.IndexOf(selectedText);
        if (startIndex >= 0)
        {
            var existingSelection = selectedTextInfos.FirstOrDefault(x => x.Text == selectedText && x.StartIndex == startIndex);
            if (existingSelection != null)
            {
                if (isPitChanged)
                {
                    existingSelection.AddOrUpdateProperty("pit", $"{sliderValuePit}");
                }
                if (isRatChanged)
                {
                    existingSelection.AddOrUpdateProperty("rat", $"{sliderValueRat}");
                }
                
            }
            else
            {
                var newSelection = new TextSelection(selectedText, startIndex, selectedText.Length);
                if (isPitChanged)
                {
                    newSelection.AddOrUpdateProperty("pit", $"{sliderValuePit}");
                }
                if (isRatChanged)
                {
                    newSelection.AddOrUpdateProperty("rat", $"{sliderValueRat}");
                }
                
                selectedTextInfos.Add(newSelection);
            }
            isPitChanged = false;
            isRatChanged = false;
        }
    }
}

[Vinitha Jeyakumar]

Hi Aron Ko,

You can get the range and selection of the selected text in the RichTextEditor using jsInterop like below,

Code snippet:

Index.razor

@using Syncfusion.Blazor.RichTextEditor

@inject IJSRuntime jsRuntime

<button @onclick="Click">GetIndex</button>

<SfRichTextEditor @ref="rteObj">

   

    <p>Rich Text Editor is a WYSIWYG editing control which will reduce the effort for users while trying to express their formatting word content as HTML or Markdown format.</p>

    <p><b>Paste Cleanup properties:</b></p>

    <ul>

        <li><p>prompt - specifies whether to enable the prompt when pasting in Rich Text Editor.</p></li>

    </ul>  

   

</SfRichTextEditor>

@code {

    SfRichTextEditor rteObj;

    public async Task Click()

    {

        await jsRuntime.InvokeAsync<object>("accessDOMElement");

    }

}

Host.cshtml

function accessDOMElement() {

    var selection = window.getSelection();

    if (selection.rangeCount > 0) {

        var range = selection.getRangeAt(0);

        console.log('Selected text:', range.toString());

        console.log('Start offset:', range.startOffset);

        console.log('End offset:', range.endOffset);

        console.log('Start container:', range.startContainer);

        console.log('End container:', range.endContainer);

    } else {

        console.log('No text selected.');

    }

 

}

Regards,

Vinitha