Emoji research fails on specific string

[benoitkopp]

Hi all,

here is the code of my component, based on the examples:

import React from "react";

import ReactTextareaAutocomplete from "@webscopeio/react-textarea-autocomplete";
import emoji from "@jukben/emoji-search";

import sort from 'match-sorter';

const ItemCategories = ({ entity: { name } }) => <div>{`#${name}`}</div>;
const ItemUsers = ({ entity: { username, full_name } }) => <div><b>{`@${username}`}</b> - {`${full_name}`}</div>;
const ItemEmojis = ({ entity: { name, char } }) => <div>{`${char} ${name}`}</div>;

export default function TextAreaAutoComplete({ Categories, Users, label, updateLabel }) {
  return (

    <ReactTextareaAutocomplete
        id="textareaSendMemo"
        className="form-control p-2"
        value={label}
        onChange={updateLabel}
        placeholder="Ecrivez votre mémo..."
        loadingComponent={() => <span>Loading</span>}
        trigger={{
          "#": {
            dataProvider: token => {
              let categories = Object.values(Categories)
                  .map(({ raw_name, name }) => ({ raw_name, name }));
              console.log(categories);
              return sort(categories, token, {keys: ['raw_name']});
            },
            component: ItemCategories,
            output: (item, trigger) => '#' + item.name
          },
          "@": {
            dataProvider: token => {
              let users = Object.values(Users)
                  .map(({ username, full_name }) => ({ username, full_name }));
              return sort(users, token, {keys: ['username', 'full_name']});
            },
            component: ItemUsers,
            output: (item, trigger) => '@' + item.username,
          },
          ":": {
            dataProvider: token => {
              return emoji(token)
                .slice(0, 8)
                .map(({ name, char }) => ({ name, char }));
            },
            component: ItemEmojis,
            output: (item, trigger) => item.char
          }
        }}
        closeOnClickOutside={true}
        movePopupAsYouType={true}
        itemClassName="rta-item"
        dropdownClassName="rta-dropdown"
    />
  );
}

The component is great but i just discovered that when i type ":ls" to research an emoji, it crashes with the following error:

RTA: dataProvider fails: textToReplace is null Check the documentation or create issue if you think it's bug. https://github.com/webscopeio/react-textarea-autocomplete/issues index.js:2178 TypeError: textToReplace is null

Other question:

How do i remove the space of the "next" caretPosition of the ouput ? I don't figure it out, even with the docs.

Thanks in advance,

Best regards.

[jukben]

Hi! Thanks for an excellent issue. I was able to track it down in within of minutes.

Let's start with the less obvious question.

1)

How do i remove the space of the "next" caretPosition of the output? I don't figure it out, even with the docs.

I hope you are looking for caretPosition. Is it correct? Was it this part Readme not obvious? Do you have an idea how to make it better, I would appreciate PR.

output: (item, trigger) => ({
  text: item.char,
  caretPosition: "end"
})

This should make a trick.

2) The message was because :ls was about to return {name: "feelsgood", char: null} object. As you can see the char is null that was the problem. But I will make a more obvious message for such a behavior. In the meanwhile, I've already released @jukben/emoji-search (1.1.5) with actualized emojilib dependency.

I have released new version which reports this issue more clear @webscopeio/react-textarea-autocomplete 2.1.1

[benoitkopp]

Hi! Thanks for the fast reply !

It was exactly what i was looking for the caretPosition ! For the docs, i didn't understand the syntax used in the "Trigger type" part but your example here is perfect.

About the emoji research, I tested :fs and you're right, it crashed too. But i'm not sure that you looked about :ls.

Can i get the new release with a simple npm install ?

Thanks in advance and thanks for the fast work :)

[jukben]

I'm glad, that it helped.

It's probably typo I was able to reproduce it just with :ls, :fs is fine for me.

:ls will match {name: "feelsgood", char: null} which is wrong, because char has to return "string" which is unique, if not you have to provide also key which has to be unique then.

You can update https://www.npmjs.com/package/@jukben/emoji-search to avoid such a null emojis.

If you update react-textarea-autocomplete you will get nice info about it.

I'm closing this, but let's continue, if it's something sill unclear.

[benoitkopp]

Works like charm, thanks a lot.