Repository: draft-js-plugins/draft-js-plugins (ts)

Issue:
Part of the trigger is returned with the match when a multi-character trigger is used
## Environment

- @draft-js-plugins/editor version: v4.1.0
- plugin name and version: @draft-js-plugins/mention v4.5.0

## Description

For a plugin configured with a multi-character trigger, part of the trigger is returned with matches.  So for example for a trigger of "in:", this is returned:
```javascript
"n:autoclaves"
```
instead of this:
```
"autoclaves"
```

Repro:

* Configure a trigger with multiple characters, e.g., "in:"
* Expected: matches are returned without the trigger
* Actual: matches are returned with part of the trigger

Here is a workaround that I added to deal with the new issue:
```javascript
  const onSearchChange = useCallback(({ value }) => {
    // Workaround for a draft-js-plugins/mention issue
    const modifiedValue = value.replace(/^n:/i, '')
    fetchQuery<Query>(environment, query, { searchString: modifiedValue })
      .subscribe({
        next: (data) => {
          const mentions = liftNodes<TopicType>(data?.view?.topics).filter(Boolean)
          setSuggestions(mentions as TopicType[])
        },
      })
  }, [fetchQuery, liftNodes, setSuggestions])
```

How I'm configuring the mention plugin:

```javascript
const mentionPlugin = createMentionPlugin({
  mentionPrefix: '',
  mentionTrigger: 'in:',
  supportWhitespace: true,
  mentionComponent: (mentionProps: { children: ReactNode }) => (
    <span className="Label mr-1">
      { mentionProps.children }
    </span>
  ),
})
```


Pull request:
[Mention plugin] Remove the trigger from the search value
## Checklist

- [x] Fix any eslint errors that occur
- [x] Update change-log for every plugin you touch
- [x] Add/Update tests if you add/change new functionality
- [x] Add/Update docs if you add/change functionality
- [x] Enable "Allow edits from maintainers" for this PR

## Use-case/Problem

closes #2047


Patch:
diff --git a/packages/mention/CHANGELOG.md b/packages/mention/CHANGELOG.md
index 038d1e74..bf118959 100644
--- a/packages/mention/CHANGELOG.md
+++ b/packages/mention/CHANGELOG.md
@@ -5,6 +5,8 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## To Be Released
 
+- remove the trigger from the search value [#2047](https://github.com/draft-js-plugins/draft-js-plugins/issues/2047)
+
 ## 4.5.0
 
 - fixing multi-character trigger [#2017](https://github.com/draft-js-plugins/draft-js-plugins/issues/2017)
diff --git a/packages/mention/src/utils/getSearchTextAt.ts b/packages/mention/src/utils/getSearchTextAt.ts
index eaf5166c..e9c87e3a 100644
--- a/packages/mention/src/utils/getSearchTextAt.ts
+++ b/packages/mention/src/utils/getSearchTextAt.ts
@@ -15,9 +15,9 @@ export default function getSearchTextAt(
 ): SearchTextAtResult {
   const str = blockText.substr(0, position);
 
-  const triggerPattern = `[${triggers
+  const triggerPattern = triggers
     .map((trigger) => escapeRegExp(trigger))
-    .join('')}]`;
+    .join('|');
 
   const TRIGGER_REGEX = new RegExp(`(\\s|^)(${triggerPattern})`, 'g');
 


Test patch:
diff --git a/packages/mention/src/utils/__test__/getSearchTextAt.test.ts b/packages/mention/src/utils/__test__/getSearchTextAt.test.ts
index b650c8bc..d703e9e0 100644
--- a/packages/mention/src/utils/__test__/getSearchTextAt.test.ts
+++ b/packages/mention/src/utils/__test__/getSearchTextAt.test.ts
@@ -1,56 +1,74 @@
 import getSearchTextAt from '../getSearchTextAt';
 
-const trigger = ['@'];
-
 describe('getSearchTextAt', () => {
-  it('finds the matching string following trigger', () => {
-    const expected = {
-      matchingString: 'The Walking Dead',
-      begin: 3,
-      end: 20,
-    };
-    expect(getSearchTextAt('hi @The Walking Dead', 20, trigger)).toEqual(
-      expected
-    );
-  });
-
-  it('finds the matching string following trigger upto the position only', () => {
-    const expected = {
-      matchingString: 'The Walking',
-      begin: 3,
-      end: 15,
-    };
-    expect(getSearchTextAt('hi @The Walking Dead', 15, trigger)).toEqual(
-      expected
-    );
-  });
-
-  it('finds the matching string following empty trigger', () => {
-    const expected = {
-      matchingString: 'Max',
-      begin: 0,
-      end: 3,
-    };
-    expect(getSearchTextAt('Max', 3, [''])).toEqual(expected);
-  });
-
-  it('finds the matching string even if it contains the trigger', () => {
-    const expected = {
-      matchingString: 'one@example.c',
-      begin: 0,
-      end: 14,
-    };
-    expect(getSearchTextAt('@one@example.c', 14, trigger)).toEqual(expected);
-  });
-
-  it('finds the matching string, including trigger, following a trigger', () => {
-    const expected = {
-      matchingString: 'one@example.c',
-      begin: 5,
-      end: 19,
-    };
-    expect(getSearchTextAt('@Max @one@example.c', 19, trigger)).toEqual(
-      expected
-    );
+  test.each([
+    [
+      'finds the matching string following trigger',
+      'hi @The Walking Dead',
+      20,
+      ['@'],
+      {
+        matchingString: 'The Walking Dead',
+        begin: 3,
+        end: 20,
+      },
+    ],
+    [
+      'finds the matching string following trigger upto the position only',
+      'hi @The Walking Dead',
+      15,
+      ['@'],
+      {
+        matchingString: 'The Walking',
+        begin: 3,
+        end: 15,
+      },
+    ],
+    [
+      'finds the matching string following empty trigger',
+      'Max',
+      3,
+      [''],
+      {
+        matchingString: 'Max',
+        begin: 0,
+        end: 3,
+      },
+    ],
+    [
+      'finds the matching string even if it contains the trigger',
+      '@one@example.c',
+      14,
+      ['@'],
+      {
+        matchingString: 'one@example.c',
+        begin: 0,
+        end: 14,
+      },
+    ],
+    [
+      'finds the matching string, including trigger, following a trigger',
+      '@Max @one@example.c',
+      19,
+      ['@'],
+      {
+        matchingString: 'one@example.c',
+        begin: 5,
+        end: 19,
+      },
+    ],
+    [
+      'finds the matching string, with a multi character trigger',
+      'hi :in:The Walking Dead',
+      23,
+      [':in:'],
+      {
+        matchingString: 'The Walking Dead',
+        begin: 3,
+        end: 23,
+      },
+    ],
+  ])('%s', (_text, blockText, position, trigger, result) => {
+    expect(getSearchTextAt(blockText, position, trigger)).toEqual(result);
   });
 });