sillsdev / sillsdev/languageforge-lexbox

platform.bible-extension: use EthnoLib for language-tag entry in Create Lexicon form

Open
#2,486 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

📙 Platform.Bible enhancement
Dominant language
C#
Stars
9
Forks
8
Avg merge
2d 13h
Merged PRs (30d)
49

Description

Problem

In the Create Lexicon form (platform.bible-extension/src/components/create-lexicon.tsx), the vernacular and analysis writing-system fields are plain text inputs — users must type a raw IETF/BCP-47 language tag (e.g. es-MX) from memory. Validity is only checked after the fact, via a regex fallback plus Intl.getCanonicalLocales (see isValidLangTag/BASIC_IETF_LANGUAGE_TAG_PATTERN, create-lexicon.tsx:11-27). This is error-prone for anyone who doesn't already know BCP-47 syntax by heart.

EthnoLib provides exactly this kind of language picker as a reusable, langtags.json-backed utility: fuzzy search by language name/autonym, with script/region disambiguation, producing a well-formed tag.

Proposal

  • Skip @ethnolib/language-chooser-react-mui (the only ready-made drop-in UI) — it hard-requires MUI 5 + Emotion and peer-depends on React ^17.0.2, while this repo/paranext-core is on React ^19.0.0. Pulling it in would also add a second UI system alongside the Tailwind/shadcn components (platform-bible-react) already used throughout the extension.
  • Instead use the headless pieces:
    • @ethnolib/find-language — fuzzy search + tag utilities (e.g. getShortestSufficientLangtag), no UI framework dependency.
    • @ethnolib/language-chooser-react-hook — React hook wrapping the above into search/select state; declares no hard React peer version, so it works under React 19.
  • Render results with platform-bible-react's existing Popover + Command primitives (already used elsewhere in this codebase) as a searchable combobox, rather than adopting MUI.
  • Add a new shared component, e.g. src/components/language-tag-picker.tsx, and use it for the vernacularWs/analysisWs fields in create-lexicon.tsx (the name/code fields are unaffected).
  • Keep a manual-entry fallback for tags outside the database (the hook supports this via customizableLanguageDetails), so the existing isValidLangTag/normalizeLangTag validation stays in place for that path rather than being deleted.

Scope

  • New deps: @ethnolib/find-language, @ethnolib/language-chooser-react-hook (MIT, no MUI/Emotion).
  • Touches only platform.bible-extension/src/components/create-lexicon.tsx plus the new picker component.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with platform.bible-extension/src/components/create-lexicon.tsx, especially the vernacularWs and analysisWs fields and existing language-tag validation, then inspect how platform.bible-react's Popover and Command primitives are used elsewhere. Add the shared language-tag picker with EthnoLib search and selection, retain manual entry for unsupported tags, and confirm both Create Lexicon fields produce valid tags.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, tailwindcss, typescript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
74/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.