jmadler / emoji-picker

Add a slick emoji selector to input fields and textareas on your website.
Other
1.31k stars 318 forks source link

Initialize with multiline text #87

Open k-timoshenko opened 6 years ago

k-timoshenko commented 6 years ago

Hi. Steps to reproduse:

  1. Create new emojiarea for new post/comment/etc
  2. Enter multiline text -> it would be with linebreaks
  3. Create emojiarea for editing this post/comment/etc -> all new lines will be ignored.

EmojiPicker.prototype.appendUnicodeAsImageToElement generates content for contenteditable block, but it ignores new line separators and don't allow to pass already prepared (with \<div> or \<br>) content becouse of val = document.createTextNode(text);

Is there any way to initialize emojipicker on existed multiline text?

I can suggest such solution. Create buffer textWithImages variable, don't use document.createTextNode and use regexp to replace new lines with \<div> (I use \<div> because editor by default use it for new lines)

    split_on_unicode = input.split(Config.rx_codes)
    textWithImages = ''
    for text in split_on_unicode
      val = ''
      if Config.rx_codes.test(text)
        val = Config.reversemap[text]
        if val
          val = ':' + val + ':'
          val = $.emojiarea.createIcon($.emojiarea.icons[val])
      else
        val = text
      textWithImages += '' + val;
    textWithImages += '\n';
    textWithImages = textWithImages.replace(/\n+$/g, '\n')
    textWithImages = textWithImages.replace(/(.*)\n/g, '<div>$1</div>')
    element.append(textWithImages);
ered15 commented 6 years ago

add this css to fix:

.emoji-wysiwyg-editor{ white-space: pre-wrap; }

👍