ui.html

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<style type="text/css">
  body {
    background-color: var(--figma-color-bg);
    color: var(--figma-color-text);
  }
  h2 {
    color: var(--figma-color-text);
  }
  p {
    color: var(--figma-color-text);
  }
  .loader-container {
    background-color: var(--figma-color-bg);
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    flex-direction: column;
  }
</style>

<div class="loader-container" id="loading-overlay">
  <div class="spinner-border text-light" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

<div class="loader-container d-none" id="no-mistakes-found-overlay">
  <p>No mistakes found</p>
  <button type="button" class="btn btn-secondary mt-2" onclick="refreshSpelling();">Refresh</button>
</div>

<div class="p-2">
  <div class="mb-3">
    <input type="text" id="current-spelling-head" class="form-control" placeholder="Please wait..." disabled>
  </div>

  <ul class="list-group" id="current-spelling-suggestions"></ul>
  <button type="button" class="btn btn-secondary mt-2" onclick="nextSuggestion();">Next Suggestion</button>
  <button type="button" class="btn btn-secondary mt-2" onclick="refreshSpelling();">Refresh</button>
</div>

<script>
function set_valid_word_list (word_list){
    valid_word_list = word_list;
}

function find_similar(word, score_thresh){
    var max_size = 10;
    var top_words = [];
    var top_scores = [];

    for(var i = 0; i < valid_word_list.length; i++){
        // compute score
        var element = valid_word_list[i];
        var temp_score = score(word, element);
        
        if(score_thresh < temp_score){
            // check if it is a top score
            var index = getListIndex(top_scores, temp_score);
            if(index < max_size){
                top_words.splice(index, 0, element);
                top_scores.splice(index, 0, temp_score);
                
                if(top_words.length > max_size){
                    top_words.pop();
                    top_scores.pop();
                }
            }
        }
    }
    
    return [top_words, top_scores];
}

function getListIndex(scores, x){
    for(var i = 0; i < scores.length; i++){
        if(x > scores[i]) return i;
    }
    return scores.length;
}

function score(x, y){
    var length_weight = 0.3;
    var match_weight = 0.5;
    var shift_weight = 0.2;
    
    return length_weight * length_score(x,y) + match_weight * match_score(x,y)
                                             + shift_weight * shift_score(x,y);
}

function length_score(x, y){
    var diff = Math.abs(x.length - y.length);
    return Math.max(1.0 - diff / 4, 0);
}

function match_score(x, y){
    var length = Math.min(x.length, y.length);
    if(length <= 0) return 0.0; 
    
    var total = 0;
    for(var i = 0; i < length; i++){
        if(x.charAt(i) == y.charAt(i)) total++;
    }
    
    var diff = length - total;
    return Math.max(1.0 - diff / 5, 0);
}

function shift_score(x, y){
    var l2 = match_score(x.substring(2), y);
    var l1 = match_score(x.substring(1), y);
    var c = match_score(x, y);
    var r1 = match_score(x, y.substring(1));
    var r2 = match_score(x, y.substring(2));
    
    return Math.max(l2, l1, c, r1, r2);
}

var xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", "https://cdn.electrokid.co.uk/words.txt", false );
xmlHttp.send( null );

var english_word_list = xmlHttp.responseText.toLowerCase().split("\n");

set_valid_word_list(english_word_list);

var ignore_list = [];
var current_mistakes = [];
var current_mistake_index = 0;
var current_word_index = 0;

onmessage = (event) => {
  var dataSent = event.data.pluginMessage;
  console.log(dataSent);

  for (var currentElementIndex in dataSent) {
    var wordArray = dataSent[currentElementIndex].nodeText.split(/[\s,\-]+/);
    // Find all mistakes
    for (currentWord in wordArray) {
      if (!wordArray[currentWord].includes("@") && !wordArray[currentWord].includes("http://") && !wordArray[currentWord].includes("https://") && !english_word_list.includes(wordArray[currentWord].replace(/[^a-zA-Z ]/g, "").toLowerCase())) {
        current_mistakes.push({ word: wordArray[currentWord], wordIndex: currentWord, wordStart: current_word_index, nodeId: dataSent[currentElementIndex].nodeId, elementIndex: currentElementIndex, spellingSuggest: find_similar(wordArray[currentWord].toLowerCase().replace(/[^a-zA-Z ]/g, ""), 0.5)})
      }
      current_word_index += wordArray[currentWord].length + 1;
    }
    current_word_index = 0;
  }

  console.log(current_mistakes);
  current_mistake_index = 0;

  if (current_mistakes.length > 0) {
    showSuggestion(0);
  } else {
    document.getElementById("no-mistakes-found-overlay").classList.remove("d-none");
  }
  
};

function showSuggestion(suggestionIndex) {
  document.getElementById("current-spelling-head").value = current_mistakes[suggestionIndex].word;
  document.getElementById("current-spelling-suggestions").innerHTML = "";

  for (var spellingSuggestion in current_mistakes[suggestionIndex].spellingSuggest[0]) {
    document.getElementById("current-spelling-suggestions").innerHTML = document.getElementById("current-spelling-suggestions").innerHTML + "<li class='list-group-item'>" + current_mistakes[suggestionIndex].spellingSuggest[0][spellingSuggestion] + "</li>";
  }

  document.getElementById("loading-overlay").classList.add("d-none");
  document.getElementById("no-mistakes-found-overlay").classList.add("d-none");

  var endSelect = parseInt(current_mistakes[suggestionIndex].wordStart) + parseInt(current_mistakes[suggestionIndex].word.length);
  parent.postMessage({pluginMessage: {type: "SELECT", nodeId: current_mistakes[suggestionIndex].nodeId, textStart: current_mistakes[suggestionIndex].wordStart, textEnd: endSelect}}, '*');

  parent.postMessage({pluginMessage: {type: "RESIZE", height: document.body.offsetHeight }}, '*');
}

function nextSuggestion() {
  current_mistake_index += 1;
  if (current_mistake_index == current_mistakes.length) {
    current_mistake_index = 0;
  }

  showSuggestion(current_mistake_index);
}

function refreshSpelling() {
  document.getElementById("current-spelling-suggestions").innerHTML = "";
  document.getElementById("current-spelling-head").value = "";
  document.getElementById("loading-overlay").classList.remove("d-none");
  document.getElementById("no-mistakes-found-overlay").classList.add("d-none");
  console.log("Updating spell checks");
  window.setTimeout(() => {
    parent.postMessage({pluginMessage: {type: "REFRESH" }}, '*');
  }, 100);
}

</script>