mention-custom-view.md 1.3 KB

Mention

This sample overrides default mention conversion to <span>. The mention is converted to a link (<a>).

Configuration

The feed:

  • { id: '@Barney Stinson', text: 'Barney Stinson', link: 'https://www.imdb.com/title/tt0460649/characters/nm0000439' }
  • { id: '@Lily Aldrin', text: 'Lily Aldrin', link: 'https://www.imdb.com/title/tt0460649/characters/nm0004989?ref_=tt_cl_t5' }
  • { id: '@Marshall Eriksen', text: 'Marshall Eriksen', link: 'https://www.imdb.com/title/tt0460649/characters/nm0781981' }
  • { id: '@Robin Scherbatsky', text: 'Robin Scherbatsky', link: 'https://www.imdb.com/title/tt0460649/characters/nm1130627' }
  • { id: '@Ted Mosby', text: 'Ted Mosby', link: 'https://www.imdb.com/title/tt0460649/characters/nm1102140' }

Interaction

You can interact with mention panel with keyboard:

  • Move arrows up/down to select an item.
  • Use enter or tab to insert a mention into the documentation.
  • The esc should close the panel.

Mention panel should be closed on:

  • Click outside the panel view.
  • Changing selection - like placing it in other part of text.

Editing behavior:

The mention should be removed from the text when:

  • typing inside a mention
  • removing characters from a mention
  • breaking the mention (enter)
  • pasting part of a mention