Hook (api) on entering special characters to call inline plugin

[theexplay]

Is there an api that allows you to track changes of text inside inline plugin. I'm trying to write my own implementation of mention plugin, but I don't understand how I can catch the moment of entering a special character like @

[taurenshaman]

I tried something on Paragraph, but there is no effect (console log)
// F:\Github\editor.js\src\components\tools\paragraph\src\index.js

  /**
   * Check if text content is empty and set empty string to inner html.
   * We need this because some browsers (e.g. Safari) insert <br> into empty contenteditanle elements
   *
   * @param {KeyboardEvent} e - key up event
   */
  onKeyUp(e) {
    console.log("Paragraph.onKeyUp: _posOfSign = " + this._posOfSign ); // NO LOG -_-|||
    if(e.code === 'Digit3' && e.shiftKey && this._posOfSign < 0){ // #: start
      this._posOfSign = this._getCaretPosition(this._element);
      return;
    }
    else if(his._posOfSign >= 0 && (e.code === 'Space')) { // Space: reset
      this._posOfSign = -1;
      return;
    }
    if(this._posOfSign >= 0){
      const posCurrent = this._getCaretPosition(this._element);
      const txt = this._data.text.substring(this._posOfSign, posCurrent);
      console.log("Paragraph.Search: " + txt);
      return;
    }

    /////////////////////// Following is the original code ///////////////////////

    if (e.code !== 'Backspace' && e.code !== 'Delete') {
      return;
    }

    const { textContent } = this._element;

    if (textContent === '') {
      this._element.innerHTML = '';
    }
  }

[zegenie]

+1 on this. I'm also looking to write a mentions plugin that can trigger on typing a predefined (or configurable) character, such as @ for usernames and # or [ for relative links (with a custom inline tool to parse and replace the links with proper inline link elements). I've looked through the api to find a way to achieve this, but even though the developer says "it's possible", I've not seen any such implementations anywhere.

The main problems are:

• Without a selection, there is no way to "trigger" an inline tool. This makes for a very poor user experience if you need to select text to trigger functionality, and is different to the way every other "mention" functionality works.
• There is no easy way (even possible?) to track the text content of the current block, or the position of the caret inside it without the selection. This means that even when I can trigger the tool based on a listener , I can't manipulate the content so that the @ is removed from the block, and I can't reliably know where inside the block the user is entering the character.

My suggestions:

• make it possible to trigger an inline tool with access to the current caret position and selection even without a user activated selection. This could still be controlled by the custom tool, but letting it get access to the "current" selection, even if it is 0 characters long would mean we can manipulate the text content from where the cursor is at when the tool was triggered.
• Allow traversing or manipulating the content of the block by traversing to or from a specific character from the cursor position. Right now it's possible to expand to / find the nearest tag element, but when triggered without a selection, there is no tag to search for and that means there's no easy way to traverse to the nearest @ character.
• Make it possible to replace the @ (or whichever character the user typed) with an html element. This means when the user types @, we can traverse to that character, replace it with a custom element and let the user continue to type inside that block, but now we have it inside a tag.

I hope my suggestions are clear and makes sense - after looking through the internals, I don't think they would take very much to implement, but I'm not familiar enough with the editor js code to implement them myself atm.

[jeremyVignelles]

Hi, I didn't saw this issue, I made a similar proposal at #1623
I think that this should be a different type of tool, not just an inline tool

[vfan]

I need this too? anyone has solution?