MentionSuggestions whitespace Regex filter issue

[Revln9]

suppose you have a suggestion list like that

[
{ name: 'call 1' , value:1 },
{ name: 'call 2' , value:2 },
{ name: 'call 3' , value:3 }
]

if you type '@call 3' at the editor it will not narrow the search to item call 3 , because the whitespace breaks it . instead it will give you all of them.

i've noticed also a sorting issue with suggestions when you search for something that contains A for example the suggestions that begins with A needs to be at the top of the list which is not the case. instead it gives you the the natural order of your current suggestions list.

now how i can modify the regex and the mentionSuggestionsStrategy to do so ?

[mzbac]

@Revln9 I think current mentions suggestion regex doesn't support withe space..

[Revln9]

Found a solution or a hack (your call).

the regex /\S+$/ that is used as a word delimiter in getWordAt.js is weak , it will not skip whitespaces , even worse it will use it as a word boundary .

I wrote my own (took me some headaches...) that takes the mentionTrigger key as the first delimiter and a new line or a return carriage as the second . It will read all the line after the mentionTrigger key.

Another important point to mention is that your mentionTrigger key must not be a character or a digit .

here is the complete getWordAt.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
var getWordAt = function getWordAt(string, position) {
  // Perform type conversions.
  var str = String(string);
  // eslint-disable-next-line no-bitwise
  var pos = Number(position) >>> 0;


  // Search for the word's beginning and end.
  var left = str.slice(0, pos + 1).search(/[^\s][\s?\w+]*(?=$)/); //this is the new Regex
  var right = str.slice(pos).search(/\s/);
  console.log(string , str.slice(left, right + pos))
  // The last word in the string is a special case.
  if (right < 0) {
    return {
      word: str.slice(left),
      begin: left,
      end: str.length
    };
  }

  // Return the word, using the located bounds to extract it from the string.
  return {
    word: str.slice(left, right + pos ),
    begin: left,
    end: right + pos
  };
};

exports.default = getWordAt;

and defaultRegExp.js but you can let this one unchanged instead just pass the regex '[\\w\\s?]*' inside the config object of your plugin

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
// common chinese symbols: \u4e00-\u9eff - http://stackoverflow.com/a/1366113/837709
// hiragana (japanese): \u3040-\u309F - https://gist.github.com/ryanmcgrath/982242#file-japaneseregex-js
// katakana (japanese): \u30A0-\u30FF - https://gist.github.com/ryanmcgrath/982242#file-japaneseregex-js
// For an advanced explaination about Hangul see https://github.com/draft-js-plugins/draft-js-plugins/pull/480#issuecomment-254055437
// Hangul Syllables (korean): \uAC00-\uD7A3 - https://en.wikipedia.org/wiki/Korean_language_and_computers#Hangul_in_Unicode
// Hangul Jamo (korean): \u3130-\u318F - https://en.wikipedia.org/wiki/Korean_language_and_computers#Hangul_in_Unicode
exports.default = '[\\w\\s?]*';  // another new regex

Hope this helps!

Ps: even github mention doesn't have this mention with space awarness feature , so i guess it's for a good reason , i don't have facebook if anyone could try this and post the result it will be cool.

[nikgraf]

@Revln9 there even was a PR for whitespace support at some point. Unfortunately it's even more complicated as you need to limit the amount of spaces for the decorators. Even then you need to make sure there are no overlapping decorators.

In the end I decided to not accept it and recommend to publish it as a separate plugin. The only way to get this in properly would be a re-write of the plugin without leveraging decorators.

[Revln9]

Yep nick , you're right for overlapping , i know these things can get quite nasty... ,

I have 3 cascaded mentionSuggestion plugins in the same Editor , and they show up in series (1 after the other) when i trigger the first one.
For overlapping issues , all of the mentionTriggers must not be a character A-z 0-9 because the regex that i posted before considers all the non character keys as delmiters and if it didn't find one it will use a new line or a return carriage as the last delimiter. In simple words , this regex ignore whitespaces

It will be tricky to merge this but more documentation about this should help us all.

[luisrudge]

😭

[nikgraf]

@Revln9 @luisrudge To tackle this issue, I believe the plugin has to be fundamentally different. Instead of using decorators you could run a regex on every selection change and then show an autocomplete dropdown. The code would be way easier and I believe this could eventually even replace the mention plugin.

If any of you would write autocomplete plugin, that would be awesome …