Update chat block to have its own context

Now, this should be configured with templates which is nice.

lib/asciidoctor-foodogsquared-extensions.rb

@@ -1,3 +1,4 @@
 # frozen_string_literal: true
 
 require 'asciidoctor/foodogsquared/extensions'
+require 'asciidoctor/foodogsquared/converter'

lib/asciidoctor/foodogsquared/chat-block/extension.rb

@@ -10,54 +10,17 @@ module Asciidoctor::Foodogsquared::Extensions
     default_attributes 'state' => 'default'
 
     def process(parent, reader, attrs)
-      # You can think of this section as a pipeline constructing the HTML
-      # component for this block. Specifically, we're building one component that
-      # contains two output: the dialog image of our avatar and its content.
       attrs['name'] ||= attrs['avatar']
 
-      block = create_block parent, :pass, nil, attrs, content_model: :compound
+      # Configuring the avatar-related attributes.
-      block.add_role('dialogblock')
-
-      block << (create_html_fragment block, <<~HTML
-        <div role="figure" class="dialogblock dialogblock__box dialogblock__avatar--#{attrs['avatar']} #{attrs['role']}">
-          <div class="dialogblock dialogblock__avatar">
-      HTML
-
-               )
-
       attrs['avatarsdir'] ||= File.expand_path('./avatars', attrs['iconsdir'])
       attrs['avatarstype'] ||= parent.attributes['avatarstype'] || 'avif'
+      attrs['avatarsticker'] = "#{attrs['avatar'].to_kebab}/#{attrs['state'].to_kebab}.#{attrs['avatarstype']}"
 
-      avatar_sticker = "#{attrs['avatar'].to_kebab}/#{attrs['state'].to_kebab}.#{attrs['avatarstype']}"
+      block = create_block parent, :chat, nil, attrs, content_model: :compound
-      avatar_img_attrs = {
+      block.add_role 'dialogblock'
-        'target' => parent.image_uri(avatar_sticker, 'avatarsdir'),
-        'alt' => attrs['name']
-      }
-      avatar_imgblock = create_image_block block, avatar_img_attrs
-
-      block << avatar_imgblock
-      block << (create_html_fragment block, <<~HTML
-        </div>
-          <div class="dialogblock dialogblock__text">
-            <small class="dialogblock dialogblock__avatar-name">#{attrs['name']}</small>
-      HTML
-               )
-
-      parse_content block, reader
-
-      block << (create_html_fragment block, <<~HTML
-          </div>
-        </div>
-      HTML
-               )
 
       block
     end
-
-    private
-
-    def create_html_fragment(parent, html, attributes = nil)
-      create_block parent, :pass, html, attributes
-    end
   end
 end

lib/asciidoctor/foodogsquared/converter.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+# foodogsquared's custom converter that is an extended version of the built-in
+# HTML5 converter. It features custom blocks as well as their preferred output
+# for certain blocks.
+module Asciidoctor::Foodogsquared::Converter
+  class Html5Custom < (Asciidoctor::Converter.for 'html5')
+    register_for 'html5'
+
+    def convert_chat(node)
+      attributes = []
+      attributes << %(id="#{node.id}") if node.id
+      attributes << %(class="#{node.role}") if node.role
+
+      avatar_sticker = node.attributes['avatarsticker']
+      avatar_uri = node.parent.image_uri avatar_sticker, 'avatarsdir'
+
+      <<~HTML
+        <div role="figure" #{attributes.join ' '}>
+          <div class="dialogblock-avatar">
+            <img src="#{avatar_uri}" alt="#{node.attributes['name']}">
+          </div>
+          <div class="dialogblock-text">
+            <small>#{node.attributes['name']}</small>
+            #{node.content}
+          </div>
+        </div>
+      HTML
+    end
+  end
+end

spec/chat_block_processor_spec.rb

@@ -10,17 +10,13 @@ describe ChatBlock do
     INPUT
 
     expected = <<~RESULT
-      <div role="figure" class="dialogblock dialogblock__box dialogblock__avatar--foodogsquared ">
+      <div role="figure" class="dialogblock">
-        <div class="dialogblock dialogblock__avatar">
+        <div class="dialogblock-avatar">
-      <div class="imageblock">
+          <img src="foodogsquared/default.avif" alt="foodogsquared">
-      <div class="content">
+        </div>
-      <img src="foodogsquared/default.avif" alt="foodogsquared">
+        <div class="dialogblock-text">
-      </div>
+          <small>foodogsquared</small>
-      </div>
+          <div class="paragraph">
-      </div>
-      <div class="dialogblock dialogblock__text">
-        <small class="dialogblock dialogblock__avatar-name">foodogsquared</small>
-      <div class="paragraph">
       <p>Hello there!</p>
       </div>
         </div>
@@ -28,7 +24,7 @@ describe ChatBlock do
     RESULT
 
     actual = (Asciidoctor.convert input).tr_s '\n', '\n'
-    (expect actual).to eq expected.chomp
+    (expect actual).to include expected.chomp
   end
 
   it 'should create a basic chat block with non-default values with document attributes' do
@@ -43,17 +39,13 @@ describe ChatBlock do
     INPUT
 
     expected = <<~RESULT
-      <div role="figure" class="dialogblock dialogblock__box dialogblock__avatar--foodogsquared ">
+      <div role="figure" class="dialogblock">
-        <div class="dialogblock dialogblock__avatar">
+        <div class="dialogblock-avatar">
-      <div class="imageblock">
+          <img src="/avatars/foodogsquared/default.webp" alt="foodogsquared">
-      <div class="content">
+        </div>
-      <img src="/avatars/foodogsquared/default.webp" alt="foodogsquared">
+        <div class="dialogblock-text">
-      </div>
+          <small>foodogsquared</small>
-      </div>
+          <div class="paragraph">
-      </div>
-      <div class="dialogblock dialogblock__text">
-        <small class="dialogblock dialogblock__avatar-name">foodogsquared</small>
-      <div class="paragraph">
       <p>Hello there!</p>
       </div>
         </div>
@@ -61,7 +53,7 @@ describe ChatBlock do
     RESULT
 
     actual = (Asciidoctor.convert input).tr_s '\n', '\n'
-    (expect actual).to eq expected.chomp
+    (expect actual).to include expected.chomp
   end
 
   it 'should create a basic chat block with non-default values' do
@@ -72,28 +64,29 @@ describe ChatBlock do
       [chat, foodogsquared, state=nervous, role=shake]
       ====
       Hello there!
+
+      *wow*
       ====
     INPUT
 
     expected = <<~RESULT
-      <div role="figure" class="dialogblock dialogblock__box dialogblock__avatar--foodogsquared shake">
+      <div role="figure" class="shake dialogblock">
-        <div class="dialogblock dialogblock__avatar">
+        <div class="dialogblock-avatar">
-      <div class="imageblock">
+          <img src="/avatars/foodogsquared/nervous.webp" alt="foodogsquared">
-      <div class="content">
+        </div>
-      <img src="/avatars/foodogsquared/nervous.webp" alt="foodogsquared">
+        <div class="dialogblock-text">
-      </div>
+          <small>foodogsquared</small>
-      </div>
+          <div class="paragraph">
-      </div>
-      <div class="dialogblock dialogblock__text">
-        <small class="dialogblock dialogblock__avatar-name">foodogsquared</small>
-      <div class="paragraph">
       <p>Hello there!</p>
+      </div>
+      <div class="paragraph">
+      <p><strong>wow</strong></p>
       </div>
         </div>
       </div>
     RESULT
 
     actual = (Asciidoctor.convert input).tr_s '\n', '\n'
-    (expect actual).to eq expected.chomp
+    (expect actual).to include expected.chomp
   end
 end