Added Custom Color Inputs that you can Paste into (#1881) by Estebene

* First commit

* Fixed color popup placement and added easy paste colors

* Fixed color popup placement and added easy paste colors

* updated the color of the first button to provide more contrast

* fixed color picker position

* fixed laggy color picker drag

* safari fix for picker position

Co-authored-by: Jack <bartnikjack@gmail.com>

SECURITY.md

@@ -1,13 +1,16 @@
 # Security Policy
+
 We take the security and integrity of Monkeytype very seriously. If you have found a vulnerability, please report it ASAP so we can quickly remediate the issue.
 
 ### Reporting a Vulnerability
 
 For vulnerabilities that impact the confidentiality, integrity, and availability of Monkeytype services, please send your disclosure via (1) [email](jack@monkeytype.com), or (2) private Discord chat to Miodec(Miodec#1512). For non-security related platform bugs, follow the bug submission [guidelines](https://github.com/Miodec/monkeytype#bug-report-or-feature-request). Include as much detail as possible to ensure reproducibility. At a minimum, vulnerability disclosures should include:
+
 - Vulnerability Description
 - Proof of Concept
 - Impact
 - Screenshots or Proof
 
 ### Submission Guidelines
+
 Do not engage in activities that might cause a denial of service condition, create significant strains on critical resources, or negatively impact users of the site outside of test accounts.

src/js/misc.js

@@ -760,6 +760,19 @@ export function regexIndexOf(string, regex, startpos) {
   return indexOf >= 0 ? indexOf + (startpos || 0) : indexOf;
 }
 
+export function convertRGBtoHEX(rgb) {
+  rgb = rgb.match(/^rgb\((\d+), \s*(\d+), \s*(\d+)\)$/);
+  if (rgb === null) return;
+  if (rgb.length < 3) return;
+  function hexCode(i) {
+    // Take the last 2 characters and convert
+    // them to Hexadecimal.
+
+    return ("0" + parseInt(i).toString(16)).slice(-2);
+  }
+  return "#" + hexCode(rgb[1]) + hexCode(rgb[2]) + hexCode(rgb[3]);
+}
+
 String.prototype.lastIndexOfRegex = function (regex) {
   var match = this.match(regex);
   return match ? this.lastIndexOf(match[match.length - 1]) : -1;

src/js/settings/theme-picker.js

@@ -14,6 +14,65 @@ export function updateActiveButton() {
   );
 }
 
+function updateColors(colorPicker, color, onlyStyle) {
+  if (onlyStyle) {
+    let colorid = colorPicker.find("input[type=color]").attr("id");
+    document.documentElement.style.setProperty(colorid, color);
+    let pickerButton = colorPicker.find("label");
+    pickerButton.val(color);
+    pickerButton.attr("value", color);
+    if (pickerButton.attr("for") !== "--bg-color")
+      pickerButton.css("background-color", color);
+    colorPicker.find("input[type=text]").val(color);
+    colorPicker.find("input[type=color]").attr("value", color);
+    return;
+  }
+  let colorREGEX = [
+    {
+      rule: /\b[0-9]{1,3},\s?[0-9]{1,3},\s?[0-9]{1,3}\s*\b/,
+      start: "rgb(",
+      end: ")",
+    },
+    {
+      rule: /\b[A-Z, a-z, 0-9]{6}\b/,
+      start: "#",
+      end: "",
+    },
+    {
+      rule: /\b[0-9]{1,3},\s?[0-9]{1,3}%,\s?[0-9]{1,3}%?\s*\b/,
+      start: "hsl(",
+      end: ")",
+    },
+  ];
+
+  color = color.replace("°", "");
+
+  for (let regex of colorREGEX) {
+    if (color.match(regex.rule)) {
+      color = regex.start + color + regex.end;
+      break;
+    }
+  }
+
+  $(".colorConverter").css("color", color);
+  color = Misc.convertRGBtoHEX($(".colorConverter").css("color"));
+  if (!color) {
+    return;
+  }
+
+  let colorid = colorPicker.find("input[type=color]").attr("id");
+
+  document.documentElement.style.setProperty(colorid, color);
+  let pickerButton = colorPicker.find("label");
+
+  pickerButton.val(color);
+  pickerButton.attr("value", color);
+  if (pickerButton.attr("for") !== "--bg-color")
+    pickerButton.css("background-color", color);
+  colorPicker.find("input[type=text]").val(color);
+  colorPicker.find("input[type=color]").attr("value", color);
+}
+
 export function refreshButtons() {
   let favThemesEl = $(
     ".pageSettings .section.themes .favThemes.buttons"
@@ -65,15 +124,22 @@ export function refreshButtons() {
 
 export function setCustomInputs() {
   $(
-    ".pageSettings .section.themes .tabContainer .customTheme input[type=color]"
+    ".pageSettings .section.themes .tabContainer .customTheme .colorPicker"
   ).each((n, index) => {
+    console.log(index);
     let currentColor =
       Config.customThemeColors[
-        ThemeController.colorVars.indexOf($(index).attr("id"))
+        ThemeController.colorVars.indexOf(
+          $(index).find("input[type=color]").attr("id")
+        )
       ];
-    $(index).val(currentColor);
-    $(index).attr("value", currentColor);
-    $(index).prev().text(currentColor);
+
+    //todo check if needed
+    // $(index).find("input[type=color]").val(currentColor);
+    // $(index).find("input[type=color]").attr("value", currentColor);
+    // $(index).find("input[type=text]").val(currentColor);
+
+    updateColors($(index), currentColor);
   });
 }
 
@@ -202,11 +268,73 @@ $(
   let $colorVar = $(e.currentTarget).attr("id");
   let $pickedColor = $(e.currentTarget).val();
 
-  document.documentElement.style.setProperty($colorVar, $pickedColor);
-  $(".colorPicker #" + $colorVar).attr("value", $pickedColor);
-  $(".colorPicker [for=" + $colorVar + "]").text($pickedColor);
+  //todo check if needed
+  //   document.documentElement.style.setProperty($colorVar, $pickedColor);
+  //   $(".colorPicker #" + $colorVar).attr("value", $pickedColor);
+  //   $(".colorPicker #" + $colorVar).val($pickedColor);
+  //   $(".colorPicker #" + $colorVar + "-txt").val($pickedColor);
+  // });
+
+  // $(
+  //   ".pageSettings .section.themes .tabContainer .customTheme input[type=text]"
+  // ).on("input", (e) => {
+  //   // UpdateConfig.setCustomTheme(true, true);
+  //   let $colorVar = $(e.currentTarget).attr("id").replace("-txt", "");
+  //   let $pickedColor = $(e.currentTarget).val();
+
+  //   document.documentElement.style.setProperty($colorVar, $pickedColor);
+  //   $(".colorPicker #" + $colorVar).attr("value", $pickedColor);
+  //   $(".colorPicker #" + $colorVar).val($pickedColor);
+  //   $(".colorPicker #" + $colorVar + "-txt").val($pickedColor);
+  updateColors($(".colorPicker #" + $colorVar).parent(), $pickedColor, true);
 });
 
+$(
+  ".pageSettings .section.themes .tabContainer .customTheme input[type=color]"
+).on("change", (e) => {
+  // UpdateConfig.setCustomTheme(true, true);
+  let $colorVar = $(e.currentTarget).attr("id");
+  let $pickedColor = $(e.currentTarget).val();
+
+  //todo check if needed
+  //   document.documentElement.style.setProperty($colorVar, $pickedColor);
+  //   $(".colorPicker #" + $colorVar).attr("value", $pickedColor);
+  //   $(".colorPicker #" + $colorVar).val($pickedColor);
+  //   $(".colorPicker #" + $colorVar + "-txt").val($pickedColor);
+  // });
+
+  // $(
+  //   ".pageSettings .section.themes .tabContainer .customTheme input[type=text]"
+  // ).on("input", (e) => {
+  //   // UpdateConfig.setCustomTheme(true, true);
+  //   let $colorVar = $(e.currentTarget).attr("id").replace("-txt", "");
+  //   let $pickedColor = $(e.currentTarget).val();
+
+  //   document.documentElement.style.setProperty($colorVar, $pickedColor);
+  //   $(".colorPicker #" + $colorVar).attr("value", $pickedColor);
+  //   $(".colorPicker #" + $colorVar).val($pickedColor);
+  //   $(".colorPicker #" + $colorVar + "-txt").val($pickedColor);
+  updateColors($(".colorPicker #" + $colorVar).parent(), $pickedColor);
+});
+
+$(".pageSettings .section.themes .tabContainer .customTheme input[type=text]")
+  .on("blur", (e) => {
+    let $colorVar = $(e.currentTarget).attr("id");
+    let $pickedColor = $(e.currentTarget).val();
+
+    updateColors($(".colorPicker #" + $colorVar).parent(), $pickedColor);
+  })
+  .on("keypress", function (e) {
+    if (e.which === 13) {
+      $(this).attr("disabled", "disabled");
+      let $colorVar = $(e.currentTarget).attr("id");
+      let $pickedColor = $(e.currentTarget).val();
+
+      updateColors($(".colorPicker #" + $colorVar).parent(), $pickedColor);
+      $(this).removeAttr("disabled");
+    }
+  });
+
 $(".pageSettings .saveCustomThemeButton").click((e) => {
   let save = [];
   $.each(
@@ -254,9 +382,8 @@ $(".pageSettings #loadCustomColorsFromPreset").click((e) => {
       } else if (colorName === "--colorful-error-extra-color") {
         color = themecolors.colorfulErrorExtra;
       }
-      $(".colorPicker #" + colorName).attr("value", color);
-      $(".colorPicker #" + colorName).val(color);
-      $(".colorPicker [for=" + colorName + "]").text(color);
+
+      updateColors($(".colorPicker #" + colorName).parent(), color);
     });
   }, 250);
 });

src/sass/inputs.scss

@@ -38,21 +38,12 @@ input[type="range"] {
 }
 
 input[type="color"] {
-  -webkit-appearance: none;
+  height: 3px; //i dont know why its 3, but safari gods have spoken - 3 makes it work
+  opacity: 0;
   padding: 0;
-  width: 100%;
-  // height: 32px;
-  height: 1.8rem;
-  overflow: hidden;
-  border-radius: var(--roundness);
-}
-
-input[type="color"]::-webkit-color-swatch-wrapper {
-  padding: 0;
-}
-
-input[type="color"]::-webkit-color-swatch {
-  border: none;
+  margin: 0;
+  position: absolute;
+  pointer-events: none;
 }
 
 ::-moz-color-swatch {
@@ -71,35 +62,6 @@ input[type="number"] {
   -moz-appearance: textfield;
 }
 
-.colorPicker {
-  text-align: center;
-  will-change: transform;
-  transition: transform 0.2s ease-in-out;
-  overflow: hidden;
-  border-radius: var(--roundness);
-
-  & label {
-    position: absolute;
-    width: 100%;
-    // height: 32px;
-    line-height: 1.8rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: auto;
-    color: var(--bg-color);
-    cursor: pointer;
-  }
-
-  & [for="--bg-color"] {
-    color: var(--text-color);
-  }
-
-  & #--bg-color {
-    border: 2px solid var(--sub-color);
-  }
-}
-
 .select2-dropdown {
   background-color: var(--bg-color);
   color: var(--text-color);

src/sass/settings.scss

@@ -66,17 +66,13 @@
       }
     }
 
-    .inputAndSave {
+    .inputAndButton {
       display: grid;
       grid-template-columns: 8fr 1fr;
       gap: 0.5rem;
       margin-bottom: 0.5rem;
-      input {
-        // grid-column: 1/3;
-      }
 
-      .save {
-        // grid-column: 3/4;
+      .button {
         height: auto;
 
         .fas {
@@ -86,6 +82,15 @@
       }
     }
 
+    &.themes .tabContainer [tabcontent="custom"] {
+      label.button:first-child {
+        color: var(--text-color);
+      }
+      label.button {
+        color: var(--bg-color);
+      }
+    }
+
     &.customBackgroundFilter {
       .groups {
         grid-area: buttons;

static/index.html

@@ -2108,7 +2108,7 @@
                   threshold.
                 </div>
                 <div>
-                  <div class="inputAndSave">
+                  <div class="inputAndButton">
                     <input
                       type="number"
                       placeholder="min wpm"
@@ -2153,7 +2153,7 @@
                   threshold.
                 </div>
                 <div>
-                  <div class="inputAndSave">
+                  <div class="inputAndButton">
                     <input
                       type="number"
                       placeholder="min accuracy"
@@ -2199,7 +2199,7 @@
                   threshold to automatically decrease for longer words.
                 </div>
                 <div>
-                  <div class="inputAndSave">
+                  <div class="inputAndButton">
                     <input
                       type="number"
                       placeholder="min burst"
@@ -2291,7 +2291,7 @@
                   Select which layouts you want the layoutfluid funbox to cycle
                   through.
                 </div>
-                <div class="inputAndSave">
+                <div class="inputAndButton">
                   <input
                     type="text"
                     placeholder="layouts (separated by space)"
@@ -2709,7 +2709,7 @@
                   'average' option average the speed of last 10 results.
                 </div>
                 <div>
-                  <div class="inputAndSave">
+                  <div class="inputAndButton">
                     <input
                       type="number"
                       placeholder="wpm"
@@ -3327,7 +3327,7 @@
                   fully visible. Max fits the image corner to corner.
                 </div>
                 <div>
-                  <div class="inputAndSave">
+                  <div class="inputAndButton">
                     <input
                       type="text"
                       placeholder="image url"
@@ -3478,79 +3478,194 @@
                   </div>
                 </div>
                 <!-- <div class='tabs'>
-                <button tab="preset" class="tab">preset</button>
-                <button tab="custom" class="tab">custom</button>
-              </div> -->
+                  <button tab="preset" class="tab">preset</button>
+                  <button tab="custom" class="tab">custom</button>
+                </div> -->
+
+                <!-- Used to convert colors to hex  -->
+                <div class="colorConverter"></div>
+
                 <div class="tabContainer">
                   <div
                     tabContent="custom"
                     class="tabContent section customTheme hidden"
                   >
                     <label class="colorText">background</label>
-                    <span class="colorPicker">
-                      <label for="--bg-color">#000000</label>
-                      <input type="color" value="#000000" id="--bg-color" />
-                    </span>
+                    <div class="colorPicker inputAndButton">
+                      <input
+                        type="text"
+                        value="#000000"
+                        class="input"
+                        id="--bg-color-txt"
+                      />
+                      <label
+                        for="--bg-color"
+                        class="button"
+                        style="
+                          color: var(--text-color);
+                          background: rgba(0, 0, 0, 0.1);
+                        "
+                      >
+                        <i class="fas fa-fw fa-palette"></i>
+                      </label>
+                      <input
+                        type="color"
+                        class="color"
+                        value="#000000"
+                        id="--bg-color"
+                      />
+                    </div>
                     <label class="colorText">main</label>
-                    <span class="colorPicker">
-                      <label for="--main-color">#000000</label>
-                      <input type="color" value="#000000" id="--main-color" />
-                    </span>
+                    <div class="colorPicker inputAndButton">
+                      <input
+                        type="text"
+                        value="#000000"
+                        class="input"
+                        id="--main-color-txt"
+                      />
+                      <label for="--main-color" class="button">
+                        <i class="fas fa-fw fa-palette"></i>
+                      </label>
+                      <input
+                        type="color"
+                        class="color"
+                        value="#000000"
+                        id="--main-color"
+                      />
+                    </div>
                     <label class="colorText">caret</label>
-                    <span class="colorPicker">
-                      <label for="--caret-color">#000000</label>
-                      <input type="color" value="#000000" id="--caret-color" />
-                    </span>
+                    <div class="colorPicker inputAndButton">
+                      <input
+                        type="text"
+                        value="#000000"
+                        class="input"
+                        id="--caret-color-txt"
+                      />
+                      <label for="--caret-color" class="button">
+                        <i class="fas fa-fw fa-palette"></i>
+                      </label>
+                      <input
+                        type="color"
+                        class="color"
+                        value="#000000"
+                        id="--caret-color"
+                      />
+                    </div>
                     <label class="colorText">sub</label>
-                    <span class="colorPicker">
-                      <label for="--sub-color">#000000</label>
-                      <input type="color" value="#000000" id="--sub-color" />
-                    </span>
+                    <div class="colorPicker inputAndButton">
+                      <input
+                        type="text"
+                        value="#000000"
+                        class="input"
+                        id="--sub-color-txt"
+                      />
+                      <label for="--sub-color" class="button">
+                        <i class="fas fa-fw fa-palette"></i>
+                      </label>
+                      <input
+                        type="color"
+                        class="color"
+                        value="#000000"
+                        id="--sub-color"
+                      />
+                    </div>
                     <label class="colorText">text</label>
-                    <span class="colorPicker">
-                      <label for="--text-color">#000000</label>
-                      <input type="color" value="#000000" id="--text-color" />
-                    </span>
+                    <div class="colorPicker inputAndButton">
+                      <input
+                        type="text"
+                        value="#000000"
+                        class="input"
+                        id="--text-color-txt"
+                      />
+                      <label for="--text-color" class="button">
+                        <i class="fas fa-fw fa-palette"></i>
+                      </label>
+                      <input
+                        type="color"
+                        class="color"
+                        value="#000000"
+                        id="--text-color"
+                      />
+                    </div>
 
                     <span class="spacer"></span>
 
                     <label class="colorText">error</label>
-                    <span class="colorPicker">
-                      <label for="--error-color">#000000</label>
-                      <input type="color" value="#000000" id="--error-color" />
-                    </span>
-                    <label class="colorText">extra error</label>
-                    <span class="colorPicker">
-                      <label for="--error-extra-color">#000000</label>
+                    <div class="colorPicker inputAndButton">
+                      <input
+                        type="text"
+                        value="#000000"
+                        class="input"
+                        id="--error-color-txt"
+                      />
+                      <label for="--error-color" class="button">
+                        <i class="fas fa-fw fa-palette"></i>
+                      </label>
                       <input
                         type="color"
+                        class="color"
+                        value="#000000"
+                        id="--error-color"
+                      />
+                    </div>
+                    <label class="colorText">extra error</label>
+                    <div class="colorPicker inputAndButton">
+                      <input
+                        type="text"
+                        value="#000000"
+                        class="input"
+                        id="--error-extra-color-txt"
+                      />
+                      <label for="--error-extra-color" class="button">
+                        <i class="fas fa-fw fa-palette"></i>
+                      </label>
+                      <input
+                        type="color"
+                        class="color"
                         value="#000000"
                         id="--error-extra-color"
                       />
-                    </span>
+                    </div>
 
                     <p>colorful mode</p>
 
                     <label class="colorText">error</label>
-                    <span class="colorPicker">
-                      <!-- Change variable names here -->
-                      <label for="--colorful-error-color">#000000</label>
+                    <div class="colorPicker inputAndButton">
+                      <input
+                        type="text"
+                        value="#000000"
+                        class="input"
+                        id="--colorful-error-color-txt"
+                      />
+                      <label for="--colorful-error-color" class="button">
+                        <i class="fas fa-fw fa-palette"></i>
+                      </label>
                       <input
                         type="color"
+                        class="color"
                         value="#000000"
                         id="--colorful-error-color"
                       />
-                    </span>
+                    </div>
+
                     <label class="colorText">extra error</label>
-                    <span class="colorPicker">
-                      <!-- Change variable names here -->
-                      <label for="--colorful-error-extra-color">#000000</label>
+                    <div class="colorPicker inputAndButton">
+                      <input
+                        type="text"
+                        value="#000000"
+                        class="input"
+                        id="--colorful-error-extra-color-txt"
+                      />
+                      <label for="--colorful-error-extra-color" class="button">
+                        <i class="fas fa-fw fa-palette"></i>
+                      </label>
                       <input
                         type="color"
+                        class="color"
                         value="#000000"
                         id="--colorful-error-extra-color"
                       />
-                    </span>
+                    </div>
                     <!-- <div
                       style="
                         display: grid;

static/languages/estonian.json

@@ -1,207 +1,207 @@
 {
-    "name": "estonian",
-    "leftToRight": true,
-    "bcp47": "et-EE",
-    "words": [
-        "on",
-        "ja",
-        "et",
-        "ei",
-        "kui",
-        "ka",
-        "ning",
-        "ta",
-        "see",
-        "oli",
-        "aga",
-        "oma",
-        "Eesti",
-        "mis",
-        "siis",
-        "nii",
-        "või",
-        "pole",
-        "kes",
-        "seda",
-        "kuid",
-        "aasta",
-        "selle",
-        "ma",
-        "juba",
-        "krooni",
-        "tema",
-        "veel",
-        "sõnul",
-        "välja",
-        "üle",
-        "ole",
-        "vaid",
-        "kas",
-        "aastal",
-        "ütles",
-        "väga",
-        "kõik",
-        "võib",
-        "pärast",
-        "sest",
-        "tuleb",
-        "mida",
-        "kus",
-        "eest",
-        "nagu",
-        "edasi",
-        "mitte",
-        "üks",
-        "saab",
-        "palju",
-        "nad",
-        "meie",
-        "oleks",
-        "nende",
-        "vastu",
-        "ära",
-        "olnud",
-        "mille",
-        "me",
-        "praegu",
-        "enam",
-        "tagasi",
-        "Tallinna",
-        "näiteks",
-        "rohkem",
-        "ajal",
-        "nüüd",
-        "küll",
-        "kõige",
-        "midagi",
-        "kokku",
-        "Euroopa",
-        "kaks",
-        "need",
-        "teha",
-        "peab",
-        "raha",
-        "ehk",
-        "olla",
-        "kuidas",
-        "kohta",
-        "Loe",
-        "olid",
-        "sai",
-        "ise",
-        "protsenti",
-        "sellest",
-        "Eestis",
-        "peale",
-        "enne",
-        "miljonit",
-        "täna",
-        "neid",
-        "aastat",
-        "saa",
-        "ega",
-        "Tartu",
-        "peaks",
-        "kogu",
-        "ette",
-        "kuna",
-        "ainult",
-        "saanud",
-        "ju",
-        "kuni",
-        "läbi",
-        "just",
-        "siiski",
-        "hea",
-        "samuti",
-        "alla",
-        "koos",
-        "kl",
-        "seal",
-        "ikka",
-        "saada",
-        "ühe",
-        "olen",
-        "osa",
-        "isegi",
-        "eile",
-        "korda",
-        "USA",
-        "minu",
-        "meil",
-        "iga",
-        "lisas",
-        "jooksul",
-        "olema",
-        "kindlasti",
-        "ee",
-        "inimesed",
-        "suur",
-        "riigi",
-        "sel",
-        "võimalik",
-        "miks",
-        "sama",
-        "siin",
-        "poole",
-        "jaoks",
-        "rääkis",
-        "uue",
-        "end",
-        "aega",
-        "elu",
-        "Venemaa",
-        "kolm",
-        "teatas",
-        "järgi",
-        "ligi",
-        "võiks",
-        "mees",
-        "jääb",
-        "tuli",
-        "juurde",
-        "vaja",
-        "lihtsalt",
-        "hästi",
-        "kelle",
-        "enda",
-        "vahel",
-        "selles",
-        "eriti",
-        "poolt",
-        "maailma",
-        "uus",
-        "varem",
-        "puhul",
-        "keegi",
-        "kaasa",
-        "teda",
-        "mul",
-        "oleme",
-        "läheb",
-        "kahe",
-        "võtta",
-        "tal",
-        "miljoni",
-        "tõttu",
-        "selleks",
-        "talle",
-        "teine",
-        "sa",
-        "all",
-        "asi",
-        "alles",
-        "umbes",
-        "ütleb",
-        "polnud",
-        "tegelikult",
-        "ees",
-        "liiga",
-        "märkis",
-        "jäi",
-        "pea",
-        "teise",
-        "maha",
-        "vähemalt"
-    ]
+  "name": "estonian",
+  "leftToRight": true,
+  "bcp47": "et-EE",
+  "words": [
+    "on",
+    "ja",
+    "et",
+    "ei",
+    "kui",
+    "ka",
+    "ning",
+    "ta",
+    "see",
+    "oli",
+    "aga",
+    "oma",
+    "Eesti",
+    "mis",
+    "siis",
+    "nii",
+    "või",
+    "pole",
+    "kes",
+    "seda",
+    "kuid",
+    "aasta",
+    "selle",
+    "ma",
+    "juba",
+    "krooni",
+    "tema",
+    "veel",
+    "sõnul",
+    "välja",
+    "üle",
+    "ole",
+    "vaid",
+    "kas",
+    "aastal",
+    "ütles",
+    "väga",
+    "kõik",
+    "võib",
+    "pärast",
+    "sest",
+    "tuleb",
+    "mida",
+    "kus",
+    "eest",
+    "nagu",
+    "edasi",
+    "mitte",
+    "üks",
+    "saab",
+    "palju",
+    "nad",
+    "meie",
+    "oleks",
+    "nende",
+    "vastu",
+    "ära",
+    "olnud",
+    "mille",
+    "me",
+    "praegu",
+    "enam",
+    "tagasi",
+    "Tallinna",
+    "näiteks",
+    "rohkem",
+    "ajal",
+    "nüüd",
+    "küll",
+    "kõige",
+    "midagi",
+    "kokku",
+    "Euroopa",
+    "kaks",
+    "need",
+    "teha",
+    "peab",
+    "raha",
+    "ehk",
+    "olla",
+    "kuidas",
+    "kohta",
+    "Loe",
+    "olid",
+    "sai",
+    "ise",
+    "protsenti",
+    "sellest",
+    "Eestis",
+    "peale",
+    "enne",
+    "miljonit",
+    "täna",
+    "neid",
+    "aastat",
+    "saa",
+    "ega",
+    "Tartu",
+    "peaks",
+    "kogu",
+    "ette",
+    "kuna",
+    "ainult",
+    "saanud",
+    "ju",
+    "kuni",
+    "läbi",
+    "just",
+    "siiski",
+    "hea",
+    "samuti",
+    "alla",
+    "koos",
+    "kl",
+    "seal",
+    "ikka",
+    "saada",
+    "ühe",
+    "olen",
+    "osa",
+    "isegi",
+    "eile",
+    "korda",
+    "USA",
+    "minu",
+    "meil",
+    "iga",
+    "lisas",
+    "jooksul",
+    "olema",
+    "kindlasti",
+    "ee",
+    "inimesed",
+    "suur",
+    "riigi",
+    "sel",
+    "võimalik",
+    "miks",
+    "sama",
+    "siin",
+    "poole",
+    "jaoks",
+    "rääkis",
+    "uue",
+    "end",
+    "aega",
+    "elu",
+    "Venemaa",
+    "kolm",
+    "teatas",
+    "järgi",
+    "ligi",
+    "võiks",
+    "mees",
+    "jääb",
+    "tuli",
+    "juurde",
+    "vaja",
+    "lihtsalt",
+    "hästi",
+    "kelle",
+    "enda",
+    "vahel",
+    "selles",
+    "eriti",
+    "poolt",
+    "maailma",
+    "uus",
+    "varem",
+    "puhul",
+    "keegi",
+    "kaasa",
+    "teda",
+    "mul",
+    "oleme",
+    "läheb",
+    "kahe",
+    "võtta",
+    "tal",
+    "miljoni",
+    "tõttu",
+    "selleks",
+    "talle",
+    "teine",
+    "sa",
+    "all",
+    "asi",
+    "alles",
+    "umbes",
+    "ütleb",
+    "polnud",
+    "tegelikult",
+    "ees",
+    "liiga",
+    "märkis",
+    "jäi",
+    "pea",
+    "teise",
+    "maha",
+    "vähemalt"
+  ]
 }