Cursor jumps to next line when first emoji is selected via enter

[sebastian-walter]

Hi there,

I encountered following behaviour: When selecting an emoji via the popover and the first one is selected without clicking tab, the cursor jumps in the next line instead of staying at the same one.

I am using quill-emoji together with vue2-editor:

  import { Quill, VueEditor } from 'vue2-editor';

  Quill.register('modules/quill-emoji', Emoji);

  const toolbarOptions = {
    container: [
      ['emoji'],
    ],
    handlers: {
      emoji() {
      },
    },
  };
  export default {
    name: 'CommentEditor',
    components: { VueEditor },
    data() {
      return {
        editorSettings: {
          modules: {
            toolbar: toolbarOptions,
            toolbar_emoji: true,
            short_name_emoji: true,
          },
        },
        text: null,
      };
    },
};

Thanks for the help!
Sebastian

[dineshsuthar92]

Hey, how did you produce that output in vuejs ? I just copied same code from your but it is giving me error in console,
Uncaught ReferenceError: Emoji is not defined at Object.<anonymous> (app.js:119316) at __webpack_require__ (app.js:20) at Object.defineProperty.value (app.js:119260) at __webpack_require__ (app.js:20) at Object.disposed (app.js:94749) at __webpack_require__ (app.js:20) at Object.defineProperty.value (app.js:54983) at __webpack_require__ (app.js:20) at Object.defineProperty.value (app.js:54959) at __webpack_require__ (app.js:20)

here is my vue2editor.vue code

<template>
    <div id="app">
        <vue-editor v-model="content"></vue-editor>
    </div>
</template>

<script>
    import { Quill, VueEditor } from 'vue2-editor';
    Quill.register('modules/quill-emoji', Emoji);

    const toolbarOptions = {
        container: [
            ['emoji'],
        ],
        handlers: {
            emoji() {
            },
        },
    };
    export default {
        name: 'vue2editor',
        components: { VueEditor },
        data() {
            return {
                editorSettings: {
                    modules: {
                        toolbar: toolbarOptions,
                        toolbar_emoji: true,
                        short_name_emoji: true,
                    },
                },
                text: null,
            };
        },
    };
</script>

[sebastian-walter]

Sorry for the late response. This is how my .vue file looks like:

<template>
  <vue-editor
    ref="editor"
    v-model="text"
    :id="id"
    :editor-options="editorSettings"
    class="comment-editor"
    @input="input"
    @keydown.enter.native="handleCmdEnter($event)"
  />
</template>

<script>
  import Emoji from 'quill-emoji/dist/quill-emoji';
  import Mention from 'quill-mention/dist/quill.mention.min';
  import vm from 'src/main';
  import { Quill, VueEditor } from 'vue2-editor';
  import { doGetUsersByName } from '../api';

  Quill.register('modules/quill-emoji', Emoji);
  Quill.register('modules/quill-mention', Mention);

  const toolbarOptions = {
    container: [
      ['emoji'],
    ],
    handlers: {
      emoji() {
      },
    },
  };

  export default {

    name: 'CommentEditor',
    props: {
      id: {
        type: String,
        required: true,
      },
      prefilledText: {
        type: String,
        default: '',
      },
    },
    components: { VueEditor },
    data() {
      return {
        editorSettings: {
          modules: {
            toolbar: toolbarOptions,
            "emoji-toolbar": true,
            "emoji-shortname": true,
            mention: {
              allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
              mentionDenotationChars: ['@'],
              source(searchTerm, renderList) {
                const usersForSelection = vm.$store.state.usersForSelection.map(user => ({
                  id: user.id,
                  value: user.fullName,
                }));

                if (searchTerm.length < 3) {
                  renderList(usersForSelection, searchTerm);
                  return;
                }

                doGetUsersByName({ name: searchTerm }).then((response) => {
                  const userIds = usersForSelection.map(user => user.id);
                  usersForSelection.push(...response.data.users.map(user => ({ id: user.id, value: user.fullName }))
                    .filter(user => userIds.indexOf(user.id) === -1));

                  if (response.status !== 200) {
                    this.$toasted.global.error({ message: this.$t('error.default') });
                    return;
                  }
                  const matches = [];
                  for (let i = 0; i < usersForSelection.length; i++) {
                    if (usersForSelection[i].value.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1) {
                      matches.push(usersForSelection[i]);
                    }
                  }
                  renderList(matches, searchTerm);
                });
              },
            },
          },
        },
        text: null,
      };
    },
    methods: {
      handleCmdEnter(event) {
        if (event.metaKey || event.ctrlKey) {
          this.$emit('submit');
        }
      },
      input(value) {
        this.$emit('input', value);
      },
      reset() {
        this.text = null;
      },
    },
    mounted() {
      this.$refs.editor.$el.getElementsByTagName('button')[0].setAttribute('tabindex', -1);
      this.text = this.prefilledText;
    },
  };
</script>

<style lang="scss" type="text/scss">
  @import "../assets/variables";
  @import "../assets/mixins";

  .comment-editor {
    position: relative;
    margin-top: .3rem;

    &.quillWrapper {
      .ql-toolbar {
        &.ql-snow {
          position: absolute;
          right: 0;
          bottom: 0;
          z-index: 1;
          border: none;
          border-top-left-radius: .4rem;
          border-top-right-radius: .4rem;

          .ql-formats {
            margin: 0 0 .5rem 0;

            .ql-emoji {
              .ql-stroke {
                stroke: $gray-light;
              }

              .ql-fill {
                fill: $gray-light;
              }
            }
          }
        }
      }

      .ql-container {
        border-bottom-right-radius: .4rem;
        border-bottom-left-radius: .4rem;

        &.ql-snow {
          border: none;
        }
      }

      .ql-editor {
        min-height: 10rem;
        border: .1rem solid $gray-lightest;
        border-radius: .4rem;
        transition: min-height .3s;

        &.ql-blank {
          min-height: 10rem;
        }
      }
    }
  }

  .ql-mention-list-container {
    z-index: 999;
    overflow: hidden;
    background-color: white;
    border-radius: .2rem;

    @include box_shadow(2);

    .ql-mention-list {
      list-style: none;

      .ql-mention-list-item {
        padding: 1.6rem;
        font-family: Roboto, sans-serif;
        font-size: $font-size-base;
        cursor: pointer;

        &:hover {
          background-color: $gray-lightest;
        }

        &.selected {
          background-color: $gray-lightest;
        }
      }
    }
  }
</style>