banyan / react-emoji

An emoji mixin for React
MIT License
197 stars 40 forks source link

URLs get processed too #1

Closed akx closed 9 years ago

akx commented 9 years ago

The :/ pattern is matched in "http://foo", so the output is something like "http :frowning: /foo".

Would there be an easy way to fix this?

banyan commented 9 years ago

Hi @akx!

I use with react-autolink in my case, so first convert url to link, then convert if it matches with emoji annotation or emoticon.

  mixins: [
    ReactAutolink,
    ReactEmoji
  ],

  renderMessage: function(contents) {
    return _.flatten(
      this.autolink(contents, {target: "_blank"}).map(function(content) {
        if (React.isValidElement(content)) {
          return content;
        } else {
          return this.emojify(content);
        }
      }.bind(this))
    );
  },

  render: function() {
    return this.renderMessage(this.props.text)); 
  }

Aside from this solution, I feel I may remove :/ from dictionary, https://github.com/banyan/emoji-emoticon-to-unicode/blob/master/emoji-emoticon-to-unicode.js#L94

What do you think?

akx commented 9 years ago

For the time being, I ended up just disabling emoticons altogether, which is fine for my use case -- I really only need support for annotations anyway. Also, hey, react-autolink looks neat! I was looking for something like that, but ended up just writing my own, actually the other way around wrt react-emoji:

function formatText(text) {
    var content = [];
    if(!_.isString(text)) return [];
    _.each(text.split("\n"), function(line, index) {
        line = _.trim(line);
        if(line && line.length) {
            content.push(_.map(ReactEmoji.emojify(line, {useEmoticon: false}), function(bit, index) {
                if(_.isString(bit)) {
                    if(urlRegexp.test(bit)) {
                        bit = <a href={bit} target="_blank" key={"u" + index}>{ellipsize(bit, 40)}</a>;
                    }
                }
                return bit;
            }));
            content.push(<br key={index}/>);
        }
    });
    return content;
}

And thanks for your work on react-emoji!

warpech commented 9 years ago

is there a way to remove :/ from dictionary in config/runtime?

banyan commented 9 years ago

@akx Sorry for the late reply! Thank you, too! :smile:

@warpech My friend told me an good idea to use negated lookahead for :/. I'll apply soon (sorry I'm a bit busy today).