Renders a toolbar with four action buttons for tracked changes:

1. Accept current change
2. Reject current change
3. Accept all changes
4. Reject all changes

All buttons are disabled when :has_changes is false.

Emits phx-click events: "track_change:accept_current", "track_change:reject_current", "track_change:accept_all", "track_change:reject_all" with the editor_id as value.

Example

<.accept_reject_controls
  id="ar-controls"
  editor_id="my-editor"
  has_changes={length(@tracked_changes) > 0}
/>

Attributes

• id (:string) (required)
• editor_id (:string) (required)
• has_changes (:boolean) - Defaults to false.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Renders a compact auto-save status indicator with a colored dot and label.

Statuses:

• :saved — green dot, "Saved" text
• :saving — amber animated dot, "Saving..." text
• :unsaved — gray dot, "Unsaved changes" text
• :error — red dot, "Save failed" text

When :last_saved is provided, it is displayed as secondary text for the :saved status.

Example

<.auto_save_indicator status={:saving} />
<.auto_save_indicator status={:saved} last_saved="2 min ago" />

Attributes

• status (:atom) - Defaults to :saved. Must be one of :saved, :saving, :unsaved, or :error.
• last_saved (:string) - Defaults to nil.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Renders an inline diff view showing the old text struck through in red and the new text highlighted in green.

Uses simple <del> and <ins> elements for semantic correctness and accessibility.

Example

<.change_diff_inline
  old_text="Hello World"
  new_text="Hello Elixir"
/>

Attributes

• old_text (:string) - Defaults to "".
• new_text (:string) - Defaults to "".
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Renders a modal dialog for managing document sharing permissions.

Each user in the :users list should be a map with:

• :name — display name
• :email — email address
• :role — current role atom (:owner, :editor, :commenter, :viewer)

The dialog includes a table of users with role dropdown selectors and a remove button per user.

Emits phx-click/phx-change events:

• "share:role_change" with phx-value-email and the selected role
• "share:remove" with phx-value-email
• "share:close" to dismiss the dialog

Example

<.share_permissions_dialog
  id="share-dialog"
  visible={@show_share_dialog}
  users={@shared_users}
/>

Attributes

• id (:string) (required)
• users (:list) - Defaults to [].
• visible (:boolean) - Defaults to false.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Renders an inline tracked change annotation.

Wraps content in <ins> (for inserts) or <del> (for deletes) with appropriate visual styling and optional author/timestamp metadata.

• Insert: green background, underline decoration
• Delete: red background, strikethrough decoration

Example

<.track_change_mark type={:insert} author="Alice" timestamp="2 min ago">
  added text
</.track_change_mark>

<.track_change_mark type={:delete} author="Bob">
  removed text
</.track_change_mark>

Attributes

• type (:atom) (required) - Must be one of :insert, or :delete.
• author (:string) - Defaults to nil.
• timestamp (:string) - Defaults to nil.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders a panel listing all tracked changes with accept/reject buttons per change.

Each change in the :changes list should be a map with:

• :type — :insert or :delete
• :text — the changed text content
• :author — author name (optional)
• :timestamp — human-readable timestamp (optional)

Example

<.track_change_panel
  id="changes-panel"
  changes={[
    %{type: :insert, text: "new text", author: "Alice", timestamp: "2 min ago"},
    %{type: :delete, text: "old text", author: "Bob", timestamp: "5 min ago"}
  ]}
/>

Attributes

• id (:string) (required)
• changes (:list) - Defaults to [].
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Renders a segmented control for switching between editing modes.

Modes:

• :editing — direct editing (no tracking)
• :suggesting — changes are tracked as suggestions
• :viewing — read-only view with visible tracked changes

Emits "track_change:mode" phx-click events with phx-value-mode.

Example

<.track_change_toggle id="edit-mode" mode={@edit_mode} />

Attributes

• id (:string) (required)
• mode (:atom) - Defaults to :editing. Must be one of :editing, :suggesting, or :viewing.
• class (:string) - Defaults to nil.
• Global attributes are accepted.