Allow extension to implement mention providers

[enko]

It would be awesome if tui.editor could provide an interface for mention support like here on github with @.

From the API standpoint, I think it would be a good fit for an extensions, where I can register a trigger character like @ or # and a async callback which returns either a string array or a key value object, where the key is the display value and the value the final markdown.

If you think this extension would is not in the focus of your project or you do not have time for this feature, could you please give me some pointers on how to implement this feature myself.

Ages ago I used ment.io, maybe there is some inspiration there.

Thanks for your great work, I could integrate it well into my project.

Refs https://github.com/datenknoten/ngx-ssb-client/issues/11 https://github.com/datenknoten/ngx-ssb-client/issues/10

[masoudtahmasebi93]

Sorry is this issue implemented somewhere? Is this fixed in your commit @seonim-ryu ?

[rrjanbiah]

Not sure if this is related to #968 ?

[rrjanbiah]

FWIW, (not tested) someone seems to have solved it https://github.com/nillith/circle-plus/blob/master/src/client/app/modules/markdown/markdown.service.ts#L1-L5

[mananjadhav]

A quick way to resolve this without the editor API would be adding a plugin with tributejs:

import Tribute from 'tributejs';

export default function mentionsPlugin(editor, options = {}) {
  const tribute = new Tribute({
    values: (searchTerm, cb) => {
      options.listSuggestions(searchTerm, (suggestions) => cb(suggestions));
    },
    noMatchTemplate: function () {
      return '<span style:"visibility: hidden;"></span>';
    }
  });

  tribute.attach(editor.getUI().el);
}

and my list suggestion looks like:

listSuggestions: async function (
        searchTerm,
        renderList,
        denotationCharacter
      ) {
        console.log('Search Term', searchTerm);
        console.log(denotationCharacter);
        const matchedPeople = await suggestPeople(searchTerm);
        renderList(matchedPeople);
      }
async function suggestPeople(searchTerm) {
    const allPeople = [
      {
        key: 'Michael Soni',
        value: 'Michael Soni'
      },
      {
        key: 'William Bedi',
        value: 'William Bedi'
      },
      {
        key: 'Patrik Harrison',
        value: 'Patrik Harrison'
      }
    ];
    return allPeople.filter((person) => person.value.includes(searchTerm));
  }

[seanwang1998]

A quick way to resolve this without the editor API would be adding a plugin with tributejs:

import Tribute from 'tributejs';

export default function mentionsPlugin(editor, options = {}) {
  const tribute = new Tribute({
    values: (searchTerm, cb) => {
      options.listSuggestions(searchTerm, (suggestions) => cb(suggestions));
    },
    noMatchTemplate: function () {
      return '<span style:"visibility: hidden;"></span>';
    }
  });

  tribute.attach(editor.getUI().el);
}

and my list suggestion looks like:

listSuggestions: async function (
        searchTerm,
        renderList,
        denotationCharacter
      ) {
        console.log('Search Term', searchTerm);
        console.log(denotationCharacter);
        const matchedPeople = await suggestPeople(searchTerm);
        renderList(matchedPeople);
      }
async function suggestPeople(searchTerm) {
    const allPeople = [
      {
        key: 'Michael Soni',
        value: 'Michael Soni'
      },
      {
        key: 'William Bedi',
        value: 'William Bedi'
      },
      {
        key: 'Patrik Harrison',
        value: 'Patrik Harrison'
      }
    ];
    return allPeople.filter((person) => person.value.includes(searchTerm));
  }

'editor.getui ().el' I didn't find this API, this is how I bound it: However, there are various bugs in the Markdown mode of the TUI editor, such as:

[seanwang1998]

@mananjadhav Please take a look at it for me, if you can

[seanwang1998]

FWIW, (not tested) someone seems to have solved it https://github.com/nillith/circle-plus/blob/master/src/client/app/modules/markdown/markdown.service.ts#L1-L5

The address has been lost

[mananjadhav]

@seanwang1998 Unfortunately I am not working on it at the moment. Whatever I had I’ve put it on the comment earlier.