emoji-picker icon indicating copy to clipboard operation
emoji-picker copied to clipboard

Initialize with multiline text

Open k-timoshenko opened this issue 7 years ago • 1 comments

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);

k-timoshenko avatar Oct 31 '17 10:10 k-timoshenko

add this css to fix:

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

👍

ered15 avatar Jun 28 '18 23:06 ered15