Editor Cursor moves back to current position when inserting some html tags.

[ruchi-bravvox]

I am using react(Typescript ), I am trying to insert manually emoji by using img tag into editor. it is working but sometimes cursor goes to back of current position. Here is my code:

handleEditorChange=()=>{ const imgtag = <img style="width: 1em; height: 1em; margin: 0 .05em 0 .1em; vertical-align: -.1em;" src="https://cdn.jsdelivr.net/npm/emoji-datasource-apple@6.0.1/img/apple/64/${found[0].unified}.png"/> value = value.replace(found[0].text + " ", imgtag) if (editorRef) { editorRef.current?.editor.execCommand('mceInsertContent', false, imgtag); } const trimValue = value !== ' ' ? value : value.trim(); setCommentText(trimValue); }

<Editor ref={editorRef} id={id} apiKey={config.EDITOR_API_KEY} value={value} disabled={disabled} init={{ plugins: 'autoresize autolink image code fullscreen lists paste emoticons', branding: false, paste_as_text: true, menubar: false, statusbar: false, toolbar: false, // height: 34, inline_boundaries: false, autoresize_bottom_margin: 0, autoresize_overflow_padding: 0, content_css: ['//fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap', '/tinymceEditor.css'], placeholder: placeholder, smart_paste: true, font_formats: "DM Sans", content_style: "body {color: #141419; font-size: 14px; font-family: 'DM Sans',sans-serif; } .mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {color: #A6A6A6;}", paste_preprocess: function (pl: any, o: any) { const charCount = calculateLength(o.target.contentDocument.body.innerHTML); const remainingCharCount = maxLength - charCount; if (remainingCharCount < o.content.length) { o.content = o.content.substring(0, remainingCharCount); } }, emoticons_database: 'emojiimages', emoticons_images_url: 'https://cdn.jsdelivr.net/npm/emoji-datasource-apple@6.0.1/img/apple/64/' }} onEditorChange={handleEditorChange} />

      How to solve this issue, please get update ASAP.