fix: ensure regex reserved characters are escaped (#186)

* fix: ensure regex reserved characters are escaped (#185)

* chore(tests): Add unit tests for regex escaping (#185)

Author: louisbourque

__tests__/__snapshots__/index.spec.js.snap

@@ -1,5 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`multi character trigger match the snapshot 1`] = `
+<div
+  className="rta  my-rta-container"
+>
+  <textarea
+    className="rta__textarea my-rta"
+    onBlur={[Function]}
+    onChange={[Function]}
+    onClick={[Function]}
+    onScroll={[Function]}
+    onSelect={[Function]}
+    placeholder="Write a message."
+    value="Controlled text"
+  />
+</div>
+`;
+
 exports[`object-based items match the snapshot 1`] = `
 <div
   className="rta  my-rta-container"

__tests__/index.spec.js

@@ -490,3 +490,52 @@ describe("object-based items without keys and custom unique generator", () => {
     expect(items.at(2).key()).toEqual("13");
   });
 });
+
+describe("multi character trigger", () => {
+  const mockedChangeFn = jest.fn();
+  const mockedSelectFn = jest.fn();
+  const mockedCaretPositionChangeFn = jest.fn();
+
+  const rtaComponent = (
+    <ReactTextareaAutocomplete      
+      className="my-rta"
+      containerClassName="my-rta-container"
+      listClassName="my-rta-list"
+      itemClassName="my-rta-item"
+      loaderClassName="my-rta-loader"
+      placeholder="Write a message."
+      value="Controlled text"
+      onChange={mockedChangeFn}
+      onSelect={mockedSelectFn}
+      onCaretPositionChange={mockedCaretPositionChangeFn}
+      loadingComponent={Loading}
+      trigger={{
+        ":(": {
+          output: item => `___${item.text}___`,
+          dataProvider: () => [
+            { id: 1, label: ":)", text: "happy_face" },
+            { id: 2, label: ":(", text: "sad_face" }
+          ],
+          component: SmileItemComponent
+        }
+      }}
+    />
+  );
+
+  const rta = mount(rtaComponent);
+
+  it("match the snapshot", () => {
+    expect(shallow(rtaComponent)).toMatchSnapshot();
+  });
+
+  it("Textarea exists", () => {
+    expect(rta.find("textarea")).toHaveLength(1);
+  });
+
+  it("After the trigger was typed, it should appear list of options", () => {
+    rta
+      .find("textarea")
+      .simulate("change", { target: { value: "some test :(a" } });
+    expect(rta.find(".rta__autocomplete")).toHaveLength(1);
+  });
+});

src/Textarea.jsx

@@ -40,6 +40,31 @@ const errorMessage = (message: string) =>
     \nCheck the documentation or create issue if you think it's bug. https://github.com/webscopeio/react-textarea-autocomplete/issues`
   );
 
+const reservedRegexChars = [
+  '.',
+  '^',
+  '$',
+  '*',
+  '+',
+  '-',
+  '?',
+  '(',
+  ')',
+  '[',
+  ']',
+  '{',
+  '}',
+  '\\',
+  '|',
+]
+
+const escapeRegex = text =>
+  [...text]
+    .map(character =>
+      reservedRegexChars.includes(character) ? `\\${character}` : character
+    )
+    .join('')
+
 // The main purpose of this component is to figure out to which side the autocomplete should be opened
 type AutocompleteProps = {
   style: ?Object,
@@ -415,7 +440,7 @@ class ReactTextareaAutocomplete extends React.Component<
        * It's important to escape the currentTrigger char for chars like [, (,...
        */
       new RegExp(
-        `\\${currentTrigger}${`[^\\${currentTrigger}${
+        `${escapeRegex(currentTrigger)}${`[^${escapeRegex(currentTrigger)}${
           trigger[currentTrigger].allowWhitespace ? "" : "\\s"
         }]`}*$`
       )
@@ -616,7 +641,7 @@ class ReactTextareaAutocomplete extends React.Component<
           }
           return 0;
         })
-        .map(a => `\\${a}`)
+        .map(a => escapeRegex(a))
         .join("|")})((?:(?!\\1)[^\\s])*$)`
     );
 
@@ -632,7 +657,7 @@ class ReactTextareaAutocomplete extends React.Component<
           }
           return 0;
         })
-        .map(a => `\\${a}`)
+        .map(a => escapeRegex(a))
         .join("|")})$`
     );
   };
@@ -810,7 +835,7 @@ class ReactTextareaAutocomplete extends React.Component<
       this.state.currentTrigger &&
       trigger[this.state.currentTrigger].allowWhitespace
     ) {
-      tokenMatch = new RegExp(`\\${this.state.currentTrigger}.*$`).exec(
+      tokenMatch = new RegExp(`${escapeRegex(this.state.currentTrigger)}.*$`).exec(
         value.slice(0, selectionEnd)
       );
       lastToken = tokenMatch && tokenMatch[0];