Feature request to allow setting of cursor position

[Gautam Jain]

The Xamarin RichTextEditor used to support CursorPosition which is missing in  MAUI and Blazor RichTextEditor.

Request you to add this property to Get and Set Cursor position please.

In my app, I allow the user to surround the words with markdown formatting. After formatting, I need to set the cursor to the position where the user can start typing or editing. I am unable to do it MAUI and Blazor RichTextEditor.

Kindly add this property.

[Vinitha Jeyakumar]

Hi Gautam,

Currently, the RichTextEditor component does not have support for setting and getting cursor position. However, we have considered this requirement as a feature request. Now you can track the status of the feature in the below feedback link.

Feedback: https://www.syncfusion.com/feedback/74347/support-for-get-set-cursor-position-in-blazor-richtexteditor

The above feature will be implemented in any one of the future volume releases. Generally, we will plan the feature implementation based on the customer request count, feature rank, and wishlist plan. You can upvote the feature request feedback so that it gets support and will be ranked higher for implementation.

We have made a workaround solution to solve this requirement until then. In the sample, we have used the JSInterop to set the cursor position. Please find the below sample for your reference.

Code snippet:

Index.razor

@using Syncfusion.Blazor.RichTextEditor;

@inject IJSRuntime JS

<SfRichTextEditor ID="defaultRTE" @ref="RteObj">

    <p>The Rich Text Editor is WYSIWYG ('what you see is what you get') editor useful to create and edit content, and return the valid <a rel='nofollow' rel='nofollow' href='https://ej2.syncfusion.com/home/' target='_blank'>HTML markup</a> or <a rel='nofollow' rel='nofollow' href='https://ej2.syncfusion.com/home/' target='_blank'>markdown</a> of the content</p><p id='key'><b>Key features:</b></p>

    <ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes</p></li><li><p>Capable of handling markdown editing.</p></li><li><p>Contains a modular library to load the necessary functionality on demand.</p></li><li><p>Provides a fully customizable toolbar.</p></li></ul>

</SfRichTextEditor>

<button @onclick="SetCursor">Set Cursor</button>

@code {

    private SfRichTextEditor RteObj;

    private async Task SetCursor()

    {       

        await JS.InvokeVoidAsync("setCursorInsideElement");

    }

}

App.razor:

 <script>

    window.setCursorInsideElement = () => {       

           var rteInstance = window.sfBlazor.getCompInstance('defaultRTE');

            var element = rteInstance.inputElement.querySelector('#key');

            var range = document.createRange();

            range.setStart(element, 1);          rteInstance.formatter.editorManager.nodeSelection.setRange(document, range);

        };

</script>

Regards,

Vinitha

Attachment: SyncfusionBlazorRTE_f22d86e3.zip