0

So, I'm developing an electron port of a messaging service's webpage. The page doesn't offer emoji's yet, so I'm creating a system that will parse over the textbox's content and replace configured emoji strings with the emoji. However, I've run into an issue. Whenever the emoji is replaced, the cursor returns back to the start of the div

Now, I've looked all over the internet trying to solve the issue. I know about $(elem).focus() / its vanilla counterpart method. But, the issue I have is that the page defines the element as a div, and sets the div's role to a textbox. Meaning, the element isn't inherently an input so it doesn't inherent the default functions / events that inputs do. I designed the app to be completely backgrounded- which just means I don't want to have to edit the core HTML upon pageload.

You can view the div element here:

$(window).on('keyup', function(e) {
  // if the key isn't enter, we will continue
  if (!(e.key === 'Enter')) {
    // we'll grab the focused element 
    let focus = $(":focus");
    // cross reference the element's class to make sure it's the proper text box
    if (focus.attr('class') == "euyIb") {
      // now let's grab our focus text value
      let text = focus.text();
      // now we're going to get a count of special characters in the string
      let count = (text.split(":").length - 1);
      // if there's two of our special chars in the string, assume there may be an emoji to replace
      if (count >= 2) {
        // create an array of emojis in the string
        let contains = [];
        // loop over all of the emojis configured and check if they're in the string
        for (emoji in replaceables) {
          let target = replaceables[emoji];
          if (text.includes(`:${target.name}:`)) {
            contains.push({
              name: `:${target.name}:`,
              emoji: target.emoji
            });
          }
        }

        for (inst in contains) {
          let item = contains[inst];
          $(":focus").text(text.replace(item.name, item.emoji));
          // then here we should reset the cursor to the end
        }
      }
    }
  }
});
<div role="textbox" dir="auto" class="euyIb" contenteditable="true" placeholder="Send a chat" style="caret-color: rgb(242, 60, 87);" id="enter-box">hi </div>

Any way to alleviate this issue without having to change div.euyIb's core code on preload would be greatly appreciated.

SpecifiesDev
  • 1
  • 2
  • Where is `replaceables` defined? You [should not iterate over an array with `for...in`](https://stackoverflow.com/q/500504/215552) – Heretic Monkey Sep 22 '22 at 22:42
  • The array was defined outside of the keyup event. I don't plan on using an array once I get the functionality built. It will be dynamically loaded from a local server to allow the user to add emojis without having to reload their client. jQuery is also imported outside using node integration. Besides that, the issue I'm having is trying to move the cursor. Also as mentioned prior, the html on this page is from the loaded page. I don't want to have to edit it via jquery, potentially breaking the page's functionality. – SpecifiesDev Sep 22 '22 at 22:55
  • Well, when I click Run code snippet and type text into the field, the cursor behaves as I expect. – Heretic Monkey Sep 22 '22 at 22:57
  • You added jQuery to the html. Jquery is imported via node integration. I want the cursor in the text box to go to the end. The issue I am having is that, all of the solutions I see on the web involve methods // events inherited by the input method. The element is a div, with a set role as textbox. This prevents me from being able to change the cursor position to the end of the string. I need a method outside of having to alter the HTML code (as the page is being dynamically rendered from website I don't control) – SpecifiesDev Sep 22 '22 at 23:02
  • To demonstrate where I want the text cursor to go, I want it to go back to the end of the string. Where the arrow points to. https://gyazo.com/8839eddd886e6f5c9e4406969a925c2c – SpecifiesDev Sep 22 '22 at 23:05

1 Answers1

0

For anyone that is looking for an answer for this, there is no straightforward one absent of deleting the element and replacing it with an input element. This is simply due to the fact that in order to change cursor position you need the inherent functions / datasets.

My solution was creating a hotkey that the user could use to format the string once they're ready. So instead of dynamically doing it, once the user is ready to send the message they press ctrl+alt+e and it formats every emoji in the string.

SpecifiesDev
  • 1
  • 2