feat(tiptap): detect first body paragraph for spacing, handle empty nodes

app/controllers/administrateurs/attestation_template_v2s_controller.rb

@@ -4,7 +4,7 @@ module Administrateurs
 
     def show
       json_body = @attestation_template.json_body&.deep_symbolize_keys
-      @body = TiptapService.to_html(json_body, {})
+      @body = TiptapService.new.to_html(json_body, {})
 
       respond_to do |format|
         format.html do

app/services/tiptap_service.rb

@@ -1,76 +1,83 @@
 class TiptapService
-  class << self
-    def to_html(node, tags)
-      return '' if node.nil?
+  def to_html(node, tags)
+    return '' if node.nil?
 
-      children(node[:content], tags)
+    children(node[:content], tags, 0)
+  end
+
+  private
+
+  def initialize
+    @body_started = false
+  end
+
+  def children(content, tags, level)
+    content.map { node_to_html(_1, tags, level) }.join
+  end
+
+  def node_to_html(node, tags, level)
+    if level == 0 && !@body_started && node[:type] == 'paragraph' && node.key?(:content)
+      @body_started = true
+      body_start_mark = " class=\"body-start\""
     end
 
-    private
-
-    def children(content, tags)
-      content.map { node_to_html(_1, tags) }.join
-    end
-
-    def node_to_html(node, tags)
-      case node
-      in type: 'header', content:
-        "<header>#{children(content, tags)}</header>"
-      in type: 'footer', content:, **rest
-        "<footer#{text_align(rest[:attrs])}>#{children(content, tags)}</footer>"
-      in type: 'headerColumn', content:, **rest
-        "<div#{text_align(rest[:attrs])} class=\"column\">#{children(content, tags)}</div>"
-      in type: 'paragraph', content:, **rest
-        "<p#{text_align(rest[:attrs])}>#{children(content, tags)}</p>"
-      in type: 'title', content:, **rest
-        "<h1#{text_align(rest[:attrs])}>#{children(content, tags)}</h1>"
-      in type: 'heading', attrs: { level:, **attrs }, content:
-        "<h#{level}#{text_align(attrs)}>#{children(content, tags)}</h#{level}>"
-      in type: 'bulletList', content:
-        "<ul>#{children(content, tags)}</ul>"
-      in type: 'orderedList', content:
-        "<ol>#{children(content, tags)}</ol>"
-      in type: 'listItem', content:
-        "<li>#{children(content, tags)}</li>"
-      in type: 'text', text:, **rest
-        if rest[:marks].present?
-          apply_marks(text, rest[:marks])
-        else
-          text
-        end
-      in type: 'mention', attrs: { id: }, **rest
-        if rest[:marks].present?
-          apply_marks(tags[id], rest[:marks])
-        else
-          tags[id]
-        end
-      in { type: type } if ["paragraph", "title", "heading"].include?(type) && !node.key?(:content)
-        # noop
-      end
-    end
-
-    def text_align(attrs)
-      if attrs.present? && attrs[:textAlign].present?
-        " style=\"text-align: #{attrs[:textAlign]}\""
+    case node
+    in type: 'header', content:
+      "<header>#{children(content, tags, level + 1)}</header>"
+    in type: 'footer', content:, **rest
+      "<footer#{text_align(rest[:attrs])}>#{children(content, tags, level + 1)}</footer>"
+    in type: 'headerColumn', content:, **rest
+      "<div#{text_align(rest[:attrs])}>#{children(content, tags, level + 1)}</div>"
+    in type: 'paragraph', content:, **rest
+      "<p#{body_start_mark}#{text_align(rest[:attrs])}>#{children(content, tags, level + 1)}</p>"
+    in type: 'title', content:, **rest
+      "<h1#{text_align(rest[:attrs])}>#{children(content, tags, level + 1)}</h1>"
+    in type: 'heading', attrs: { level: hlevel, **attrs }, content:
+      "<h#{hlevel}#{text_align(attrs)}>#{children(content, tags, level + 1)}</h#{hlevel}>"
+    in type: 'bulletList', content:
+      "<ul>#{children(content, tags, level + 1)}</ul>"
+    in type: 'orderedList', content:
+      "<ol>#{children(content, tags, level + 1)}</ol>"
+    in type: 'listItem', content:
+      "<li>#{children(content, tags, level + 1)}</li>"
+    in type: 'text', text:, **rest
+      if rest[:marks].present?
+        apply_marks(text, rest[:marks])
       else
-        ""
+        text
       end
+    in type: 'mention', attrs: { id: }, **rest
+      if rest[:marks].present?
+        apply_marks(tags[id], rest[:marks])
+      else
+        tags[id]
+      end
+    in { type: type } if ["paragraph", "title", "heading"].include?(type) && !node.key?(:content)
+      # noop
     end
+  end
 
-    def apply_marks(text, marks)
-      marks.reduce(text) do |text, mark|
-        case mark
-        in type: 'bold'
-          "<strong>#{text}</strong>"
-        in type: 'italic'
-          "<em>#{text}</em>"
-        in type: 'underline'
-          "<u>#{text}</u>"
-        in type: 'strike'
-          "<s>#{text}</s>"
-        in type: 'highlight'
-          "<mark>#{text}</mark>"
-        end
+  def text_align(attrs)
+    if attrs.present? && attrs[:textAlign].present?
+      " style=\"text-align: #{attrs[:textAlign]}\""
+    else
+      ""
+    end
+  end
+
+  def apply_marks(text, marks)
+    marks.reduce(text) do |text, mark|
+      case mark
+      in type: 'bold'
+        "<strong>#{text}</strong>"
+      in type: 'italic'
+        "<em>#{text}</em>"
+      in type: 'underline'
+        "<u>#{text}</u>"
+      in type: 'strike'
+        "<s>#{text}</s>"
+      in type: 'highlight'
+        "<mark>#{text}</mark>"
       end
     end
   end

spec/services/tiptap_service_spec.rb

@@ -25,18 +25,28 @@ RSpec.describe TiptapService do
             type: 'title' # remained empty in editor
           },
           {
-            type: 'paragraph',
-            attrs: { textAlign: 'right' },
-            content: [
-              {
-                type: 'text',
-                text: 'Hello world!'
-              }
-            ]
+            type: 'heading',
+            attrs: { level: 1 },
+            content: [{ type: 'text', text: 'Heading 1' }]
           },
           {
-            type: 'paragraph'
-            # no content, empty line
+            type: 'heading',
+            attrs: { level: 2, textAlign: 'center' },
+            content: [{ type: 'text', text: 'Heading 2' }]
+          },
+          {
+            type: 'heading',
+            attrs: { level: 3 },
+            content: [{ type: 'text', text: 'Heading 3' }]
+          },
+          {
+            type: 'heading',
+            attrs: { level: 3 } # remained empty in editor
+          },
+          {
+            type: 'paragraph',
+            attrs: { textAlign: 'right' },
+            content: [{ type: 'text', text: 'First paragraph' }]
           },
           {
             type: 'paragraph',
@@ -63,23 +73,8 @@ RSpec.describe TiptapService do
             ]
           },
           {
-            type: 'heading',
-            attrs: { level: 1 },
-            content: [{ type: 'text', text: 'Heading 1' }]
-          },
-          {
-            type: 'heading',
-            attrs: { level: 2, textAlign: 'center' },
-            content: [{ type: 'text', text: 'Heading 2' }]
-          },
-          {
-            type: 'heading',
-            attrs: { level: 3 },
-            content: [{ type: 'text', text: 'Heading 3' }]
-          },
-          {
-            type: 'heading',
-            attrs: { level: 3 } # remained empty in editor
+            type: 'paragraph'
+            # no content, empty line
           },
           {
             type: 'bulletList',
@@ -157,13 +152,13 @@ RSpec.describe TiptapService do
     let(:tags) { { 'name' => 'Paul' } }
     let(:html) do
       [
-        '<header><div class="column">Left</div><div class="column">Right</div></header>',
+        '<header><div>Left</div><div>Right</div></header>',
         '<h1>Title</h1>',
-        '<p style="text-align: right">Hello world!</p>',
-        '<p><s><em>Bonjour </em></s><u><strong>Paul</strong></u> <mark>!</mark></p>',
         '<h1>Heading 1</h1>',
         '<h2 style="text-align: center">Heading 2</h2>',
         '<h3>Heading 3</h3>',
+        '<p class="body-start" style="text-align: right">First paragraph</p>',
+        '<p><s><em>Bonjour </em></s><u><strong>Paul</strong></u> <mark>!</mark></p>',
         '<ul><li><p>Item 1</p></li><li><p>Item 2</p></li></ul>',
         '<ol><li><p>Item 1</p></li><li><p>Item 2</p></li></ol>',
         '<footer>Footer</footer>'
@@ -171,7 +166,7 @@ RSpec.describe TiptapService do
     end
 
     it 'returns html' do
-      expect(described_class.to_html(json, tags)).to eq(html)
+      expect(described_class.new.to_html(json, tags)).to eq(html)
     end
   end
 end