feat: Add select for ability icons

app/assets/stylesheets/logged_in_user/_inscryb-mde.scss

@@ -109,6 +109,7 @@
   display: block;
   width: 100%;
   height: auto;
+  min-height: 2.5rem;
   padding: .25em .75em;
   text-align: left;
   font-size: $font-size-small;
@@ -118,10 +119,20 @@
     background: lighten($bg-dark, 5%);
     color: $white;
   }
+
+  &--icon {
+    display: flex;
+    align-items: center;
+    gap: $margin / 8;
+
+    img {
+      width: 2rem;
+    }
+  }
 }
 
 .editor-preview table td,
-.editor-preview table th,,
+.editor-preview table th,
 .editor-preview-side table td,
 .editor-preview-side table th {
   border: 0;

app/helpers/application_helper.rb

@@ -68,6 +68,11 @@ def badges
     YAML.load(File.read(Rails.root.join("config/arrays", "badges.yml")))
   end
 
+  def ability_icons
+    abilities = YAML.load(File.read(Rails.root.join("config/arrays", "abilities.yml")))
+    abilities.map { |ability| [ability.to_sym, image_url(ability_name_to_icon_url(ability))] }.to_h
+  end
+
   def current_locale
     I18n.locale == :mixed ? "en" : I18n.locale.to_s
   end

app/helpers/content_helper.rb

@@ -191,7 +191,7 @@ def hero_name_to_icon_url(hero, size = 50)
   end
 
   def ability_name_to_icon_url(ability, size = 50)
-    string = "abilities/#{ size }/#{ ability.downcase.gsub(":", "").gsub(" ", "-").gsub("!", "") }.png"
+    string = "abilities/#{ size }/#{ ability.downcase.gsub(":", "").gsub(" ", "-").gsub("!", "").gsub("(", "").gsub(")", "") }.png"
     asset_exists?(string) ? string : nil
   end
 

app/javascript/src/inscryb-mde-ability-select.js

@@ -0,0 +1,80 @@
+export function insertAbilityIconSelect(element, mde, codemirror) {
+  const button = mde.gui.toolbar.querySelector(".fa-ability-icon").closest("button")
+
+  button.classList.toggle("dropdown-open")
+
+  if (!button.classList.contains("dropdown-open")) {
+    button.querySelector(".editor-dropdown").remove()
+    return
+  }
+
+  const abilities = JSON.parse(element.dataset.abilities)
+
+  const dropdownElement = document.createElement("div")
+  dropdownElement.classList.add("editor-dropdown")
+
+  const abilitiesElement = document.createElement("div")
+
+  const input = document.createElement("input")
+  input.type = "text"
+  input.classList.add("form-input", "bg-darker", "mb-1/8")
+  input.placeholder = "Search by name..."
+
+  input.addEventListener("click", event => {
+    event.stopPropagation()
+    event.preventDefault()
+
+    input.focus()
+  })
+
+  input.addEventListener("input", event => onInput(event, abilitiesElement, codemirror, abilities))
+
+  dropdownElement.append(input)
+  dropdownElement.append(abilitiesElement)
+
+  buildItems(abilitiesElement, codemirror, abilities)
+
+  button.append(dropdownElement)
+
+  input.focus()
+}
+
+function buildItems(abilitiesElement, codemirror, abilities) {
+  if (!Object.keys(abilities).length) {
+    abilitiesElement.innerHTML = "<div class=\"p-1/8 pt-0\">No results found</div>"
+    return
+  }
+
+  abilitiesElement.innerHTML = ""
+
+  Object.entries(abilities).forEach(([key, url]) => {
+    const abilityElement = document.createElement("div")
+    abilityElement.classList.add("editor-dropdown__item", "editor-dropdown__item--icon")
+    abilityElement.innerText = key
+
+    const iconElement = document.createElement("img")
+    iconElement.loading = "lazy"
+    iconElement.src = url
+
+    abilityElement.prepend(iconElement)
+
+    abilityElement.addEventListener("click", () => {
+      codemirror.replaceSelection(`[ability ${ key }]`)
+    })
+
+    abilitiesElement.append(abilityElement)
+  })
+}
+
+function onInput(event, abilitiesElement, codemirror, abilities) {
+  let filteredAbilities = {}
+  if (!event.target.value) {
+    filteredAbilities = abilities
+  } else {
+    for (const key in abilities) {
+      if (key.toLowerCase().includes(event.target.value.toLowerCase())) filteredAbilities[key] = abilities[key]
+    }
+  }
+
+  buildItems(abilitiesElement, codemirror, filteredAbilities)
+}

app/javascript/src/inscryb-mde.js

@@ -2,6 +2,7 @@ import InscrybMDE from "inscrybmde"
 import InscrybeInsertImage from "./inscrybe-mde-paste-image"
 import InscrybeInsertVideo from "./inscrybe-mde-insert-video"
 import FetchRails from "./fetch-rails"
+import { insertAbilityIconSelect } from "./inscryb-mde-ability-select"
 import { buildInputSortable, insertBlockTemplate, removeBlockTemplate } from "./blocks"
 import debounce from "./debounce"
 import * as lazyVideo from "../src/lazy-video"
@@ -90,7 +91,7 @@ class InitialiseInscrybeMDE {
         title: "Hero Icon (Use English Hero name). Simple names are ok (Torbjörn -> Torbjorn)"
       },
       {
-        action: () => this.insertAbilityIcon(),
+        action: () => insertAbilityIconSelect(this.element, this.mde, this.codemirror),
         name: "ability-icon",
         className: "fa fa-ability-icon",
         title: "Ability Icon (Use English ability name)."
@@ -235,10 +236,6 @@ class InitialiseInscrybeMDE {
     }
   }
 
-  insertAbilityIcon() {
-    this.codemirror.replaceSelection("[ability Biotic Grenade]")
-  }
-
   insertBlock(name = "", existingBlock = true, blockId = null, lineNumber = null, charCount = 0) {
     let position = this.codemirror.getCursor()
 

app/views/posts/form/tabs/_description.html.erb

@@ -6,7 +6,7 @@
   </div>
 
   <%= form.file_field :videos, multiple: true, direct_upload: true, class: "hidden-field", data: { action: "form-videos" } %>
-  <%= form.text_area :description, class: "form-input form-textarea", data: { role: "simple-mde markdown-textarea", enable_blocks: true, max_length: POST_DESCRIPTION_LIMIT } %>
+  <%= form.text_area :description, class: "form-input form-textarea", data: { role: "simple-mde markdown-textarea", enable_blocks: true, max_length: POST_DESCRIPTION_LIMIT, abilities: ability_icons.to_json } %>
 </div>
 
 <div class="modal modal--content-width" data-modal="markdown-preview" data-hide-on-close style="display: none">