# `PhiaUi.Components.Editor.LanguageTools`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/editor/language_tools.ex#L1)

Language Tools Suite — 4 components for grammar checking, spell check control,
and custom dictionary management within the PhiaUI rich text editor.

Provides sidebars and inline popovers for proofing workflows, enabling
writers to review grammar issues, accept or ignore suggestions, toggle
browser spell-checking, and maintain a personal word list.

## Components

- `grammar_panel/1`       — sidebar listing grammar issues grouped by severity
- `grammar_suggestion/1`  — inline popover with replacement suggestion
- `spell_check_toggle/1`  — compact toggle button for browser spellcheck
- `dictionary_panel/1`    — custom word dictionary with add/remove management

## Example

    <.grammar_panel id="grammar" issues={@grammar_issues} />

    <.grammar_suggestion
      id="suggestion-1"
      visible={@show_suggestion}
      message="Consider using active voice."
      suggestion="The team completed the project."
      severity={:warning}
    />

    <.spell_check_toggle id="spellcheck" enabled={@spellcheck_enabled} />

    <.dictionary_panel id="dictionary" words={@custom_words} />

# `dictionary_panel`

Renders a bordered panel for managing a custom word dictionary.

Provides an input form to add new words and a scrollable list of existing
words with individual remove buttons. The word list is capped at `max-h-48`
for consistent panel height.

Events emitted:
- `"dictionary:add"` on form submit (word value in the form field)
- `"dictionary:remove"` on remove button click (word in `phx-value-word`)

## Example

    <.dictionary_panel id="dict" words={["PhiaUI", "LiveView", "GenServer"]} />

## Attributes

* `id` (`:string`) (required) - Unique identifier for the dictionary panel.
* `words` (`:list`) - List of custom dictionary word strings. Defaults to `[]`.
* `class` (`:string`) - Additional CSS classes for the panel. Defaults to `nil`.
* Global attributes are accepted.

# `grammar_panel`

Renders a bordered sidebar panel listing grammar issues with severity icons,
messages, and optional suggestions.

When no issues are present, an empty state with a check icon is displayed.
Each issue row is clickable and emits a `"grammar:navigate"` event with the
issue's range encoded as JSON in `phx-value-range`.

## Example

    <.grammar_panel id="grammar" issues={[
      %{message: "Passive voice detected", severity: :warning, range: %{from: 10, to: 25}, suggestion: "Use active voice"},
      %{message: "Missing comma", severity: :error, range: %{from: 42, to: 43}, suggestion: nil}
    ]} />

## Attributes

* `id` (`:string`) (required) - Unique identifier for the grammar panel.
* `issues` (`:list`) - List of grammar issue maps. Each map should contain:
  - `:message` (string) — description of the issue
  - `:severity` (atom) — `:error`, `:warning`, or `:info`
  - `:range` (map) — position range for navigation (encoded as JSON on click)
  - `:suggestion` (string | nil) — optional replacement suggestion

  Defaults to `[]`.
* `class` (`:string`) - Additional CSS classes for the panel. Defaults to `nil`.
* Global attributes are accepted.

# `grammar_suggestion`

Renders an inline popover with a grammar replacement suggestion.

Displays a severity-colored accent bar at the top, the issue message,
the suggested replacement in a highlighted box, and two action buttons:
"Ignore" (ghost style) and "Accept" (primary style).

Emits `"grammar:accept"` or `"grammar:ignore"` events with the popover
`id` as `phx-value-id`.

The popover uses the `phia-bubble-menu-open` animation class for entrance.

## Example

    <.grammar_suggestion
      id="sug-1"
      visible={true}
      message="Consider rephrasing for clarity."
      suggestion="The results clearly show..."
      severity={:warning}
    />

## Attributes

* `id` (`:string`) (required) - Unique identifier for the suggestion popover.
* `visible` (`:boolean`) - Whether the popover is currently shown. Defaults to `false`.
* `message` (`:string`) - Description of the grammar issue. Defaults to `""`.
* `suggestion` (`:string`) - Suggested replacement text. Defaults to `""`.
* `severity` (`:atom`) - Severity level controlling the top accent bar color. Defaults to `:warning`. Must be one of `:error`, `:warning`, or `:info`.
* `class` (`:string`) - Additional CSS classes for the popover. Defaults to `nil`.
* Global attributes are accepted.

# `spell_check_toggle`

Renders a compact toggle button for enabling or disabling browser spellcheck.

Displays an "ABC" icon with a check underline when enabled. A small status
dot indicates the current state (green for enabled, muted for disabled).

Emits a `"spellcheck:toggle"` event with `phx-value-enabled` set to the
inverse of the current state.

## Example

    <.spell_check_toggle id="spellcheck" enabled={true} />
    <.spell_check_toggle id="spellcheck" enabled={false} />

## Attributes

* `id` (`:string`) (required) - Unique identifier for the toggle button.
* `enabled` (`:boolean`) - Whether spell check is currently enabled. Defaults to `true`.
* `class` (`:string`) - Additional CSS classes for the container. Defaults to `nil`.
* Global attributes are accepted.

---

*Consult [api-reference.md](api-reference.md) for complete listing*