PhoenixKitComments.Web.CommentsComponent (PhoenixKitComments v0.2.8)

Copy Markdown View Source

Reusable LiveComponent for displaying and managing comments on any resource.

Usage

<.live_component
  module={PhoenixKitComments.Web.CommentsComponent}
  id={"comments-#{@post.uuid}"}
  resource_type="post"
  resource_uuid={@post.uuid}
  current_user={@current_user}
/>

Required Attrs

  • resource_type - String identifying the resource type (e.g., "post")
  • resource_uuid - UUID of the resource
  • current_user - Current authenticated user struct
  • id - Unique component ID

Optional Attrs

  • enabled - Whether comments are enabled (default: true)
  • show_likes - Show like/dislike buttons (default: true)
  • title - Section title (default: "Comments")
  • rich_text - Use the rich-text (Leaf) editor in the composer (default: the comments_rich_text setting, which defaults to true). Pass false to force the plain <textarea> — useful when the host hasn't registered Leaf's JS hook, since the Leaf editor otherwise hangs on its loading text with no server-side error. See the README's "JavaScript wiring" section.

Slots

  • :form_extras - Custom markup rendered inside the new-comment form. Use it to inject parent-project inputs whose names are metadata[<key>]; their values are merged into comment.metadata on submit. The "giphy" key is reserved for the built-in Giphy picker.

    <:form_extras>
  <input type="color" name="metadata[box_color]" value="#ff5555" />
</:form_extras>

Parent Notifications

After create/delete, sends to the parent LiveView:

{:comments_updated, %{resource_type: "post", resource_uuid: uuid, action: :created | :deleted}}

Summary

Functions

forward_leaf_event(arg1, socket)

Forward a Leaf content-changed message from a host LiveView's handle_info into the comments component. Routes only events whose editor_id starts with "pk-comments:"; returns :pass for unrelated editors so the caller can fall through to its own handler.

render(assigns)

Callback implementation for Phoenix.LiveComponent.render/1.

render_comment(assigns)

Functions

forward_leaf_event(arg1, socket)

Forward a Leaf content-changed message from a host LiveView's handle_info into the comments component. Routes only events whose editor_id starts with "pk-comments:"; returns :pass for unrelated editors so the caller can fall through to its own handler.

Example

def handle_info({:leaf_changed, _} = msg, socket) do
  PhoenixKitComments.Web.CommentsComponent.forward_leaf_event(msg, socket)
end

Returns {:noreply, socket} on a match (already wrapped, ready to return from handle_info), or :pass when the editor isn't ours.

render(assigns)

Callback implementation for Phoenix.LiveComponent.render/1.

render_comment(assigns)

Attributes

  • comment (:map) (required)
  • current_user (:map) (required)
  • myself (:any) (required)
  • component_id (:string) (required)
  • editing_uuid (:string) - Defaults to nil.
  • editing_content (:string) - Defaults to "".
  • comment_decorations (:map) - Defaults to %{}.
  • editing_decoration_uuid (:any) - Defaults to nil.
  • editing_decoration_value (:string) - Defaults to "".
  • show_likes (:boolean) - Defaults to true.
  • liked_comment_uuids (:any) (required)
  • disliked_comment_uuids (:any) (required)
  • reply_to (:string) - Defaults to nil.
  • ctx (:map) (required)