Autocomplete hints with single and multiple sources

The hint option still supports a single object or an array of hint definitions. These examples cover simple words, GitHub emoji, mentions, and a combined setup that uses all three trigger patterns in one editor.

Word hints

Type app, ora, wat, or lem.

Trigger: normal words Source: static list

Emoji hints

Type :roc, :spa, or another GitHub emoji name.

Loading emoji list…

Trigger: : Template: image preview

Mention hints

Type @ha, @ea, or @de.

Trigger: @ Content: inserts @name

Multiple hints in one editor

Use plain words, @mentions, and :emoji in the same editor via a hint array.

Shape: hint: [] Supports mixed triggers

Example configuration - Hints

const fruitHint = {
  words: ['apple', 'orange', 'watermelon', 'lemon'],
  match: /\b(\w{1,})$/,
  search(keyword, callback) {
    callback(this.words.filter((item) => item.startsWith(keyword)));
  },
};

const emojiHint = {
  match: /:([\-+\w]+)$/,
  search(keyword, callback) {
    callback(emojiNames.filter((item) => item.startsWith(keyword)).slice(0, 12));
  },
  template(item) {
    return `<img src="${emojiMap[item]}" width="20" height="20" alt="" /> :${item}:`;
  },
  content(item) {
    const image = document.createElement('img');
    image.src = emojiMap[item];
    image.width = 20;
    image.height = 20;
    image.alt = `:${item}:`;
    return image;
  },
};

const mentionHint = {
  mentions: ['hackerwins', 'lqez', 'easylogic', 'dennis'],
  match: /\B@(\w*)$/,
  search(keyword, callback) {
    callback(this.mentions.filter((item) => item.startsWith(keyword)));
  },
  content(item) {
    return `@${item}`;
  },
};

const sharedEditorOptions = {
  height: 180,
  toolbar: false,
  minHeight: 140,
  disableResizeEditor: true,
};

summernote.create('#hint-words-editor', {
  ...sharedEditorOptions,
  placeholder: 'Type apple, orange, watermelon, or lemon',
  hint: fruitHint,
});

summernote.create('#hint-emoji-editor', {
  ...sharedEditorOptions,
  placeholder: 'Type :rocket or :sparkles',
  hint: emojiHint,
});

summernote.create('#hint-mentions-editor', {
  ...sharedEditorOptions,
  placeholder: 'Type @hackerwins or @easylogic',
  hint: mentionHint,
});

summernote.create('#hint-multi-editor', {
  ...sharedEditorOptions,
  placeholder: 'Try apple, @hackerwins, or :rocket',
  hint: [fruitHint, emojiHint, mentionHint],
});