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

Text Direction Suite — 2 components for bidirectional (BiDi) text support
in the PhiaUI rich text editor.

Provides LTR/RTL/Auto toggling and explicit directional block wrappers,
enabling proper bidirectional content editing for mixed-language documents.

## Components

- `text_direction_toggle/1` — segmented button group for LTR / RTL / Auto direction
- `bidi_text_block/1`       — block wrapper with explicit `dir` attribute for directional content

## Example

    <.text_direction_toggle id="dir-toggle" value={@text_direction} />

    <.bidi_text_block id="rtl-para" direction={:rtl}>
      <p>Arabic or Hebrew text here</p>
    </.bidi_text_block>

# `bidi_text_block`

Renders a block-level wrapper with an explicit HTML `dir` attribute for
bidirectional text support.

Sets the appropriate `dir` attribute (`"ltr"`, `"rtl"`, or `"auto"`) on the
container `<div>`. When `:rtl` is active, the block receives `text-right`
alignment. When `:auto`, the browser uses `unicode-bidi: plaintext` to infer
direction from content.

## Example

    <.bidi_text_block id="arabic-block" direction={:rtl}>
      <p>Some right-to-left content here.</p>
    </.bidi_text_block>

    <.bidi_text_block id="mixed-block" direction={:auto}>
      <p>Content where direction is auto-detected.</p>
    </.bidi_text_block>

## Attributes

* `id` (`:string`) (required) - Unique identifier for the block.
* `direction` (`:atom`) - Explicit text direction for the block content. Defaults to `:auto`. Must be one of `:ltr`, `:rtl`, or `:auto`.
* `class` (`:string`) - Additional CSS classes for the container. Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required) - Block content that should follow the specified direction.

# `text_direction_toggle`

Renders a segmented button group for switching between LTR, RTL, and Auto
text directions.

The active button is highlighted with primary styling. Each button emits a
`"text-direction:change"` event with a `direction` value.

Uses `role="radiogroup"` with individual `role="radio"` buttons and proper
`aria-checked` state for screen reader accessibility.

## Example

    <.text_direction_toggle id="dir-toggle" value={:ltr} />
    <.text_direction_toggle id="dir-toggle" value={:rtl} />

## Attributes

* `id` (`:string`) (required) - Unique identifier for the toggle group.
* `value` (`:atom`) - Currently active direction. Defaults to `:ltr`. Must be one of `:ltr`, `:rtl`, or `:auto`.
* `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*