Tui.editor: Emoticon-picker plugin

[Niolak]

Hello!

My team needs an emoticon-picker so we are going to create a plugin.

• First of all, I'm surprised it does not exist yet. Do you confirm no such plugin exists?
• I think it's a usual use case so we wonder if we should create a new project or if you would accept a pull request for a new official plugin in this repository. What do you think?
• We know the version 3 is in progress and will change the way plugins are developed. But I haven't found any information about the release date of the version 3 : do you confirm that version 3 will not be available before February so we should develop this plugin for version 2 if we want it to be in production at the end of February?

[seonim-ryu]

@Niolak Nice to hear you are interested in making the Editor's plugin! We discussed this, but it seems difficult for version 3 to be released within the schedule you mentioned. And there is a plugin management issue, so it would be better to create a new project and manage it as you said.

if we should create a new project ...

The example below is a plugin project that someone made a while ago, and I think you can develop it like this.

https://www.npmjs.com/package/tui-font-size-picker

If you make it as a personal project, I think you can fork it from the current version 2.

[Niolak]

Thank you for the answer! We'll do that and I'll share the plugin here after then.

[stale[bot]]

This issue has been automatically marked as inactive because there hasn’t been much going on it lately. It is going to be closed after 7 days. Thanks!

[stale[bot]]

This issue will be closed due to inactivity. Thanks for your contribution!

[mananjadhav]

I recently came across tui.editor for one of my projects. I've created a very basic emoji plugin. Might help somebody in the future.

import { Picker } from 'emoji-picker-element';

export default function editorEmojiPlugin(editor, options = {}) {
  const toolbarItems = editor.options.toolbarItems;
  let emojiIndex = toolbarItems.indexOf('emoji');

  let emojiTriggerChar = options.emojChar ? options.emojChar : ':';

  if (!editor.isViewer() && emojiIndex > -1) {
    const toolbar = editor.getUI().getToolbar();
    editor.eventManager.addEventType('emojiButtonClicked');

    const button = document.createElement('button');
    button.className = 'custom-button';
    button.innerHTML =
      '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm5.507 13.941c-1.512 1.195-3.174 1.931-5.506 1.931-2.334 0-3.996-.736-5.508-1.931l-.493.493c1.127 1.72 3.2 3.566 6.001 3.566 2.8 0 4.872-1.846 5.999-3.566l-.493-.493zm-9.007-5.941c-.828 0-1.5.671-1.5 1.5s.672 1.5 1.5 1.5 1.5-.671 1.5-1.5-.672-1.5-1.5-1.5zm7 0c-.828 0-1.5.671-1.5 1.5s.672 1.5 1.5 1.5 1.5-.671 1.5-1.5-.672-1.5-1.5-1.5z"/></svg>';

    const { index = emojiIndex } = options;
    toolbar.insertItem(index, {
      type: 'button',
      options: {
        name: 'emoji',
        className: 'emoji',
        event: 'emojiButtonClicked',
        tooltip: 'Emoji',
        el: button
      }
    });

    const wrap = document.createElement('div');
    wrap.className = 'popup-emojis';

    const picker = new Picker();
    picker.addEventListener('emoji-click', (event) => {
      editor.insertText(`${event.detail.emoji.unicode}`);
    });
    picker.style = `width: 100%; height: auto;`;
    wrap.appendChild(picker);

    const popup = editor.getUI().createPopup({
      header: false,
      title: null,
      content: wrap,
      className: 'tui-editor-popup',
      target: editor.getUI().getToolbar().el
    });

    editor.eventManager.listen('focus', () => {
      popup.hide();
    });

    editor.eventManager.listen('emojiButtonClicked', () => {
      if (popup.isShow()) {
        popup.hide();

        return;
      }

      editor.eventManager.emit('closeAllPopup');
      popup.show();
    });

    editor.eventManager.listen('closeAllPopup', () => {
      popup.hide();
    });

    editor.eventManager.listen('removeEditor', () => {
      popup.remove();
    });
  }
}

[Niolak]

We have fallen behind in our project and the emoticon-picker has been deprioritised.
Thank you mananjadhav for this code which will also be useful when we put emoticons back in our roadmap!