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

Editor References Suite — 8 components for footnotes, citations, bookmarks,
cross-references, bibliographies, and abbreviations.

Provides all the building blocks for academic and technical writing reference
management within the PhiaUI rich text editor.

## Components

### Inline References
- `footnote/1`          — superscript footnote link with note text
- `endnote/1`           — superscript endnote link for end-of-document references
- `bookmark_anchor/1`   — invisible anchor `<span>` for in-document linking
- `cross_reference/1`   — `<a>` link to a bookmark or heading within the document
- `citation_mark/1`     — inline "(Author, Year)" citation link
- `abbreviation_mark/1` — `<abbr>` with dotted underline and tooltip

### Block References
- `bibliography/1`      — ordered list of formatted references (APA, MLA, Chicago, etc.)
- `citation_dialog/1`   — form dialog for inserting/editing a citation entry

# `abbreviation_mark`

Renders an `<abbr>` element with a dotted underline and tooltip showing the
full term.

## Example

    <.abbreviation_mark short="HTML" full="HyperText Markup Language" />

## Attributes

* `short` (`:string`) (required)
* `full` (`:string`) (required)
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `bibliography`

Renders an ordered list of formatted bibliography entries.

Each entry is a map with keys: `:author`, `:title`, `:year`, `:source`, `:url`,
`:volume`, `:pages`, and `:key`. Formatting follows the selected citation style.

## Example

    <.bibliography
      id="refs"
      style={:apa}
      entries={[
        %{key: "smith2024", author: "Smith, J.", title: "Example", year: "2024", source: "Nature"}
      ]}
    />

## Attributes

* `id` (`:string`) (required)
* `entries` (`:list`) - Defaults to `[]`.
* `style` (`:atom`) - Defaults to `:apa`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `bookmark_anchor`

Renders an invisible anchor `<span>` for in-document bookmarking.

Other components (like `cross_reference/1`) can link to this anchor via
its `id`. The element is visually hidden but present in the DOM.

## Example

    <.bookmark_anchor id="section-intro" name="Introduction" />

## Attributes

* `id` (`:string`) (required)
* `name` (`:string`) (required)
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `citation_dialog`

Renders a form dialog for inserting or editing a citation entry.

Contains fields for author, title, year, source, URL, volume, and pages.
Hidden when `visible` is false.

## Example

    <.citation_dialog id="cite-dialog" visible={@show_citation_form} citation={@editing_citation} />

## Attributes

* `id` (`:string`) (required)
* `visible` (`:boolean`) - Defaults to `false`.
* `citation` (`:map`) - Defaults to `%{}`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `citation_mark`

Renders an inline "(Author, Year)" citation link.

Links to the corresponding bibliography entry via `#bib-{key}`.

## Example

    <.citation_mark id="cite-1" key="smith2024" author="Smith" year="2024" />

## Attributes

* `id` (`:string`) (required)
* `key` (`:string`) (required)
* `author` (`:string`) - Defaults to `""`.
* `year` (`:string`) - Defaults to `""`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `cross_reference`

Renders an `<a>` link that points to a bookmark or heading within the document.

When no label is provided, the target ID is displayed.

## Example

    <.cross_reference target="section-intro" label="see Introduction" />

## Attributes

* `target` (`:string`) (required)
* `label` (`:string`) - Defaults to `nil`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `endnote`

Renders an inline superscript endnote marker for end-of-document references.

Visually identical to `footnote/1`, but uses `endnote-` ID prefixes and
`doc-endnote` ARIA roles to distinguish semantically.

## Example

    <.endnote number={3} text="Full data available in Appendix B." />

## Attributes

* `number` (`:integer`) (required)
* `text` (`:string`) - Defaults to `""`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `footnote`

Renders an inline superscript footnote marker with associated note text.

The superscript number links to the footnote, and the text is rendered
as a `<small>` block below.

## Example

    <.footnote number={1} text="See the original paper for details." />

## Attributes

* `number` (`:integer`) (required)
* `text` (`:string`) - Defaults to `""`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

---

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