mycowriter 0.1.7 → 0.1.10

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 39c5a2d07b1a5b470a372a3164de8055d040d75a2dc0688b89ddc00312b182ac
-  data.tar.gz: 28b25751676dfd32ebd30605a7431a7a6572bbaa31fea296a2414372d8ce15fb
+  metadata.gz: e1a1c921c961ded2607e45978d58795ee8f92bfef1ac34faa8256ff3b5d47a2d
+  data.tar.gz: be73f75a71d970fef1a51f2a9a2d8b1882afb7103cd204f0828e3c3acbc85d3c
 SHA512:
-  metadata.gz: a5ba7679b9d27b760637e7becfa3bf91f1820d4fe29fb587b2e32f446bf734481778a5e837b0ed4e48797b2bd709dade21fe45d3f0b950862f0837e71d3b5af7
-  data.tar.gz: e2dfde5dd18f9d103e91a13a12436a09163653d1a600834802cbbb5ef7ac93f48571a5c6ac29b29a30f7904cd69ed9eb0112f7ab2b99bc6b2df598166733f387
+  metadata.gz: 6b984d4be064516a2a60285fb81c477a611b18d3a71b97772bf3a159a1629b2dc41030b26eb980eb80cf6059ea92134c2349ca4ab8172a4273743344e67186a3
+  data.tar.gz: 044acf422c1eb53015b38cfbb1680df25b156635331310be9f78ea404126bf8e0802c077f06cb0d80bd60c34455d78d40d43224051ef1b311b6b6cb753931a30

data/app/controllers/mycowriter/autocomplete_controller.rb

@@ -110,6 +110,9 @@ module Mycowriter
         end
       end
 
+      # Only return legitimate names (exclude illegitimate/invalid names)
+      scope = scope.where(name_status: 'Legitimate') if ::MbList.column_names.include?('name_status')
+
       scope
         .select(:id, :taxon_name)
         .order(

data/app/javascript/mycowriter/autocomplete_controller.js

@@ -1,270 +1,277 @@
 import { Controller } from "@hotwired/stimulus"
 
-// Mycowriter Autocomplete Controller
-// Provides token-based autocomplete for genus/species names
-//
-// Usage: Attach data-controller="mycowriter--autocomplete" and appropriate data attributes.
-// Requirements: An autocomplete endpoint that returns [{id, name}] in JSON.
+// Inline Autocomplete Controller for textarea fields
+// Provides genus/species name suggestions while typing in prose
+// Inserts selected text at cursor position
+// Primary use case: Helping users spell genus/species names correctly in articles and mushroom notes
 
 export default class extends Controller {
-    static targets = [
-        "input", "dropdown", "list", "hiddenIds", "loader"
-    ]
-    static values = {
-        url: String,
-        min: { type: Number, default: 4 },
-        mushroomId: String,
-        kind: String,
-        requireUppercase: { type: Boolean, default: true }
-    }
+  static targets = ["textarea", "dropdown"]
+  static values = {
+    genusUrl: String,
+    speciesUrl: String,
+    min: { type: Number, default: 4 }
+  }
 
-    connect() {
-        this.selected = new Map()
-        this.debounceTimer = null
-        this.inputTarget.addEventListener("input", this.onInput.bind(this))
-        this.inputTarget.addEventListener("focus", this.onInput.bind(this))
-        this.listTarget.querySelectorAll("[data-token-id]").forEach(el => {
-            this.selected.set(el.dataset.tokenId, el.textContent.trim())
-        })
-        this.dropdownTarget.addEventListener("click", this.onDropdownClick.bind(this))
+  connect() {
+    this.debounceTimer = null
+    this.currentWord = ""
+    this.cursorPosition = 0
+    this.wordStart = 0
+    this.ignoreNextInput = false
+  }
+
+  onInput(event) {
+    // Skip if this input was triggered by our own text insertion
+    if (this.ignoreNextInput) {
+      this.ignoreNextInput = false
+      return
     }
 
-    onInput() {
-        clearTimeout(this.debounceTimer)
-        let query = this.inputTarget.value.trim()
+    clearTimeout(this.debounceTimer)
 
-        const minLength = parseInt(this.inputTarget.getAttribute("minlength")) || this.minValue
+    const textarea = this.textareaTarget
+    this.cursorPosition = textarea.selectionStart
+    const text = textarea.value
 
-        // Check for uppercase requirement (genus names start with capital letter)
-        if(this.requireUppercaseValue && query.length > 0 && query[0] !== query[0].toUpperCase()) {
-            this.dropdownTarget.innerHTML = `<li class='px-3 py-2 text-sm text-gray-400'>Genus names start with uppercase (e.g., Agaricus)</li>`
-            this.dropdownTarget.classList.remove("hidden")
-            return
-        }
+    // Get word at cursor
+    const wordInfo = this.getWordAtCursor(text, this.cursorPosition)
+    this.currentWord = wordInfo.word
+    this.wordStart = wordInfo.start
 
-        // Show immediate feedback
-        if(query.length > 0 && query.length < minLength) {
-            this.dropdownTarget.innerHTML = `<li class='px-3 py-2 text-sm text-gray-400'>Type ${minLength - query.length} more character(s)...</li>`
-            this.dropdownTarget.classList.remove("hidden")
-            return
-        }
+    // Check if should trigger autocomplete:
+    // 1. Uppercase word >= 4 chars (genus name like "Ganoderma")
+    // 2. OR lowercase word >= 4 chars AFTER a capitalized word (species epithet like "sessile" after "Ganoderma")
+    const isUppercase = /^[A-Z]/.test(this.currentWord)
+    const isLowercaseAfterGenus = /^[a-z]/.test(this.currentWord) && this.hasPrecedingCapitalizedWord(text, this.wordStart)
 
-        if(query.length < minLength) {
-            this.hideDropdown()
-            return
-        }
-
-        // Show loading immediately before debounce
-        this.showLoader()
-        this.debounceTimer = setTimeout(() => {
-            this.autocomplete(query)
-        }, 150)
+    if (this.currentWord.length >= this.minValue && (isUppercase || isLowercaseAfterGenus)) {
+      this.debounceTimer = setTimeout(() => {
+        this.fetchSuggestions(this.currentWord)
+      }, 150)
+    } else {
+      this.hideDropdown()
     }
+  }
 
-    autocomplete(query) {
-        this.showLoader()
-        const url = new URL(this.urlValue, window.location.origin)
-        url.searchParams.append("q", query)
+  hasPrecedingCapitalizedWord(text, currentWordStart) {
+    // Look backwards from current word to find previous word
+    // Check if it starts with capital letter (likely a genus name)
+    let i = currentWordStart - 1
 
-        // For species autocomplete, pass mushroom_id to filter by selected genera
-        if(this.kindValue === "species" && this.hasMushroomIdValue) {
-            url.searchParams.append("mushroom_id", this.mushroomIdValue)
-        }
-
-        fetch(url, { headers: {"Accept": "application/json"} })
-            .then(r => r.json())
-            .then(items => {
-                this.renderDropdown(items)
-            })
-            .catch(_err => this.hideDropdown())
-            .finally(() => this.hideLoader())
+    // Skip whitespace backwards
+    while (i >= 0 && /\s/.test(text[i])) {
+      i--
     }
 
-    renderDropdown(items) {
-        if(!items.length) {
-            this.dropdownTarget.innerHTML = "<li class='px-3 py-2 text-sm text-gray-400'>No results</li>"
-            this.dropdownTarget.classList.remove("hidden")
-            return
-        }
-        this.dropdownTarget.innerHTML = items
-            .map(item =>
-                `<li class="hover:bg-blue-100 cursor-pointer px-3 py-2"
-             data-id="${item.id}"
-             data-label="${item.name}">
-          ${item.name}
-        </li>`
-            ).join("")
-        this.dropdownTarget.classList.remove("hidden")
+    if (i < 0) return false
+
+    // Find start of previous word
+    let prevWordEnd = i
+    while (i >= 0 && /[a-zA-Z]/.test(text[i])) {
+      i--
     }
 
-    hideDropdown() {
-        this.dropdownTarget.classList.add("hidden")
-        this.dropdownTarget.innerHTML = ""
+    const prevWord = text.substring(i + 1, prevWordEnd + 1)
+    return prevWord.length > 0 && /^[A-Z]/.test(prevWord)
+  }
+
+  getPreviousWord(text, currentWordStart) {
+    // Extract the previous word (genus name) for filtering species
+    let i = currentWordStart - 1
+
+    // Skip whitespace backwards
+    while (i >= 0 && /\s/.test(text[i])) {
+      i--
     }
 
-    showLoader() {
-        if(this.hasLoaderTarget) this.loaderTarget.classList.remove("hidden")
+    if (i < 0) return ""
+
+    // Find start of previous word
+    let prevWordEnd = i
+    while (i >= 0 && /[a-zA-Z]/.test(text[i])) {
+      i--
     }
-    hideLoader() {
-        if(this.hasLoaderTarget) this.loaderTarget.classList.add("hidden")
+
+    return text.substring(i + 1, prevWordEnd + 1)
+  }
+
+  getWordAtCursor(text, position) {
+    // Find word boundaries (letters only, no spaces or punctuation)
+    let start = position
+    let end = position
+
+    // Move back to start of word
+    while (start > 0 && /[a-zA-Z]/.test(text[start - 1])) {
+      start--
     }
 
-    onDropdownClick(e) {
-        const li = e.target.closest("li[data-id]")
-        if(!li) return
-        const id = li.dataset.id
-        const label = li.dataset.label
-        if(this.selected.has(id)) {
-            this.hideDropdown()
-            this.inputTarget.value = ""
-            return
-        }
-        this.createToken({id, label})
-        this.hideDropdown()
-        this.inputTarget.value = ""
-        this.inputTarget.focus()
-        // Save via AJAX
-        this.saveToken(id, label)
+    // Move forward to end of word
+    while (end < text.length && /[a-zA-Z]/.test(text[end])) {
+      end++
     }
 
-    createToken({id, label}) {
-        if(this.selected.has(id)) return
-        this.selected.set(id, label)
-        // Create pill
-        const pill = document.createElement("span")
-        pill.className = "inline-flex items-center bg-gray-200 rounded px-2 py-0.5 text-sm mr-1 mb-1"
-        pill.setAttribute("data-token-id", id)
-        pill.innerHTML = `
-      ${label}
-      <button type="button" class="ml-1 text-gray-600 hover:text-red-600" aria-label="Remove" data-action="mycowriter--autocomplete#removeToken" data-id="${id}">&times;</button>
-    `
-        this.listTarget.appendChild(pill)
-        this.updateHiddenIds()
+    return {
+      word: text.substring(start, end),
+      start: start,
+      end: end
     }
+  }
+
+  async fetchSuggestions(query) {
+    try {
+      const textarea = this.textareaTarget
+      const text = textarea.value
+      const isLowercaseAfterGenus = /^[a-z]/.test(query) && this.hasPrecedingCapitalizedWord(text, this.wordStart)
+
+      // If lowercase word after a capitalized word, search SPECIES first (likely typing species epithet)
+      if (isLowercaseAfterGenus) {
+        // Extract the previous genus name to filter species by that genus
+        const prevGenus = this.getPreviousWord(text, this.wordStart)
+
+        const speciesResponse = await fetch(
+          `${this.speciesUrlValue}?q=${encodeURIComponent(query)}&genus_name=${encodeURIComponent(prevGenus)}`,
+          { headers: { "Accept": "application/json" } }
+        )
 
-    removeToken(e) {
-        const id = e.target.dataset.id
-        const pill = this.listTarget.querySelector(`[data-token-id="${id}"]`)
-        const itemName = pill ? pill.textContent.trim().replace('×', '').trim() : 'this item'
+        if (speciesResponse.ok) {
+          const speciesData = await speciesResponse.json()
 
-        // Show confirmation dialog
-        if (!confirm(`Remove ${itemName}?`)) {
+          if (speciesData.length > 0) {
+            this.renderDropdown(speciesData)
             return
+          }
         }
 
-        // Remove via AJAX first, then update UI on success
-        this.deleteToken(id, () => {
-            // Success callback
-            this.selected.delete(id)
-            if(pill) pill.remove()
-            this.updateHiddenIds()
-        }, () => {
-            // Error callback - pill stays in place
+        // No species matches - try genus as fallback
+        const genusResponse = await fetch(`${this.genusUrlValue}?q=${encodeURIComponent(query)}`, {
+          headers: { "Accept": "application/json" }
         })
-    }
-
-    updateHiddenIds() {
-        if(this.hasHiddenIdsTarget) {
-            this.hiddenIdsTarget.value = Array.from(this.selected.keys()).join(",")
-        }
-    }
 
-    // AJAX save for genus, species, tree, or plant association
-    saveToken(id, label) {
-        const kind = this.kindValue
-        const mushroomId = this.mushroomIdValue
-        if(!kind || !mushroomId) return
-        let route, body
-        if(kind=="genera") {
-            route = `/genus_mushrooms.json`
-            body = JSON.stringify({genus_mushroom: {mushroom_id: mushroomId, genus_id: id}})
-        } else if (kind=="species") {
-            route = `/mushroom_species.json`
-            body = JSON.stringify({mushroom_species: {mushroom_id: mushroomId, species_id: id}})
-        } else if (kind=="trees") {
-            route = `/mushroom_trees.json`
-            body = JSON.stringify({mushroom_tree: {mushroom_id: mushroomId, tree_id: id}})
-        } else if (kind=="plants") {
-            route = `/mushroom_plants.json`
-            body = JSON.stringify({mushroom_plant: {mushroom_id: mushroomId, plant_id: id}})
+        if (genusResponse.ok) {
+          const genusData = await genusResponse.json()
+          if (genusData.length > 0) {
+            this.renderDropdown(genusData)
+          } else {
+            this.hideDropdown()
+          }
         } else {
-            return
+          this.hideDropdown()
         }
-        fetch(route, {
-            method: "POST",
-            headers: { "Content-Type": "application/json", "Accept": "application/json", "X-CSRF-Token": this.csrfToken() },
-            body: body
-        }).then(resp => {
-            if(!resp.ok) {
-                return resp.json().then(data => {
-                    throw new Error(data.errors ? data.errors.join(", ") : "Save failed")
-                })
-            }
-            // Optionally: visual feedback
-        }).catch(err => {
-            // Remove pill if failed
-            this.removePillById(id)
-            alert(err.message || "Failed to add. Please try again.")
+      } else {
+        // Uppercase word - search GENUS ONLY (no species fallback)
+        // This prevents words like "Still" from matching species names with substring matches
+        const genusResponse = await fetch(`${this.genusUrlValue}?q=${encodeURIComponent(query)}`, {
+          headers: { "Accept": "application/json" }
         })
-    }
 
-    deleteToken(id, onSuccess, onError) {
-        const kind = this.kindValue
-        const mushroomId = this.mushroomIdValue
-        if(!kind || !mushroomId) {
-            if(onError) onError()
-            return
-        }
-        let route
-        if(kind=="genera") {
-            route = `/genus_mushrooms/destroy_by_relation.json?mushroom_id=${mushroomId}&genus_id=${id}`
-        } else if (kind=="species") {
-            route = `/mushroom_species/destroy_by_relation.json?mushroom_id=${mushroomId}&species_id=${id}`
-        } else if (kind=="trees") {
-            route = `/mushroom_trees/destroy_by_relation.json?mushroom_id=${mushroomId}&tree_id=${id}`
-        } else if (kind=="plants") {
-            route = `/mushroom_plants/destroy_by_relation.json?mushroom_id=${mushroomId}&plant_id=${id}`
+        if (genusResponse.ok) {
+          const genusData = await genusResponse.json()
+
+          if (genusData.length > 0) {
+            this.renderDropdown(genusData)
+          } else {
+            this.hideDropdown()
+          }
         } else {
-            if(onError) onError()
-            return
+          this.hideDropdown()
         }
-        fetch(route, {
-            method: "DELETE",
-            headers: {"Accept": "application/json", "X-CSRF-Token": this.csrfToken()}
-        }).then(resp => {
-            if(!resp.ok) {
-                // Try to get the response text to see what's actually being returned
-                return resp.text().then(text => {
-                    console.error('Delete failed. Status:', resp.status, 'Response:', text)
-                    try {
-                        const data = JSON.parse(text)
-                        throw new Error(data.message || `Delete failed (${resp.status})`)
-                    } catch(e) {
-                        throw new Error(`Delete failed (${resp.status}): ${text.substring(0, 100)}`)
-                    }
-                })
-            }
-            return resp.json()
-        }).then(_data => {
-            // Success
-            console.log('Delete successful')
-            if(onSuccess) onSuccess()
-        }).catch(err => {
-            console.error('Delete error:', err)
-            alert(err.message || "Failed to remove. Please try again.")
-            if(onError) onError()
-        })
+      }
+    } catch (error) {
+      console.error("Autocomplete error:", error)
+      this.hideDropdown()
     }
+  }
+
+  renderDropdown(items) {
+    this.dropdownTarget.innerHTML = items
+      .map(item => `
+        <li class="px-4 py-3 hover:bg-blue-500 hover:text-white cursor-pointer border-b border-gray-200 last:border-b-0"
+            data-action="click->inline-autocomplete#selectItem"
+            data-name="${item.name}">
+          <strong class="text-base">${item.name}</strong>
+        </li>
+      `).join("")
+
+    this.dropdownTarget.classList.remove("hidden")
+  }
 
-    removePillById(id) {
-        const pill = this.listTarget.querySelector(`[data-token-id="${id}"]`)
-        if(pill) pill.remove()
-        this.selected.delete(id)
-        this.updateHiddenIds()
+  selectItem(event) {
+    event.preventDefault()
+    event.stopPropagation()
+
+    const selectedName = event.currentTarget.dataset.name
+    const textarea = this.textareaTarget
+    const text = textarea.value
+
+    // Check if we're replacing a species epithet (lowercase after genus)
+    // If so, we need to replace BOTH the genus and species words to avoid duplication
+    const isLowercaseWord = /^[a-z]/.test(this.currentWord)
+    const hasPrevGenus = this.hasPrecedingCapitalizedWord(text, this.wordStart)
+
+    let before, after, replaceStart
+    if (isLowercaseWord && hasPrevGenus) {
+      // Find start of previous genus word
+      const prevGenus = this.getPreviousWord(text, this.wordStart)
+      const genusStart = this.wordStart - prevGenus.length - 1 // -1 for space
+
+      replaceStart = genusStart
+      before = text.substring(0, genusStart)
+      after = text.substring(this.cursorPosition)
+    } else {
+      // Normal replacement - just replace current word
+      replaceStart = this.wordStart
+      before = text.substring(0, this.wordStart)
+      after = text.substring(this.cursorPosition)
+    }
+
+    // Apply <em> tags to complete binomials (contains space like "Ganoderma sessile")
+    // This follows scientific naming conventions: binomial names must be italicized
+    const isBinomial = selectedName.includes(' ')
+
+    let formattedName, cursorOffset
+    if (isBinomial) {
+      // Complete binomial - wrap in <em> tags per nomenclature standards
+      formattedName = `<em>${selectedName}</em>`
+      cursorOffset = selectedName.length + 9 // position AFTER closing </em> tag
+    } else {
+      // Genus only - no HTML tags, add trailing space
+      formattedName = selectedName + ' '
+      cursorOffset = selectedName.length + 1
     }
 
-    csrfToken() {
-        const meta = document.querySelector('meta[name=csrf-token]')
-        return meta && meta.content
+    textarea.value = before + formattedName + after
+
+    // Hide dropdown immediately
+    this.hideDropdown()
+
+    // Position cursor after the insertion
+    const newPosition = before.length + cursorOffset
+    textarea.setSelectionRange(newPosition, newPosition)
+    textarea.focus()
+
+    // Set flag to ignore the input event we're about to trigger
+    this.ignoreNextInput = true
+
+    // Trigger input event for character count update
+    textarea.dispatchEvent(new Event('input', { bubbles: true }))
+  }
+
+  hideDropdown() {
+    this.dropdownTarget.classList.add("hidden")
+    this.dropdownTarget.innerHTML = ""
+  }
+
+  onKeydown(event) {
+    // Handle keyboard navigation in dropdown
+    if (!this.dropdownTarget.classList.contains("hidden")) {
+      if (event.key === "Escape") {
+        this.hideDropdown()
+        event.preventDefault()
+      } else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        // TODO: Add arrow key navigation through dropdown items
+        event.preventDefault()
+      }
     }
+  }
 }

data/lib/generators/mycowriter/install/README

@@ -4,36 +4,36 @@ Mycowriter has been installed successfully!
 
 Next steps:
 
-1. Run database migrations if you haven't already:
-   rails db:migrate
+1. Restart your Rails server to load the new Stimulus controller
 
 2. Ensure you have the mb_lists table in your database with taxonomic data.
    The gem expects a table with at least these columns:
    - id
    - taxon_name
    - rank_name (optional, for filtering by taxonomic rank)
+   - name_status (optional, recommended: filters to 'Legitimate' names only)
 
-3. Import your controller in app/javascript/controllers/application.js:
+3. Use in your text fields (articles, descriptions, notes):
 
-   import MycowriterAutocomplete from "mycowriter/autocomplete_controller"
-   application.register("mycowriter--autocomplete", MycowriterAutocomplete)
+   <div data-controller="inline-autocomplete"
+        data-inline-autocomplete-genus-url-value="<%= mycowriter.genera_autocomplete_path %>"
+        data-inline-autocomplete-species-url-value="<%= mycowriter.species_autocomplete_path %>"
+        data-inline-autocomplete-min-value="4">
 
-4. Use the autocomplete in your views:
+     <%= f.text_area :body,
+         data: {
+           inline_autocomplete_target: "textarea",
+           action: "input->inline-autocomplete#onInput keydown->inline-autocomplete#onKeydown"
+         },
+         class: "form-textarea" %>
 
-   <div data-controller="mycowriter--autocomplete"
-        data-mycowriter--autocomplete-url-value="/mycowriter/autocomplete/genera"
-        data-mycowriter--autocomplete-kind-value="genera"
-        data-mycowriter--autocomplete-mushroom-id-value="<%= @mushroom.id %>">
-
-     <input type="text"
-            data-mycowriter--autocomplete-target="input"
-            placeholder="Type genus name..." />
-
-     <ul data-mycowriter--autocomplete-target="dropdown" class="hidden"></ul>
-     <div data-mycowriter--autocomplete-target="list"></div>
+     <div data-inline-autocomplete-target="dropdown" class="hidden"></div>
    </div>
 
-5. Configure Mycowriter in config/initializers/mycowriter.rb
+   When typing with a capital letter + 3 chars, genus suggestions appear.
+   Select a genus, then continue typing species for inline completion.
+
+4. Configure Mycowriter in config/initializers/mycowriter.rb
 
 For more information, visit https://mycowriter.com
 

data/lib/generators/mycowriter/install/install_generator.rb

@@ -11,6 +11,10 @@ module Mycowriter
         template "mycowriter.rb", "config/initializers/mycowriter.rb"
       end
 
+      def copy_javascript
+        template "autocomplete_controller.js", "app/javascript/controllers/inline_autocomplete_controller.js"
+      end
+
       def add_route
         route 'mount Mycowriter::Engine => "/mycowriter"'
       end

data/lib/mycowriter/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Mycowriter
-  VERSION = "0.1.7"
+  VERSION = "0.1.10"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: mycowriter
 version: !ruby/object:Gem::Version
-  version: 0.1.7
+  version: 0.1.10
 platform: ruby
 authors:
 - Will Johnston