fixed missing commit that was lost somewhere in the merges

gulpfile.js

@@ -131,6 +131,7 @@ const refactoredSrc = [
   "./src/js/challenge-controller.js",
   "./src/js/popups/custom-word-amount-popup.js",
   "./src/js/popups/custom-test-duration-popup.js",
+  "./src/js/popups/word-filter-popup.js",
   "./src/js/test/test-config.js",
   "./src/js/elements/loader.js",
   "./src/js/mini-result-chart.js",

src/js/popups/custom-text-popup.js

@@ -3,6 +3,7 @@ import * as ManualRestart from "./manual-restart-tracker";
 import * as Misc from "./misc";
 import * as Notifications from "./notifications";
 import * as TestLogic from "./test-logic";
+import * as WordFilter from "./word-filter-popup";
 
 let wrapper = "#customTextPopupWrapper";
 let popup = "#customTextPopup";
@@ -81,7 +82,7 @@ $(`${popup} .randomInputFields .time input`).keypress((e) => {
   $(`${popup} .randomInputFields .wordcount input`).val("");
 });
 
-$("#customTextPopup .button").click(() => {
+$("#customTextPopup .apply").click(() => {
   let text = $("#customTextPopup textarea").val();
   text = text.trim();
   // text = text.replace(/[\r]/gm, " ");
@@ -154,3 +155,7 @@ $("#customTextPopup .button").click(() => {
   TestLogic.restart();
   hide();
 });
+
+$("#customTextPopup .wordfilter").click(() => {
+  WordFilter.showWordFilterPopup();
+});

src/js/popups/word-filter-popup.js

@@ -1,7 +1,4 @@
-import { setCustomThemeColors } from "./config";
 import * as Misc from "./misc";
-import * as ThemeColors from "./theme-colors";
-//import * as config from "./userconfig";
 
 export async function showWordFilterPopup() {
   $("#wordFilterPopupWrapper").removeClass("hidden");

src/js/script.js

@@ -309,7 +309,8 @@ $(document).keydown(function (event) {
     !$("#customTextPopupWrapper").hasClass("hidden") ||
     !$("#customWordAmountPopupWrapper").hasClass("hidden") ||
     !$("#customTestDurationPopupWrapper").hasClass("hidden") ||
-    !$("#quoteSearchPopupWrapper").hasClass("hidden");
+    !$("#quoteSearchPopupWrapper").hasClass("hidden") ||
+    !$("#wordFilterPopupWrapper").hasClass("hidden");
   if (
     pageTestActive &&
     !commandLineVisible &&

src/sass/style.scss

@@ -503,8 +503,13 @@ a:hover {
     gap: 1rem;
     width: 60vw;
 
+    .wordfilter {
+      width: 33%;
+      justify-self: right;
+    }
+
     textarea {
-      background: var(--bg-color);
+      background: rgba(0, 0, 0, 0.1);
       padding: 1rem;
       color: var(--main-color);
       border: none;
@@ -516,6 +521,8 @@ a:hover {
       resize: vertical;
       height: 200px;
       color: var(--text-color);
+      overflow-x: hidden;
+      overflow-y: scroll;
     }
 
     .inputs {

static/index.html

@@ -5,6 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Monkeytype</title>
     <!-- <link rel="stylesheet" href="css/fa.css" /> -->
+    <link
+      href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css"
+      rel="stylesheet"
+    />
     <link rel="stylesheet" href="css/balloon.css" />
     <link rel="stylesheet" href="css/style.css" />
     <link rel="stylesheet" href="themes/serika_dark.css" id="currentTheme" />
@@ -102,6 +106,10 @@
     </div>
     <div id="customTextPopupWrapper" class="hidden">
       <div id="customTextPopup" action="">
+        <div class="wordfilter button">
+          <i class="fas fa-filter"></i>
+          Words filter
+        </div>
         <textarea class="textarea" placeholder="Custom text"></textarea>
         <div class="inputs">
           <label class="check">
@@ -133,6 +141,38 @@
             </span>
           </label>
         </div>
+        <div class="button apply">ok</div>
+      </div>
+    </div>
+    <div id="wordFilterPopupWrapper" class="hidden">
+      <div id="wordFilterPopup">
+        <div class="wftitle">language</div>
+        <select id="languageList" class=""></select>
+        <div class="lengthgrid">
+          <div id="wordMinTitle" class="wftitle">min length</div>
+          <div id="wordMaxTitle" class="wftitle">max length</div>
+          <input
+            id="wordMin"
+            class="wordLength"
+            autocomplete="off"
+            type="number"
+          />
+          <input
+            id="wordMax"
+            class="wordLength"
+            autocomplete="off"
+            type="number"
+          />
+        </div>
+        <div class="wftitle">include</div>
+        <input id="wordFilter" autocomplete="off" />
+        <div class="wftitle">exclude</div>
+        <input id="wordExclude" autocomplete="off" />
+        <div class="wftip">
+          Use the above filters to include and exclude words or characters
+          (separated by spaces)
+        </div>
+        <i class="fas fa-fw fa-spin fa-circle-notch hidden wfload"></i>
         <div class="button">ok</div>
       </div>
     </div>
@@ -3766,5 +3806,6 @@
   <script src="js/jquery.cookie-1.4.1.min.js"></script>
   <script src="js/moment.min.js"></script>
   <script src="js/html2canvas.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
   <script src="js/monkeytype.js"></script>
 </html>