Fix heading rendering when combined with alignment attributes (#98)

* Initial plan

* Implement heading with alignment support

Co-authored-by: nadar <3417221+nadar@users.noreply.github.com>

* Validate fix with comprehensive manual tests

Co-authored-by: nadar <3417221+nadar@users.noreply.github.com>

* Remove placeholder issue reference from test comment

Co-authored-by: nadar <3417221+nadar@users.noreply.github.com>

* Apply rector changes

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: nadar <3417221+nadar@users.noreply.github.com>
Co-authored-by: Copilot <Copilot@users.noreply.github.com>

Author: 3 people

composer.lock

@@ -26,7 +26,8 @@ class Align extends BlockListener
     public function process(Line $line)
     {
         $alignment = $line->getAttribute('align');
-        if ($alignment) {
+        // Skip if line has a header attribute - let Heading listener handle it
+        if ($alignment && !$line->getAttribute('header')) {
             $this->pick($line, ['alignment' => $alignment]);
             $line->setDone();
         }

src/listener/Align.php

@@ -21,14 +21,21 @@ class Heading extends BlockListener
      */
     public $levels = [1, 2, 3, 4, 5, 6];
 
+    /**
+     * @var array<string> Supported alignments.
+     * @since 3.3.0
+     */
+    public $alignments = ['center', 'right', 'justify', 'left'];
+
     /**
      * {@inheritDoc}
      */
     public function process(Line $line)
     {
         $heading = $line->getAttribute('header');
         if ($heading) {
-            $this->pick($line, ['heading' => $heading]);
+            $alignment = $line->getAttribute('align');
+            $this->pick($line, ['heading' => $heading, 'alignment' => $alignment]);
             $line->setDone();
         }
     }
@@ -45,8 +52,20 @@ public function render(Lexer $lexer)
                 // prevent html injection in case the attribute is user input
                 throw new Exception('An unknown heading level "' . $pick->optionValue('heading') . '" has been detected.');
             }
+
+            $alignment = $pick->optionValue('alignment');
+            if ($alignment && !in_array($alignment, $this->alignments)) {
+                // prevent html injection in case the attribute is user input
+                throw new Exception('An unknown alignment "' . $alignment . '" has been detected.');
+            }
         }
 
-        $this->wrapElement('<h{heading}>{__buffer__}</h{heading}>', ['heading']);
+        $this->wrapElement('<h{heading}{style}>{__buffer__}</h{heading}>', [
+            'heading',
+            'style' => static function ($value, $pick) {
+                $alignment = $pick->optionValue('alignment');
+                return $alignment ? ' style="text-align: ' . $alignment . ';"' : '';
+            }
+        ]);
     }
 }

src/listener/Heading.php

@@ -0,0 +1,36 @@
+<?php
+namespace nadar\quill\tests;
+
+/**
+ * Test heading with alignment attributes.
+ * 
+ * This test addresses the issue where headers with alignment attributes
+ * were being rendered as <p> tags instead of <h1>-<h6> tags.
+ */
+class HeadingAlignmentTest extends DeltaTestCase
+{
+    public $json = <<<'JSON'
+{
+  "ops": [
+    {
+      "attributes": {
+        "background": "transparent",
+        "color": "#000000"
+      },
+      "insert": "Header"
+    },
+    {
+      "attributes": {
+        "align": "center",
+        "header": 1
+      },
+      "insert": "\n"
+    }
+  ]
+}
+JSON;
+
+    public $html = <<<'EOT'
+<h1 style="text-align: center;"><span style="background-color:transparent"><span style="color:#000000">Header</span></span></h1>
+EOT;
+}

tests/HeadingAlignmentTest.php

@@ -0,0 +1,52 @@
+<?php
+namespace nadar\quill\tests;
+
+/**
+ * Test various heading levels with different alignment options.
+ */
+class HeadingAlignmentVariationsTest extends DeltaTestCase
+{
+    public $json = <<<'JSON'
+{
+  "ops": [
+    {
+      "insert": "Right H2"
+    },
+    {
+      "attributes": {
+        "align": "right",
+        "header": 2
+      },
+      "insert": "\n"
+    },
+    {
+      "attributes": {
+        "bold": true
+      },
+      "insert": "Justified H4"
+    },
+    {
+      "attributes": {
+        "align": "justify",
+        "header": 4
+      },
+      "insert": "\n"
+    },
+    {
+      "insert": "Left H3"
+    },
+    {
+      "attributes": {
+        "align": "left",
+        "header": 3
+      },
+      "insert": "\n"
+    }
+  ]
+}
+JSON;
+
+    public $html = <<<'EOT'
+<h2 style="text-align: right;">Right H2</h2><h4 style="text-align: justify;"><strong>Justified H4</strong></h4><h3 style="text-align: left;">Left H3</h3>
+EOT;
+}