Why are h1 id attributes added by my Rails TOC Generator not appearing in the browser?

A few months ago, I built a service to dynamically generate a Table of Contents (TOC) for my Rails 8 blog app using Action Text and the Trix editor. With some valuable pointers from @max and help from Monica, I implemented a TocGenerator service that:

1. Scans the content for h1 tags and extracts their text.
2. Generates a TOC as an unordered list linking to each h1 via an id attribute.
3. Modifies the original content by inserting an id into each h1 tag.

This works perfectly in the logs and in the database, where the h1 tags include the correct id attributes. However, when the content is rendered in the browser, these id attributes are missing. I’ve double-checked by using methods like to_s, to_trix_html, or to_html, and the modifications are present. Yet, the final rendered HTML in both Chrome and Firefox does not include the id attribute on the h1 tags.

Here’s an outline of the implementation:

Original Question:
Simple Table of Contents in Rails is not working as intended

For reference, below is the key code from my project:

Model:

RUBYCopied
      # before update or create run process_body
      before_save :process_body
      # Process the body content of a blog post by extracting the HTML content
      # from the rich text body, generating a table of contents from any headings,
      # and modifying the body content by adding ids to the headings so that they
      # can be linked to from the table of contents.
      # This process_body method is handled by the TocGenerator service.
      def process_body
        # Extract the HTML content from the rich text body
        body_content = content.to_s
    
        # Use the service to generate TOC and modify body content
        result = TocGenerator.new(body_content).generate
    
        self.toc = result[:toc]  # Update the TOC
        self.content = result[:body]  # Update the :content with modified body
      end

Controller:

RUBYCopied
  # POST /milk_admin/blogs
  #
  # Creates a new blog post using provided blog parameters.
  # Associates the blog post with the current milk admin.
  #
  # On success:
  # - Sets the image URL if an image is attached.
  # - Redirects to the blogs listing page with a success notice.
  # - Renders the blog as JSON with a 201 status code.
  #
  # On failure:
  # - Renders the new blog form with an unprocessable entity status.
  # - Renders the errors as JSON with an unprocessable entity status.

  def create
    @blog = Blog.new(blog_params)
    @blog.milk_admin_id = current_milk_admin.id

    respond_to do |format|
      if @blog.save
        # @blog.process_body  # Call process_body to ensure TOC and body are updated
        set_image_url(@blog)
        format.html { redirect_to milk_admin_blogs_path, notice: "Blog was successfully created." }
        format.json { render json: @blog }
      else
        format.html { render :new, status: :unprocessable_entity }
        format.json { render json: @blog.errors, status: :unprocessable_entity }
      end
    end
  end

  # PATCH/PUT /milk_admin/blogs/1
  #
  # Updates a blog using the given blog parameters.
  # Associates the blog post with the current milk admin.
  #
  # On success:
  # - Sets the image URL if an image is attached.
  # - Redirects to the blogs listing page with a success notice.
  # - Renders the blog as JSON with a 201 status code.
  #
  # On failure:
  # - Renders the new blog form with an unprocessable entity status.
  # - Renders the errors as JSON with an unprocessable entity status.
  def update
    @blog.milk_admin_id = current_milk_admin.id
    respond_to do |format|
      if @blog.update(blog_params)
        # @blog.process_body  # Call process_body to ensure TOC and body are updated
        set_image_url(@blog) if @blog.blog_image.attached?
        format.html { redirect_to milk_admin_blogs_path, notice: "Blog was successfully updated." }
        format.json { render :show, status: :created, location: @blog }
      else
        format.html { render :new, status: :unprocessable_entity }
        format.json { render json: @blog.errors, status: :unprocessable_entity }
      end
    end
  end

TocGenerator Service:

RUBYCopied
# Use the Nokogiri gem to generate the table of contents from the HTML content of the body (content)
# Using the default trix editor, using the Title button provides a h1 tag,
# search through the body content and generate the table of contents from the h1 tags content.
# Add the same id attribute to the h1 tags so that we can link to them from the table of contents.
class TocGenerator
  # Initialize a new TocGenerator with the given body string.
  #
  # @param [String] body the body content to generate the table of contents from.
  def initialize(body)
    @body = body
  end

  # Returns a hash with keys :toc and :body.
  #
  # The :toc key maps to a string containing a table of contents generated from
  # the headings in the body content.
  #
  # The :body key maps to the body content with the headings modified to have
  # ids matching the text of the headings, for linking from the table of
  # contents.
  def generate
    doc = Nokogiri::HTML::DocumentFragment.parse(@body)
    headings = doc.css("h1")

    return { toc: "", body: @body } if headings.empty?

    toc = generate_toc(headings)
    modified_body = modify_headings_with_ids(headings, doc)

    { toc: toc.html_safe, body: modified_body.html_safe }
  end

  private

  # Generates an HTML table of contents from the given headings.
  #
  # @param [Nokogiri::XML::NodeSet] headings a collection of h1 elements from
  #   which to generate the table of contents.
  # @return [String] an HTML string representing the table of contents, where
  #   each item links to the corresponding heading.

  def generate_toc(headings)
    toc = "<ul>"
    headings.each do |heading|
      id = heading.text.gsub(/\s+/, "-").downcase
      toc += "<li><a href='##{id}'>#{heading.text}</a></li>"
    end
    toc += "</ul>"
    toc
  end

  # Modifies the given headings by adding an id attribute to each one.
  #
  # The id is generated by downcasing the heading text and replacing any spaces
  # with hyphens. If the heading already has an id, we don't overwrite it.
  #
  # @param [Nokogiri::XML::NodeSet] headings a collection of h1 elements from
  #   which to generate the ids.
  # @param [Nokogiri::HTML::DocumentFragment] doc the document fragment in which
  #   the headings exist.
  # @return [String] the modified HTML document fragment as a string.
  def modify_headings_with_ids(headings, doc)
    headings.each do |heading|
      id = heading.text.gsub(/\s+/, "-").downcase
      heading["id"] = id unless heading["id"] # Only set id if it doesn't exist
    end
    doc.to_html
  end
end

Blog Show View:

ERBCopied
<section class="w-full text-base-dark bg-slate-200 py-4">
  <div class="max-w-4xl mx-auto">
    <div class="flex flex-col items-center bg-slate-50 rounded-md px-2">
      <!-- Blog Header -->
      <div class="border-b-4 border-base-dark w-full py-5">
        <%= link_to blogs_path do %>
          <h1 class="font-bold text-xl">
            MILK-00 Blog Articles
          </h1>
        <% end %>
        <p>
          Find me on <%= link_to "SubStack", "https://masonroberts.substack.com/", target: "_blank", class: "font-medium text-milk-dark underline" %>
        </p>
        <p>
          <i>Welcome to the ramblings of my learning journey.</i>
        </p>
      </div>
      <h1 class="font-bold text-xl md:text-2xl p-4">
        <%= @blog.title %>
      </h1>
      <% if @blog.blog_image.present? %>
        <%= image_tag @blog.blog_image, class: "rounded-md w-full object-cover" %>
      <% end %>
      <div class="flex justify-between w-full my-3">
        <div class="flex flex-col justify-between font-medium w-1-2 m-1 p-1">
          <span>Author: <%= @blog.milk_admin.email %></span>
          <span>Created: <%= @blog.created_at.to_date.inspect %></span>
        </div>
        <div class="flex justify-start w-1/2 font-medium m-1 p-1">
          <span class="bg-input-border rounded-full px-5">Category: <%= @blog.blog_category.title %></span>
        </div>
      </div>
      <div>
        <%= @blog.toc %>
      </div>
      <div class="max-w-4xl my-3 mx-1 px-1">
        <%= @blog.content %>
      </div>
    </div>
  </div>
</section>

The app uses Rails 8, Ruby 3.3.0, Tailwind, and PostgreSQL. Despite the service working and correctly modifying the content, the browser does not render the id attributes on the h1 tags. I’m currently at a loss for why this is happening—especially as the service and code appear sound. Any insights or potential causes (such as sanitization or JavaScript interference) would be greatly appreciated.

Max, if you’re out there, I could really use your superpower skills to help me track this down!